使用框架时子页面显示的问题

时间:2017-03-27 19:04:55

标签: xaml layout uwp uwp-xaml

问题

这是我主窗格的布局:

<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级别显示键盘,而不是整个{ {1}},默认级别。

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

干杯!

1 个答案:

答案 0 :(得分:0)

如您所知,如果我们在页面的根目录中设置Page.BottomAppBar,则Touch键盘没有问题。这似乎是添加Page.BottomAppBar

的最佳方式

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

我们可以使用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);
}