[英]WinUI3: Why does the top area of the NavigationView look different?
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>
頂部的那個空間實際上是 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
};
}
}
<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 的這些資源是解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.