为什么包含在当它弹出的软键盘挡住一个FlipView我的文本框?(Why is my text bo

2019-10-22 16:09发布

请考虑下面的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显示的内容是太大 - 这就是为什么我添加了一个ScrollViewer中的FlipViewItem模板,以便用户可以垂直滚动(请注意,FlipView模板使用水平的ScrollViewer内)。

由该FlipView显示的内容包含了诸如文本框和明显输入控件,软键盘,当用户点击文本框(以便它能够聚焦)所示。

这里是我的实际问题:为什么在文本框中没有翻译成不被软键盘遮挡其余视口(见图片)

显然,这有做一些与FlipView因为当我显示我的示例View仅在ScrollViewer中(或者甚至没有任何的ScrollViewer的话),然后在文本框中正确时,软键盘弹出翻译。

我已经尝试以下步骤

  1. 我试图使在ScrollViewer中是在FlipView的模板垂直滚动 - 这不起作用,因为FlipView似乎重写OnApplyTemplate(或东西)相应的值 - 该VerticalScrollMode被禁用时,在FlipView” VirtualizingStackPanel方向设置为水平。
  2. 如上所述,我试图只显示内的ScrollViewer(其工作得很好)或甚至没有的ScrollViewer(其也工作得很好)完全相同的图。
  3. 我也查ScrollViewer.BringIntoViewOnFocusChanged但是这不会改变任何东西(再说,这个属性设置为默认值true)。

有没有办法,我可以绕过这个问题的任何方式? 非常感谢你的帮助提前!

Answer 1:

我不知道为什么随便文本框的不翻译了,但你可以处理解决该问题InputPane自己。

订阅InputPane.Showing和隐藏事件。 当他们开火动画FlipView的的RenderTransform翻译了出来的InputPane的OccludedRect的方式,并设置EnsuredFocusedElementInView为true,以纪念该应用程序已经处理了这个本身和Windows并不需要再次这样做。

在回应屏幕上的键盘样品的外观体现了基础。



Answer 2:

我发现,造成问题的组件:它是VirtualizingStackPanel被用作项目主机FlipView 。 如果你有一个正常的交换它StackPanel ,然后输入控件转换为剩余视角端口时,软键盘弹出如预期。

你可以交换VirtualizingStackPanel使用以下方法:

只需设置ItemsPanel的财产FlipView直接像这样:

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

如果你有几个FlipViews,分享他们之间的风格是比较合适的:

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

请注意,你将失去UI虚拟化在这种情况下,这通常意味着需要更长的时间来加载FlipView控制,特别是如果你dislay大量在它的项目。

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



文章来源: Why is my text box contained in a FlipView obscured by the soft keyboard when it pops up?