CODEWITHSUNDEEP
c#win-universal-appwindows-10-universal
Zea Shah
Zea Shah

Reputation: 382

Page command bar overlaps Splitview Pane

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.

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>

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>

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

SplitView Issue Screenshot

Here is the demo application onedrive link

Upvotes: 5

Views: 804

Answers (2)

Archana
Archana

Reputation: 3221

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>

Upvotes: 8

thang2410199
thang2410199

Reputation: 1942

Remove the <Page.BottomAppBar>, move your <CommandBar>....</CommandBar> into the content of your content Page (in root Frame).

Upvotes: 3

Related Questions