页面命令栏与Splitview窗格重叠

时间:2016-04-26 09:14:00

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

在我的页面中,我有底部命令栏,如果该命令栏已打开,用户点击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,你可以看到命令栏上有重叠。

SplitView Issue Screenshot

以下是演示应用程序onedrive link

2 个答案:

答案 0 :(得分:8)

您的内容页面应如下所示

 <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>

答案 1 :(得分:3)

删除<Page.BottomAppBar>,将您的<CommandBar>....</CommandBar>移动到内容页面的内容中(在根框架中)。