locked
Typing in TextBox in Settings Flyout doesn't slide the Settings Page upwards RRS feed

  • Question

  • Hi

    I have implemented the Settings Page as in Windows 8 Sample "App settings sample" as Settings Flyout.

    When the Settings Flyout contains input TextBox that is at the bottom of Settings Page, then the on-screen Keyborad appears and overlaps the input TextBox. 

    The user doesn't see what he/she is typing.

    I expect that it should slide the Settings Page upwards as it does the current Frame. What should i change?

    The on-screen keyboard overlaps the Settings Page and the TextBox is not visible:

    peter

    Thursday, October 17, 2013 8:34 AM

Answers

  • This happens because the SettingFlyout's Popup is not in the visual tree. You'll see that the mainpage scrolls up but the flyout not. Here's how to solve this:

    1. Make sure that the root of the mainpage is a Canvas instead of a Grid:

    <Canvas x:Name="MainLayoutRoot"
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    2. When you open the flyout, hook its popup to that canvas (i.e. add the popup to the children of the canvas):

    // Place the SettingsFlyout inside our Popup window.
    settingsPopup.Child = mypane;
    
    //
    // >>> New line of code in SettingsFlyoutScenario.xaml.cs <<<
    //
    (rootPage.Content as Canvas).Children.Add(settingsPopup);
                
    // Or in a more generic way:
    //(((Window.Current.Content as Frame).Content as LayoutAwarePage).Content as Canvas).Children.Add(settingsPopup);
    
    // Let's define the location of our Popup.
    settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (windowBounds.Width - settingsWidth) : 0);
    settingsPopup.SetValue(Canvas.TopProperty, 0);
    settingsPopup.IsOpen = true;

    • Marked as answer by this_peter Thursday, October 17, 2013 10:47 AM
    Thursday, October 17, 2013 10:11 AM

All replies

  • This happens because the SettingFlyout's Popup is not in the visual tree. You'll see that the mainpage scrolls up but the flyout not. Here's how to solve this:

    1. Make sure that the root of the mainpage is a Canvas instead of a Grid:

    <Canvas x:Name="MainLayoutRoot"
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    2. When you open the flyout, hook its popup to that canvas (i.e. add the popup to the children of the canvas):

    // Place the SettingsFlyout inside our Popup window.
    settingsPopup.Child = mypane;
    
    //
    // >>> New line of code in SettingsFlyoutScenario.xaml.cs <<<
    //
    (rootPage.Content as Canvas).Children.Add(settingsPopup);
                
    // Or in a more generic way:
    //(((Window.Current.Content as Frame).Content as LayoutAwarePage).Content as Canvas).Children.Add(settingsPopup);
    
    // Let's define the location of our Popup.
    settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (windowBounds.Width - settingsWidth) : 0);
    settingsPopup.SetValue(Canvas.TopProperty, 0);
    settingsPopup.IsOpen = true;

    • Marked as answer by this_peter Thursday, October 17, 2013 10:47 AM
    Thursday, October 17, 2013 10:11 AM
  • Thank you

    I just added Canvas as a Grid Child and it works

    Thursday, October 17, 2013 10:47 AM