How to design a title bar like WinUI 3 Gallery in WinUI

Question

I am new to WinUI and struggling to do some basic things in that. Any help is appreciated. I'm now designing a small application using WinUI3, But I have some problem designing the title bar. I want to make a title bar like WinUI 3 Gallery and I have tried many ways, but they weren't work.

there are source codes of my project:

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

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;

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

And now, it looks very nice, but there is only one problem——In WinUI3 Gallery,the content box on the right has a gap from the upper edge for the title bar. I have trid to put the navigation view on the second line and kept an empty line for the title bar. Then, the back button will also on the second line--Obviously, I don't want it to be here. I also tried to use a canvas as the content of navigation view,and change the Canvas.Top attribute of mainFrame to 36, but only contents are in the right place, the box is still at the wrong place..

Answer 1

I suggest you could refer to the Doc:Title bar customization.

You can customize the title bar as you like. And you could call SetTitleBar method to replace the system title bar with a custom title bar UI for your app.

Edit: You could see that the "empty line" you said is part of the title bar.