页面命令栏与 Splitview 窗格重叠答案

【问题标题】：Page command bar overlaps Splitview Pane页面命令栏与 Splitview 窗格重叠
【发布时间】：2016-04-26 18:46:47
【问题描述】：

在我的页面中，我有底部命令栏，如果该命令栏打开并且用户单击 SplitView 菜单，那么命令栏将覆盖菜单。

下面是splitview页面的xaml：

<SplitView  x:Name="NavigationSplitView"
                    DisplayMode="CompactOverlay"
                    IsPaneOpen="True"
                    CompactPaneLength="{StaticResource ShellCompactPaneSize}"
                    OpenPaneLength="300"
                    PaneBackground="{ThemeResource SplitViewBackgroundBrush}"
                    >

               <!--//App root frame where all content data will be loaded-->
                <Frame x:Name="rootFrame" />



            <SplitView.Pane>
             ...
           </SplitView.Pane></SplitView>

这是我在加载到 splitview rootFrame 的内容页面上设置命令栏的方式：

 <Page.BottomAppBar>

    <CommandBar x:Name="AppCommandBar"
                Background="Transparent">
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="Save"
                          Icon="Save"
                          Label="Save"></AppBarButton>
            <AppBarButton Name="Clear"
                          Icon="ClearSelection"
                          Label="Clear"></AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>

</Page.BottomAppBar>

请查看下面的截图，我有一个绿色背景的拆分视图，你可以看到命令栏重叠在上面。

SplitView Issue Screenshot

这里是演示应用程序 onedrive link

【问题讨论】：

标签： c# win-universal-app windows-10-universal

【解决方案1】：

您的内容页面应如下所示

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock FontSize="36"
                   Text="Content Page"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Foreground="Black"></TextBlock>
        <CommandBar x:Name="AppCommandBar" VerticalAlignment="Bottom">
            <CommandBar.PrimaryCommands>
                <AppBarButton Name="Save"
                              Icon="Save"
                              Label="Save"></AppBarButton>
                <AppBarButton Name="Clear"
                              Icon="ClearSelection"
                              Label="Clear"></AppBarButton>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </Grid>

【讨论】：

【解决方案2】：

删除<Page.BottomAppBar>，将<CommandBar>....</CommandBar> 移动到内容页面的内容中（在根框架中）。

【讨论】：

如何将拆分视图窗格内容移动到根框架中，它充当菜单内容。
什么，堆栈溢出弄乱了我的答案。编辑它。我并不是说您应该对 SplitView 结构进行任何更改，只是为了更改内容 XAML 页面中的内容。
好的，知道了。非常感谢。
您能否考虑投票给我的答案？可悲的是它的-1 :(
我想这样做，但没有足够的声誉。