Tips and Tricks for C# Metro developers: Handling the virtual keyboard - Eternal Coding - HTML5 / JavaScript / 3D development - Site Home - MSDN Blogs

Tips and Tricks for C# Metro developers: Handling the virtual keyboard


 

Tips and Tricks for C# Metro developers: Handling the virtual keyboard

  • Comments 2

As we saw in a previous post (http://blogs.msdn.com/b/eternalcoding/archive/2012/07/03/tips-and-tricks-for-c-metro-developers-the-flyout-control.aspx) it is really easy to create a flyout control.

But if this control is used to type text, you must consider handling the virtual keyboard in order to move your flyout so that it can always be visible:

image

To do so, it is pretty easy because WinRT has an event for that:

Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing 

So to always keep your flyout on top off its control, just use the following code:

// Handling the virtual keyboard
int flyoutOffset = 0;
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing += (s, args) =>
    {
        flyoutOffset = (int)args.OccludedRect.Height;
        flyout.VerticalOffset -= flyoutOffset;
    };
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding += (s, args) =>
    {
        flyout.VerticalOffset += flyoutOffset;
    };

So the complete flyout code is as follows:

public static Popup ShowPopup(FrameworkElement source, UserControl control)
{
    Popup flyout = new Popup();

    var windowBounds = Window.Current.Bounds;
    var rootVisual = Window.Current.Content;

    GeneralTransform gt = source.TransformToVisual(rootVisual);

    var absolutePosition = gt.TransformPoint(new Point(0, 0));

    control.Measure(new Size(Double.PositiveInfinity, double.PositiveInfinity));

    flyout.VerticalOffset = windowBounds.Height - control.Height - 120;
    flyout.HorizontalOffset = (absolutePosition.X + source.ActualWidth / 2) - control.Width / 2;
    flyout.IsLightDismissEnabled = true;

    flyout.Child = control;
    var transitions = new TransitionCollection();
    transitions.Add(new PopupThemeTransition() { FromHorizontalOffset = 0, FromVerticalOffset = 100 });
    flyout.ChildTransitions = transitions;
    flyout.IsOpen = true;

    // Handling the virtual keyboard
    int flyoutOffset = 0;
    Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing += (s, args) =>
        {
            flyoutOffset = (int)args.OccludedRect.Height;
            flyout.VerticalOffset -= flyoutOffset;
        };
    Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding += (s, args) =>
        {
            flyout.VerticalOffset += flyoutOffset;
        };

    return flyout;
}
Leave a Comment
  • Please add 2 and 2 and type the answer here:
  • Post
  • in the Hiding +=... you didn't set flyoutOffset to args.OccludedRect... or does it retain it from the Showing event?

  • The onscreen keyboard in Modern apps is a mess.  This sample code really shows the complexity in something as simple as ensuring that a visual element is visible while the keyboard is open.  This should be a one line API call in the WinRT, not this mess of code.  The problem gets harder when appbars are involved.  I hope Microsoft fixes it and learns to build humane APIs.  

Page 1 of 1 (2 items)