How to determine keyboard offset

Question

I had this question yesterday, and it seems that many people had similar problems in the past, so I thought that I would pose my question and the solution that I came up with in the end. Microsoft has cleaner solutions for this in the SDK 8.1, but the vast majority of users of WP applications are at 8.0 and below, so I think it will be useful anyway.

When you open the virtual keyboard in Windows Phone 7/8 Silverlight, and the text field that opens the keyboard is in the bottom half of the screen (which will be covered by the keyboard), it scrolls the whole page up. How can you determine how much it scrolls if there is content at the top of the page that you need to display?

Answer 1

This is a bit inconvenient, but you can get the amount the page was scrolled by looking at the offset of the root frame.

Since this is animated into position, the question becomes "when." What I found works when an event with a GotFocused text field is fired, subscribes to the LayoutUpdated event, and when LayoutUpdated is fired, take the offset from there. If you have not subscribed to this event, you can unsubscribe from the LostFocus event. Thus, when you move, you will get changes.

double lastOffset = 0; private void TextBox_GotFocus(object sender, RoutedEventArgs e) { LayoutUpdated += MyControl_LayoutUpdated; } private void MyControl_LayoutUpdated(object sender, EventArgs e) { // Grab the offset out of the root frame RenderTransform object PhoneApplicationFrame root = App.Current.RootVisual as PhoneApplicationFrame; TransformGroup transform = root.RenderTransform as TransformGroup; double offset = transform.Value.OffsetY; if (offset != lastOffset) { // Do your logic here if the offset has changed lastOffset = offset; } } private void TextBox_LostFocus(object sender, RoutedEventArgs e) { // Unsubcribe to updates and reset the offset to 0 LayoutUpdated -= MyControl_LayoutUpdated; lastOffset = 0; } 

After this offset, you can change your controls as needed. You can either reduce the height of the control by this amount, or if you have something small on top, such as a heading, you can apply TranslateTransform by reverse biasing to just push it down.