How to have multiple sections in Command Bar like Photos app

Question

I am trying to replicate the appearance of the CommandBar within the build in Photos app. The command bar has three sections at the left, centre and right.

My guess is that the right items are the primary items, with the centre and left sections being in the CommandBar.Content and using a grid to align them.

How can I replicate this appearance? I tried to use the Content property, but I can't get that to fill the available space.

Answer 1

I think it's not simply made of Commandbar. You need to use the NavigationView control and set the PaneDisplayMode="Top". Besides, you could custom the PaneHeader, PaneFooter and PaneCustomContent to achieve your target.

<NavigationView PaneDisplayMode="Top" PaneTitle="add to a creation" IsBackButtonVisible="Collapsed">
        <NavigationView.PaneHeader>
            <Image Source="Assets/car.png"></Image>
        </NavigationView.PaneHeader>
        <NavigationView.MenuItems>
            <NavigationViewItem Content="add to a creation"></NavigationViewItem>
        </NavigationView.MenuItems>

        <NavigationView.PaneFooter>
            <StackPanel>
                <CommandBar>
                    <AppBarButton Label="file" Icon="OpenFile"></AppBarButton>
                    <AppBarButton Label="file" Icon="OpenFile"></AppBarButton>
                    <AppBarButton Label="file" Icon="OpenFile"></AppBarButton>

                </CommandBar>
            </StackPanel>
        </NavigationView.PaneFooter>
        <NavigationView.PaneCustomContent>
            <Grid HorizontalAlignment="Center">
                <CommandBar>
                    <AppBarButton Label="fav" Icon="Favorite"></AppBarButton>
                    <AppBarButton Label="delete" Icon="Delete"></AppBarButton>
                </CommandBar>
            </Grid>
        </NavigationView.PaneCustomContent>
    </NavigationView>