UWP XAML NavigationMenu 更改样式

Question

如何在 XAML 中更改 NavigationView 的样式？

默认情况下，Minimal 模式有AlwaysShowHeader="True"，但我想将其设置为AlwaysShowHeader="False"。

这不起作用：

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

Answer 1

简单的解决方案

您可以通过将HeaderTemplate 的DataTemplate 设为空来隐藏它，但是您也可以轻松地根本不设置标题

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

更好的解决方案

要使内部内容也流入页眉区域，您必须修改默认模板。您可以在里面找到以下内容：

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

注意MinHeight="48" 属性。这导致标题始终占用至少 48 个有效像素。如果您没有设置任何Header，它在Minimal 模式下仍然会占用48 个像素。要解决此问题，只需完全删除此属性即可。

当然，现在您必须确保您的内容知道在Minimal 模式下可能有一个汉堡菜单按钮，并且您必须在适当的时候添加一些Margin。

完成更新样式

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