Manually interaction of the input controls position using Touch Keyboard

Let me start a series of articles connected with issues we have faced working with the WinRT platform.

The latest issue I come across is related with the touch keyboard when the input controls are positioned in a Selector based class control. Imagine our XamGrid in edit mode – when we touch some input control to edit its content, we would like the touch keyboard to display and move the components behind it upward, so the editing input becomes visible and when the keyboard hides, the content to be moved back as it was. All this happens by default when the grid is in any other control except a Selector based one – ListBox, FlipView etc. Our WinRT samples browser uses flip view to display the control’s samples, so we are forced to manually control the content movement when invoking the touch keyboard. Here this sample gives а solution. All you should do is get the InputPaneHelper.cs class and simulate what’s done in KeyboardPage.xaml.cs file for your specific case. In our samples browser we add the showing event to the flip view control and access the focused element to calculate the correct displacement of the content as demonstrated in the code below. All other calculations are the same as in the sample.

inputPaneHelper = new InputPaneHelper();

inputPaneHelper.SubscribeToKeyboard(true);

inputPaneHelper.AddShowingHandler(flipView, new InputPaneShowingHandler(CustomKeyboardHandler));

inputPaneHelper.SetHidingHandler(new InputPaneHidingHandler(InputPaneHiding));

.....

private void CustomKeyboardHandler(object sender, InputPaneVisibilityEventArgs e)

{

    object focusedElobj = FocusManager.GetFocusedElement(); Debug.WriteLine(focusedElobj);

    UIElement focusedEl = focusedElobj as UIElement;

    double dis = 0;

    if (focusedEl != null)

    {

        dis = focusedEl.DesiredSize.Height + focusedEl.TransformToVisual(LayoutGrid).GetMatrix().OffsetY;

    }

    if (dis > e.OccludedRect.Height)

    {

        displacement = dis != 0 ? e.OccludedRect.Height - dis : -e.OccludedRect.Height;               

        e.EnsuredFocusedElementInView = true;

        ShowingMoveSpline.Value = displacement;

        MoveMiddleOnShowing.Begin();

    }

}

 So, have in mind that when you have an input control in a selector class, you should manually control the displacement of the elements using a touch keyboard.