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