How to determine the keyboard offset

问题:

I had this issue yesterday and it seems a lot of people have had similar issues in the past, so I figured I would pose my question & the solution I ended up coming up with. Microsoft has cleaner solutions to this in the 8.1 SDK, but the vast majority of WP app users are on 8.0 and below, so I imagine this will still be helpful.

When you open the virtual keyboard in a Windows Phone 7/8 Silverlight app, and the text box that caused the keyboard to open is on the lower half of the screen (that would be covered by the keyboard), it scrolls the entire page up. How can you determine how much it has scrolled, in case there was content at the top that you need displayed?

回答1:

It's a little clunky, but you can get the amount the page was scrolled up by looking at the offset of the root frame.

Since this is animated into position, the question becomes "when". What I found that works is, when a text box's GotFocused event is fired, subscribe to the LayoutUpdated event, and when LayoutUpdated is fired, grab the offset from there. If you weren't already subscribed to that event, you can unsubscribe in the LostFocus event. That way as it moves, you'll get the change.

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's 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 you have this offset, you can alter your controls as needed. You can either shrink the height of a control by that amount, or if you have something small at the top, like a header, you can apply a TranslateTransform by the inverse of the offset to just move it downward.