【问题标题】：Issues with child page's display when using Frames使用框架时子页面的显示问题
【发布时间】：2017-08-20 15:17:51
【问题描述】：

问题

这是我的主窗格的布局：

<Page
    x:Class="Communities.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Communities"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="Page_Loaded" DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="48" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        ...
        <SplitView Grid.Row="1" Name="hamburgerMenu" OpenPaneLength="200" PaneBackground="#F02A2A2A">
            <SplitView.Pane>
                <ListView ItemsSource="{Binding}" IsItemClickEnabled="True" ItemClick="HamburgerItemClick">
...             </ListView>
            </SplitView.Pane>
            <Frame Name="frame" />
        </SplitView>
        <Grid Grid.RowSpan="3" Name="popupArea" />
    </Grid>
</Page>

frame 是我加载所有页面的位置，因此布局始终一致。

现在，在我的大多数子页面中，我定义了AppBar 控件并将其附加到该子页面的BottomAppBar 属性：

PostView.xaml

...
<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Label="Back" Icon="Back" Click="TryGoBack" />
        <AppBarButton Label="Refresh" Icon="Refresh" Click="TryRefreshComments" />
        <AppBarButton Label="Go to Community" Icon="Go" Click="TryOpenCommunity" />
    </CommandBar>
</Page.BottomAppBar>
...

这就是麻烦的开始。它在 PC 上运行良好，因为布局在桌面上大多是静态的。大部分时间都不需要软件键盘等。在移动设备上问题更大：Screenshots

我的想法

用于显示子页面的框架似乎引起了各种问题。当 AppBar 在主页中定义时，它的位置正确。

我想避免键盘覆盖文本框以及 AppBar，但我不想摆脱 frame 控件。如果键盘出现时页面被“压扁”而不是向上推，我也更喜欢它，但我不确定如何在frame 级别而不是整个MainPage 上显示键盘, 默认级别。

解决这种情况的最佳方法是什么？

干杯！

【问题讨论】：

标签： xaml layout uwp uwp-xaml

【解决方案1】：

如您所知，如果我们在页面的根目录中设置Page.BottomAppBar，则触摸键盘没有问题。看来这是添加Page.BottomAppBar 的最佳方式。

如果您想在Frame 的其他页面中添加Page.BottomAppBar，您应该可以自定义您的UI。 UWP 通过处理由InputPane 对象公开的Showing 和Hiding 事件，在触摸键盘的外观上提供类似的行为。

我们可以使用InputPaneVisibilityEventArgs.OccludedRect 来获取输入窗格所覆盖的应用程序窗口区域。

例如：

public PostView()
{
    this.InitializeComponent();
    InputPane.GetForCurrentView().Showing += PostView_Showing;
    InputPane.GetForCurrentView().Hiding += PostView_Hiding;
}

private void PostView_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
    MyTextBox.Margin = new Thickness(0, args.OccludedRect.Height, 0, 0);
}

private void PostView_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
    MyTextBox.Margin = new Thickness(0, 0, 0, args.OccludedRect.Height);
}

【讨论】：