Windows Phone XAML: How to prevent page from scrolling when keyboard slides in

Question

I would like to create a Windows Phone 8.1 Silverlight/XAML UI containing a searchbox similar to the one used in Cortana. The textbox should be on the bottom of the page and scroll up with the keyboard, once it gets the focus. The rest of my page should not move at all. The Cortana UI does exactly that, but I haven't been able to recreate that behavior in my app. I have found solutions which require to manually resize my UI Containers when the textbox gets the focus, but that requires to estimate the keyboard size, which can change with different screen resolutions and also produces a short animation before the content is back in place. So how is it possible to prevent my pages content from scrolling up, when the keyboard slides in?

Answer 1

There isn't a really great way to do this. Cortana is system UI and over any existing app space. For your app, it is assumed that any UI in your app is a part of the whole app. For input where the software keyboard shows, the app content is scrolled into view to ensure context is not lost. This is the default behavior you cannot really change.

You do have access to when the keyboard area is showing/hiding (Windows.UI.ViewManagement.InputPane.InputPaneShowing[Hiding]) and can know what the occluded rectangle will be. Using this event you may be able to do some things there, however as long as your UI is a part of the main visual tree, your app will still scroll.

One thing you can try is to put that text area in a popup layer that is not a part of your main app UI (meaning it is unparented to any visual tree). Unparented popups do not participate in the main UI scrolling behavior. If you did this, along with listening for when the input pane is showing/hiding you may be able to achieve what you want.

Answer 2

There isn't a super clean way to do this, but there are workarounds that still work in Silverlight as well. When the keyboard opens, it will animate a TranslateTransform on the RootApplicationFrame. So when you get focus on an element, subscribe to LayoutUpdates for the page, and check the transform values.

See details / code here: How to determine the keyboard offset