頁面命令欄重疊Splitview窗格

Question

在我的頁面中我有底部命令欄，並且如果該命令欄打開並且用戶單擊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

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

Answer 2

取出<Page.BottomAppBar>，將您<CommandBar>....</CommandBar>到您的內容網頁的內容（根幀）。