UWP XAML NavigationMenu Change styles

Question

How can I change the Styles of the NavigationView in XAML?

By default, the Minimal mode has AlwaysShowHeader="True" but I want to set it to AlwaysShowHeader="False".

This is not working:

<NavigationView
    x:Name="MyNavigationMenu"
    AlwaysShowHeader="False" >

Answer 1

Simple solution

You could hide it by making the HeaderTemplate's DataTemplate empty, but then you coul also easily not set the header at all

<NavigationView
   x:Name="MyNavigationMenu"
   Header="Hello World!"
   AlwaysShowHeader="False">
    <NavigationView.HeaderTemplate>
        <DataTemplate />
    </NavigationView.HeaderTemplate>
    <TextBlock Text="Inner content" />
</NavigationView>

Better solution

To make the inner content flow into the header area as well, you have to modify the default template. You can find the following inside:

<ContentControl x:Name="HeaderContent" 
       ContentTemplate="{TemplateBinding HeaderTemplate}"
       Content="{TemplateBinding Header}" 
       HorizontalContentAlignment="Stretch" 
       IsTabStop="False"
       MinHeight="48"
       VerticalContentAlignment="Stretch"/>

Notice the MinHeight="48" property. This causes the header always take up at least 48 effective pixels. If you don't set any Header it will still take up 48 pixels in the Minimal mode. To fix this, simply remove this property altogether.

Of course now you have to make sure your content is aware that there might be a hamburger menu button above when in Minimal mode and you must add some Margin when appropriate.

Complete updated Style

<Style x:Key="CustomNavigationMenuStyle" TargetType="NavigationView">
    <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid Margin="12,5,0,11" VerticalAlignment="Stretch">
                    <TextBlock x:Name="Header" Style="{StaticResource TitleTextBlockStyle}" Text="{Binding}" TextWrapping="NoWrap" VerticalAlignment="Bottom"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationView">
                <Grid x:Name="RootGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="DisplayModeGroup">
                            <VisualState x:Name="Compact"/>
                            <VisualState x:Name="Expanded">
                                <VisualState.Setters>
                                    <Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Minimal">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Margin" Value="48,0,0,0"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="TogglePaneGroup">
                            <VisualState x:Name="TogglePaneButtonVisible"/>
                            <VisualState x:Name="TogglePaneButtonCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="TogglePaneButton.Visibility" Value="Collapsed"/>
                                    <Setter Target="PaneContentGridToggleButtonRow.Height" Value="4"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="HeaderGroup">
                            <VisualState x:Name="HeaderVisible"/>
                            <VisualState x:Name="HeaderCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Visibility" Value="Collapsed"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SettingsGroup">
                            <VisualState x:Name="SettingsVisible"/>
                            <VisualState x:Name="SettingsCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="AutoSuggestGroup">
                            <VisualState x:Name="AutoSuggestBoxVisible"/>
                            <VisualState x:Name="AutoSuggestBoxCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="AutoSuggestArea.Visibility" Value="Collapsed"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="PaneStateGroup">
                            <VisualState x:Name="NotClosedCompact"/>
                            <VisualState x:Name="ClosedCompact">
                                <VisualState.Setters>
                                    <Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed"/>
                                    <Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="TitleBarVisibilityGroup">
                            <VisualState x:Name="TitleBarVisible"/>
                            <VisualState x:Name="TitleBarCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="PaneButtonGrid.Margin" Value="0,32,0,0"/>
                                    <Setter Target="PaneContentGrid.Margin" Value="0,32,0,0"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Width="{StaticResource PaneToggleButtonSize}" Canvas.ZIndex="100">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid x:Name="TogglePaneTopPadding"/>
                        <Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Grid.Row="1" Style="{TemplateBinding PaneToggleButtonStyle}"/>
                    </Grid>
                    <SplitView x:Name="RootSplitView" Background="{TemplateBinding Background}" CompactPaneLength="{TemplateBinding CompactPaneLength}" DisplayMode="Inline" IsTabStop="False" IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenPaneLength="{TemplateBinding OpenPaneLength}" PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}">
                        <SplitView.Pane>
                            <Grid x:Name="PaneContentGrid">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="56"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="8"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="ContentPaneTopPadding"/>
                                <Grid x:Name="AutoSuggestArea" Height="40" Grid.Row="2" VerticalAlignment="Center">
                                    <ContentControl x:Name="PaneAutoSuggestBoxPresenter" Content="{TemplateBinding AutoSuggestBox}" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
                                    <Button x:Name="PaneAutoSuggestButton" Content="&#xE11A;" MinHeight="40" Style="{TemplateBinding PaneToggleButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
                                </Grid>
                                <NavigationViewList x:Name="MenuItemsHost" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemsSource="{TemplateBinding MenuItemsSource}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" Margin="0,0,0,20" Grid.Row="3" SelectionMode="Single" SelectedItem="{TemplateBinding SelectedItem}"/>
                                <Border x:Name="FooterContentBorder" Child="{TemplateBinding PaneFooter}" Grid.Row="4"/>
                                <NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="5">
                                    <NavigationViewItem.Icon>
                                        <SymbolIcon Symbol="Setting"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                            </Grid>
                        </SplitView.Pane>
                        <Grid x:Name="ContentGrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
                            <ContentPresenter Content="{TemplateBinding Content}" Grid.Row="1"/>
                        </Grid>
                    </SplitView>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>