Improvements to the flyout positioning with the keyboard displayed

[stefanolson]

I was having a bit of a problem, after the touch keyboard was displayed, with my fly out appearing above the top of the screen, thus I was no longer able to type into it because I couldn't see what I was entering.

So I have made some changes that take a look at the overall rectangle where the item is displayed and make sure that if it's not completely displayed then it moves but I also ensure that the top never moves above the top of the screen.

This is not a perfect implementation, because if you've got a fly out that has, say an ok button, that could end up not being displayed, so I better system would be to somehow give the child of a fly out the option as to what is critical to be displayed. In the case of all of my fly outs the whole fly out should be displayed, but there are scenarios where that may not be the best option

private void OnInputPaneShowing(Windows.UI.ViewManagement.InputPane sender, Windows.UI.ViewManagement.InputPaneVisibilityEventArgs args)
{
    FrameworkElement focusedItem = FocusManager.GetFocusedElement() as FrameworkElement;

    if (focusedItem != null)
    {
        GeneralTransform gt = focusedItem.TransformToVisual(Window.Current.Content);
        Rect focusedRect = gt.TransformBounds(new Rect(0.0, 0.0, focusedItem.ActualWidth, focusedItem.ActualHeight));

        if (focusedRect.Bottom > _windowBounds.Height-args.OccludedRect.Top)
        {
            _ihmFocusMoved = true;
            _ihmOccludeHeight = focusedRect.Top< (int)args.OccludedRect.Top ? focusedRect.Top : args.OccludedRect.Top;
            _hostPopup.VerticalOffset -= _ihmOccludeHeight;
        }
    }  
}

Stefan

[timheuer]

This isn't how the OS behaves though and would create inconsistency across apps, decreasing user confidence that things work the same way.

The item that needs input focus with the keyboard will cause it to scroll into view. If that isn't happening, then that is a bug. However forcing the entire flyout into view isn't a universal thing to do. The w/h of flyouts can cause an issue here and isn't reliable.

[stefanolson]

Yup, the reason that I had to look at this was because my textbox was getting pushed out of the top of the window so you couldn't see most of the text box. This is because the text box was partially displayed above and partially displayed below the touch keyboard, and the existing code just scrolled it up by the height of the touch keyboard which meant that half of my text box was not displayed and half was.

I'm hoping the way that I've done it will be consistent with the UI, I haven't yet looked at making the whole flyout visible. But from a customer experience perspective it's somewhat less useful if you can't see the Ok button to press it, even if that is the standard for other applications.

Stefan

[timheuer]

What is the XAML that exhibits the behavior of the text box partially showing.

[stefanolson]

Tim,

have emailed you the XAML code and some images demonstrating the problem