为什么 ContentDialog 中的 TextBox 不自动滚动到键盘上方 [英] Why isn't the TextBox inside ContentDialog automatically scroll above keyboard

问题描述

我注意到如果 TextBox 位于 Page 中，那么一切都可以完美运行.每当 TextBox 获得焦点时，它就会滚动到键盘上方的正确位置，以便用户在键入时能够看到文本.无论出于何种原因，ContentDialog 的情况都有些不同.TextBox 很容易被键盘覆盖.有没有我遗漏的明显设置?

I notice that if the TextBox is in a Page, then everything working perfectly. Whenever the TextBox is focused, it will scroll to the right position above the keyboard so that the user will be able to see the text as he is typing along. Thing is a little bit different for ContentDialog for whatever reason. TextBox is easily covered by the keyboard. Is there any obvious setting that I am missing?

我创建了一个默认的 ContentDialog 并将代码复制到一个页面.并获得以下屏幕截图.除了上层 XAML 元素是左列的 和右列的 之外，其他一切都相同.

I create a default ContentDialog and copied the code to a page. And get the following screenshots. Everything else is the same except that the upper level XAML elements is <ContentDialog> for the left column, <Page> for the right column.

左图 - ContentDialog 键盘弹出前
右图 - Page 键盘弹出前

Left Image - ContentDialog before keyboard pop up
Right Image - Page before keyboard pop up

左图 - ContentDialog 键盘弹出后
右图 - Page 键盘弹出后

Left Image - ContentDialog after keyboard pop up
Right Image - Page after keyboard pop up

相关代码如下:

<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <TextBox Name="email" Header="Email address"/>
    <PasswordBox Name="password" Header="Password"/>
    <CheckBox Name="showPassword" Content="Show password"/>

    <!-- Content body -->
    <TextBlock Name="body" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap">
        <TextBlock.Text>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </TextBlock.Text>
    </TextBlock>
</StackPanel>

为什么ContentDialog 中的TextBox 没有像Page 那样滚动到键盘上方?

Why isn't the TextBox inside ContentDialog scrolled above the keyboard as it is like the in the Page?

推荐答案

有一次我遇到了 TextBox 的类似问题并找到了 在这里回答.基本上，一旦显示键盘，焦点元素就不会向上移动，您可以通过进行额外的转换来纠正这种行为:

Once I've faced similar problem with the TextBox and have found answer here. Basically, once the keyboard is shown, the focused element is not moved up, you can correct this behaviour by making additional transform:

// add this code somewhere to your constructor of your page or content dialog - where the problematic TextBox is located
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing += (s, args) =>
{
    const double extraHeightBuffer = 20.0;

    UIElement focused = FocusManager.GetFocusedElement() as UIElement;
    if (null != focused)
    {
        GeneralTransform gt = focused.TransformToVisual(this);
        Point focusedPoint = gt.TransformPoint(new Point(0, focused.RenderSize.Height - 1));
        double bottomOfFocused = focusedPoint.Y + extraHeightBuffer;
        if (bottomOfFocused > args.OccludedRect.Top)
        {
            var trans = new TranslateTransform();
            trans.Y = -(bottomOfFocused - args.OccludedRect.Top);
            this.RenderTransform = trans;
        }
        args.EnsuredFocusedElementInView = true;
    }
};

Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hiding += (s, args) =>
{
    var trans = new TranslateTransform();
    trans.Y = 0;
    this.RenderTransform = trans;
    args.EnsuredFocusedElementInView = false;
};

这篇关于为什么 ContentDialog 中的 TextBox 不自动滚动到键盘上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！