如何调整UWP NavigationView Header高度及文本对齐方式？

问题分析 #

Header的上下空白主要来自两处：一是TitleTextBlockStyle默认带的上下边距，二是NavigationView的Header容器自带的上下内边距；左对齐则需要让Header的左内边距与下方Frame的Padding保持一致。

解决方案 #

1. 移除Header文本上下空白 #

• 覆盖样式默认边距：在TextBlock上设置Margin="0"，消除TitleTextBlockStyle自带的上下间距
• 抵消容器内边距：在HeaderTemplate的Grid中设置Margin="0,-8,0,-8"（数值可根据视觉效果微调，默认Header容器上下各有8px内边距）

2. 实现Header与内容区左对齐 #

• 匹配Frame左内边距：Frame设置了Padding="3"，因此在HeaderTemplate的Grid中设置Padding="3,0,0,0"
• 垂直居中对齐：给TextBlock添加VerticalAlignment="Center"，确保文本与下方内容区在同一水平线

修改后的完整代码 #

<NavigationView
            x:Name="NavigationViewControl"
            Canvas.ZIndex="0"
            IsBackButtonVisible="Visible"
            IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
            SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
            IsSettingsVisible="True"
            ExpandedModeThresholdWidth="1280"
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            OpenPaneLength="160"
            IsPaneOpen="False"
            Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
            <NavigationView.MenuItems>
                <NavigationViewItem Content="Dashboard" helpers:NavigationHelper.NavigateTo="App.ViewModels.DashboardViewModel" Icon="Home" ></NavigationViewItem>
            </NavigationView.MenuItems>
            <NavigationView.HeaderTemplate>
                <DataTemplate>
                    <Grid Padding="3,0,0,0" Margin="0,-8,0,-8">
                        <TextBlock
                            Text="{Binding}"
                            Style="{ThemeResource TitleTextBlockStyle}"
                            Margin="0"
                            VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </NavigationView.HeaderTemplate>
            <i:Interaction.Behaviors>
                <behaviors:NavigationViewHeaderBehavior
                    DefaultHeader="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
                    <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                        <DataTemplate>
                            <Grid Padding="3,0,0,0" Margin="0,-8,0,-8">
                                <TextBlock
                                    Text="{Binding}"
                                    Style="{ThemeResource TitleTextBlockStyle}"
                                    Margin="0"
                                    VerticalAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                </behaviors:NavigationViewHeaderBehavior>
            </i:Interaction.Behaviors>
            <Frame x:Name="NavigationFrame" Grid.Row="2" Background="{ThemeResource SystemAccentColorLight2}" Padding="3" CornerRadius="8"/>
</NavigationView>

额外提示 #

如果微调Margin="-8"后空白仍不符合预期，可以通过Visual Studio的实时可视化树查看NavigationView Header容器的实际内边距，再调整数值。若需要更彻底的自定义，也可以复制NavigationView的默认ControlTemplate，直接修改Header区域的Padding属性。

内容的提问来源于stack exchange，提问作者brainer33