WinUI3:为什么NavigationView的顶部区域看起来不同?

Question

NavigationView在WinUI3 Gallery或使用模板工作室创建的应用程序中的默认外观在顶部有一个空间。然而，在使用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>

在模板工作室或WinUI3画廊

使用Visual Studio默认模板创建的My App

即使你修改了一个应用程序的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

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

在模板工作室中，这些资源来自样式/厚度。Xaml是解决方案。

Answer 2

顶部的空间实际上是AppTitleBar。这段代码应该创建相同的外观。

App.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
};
}
}