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>

在 Template studio 或 WinUI3 Gallery 中

在使用 Visual Studio 默认模板创建的我的应用程序中

即使您如下修改使用 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。 此代码应创建相同的外观。

申请.xaml

<Application
    x:Class="WinUI3App.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!--  Other merged dictionaries here  -->
            </ResourceDictionary.MergedDictionaries>
            <!--  Other app resources here  -->
            <SolidColorBrush
                x:Key="WindowCaptionBackground"
                Color="Transparent" />
            <SolidColorBrush
                x:Key="WindowCaptionBackgroundDisabled"
                Color="Transparent" />
            <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml.cs

<Window
    x:Class="WinUI3App.MainWindow"
    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:local="using:WinUI3App"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <Grid
            x:Name="AppTitleBar"
            Height="{Binding ElementName=NavigationViewControl, Path=CompactPaneLength}"
            VerticalAlignment="Top"
            Canvas.ZIndex="1"
            IsHitTestVisible="True">
            <Image
                Width="16"
                Height="16"
                HorizontalAlignment="Left"
                Source="/Assets/WindowIcon.ico" />
            <TextBlock
                x:Name="AppTitleBarText"
                Margin="28,0,0,0"
                VerticalAlignment="Center"
                Style="{StaticResource CaptionTextBlockStyle}"
                TextWrapping="NoWrap" />
        </Grid>
        <NavigationView
            x:Name="NavigationViewControl"
            Canvas.ZIndex="0"
            DisplayModeChanged="NavigationView_DisplayModeChanged"
            ExpandedModeThresholdWidth="1280"
            IsBackButtonVisible="Visible"
            IsSettingsVisible="True" />
    </Grid>
</Window>

MainWindow.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace WinUI3App;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        ExtendsContentIntoTitleBar = true;
        SetTitleBar(this.AppTitleBar);
    }

    private void NavigationView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
    {
        AppTitleBar.Margin = new Thickness()
        {
            Left = sender.CompactPaneLength * (sender.DisplayMode == NavigationViewDisplayMode.Minimal ? 2 : 1),
            Top = AppTitleBar.Margin.Top,
            Right = AppTitleBar.Margin.Right,
            Bottom = AppTitleBar.Margin.Bottom
        };
    }
}

Answer 2

<Thickness x:Key="NavigationViewContentGridBorderThickness">1,1,0,0</Thickness>
<CornerRadius x:Key="NavigationViewContentGridCornerRadius">8,0,0,0</CornerRadius>
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
<Thickness x:Key="NavigationViewHeaderMargin">56,34,0,0</Thickness>
<Thickness x:Key="NavigationViewPageContentMargin">56,24,56,0</Thickness>

在 Template Studio 中，来自 Styles/Thickness.xaml 的这些资源是解决方案。