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

p8h8hvxi  于 2023-01-28  发布在  其他
关注(0)|答案(2)|浏览(259)

在WinUI3库或使用模板工作室创建的应用程序中,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,外观仍会有所不同。
一个二个一个一个

68bkxrlz

68bkxrlz1#

顶部的空间实际上是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>

主窗口.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>

主窗口.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
        };
    }
}
tktrz96b

tktrz96b2#

<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中的这些资源就是解决方案。

相关问题