如何将CommandBar添加到NavigationView标头中？

Question

I need to add a CommandBar to my NavigationView header to replace the plain text - however I don't know how to drill into the template and add one.

Right now, I just have the NavigationView in a Grid, with the header set to simple text such as Welcome...

<Grid Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}">
    <NavigationView x:Name="NavigationView" Header="Welcome" SelectionChanged="{x:Bind mainViewModel.selectionChanged, Mode=OneWay}" Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}">

Currently, I have the commandbar below the header in a grid as follows:

<Grid Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}" VerticalAlignment="Top">
            <CommandBar Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}"
                Visibility="{Binding listsClicked, Converter={StaticResource boolToVisibilityConverter}}"
                        Height="30">
                <AppBarButton Icon="Back" Label="Back"/>
            </CommandBar>
            <CommandBar Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}"
                Visibility="{Binding addinCalculatorClicked, Converter={StaticResource boolToVisibilityConverter}}"
                        Height="40">
                <AppBarButton Icon="Forward" Label="Forward"/>
            </CommandBar>

Notice that the CommandBar's visibility uses binding and a converter. If I'll need to edit the template of the CommandBar in order to do so when adding it into the template of the NavigationView, I'll need to know how to do that as well - which should be simple.

Answer 1

I don't know how to drill into the template and add one.

You just need to put it in the NavigationView's HeaderTemplate like the following:

<Page.Resources>
    <local:boolToVisibilityConverter x:Key="boolToVisibilityConverter"> 
    </local:boolToVisibilityConverter>
</Page.Resources>
<NavigationView>
        <NavigationView.HeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <CommandBar Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}"
            Visibility="{Binding listsClicked, Converter={StaticResource boolToVisibilityConverter}}"
                    Height="30">
                        <AppBarButton Icon="Back" Label="Back"/>
                    </CommandBar>
                    <CommandBar Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}"
            Visibility="{Binding addinCalculatorClicked, Converter={StaticResource boolToVisibilityConverter}}"
                    Height="40">
                        <AppBarButton Icon="Forward" Label="Forward"/>
                    </CommandBar>
                </StackPanel>
            </DataTemplate>
        </NavigationView.HeaderTemplate>
</NavigationView>