WinUI3：为什么 NavigationView 的顶部区域看起来不一样？

Question

WinUI3 Gallery 中 NavigationView 的默认外观或使用模板工作室创建的应用程序在顶部有一个空间。但是，它在使用 Visual Studio 默认模板创建的应用程序中看起来有所不同。我不认为它是由 ViewModel 或其他任何东西控制的。为什么看起来不一样？

<!--In Template studio or WinUI3 Gallery-->
<Page>
    <Grid>
        <NavigationView PaneDisplayMode="LeftCompact"/>
    </Grid>
</Page>

<!--In My App created with Visual Studio default templates-->
<Page>
    <Grid>
        <NavigationView PaneDisplayMode="LeftCompact"/>
    </Grid>
</Page>

In Template studio or WinUI3 Gallery

In My App created with Visual Studio default templates

即使您如下修改使用 Template Studio 创建的应用程序的 ShellPage，外观仍然存在差异。

public sealed partial class ShellPage : Page
{
    public ShellPage()
    {
        InitializeComponent();
    }
}

<Page
    x:Class="TemplateStudioApp.Views.ShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    
    <NavigationView PaneDisplayMode="LeftCompact"/>
</Page>

Answer 1

顶部的那个空间实际上是 AppTitleBar。看看下面的代码。没有 RowDefinitions 将 AppTitleBar 和 NavigationView 分开。

<Grid>
    <Grid x:Name="AppTitleBar"
            Canvas.ZIndex="1"
            Height="{Binding ElementName=NavigationViewControl, Path=CompactPaneLength}"
            IsHitTestVisible="True"
            VerticalAlignment="Top">
        <Image Source="/Assets/WindowIcon.ico"
                HorizontalAlignment="Left"
                Width="16"
                Height="16" />
        <TextBlock x:Name="AppTitleBarText"
                    VerticalAlignment="Center"
                    TextWrapping="NoWrap"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Margin="28,0,0,0"/>
    </Grid>
    <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"
        Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
    </NavigationView>
</Grid>