为什么我的文本框包含在 FlipView 中，在弹出时被软键盘遮住了？

Question

请考虑以下内容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>

在其中，我有一个以水平模式运行的 FlipView。我想在 FlipView 中显示的内容太大——这就是为什么我在 FlipViewItem 模板中添加了一个 ScrollViewer，以便用户可以垂直滚动（请注意，FlipView 模板内部使用水平 ScrollViewer）。

FlipView 显示的内容包含文本框等输入控件，显然，当用户点击文本框时会显示软键盘（以便获得焦点）。

这是我的实际问题：为什么文本框没有转换为未被软键盘遮挡的剩余视口（见图片）

显然，这与 FlipView 有关，因为当我仅在 ScrollViewer 中显示我的示例视图（或者甚至根本没有 ScrollViewer）时，当软键盘弹出时文本框被正确翻译。

我已经尝试过以下步骤:

我尝试在 FlipView 模板中的 ScrollViewer 上启用垂直滚动 - 这不起作用，因为 FlipView 似乎覆盖了 OnApplyTemplate（或其他）中的相应值 - 当 FlipView 上的方向时，VerticalScrollMode 被禁用' VirtualizingStackPanel 设置为水平。
如上所述，我尝试在 ScrollViewer 中显示完全相同的视图（效果很好），甚至在没有 ScrollViewer 的情况下（效果也很好）。
我也检查了 ScrollViewer.BringIntoViewOnFocusChanged 但这并没有改变任何东西（此外，这个属性的默认值设置为 true）。

有什么办法可以避免这个问题吗？非常感谢您的提前帮助！

Answer 1

我不确定为什么文本框没有向上翻译，但您可以通过自己处理 InputPane 来解决这个问题。

订阅 InputPane.Showing 和隐藏事件。当他们触发动画时，FlipView 的 RenderTransform 向上转换以避开 InputPane 的 OccludedRect 并将 EnsuresedFocusedElementInView 设置为 true 以标记该应用程序已自行处理并且 Windows 不需要再次这样做。

Responding to the appearance of the on-screen keyboard sample 演示了基础知识。

Answer 2

我找到了导致问题的组件：在 FlipView 中用作项目宿主的是 VirtualizingStackPanel。如果您将其与普通 StackPanel 交换，则当软键盘弹出时，输入控件将按预期转换为剩余的视图端口。

您可以通过以下方式兑换VirtualizingStackPanel：

只需像这样直接在 FlipView 上设置 ItemsPanel 属性:

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

如果您有多个 FlipView，在它们之间共享一个样式更为合适：

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

请注意，在这种情况下您将失去 UI 虚拟化，这通常意味着加载 FlipView 控件需要更长的时间，尤其是当您在其中显示大量项目时。

更新：我写了一篇关于这个问题的博客文章 - 在 http://www.feo2x.com/posts/2015-12-06-flipview-and-problems-with-input-controls-part-1/

上阅读更多内容

为什么我的文本框包含在 FlipView 中，在弹出时被软键盘遮住了？

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

c#

xaml

windows-runtime

windows-8.1