Why is my text box contained in a FlipView obscured by the soft keyboard when it pops up?

Question

Please consider the following XAML:

<Page x:Class="InputControlsInScrollViewer.WindowsStoreApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:l="using:InputControlsInScrollViewer.WindowsStoreApp"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="FlipViewItemStyle" TargetType="FlipViewItem">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="TabNavigation" Value="Local" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="FlipViewItem">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}">
                            <ScrollViewer IsTabStop="True"
                                          ZoomMode="Disabled"
                                          VerticalScrollMode="Enabled"
                                          HorizontalScrollMode="Disabled"
                                          HorizontalScrollBarVisibility="Disabled"
                                          VerticalScrollBarVisibility="Auto"
                                          IsVerticalRailEnabled="True">
                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                  Content="{TemplateBinding Content}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Page.DataContext>
        <l:MainPageViewModel />
    </Page.DataContext>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <FlipView Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                  ItemsSource="{Binding Views}" ItemContainerStyle="{StaticResource FlipViewItemStyle}" />

    </Grid>
</Page>

In it, I have a FlipView which operates in horizontal mode. The content I want to display in the FlipView is too large - that's why I added a ScrollViewer to the FlipViewItem template so that the user can scroll vertically (please note that the FlipView template uses a horizontal ScrollViewer internally).

The content that is displayed by the FlipView contains input controls like text boxes and obviously, the soft keyboard is shown when the user taps the text box (so that it gets focused).

Here is my actual question: why is the text box not translated into the remaining view port that is not obscured by the soft keyboard (see images)

Obviously, this has to do something with the FlipView because when I display my Example View only in a ScrollViewer (or even with no ScrollViewer at all), then the text box is translated correctly when the soft keyboard pops up.

I have already tried the following steps:

1. I tried to enable vertical scrolling on the ScrollViewer that is in the FlipView's template - this doesn't work because FlipView seems to overwrite the corresponding values in OnApplyTemplate (or something) - the VerticalScrollMode is disabled when Orientation on the FlipView' VirtualizingStackPanel is set to Horizontal.
2. As mentioned above, I tried to display the exact same view just within a ScrollViewer (which worked fine) or even without a ScrollViewer (which also worked fine).
3. I also check ScrollViewer.BringIntoViewOnFocusChanged but this doesn't change anything (and besides, this property has its default value set to true).

Is there any way that I can circumvent this problem? Thank you so much for your help in advance!

Answer 1

I found the component that's causing the issue: it is the VirtualizingStackPanel that is used as the items host in the FlipView. If you exchange it with a normal StackPanel, then the input controls are translated to the remaining view port as expected when the soft keyboard pops up.

You can exchange the VirtualizingStackPanel using the following methods:

Just set the ItemsPanel property on the FlipView directly like this:

<FlipView>
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" AreScrollSnapPointsRegular="True" />
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
</FlipView>

If you have several FlipViews, sharing a style between them is more appropriate:

<Style x:Key="MyFlipViewStyle" TargetType="FlipView">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" AreScrollSnapPointsRegular="True" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Please note that you will lose UI Virtualization in this case, which usually means that it takes longer to load the FlipView control, especially if you dislay a large amount of items in it.

Update: I wrote a blog article about this problem - read more on http://www.feo2x.com/posts/2015-12-06-flipview-and-problems-with-input-controls-part-1/

Answer 2

I'm not sure offhand why the TextBoxes aren't translating up, but you can work around the problem by handling the InputPane yourself.

Subscribe to the InputPane.Showing and Hiding events. When they fire animate the FlipView's RenderTransform to translate up out of the way of the InputPane's OccludedRect and set EnsuredFocusedElementInView to true to mark that the app has handled this itself and Windows doesn't need to do so again.

The Responding to the appearance of the on-screen keyboard sample demonstrates the basics.