如何在WinUI 3中设计类似WinUI 3 Gallery的标题栏

问题说明 #

作为WinUI 3新手，开发应用时希望实现WinUI 3 Gallery同款标题栏样式，但当前应用的右侧内容框与顶部边缘无标题栏间隙，尝试调整NavigationView位置、用Canvas定位等方法均未解决。

修改后的代码 #

MainWindow.xaml #

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="sks_toolkit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:sks_toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <NavigationView x:Name="MainNavView" SelectionChanged="NavigationView_SelectionChanged" PaneDisplayMode="Left">
            <!-- 自定义标题栏内容 -->
            <NavigationView.Header>
                <Grid Margin="12,0">
                    <TextBlock Text="Sciencekill Toolkit" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Center"/>
                </Grid>
            </NavigationView.Header>
            <NavigationView.MenuItems>
                <NavigationViewItem Icon="Play" Content="HomePage" Tag="mainPage"/>
            </NavigationView.MenuItems>
            <!-- 设置Frame顶部边距，模拟标题栏间隙 -->
            <Frame x:Name="mainFrame" Margin="0,36,0,0"/>
        </NavigationView>
    </Grid>
</Window>

MainWindow.cs #

using Microsoft.UI;
using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Scighost.WinUILib.Helpers;
using System;
using WinRT.Interop;
using sks_toolkit.Pages;

namespace sks_toolkit
{
    public sealed partial class MainWindow : Window
    {
        internal SystemBackdrop systemBackDrop;
        private IntPtr hwnd;
        private AppWindow appWindow;
        private AppWindowTitleBar titleBar;

        public MainWindow()
        {
            InitializeComponent();
            systemBackDrop = new SystemBackdrop(this);
            systemBackDrop.TrySetMica(useMicaAlt: true, fallbackToAcrylic: true);
            
            hwnd = WindowNative.GetWindowHandle(this);
            WindowId id = Win32Interop.GetWindowIdFromWindow(hwnd);
            appWindow = AppWindow.GetFromWindowId(id);
            
            if (AppWindowTitleBar.IsCustomizationSupported())
            {
                titleBar = appWindow.TitleBar;
                titleBar.ExtendsContentIntoTitleBar = true;
                titleBar.ButtonBackgroundColor = Colors.Transparent;
                titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
                
                // 适配主题的标题栏按钮颜色
                titleBar.ButtonForegroundColor = Resources["SystemBaseHighColor"] as Windows.UI.Color;
                titleBar.ButtonHoverForegroundColor = Resources["SystemBaseHighColor"] as Windows.UI.Color;
                titleBar.ButtonPressedForegroundColor = Resources["SystemBaseHighColor"] as Windows.UI.Color;
                titleBar.ButtonInactiveForegroundColor = Resources["SystemBaseMediumColor"] as Windows.UI.Color;

                // 调整Header边距，避开系统标题栏按钮
                UpdateNavViewHeaderMargin();
                appWindow.Changed += AppWindow_Changed;
            }
        }

        private void AppWindow_Changed(AppWindow sender, AppWindowChangedEventArgs args)
        {
            if (args.DidTitleBarChange)
            {
                UpdateNavViewHeaderMargin();
            }
        }

        private void UpdateNavViewHeaderMargin()
        {
            MainNavView.HeaderMargin = new Thickness(titleBar.LeftInset, 0, titleBar.RightInset, 0);
        }

        private void NavigationView_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
        {
            var selectedItem = (NavigationViewItem)args.SelectedItem;
            switch ((string)selectedItem.Tag)
            {
                case "mainPage":
                    mainFrame.Navigate(typeof(MainPage));
                    break;
            }
        }
    }
}

关键修改点 #

• 复用NavigationView Header：将自定义标题放入NavigationView的Header区域，既保留返回按钮在顶部的正确位置，又实现标题栏自定义。
• 设置Frame顶部边距：通过Margin="0,36,0,0"给内容区域添加标准标题栏高度的间隙，和WinUI 3 Gallery布局对齐。
• 避开系统标题栏按钮：利用titleBar.LeftInset和titleBar.RightInset动态调整Header边距，防止自定义标题被窗口控制按钮遮挡。
• 主题适配：设置标题栏按钮的前景色，确保在Mica背景下的可读性，同时监听窗口变化实时更新布局。

内容的提问来源于stack exchange，提问作者Sciencekill