I have a page with a textbox at the bottom, tap on it and the keyboard shows up. Everything is fine until I add application bar to the page: an annoying gap between keyboard and the text box came out of nowhere. Could someone tell me how to get rid of that? Thanks a lot.

Try to set the rootframe transform when the textbox got focus.
and reset the renderTransform when the textbox lost focus.
The value of TranslateY is the height of the keyboard.
Seems like a system bug.