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

Question

我是 WinUI 新手，正在努力做一些基本的事情。任何帮助表示赞赏。我现在正在使用 WinUI3 设计一个小型应用程序，但在设计标题栏时遇到一些问题。我想做一个像WinUI 3 Gallery一样的标题栏，我尝试了很多方法，但都行不通。

有我的项目的源代码：

主窗口.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>
        <Grid.RowDefinitions>
            <RowDefinition Height="36"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Column="0" Grid.Row="0">
            <TextBlock>Sciencekill Toolkit</TextBlock>
        </StackPanel>
        <NavigationView Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" SelectionChanged="NavigationView_SelectionChanged" PaneDisplayMode="Left">
            <NavigationView.MenuItems>
                <NavigationViewItem Icon="Play" Content="HomePage" Tag="mainPage"/>
            </NavigationView.MenuItems>
            <Frame x:Name="mainFrame"/>
        </NavigationView>
    </Grid>
</Window>

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

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace sks_toolkit
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        internal SystemBackdrop systemBackDrop;

        private IntPtr hwnd;
        private AppWindow appWindow;
        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())
                {
                    var titleBar = appWindow.TitleBar;
                    titleBar.ExtendsContentIntoTitleBar = true;
                    titleBar.ButtonBackgroundColor = Colors.Transparent;
                    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
                }
        }

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

现在看起来很漂亮，但是只有一个问题——在WinUI3 Gallery中，右侧的内容框与标题栏的上边缘有一个间隙。我尝试将导航视图放在第二行，并为标题栏保留一个空行。然后，后退按钮也会出现在第二行——显然，我不希望它出现在这里。我也尝试使用画布作为导航视图的内容，并将mainFrame的Canvas.Top属性更改为36，但只有内容在正确的位置，盒子仍然在错误的位置。。

Answer 1

我建议你可以参考文档：标题栏定制。

您可以根据需要自定义标题栏。您可以调用

SetTitleBar method

将系统标题栏替换为应用程序的自定义标题栏 UI。