页命令栏重叠SPLITVIEW窗格 [英] Page command bar overlaps Splitview Pane

问题描述

在我的网页我有底部命令栏，如果该命令栏是开放的，用户点击超过命令栏列SplitView菜单上叠加的菜单。

In my Page I have bottom command bar, and if that command bar is open and user clicks on SplitView menu than command bar is overlaying the menu.

以下是SPLITVIEW页面的XAML：

Below is the xaml of splitview page:

<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我的内容页：

Here's the how I set commandbar on my content Page which is loaded into 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，你可以看到，命令栏是重叠的吧。

Please check below screenshot, I have a Splitview with Green background and you can see that commandbar is overlapping on it.

列SplitView问题截图

下面是演示应用程序onedrive的链接

Here is the demo application onedrive link

推荐答案

您内容页看起来应该像这样

Your content page should look like this

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

这篇关于页命令栏重叠SPLITVIEW窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！