使键盘越过 UI 而不是在 UWP 中移动整个 UI

Posted 2023-04-13

【中文标题】使键盘越过 UI 而不是在 UWP 中移动整个 UI

【英文标题】：Make keyboard go over UI not shift the whole UI in UWP

【发布时间】：2017-08-23 03:01:37

【问题描述】：

我正在通用 Windows 平台中构建一个应用程序，我在屏幕底部放置了一个 TextBox，但我不希望它向上移动整个 UI，我不想将所有内容重新排序为放在键盘上方。

我只是想做一些像 Cortana 这样的键盘可以在所有层之上的东西。

应用本身的外观：

应用打开键盘后的样子：

Cortana 的外观（我希望我的应用是这样的）：

<Page
x:Class="Pi.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pi"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.Resources>
    <FontFamily x:Key="Dekar">/Assets/Fonts/Dekar.otf#Dekar</FontFamily>
    <FontFamily x:Key="Consolas">/Assets/Fonts/SFThin.otf#SF UI Display</FontFamily>
</Page.Resources>

<Grid Background="Black">
    <Rectangle Margin="0">
        <Rectangle.Fill>
            <ImageBrush ImageSource="Assets/MainBG2.jpg" Stretch="UniformToFill" Opacity="0.35"/>
        </Rectangle.Fill>
    </Rectangle>
    <TextBlock x:Name="TitleText" Height="21" Margin="10,18,10,0" TextWrapping="Wrap" Text="ADMIN ACCESS" VerticalAlignment="Top" Foreground="#FF00AEFF" FontSize="20" FontFamily="StaticResource Dekar" TextAlignment="Center" DoubleTapped="TitleText_DoubleTapped"/>
    <TextBox x:Name="CommandBox" Margin="0,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Bottom" FontFamily="StaticResource Consolas" Foreground="#FF8D8D8D" Background="#BF111E23" BorderThickness="0,1,0,0" FontSize="17" Height="50" PlaceholderText="Type here..." Padding="10,12,0,0" RequestedTheme="Dark" BorderBrush="#FF00AEFF" KeyUp="KeyPressed"/>
    <ScrollViewer Margin="10,65,10,60" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
        <TextBlock x:Name="ResultText" TextWrapping="Wrap" Text="What are your commands?" VerticalAlignment="Top" Foreground="#FFDEDEDE" FontSize="19" FontFamily="StaticResource Consolas" TextAlignment="Left"/>
</Grid>

【问题讨论】：

我不能发布超过 2 个链接，所以我在“https:”后面加了一个空格。

你能发布你的XAML吗？

您可以发布您的 XAML 代码吗？我猜你没有把你的文本框和上面放在同一个容器里？

是这样的：有一个网格（主网格），里面有文本框和其他一些对象。我没有用 StackPanel 或其他东西分隔网格。要不要？

如果还需要放XAML代码，我一访问我的电脑就做。

【参考方案1】：

默认情况下，InputPane 会滑动页面，这样键盘就不会覆盖焦点元素。您的页面底部有焦点文本框，因此必须向上滑动，以便用户可以看到她键入的内容。

您可以通过处理 InputPane.Showing 事件并设置 EnsuredFocusedElementInView 属性来覆盖此行为，让 InputPane 知道您已处理此问题并且它不需要滑动。

您可以将 TextBox 移动到 InputPane 的 OcccludedRect 上方，但不理会页面的其余部分，然后将 TextBox 移回 InoutPane.Hiding 中。

见

https://docs.microsoft.com/en-us/uwp/api/Windows.UI.ViewManagement.InputPane#events_ https://docs.microsoft.com/en-us/windows/uwp/input-and-devices/respond-to-the-presence-of-the-touch-keyboard#handling-the-showing-and-hiding-events https://code.msdn.microsoft.com/windowsapps/keyboard-events-sample-866ba41c

【讨论】：

感谢您的回答。