Seite Befehlsleiste überlappt Splitview-Bereich

Question

In meiner Seite habe ich untere Befehlsleiste, und wenn diese Befehlsleiste geöffnet ist und Benutzer auf SplitView-Menü klickt, als Befehlsleiste das Menü überlagert.

Unten finden Sie die XAML von SPLITVIEW- Seite:

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

Hier ist das, wie ich auf meine Inhalte Seite gesetzt commandbar die in SPLITVIEW- rootFrame geladen wird:

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

Bitte überprüfen Screenshot unten, ich habe eine Splitview mit grünem Hintergrund und Sie können sehen, dass die Befehlsleiste sich überlappt.

SplitView Issue Screenshot

Hier ist die Demo-Anwendung Microsoft Onedrive link

Answer 1

Ihre Inhaltsseite sollte so aussehen

<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

die <Page.BottomAppBar> entfernen, bewegen Sie <CommandBar>....</CommandBar> in den Inhalt Ihrer Inhalte Seite (in Root Frame).