WinUI 3桌面应用如何设置应用标题栏及修改背景色

1. 替换默认窗口标题并修复标题位置问题 #

你当前的核心问题是未隐藏系统默认标题栏，也未将自定义标题栏与窗口标题栏区域绑定，导致系统默认的「WinUI Desktop」标题仍显示，自定义标题被挤到下方。需在MainWindow.xaml.cs中添加窗口标题栏初始化逻辑：

using Microsoft.UI;
using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using Windows.Graphics;

namespace MyProject
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            
            // 直接替换默认窗口标题
            this.Title = "My App Title";
            
            // 获取当前窗口的标题栏实例
            var appWindow = GetAppWindowForCurrentWindow();
            var titleBar = appWindow.TitleBar;
            
            // 启用内容延伸到标题栏区域，隐藏系统默认标题文本
            titleBar.ExtendsContentIntoTitleBar = true;
            
            // 绑定自定义标题栏的拖动区域（让用户可以拖动标题栏移动窗口）
            AppTitleBar.Loaded += (sender, e) => UpdateDragRegion(titleBar);
            this.SizeChanged += (sender, e) => UpdateDragRegion(titleBar);
        }
        
        // 更新标题栏拖动区域（窗口大小变化时同步更新）
        private void UpdateDragRegion(AppWindowTitleBar titleBar)
        {
            if (AppTitleBar == null) return;
            titleBar.SetDragRectangles(new[] { new RectInt32(0, 0, (int)AppTitleBar.ActualWidth, (int)AppTitleBar.ActualHeight) });
        }
        
        // 获取当前窗口对应的AppWindow对象
        private AppWindow GetAppWindowForCurrentWindow()
        {
            var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
            var windowId = Win32Interop.GetWindowIdFromWindow(hwnd);
            return AppWindow.GetFromWindowId(windowId);
        }
    }
}

同时调整MainPage.xaml中的自定义标题栏，确保文本垂直居中且绑定窗口标题：

<Grid x:Name="AppTitleBar" Height="32" Background="Transparent">
    <TextBlock x:Name="AppTitleTextBlock" 
               Text="{x:Bind Window.Current.Title, Mode=OneWay}"
               TextWrapping="NoWrap"
               Style="{StaticResource CaptionTextBlockStyle}" 
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
</Grid>

2. 修改标题栏背景色 #

有两种方式实现，按需选择：

方式一：仅修改自定义标题栏背景 #

直接给AppTitleBar设置Background属性即可：

<Grid x:Name="AppTitleBar" Height="32" Background="#2196F3">
    <!-- 标题文本内容 -->
</Grid>

方式二：同步修改系统窗口控制按钮区域背景 #

如果需要连最小化/最大化/关闭按钮的背景也统一修改，在MainWindow.xaml.cs的标题栏初始化代码中添加：

// 设置标题栏正常状态颜色
titleBar.BackgroundColor = Colors.DodgerBlue;
titleBar.ButtonBackgroundColor = Colors.DodgerBlue;

// 可选：设置窗口非激活状态下的标题栏颜色
titleBar.InactiveBackgroundColor = Colors.LightSlateGray;
titleBar.InactiveButtonBackgroundColor = Colors.LightSlateGray;

完整代码整合 #

MainWindow.xaml.cs #

using Microsoft.UI;
using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using Windows.Graphics;

namespace MyProject
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "My App Title";
            
            var appWindow = GetAppWindowForCurrentWindow();
            var titleBar = appWindow.TitleBar;
            
            // 启用内容延伸到标题栏
            titleBar.ExtendsContentIntoTitleBar = true;
            
            // 设置标题栏颜色
            titleBar.BackgroundColor = Colors.DodgerBlue;
            titleBar.ButtonBackgroundColor = Colors.DodgerBlue;
            titleBar.InactiveBackgroundColor = Colors.LightSlateGray;
            titleBar.InactiveButtonBackgroundColor = Colors.LightSlateGray;
            
            // 绑定拖动区域
            AppTitleBar.Loaded += (sender, e) => UpdateDragRegion(titleBar);
            this.SizeChanged += (sender, e) => UpdateDragRegion(titleBar);
        }
        
        private void UpdateDragRegion(AppWindowTitleBar titleBar)
        {
            if (AppTitleBar == null) return;
            titleBar.SetDragRectangles(new[] { new RectInt32(0, 0, (int)AppTitleBar.ActualWidth, (int)AppTitleBar.ActualHeight) });
        }
        
        private AppWindow GetAppWindowForCurrentWindow()
        {
            var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
            var windowId = Win32Interop.GetWindowIdFromWindow(hwnd);
            return AppWindow.GetFromWindowId(windowId);
        }
    }
}

MainPage.xaml #

<Page x:Class="MyProject.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:MyProject"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"    
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar" Background="Transparent">
            <TextBlock x:Name="AppTitleTextBlock" 
                       Text="{x:Bind Window.Current.Title, Mode=OneWay}"
                       TextWrapping="NoWrap"
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>

        <NavigationView Grid.Row="1" x:Name="nvSample8" 
                        PaneDisplayMode="Left"
                        IsTabStop="False"
                        SelectionChanged="NavigationView_SelectionChanged8"
                        IsPaneOpen="False">
            <NavigationView.MenuItems>
                <NavigationViewItem Content="Accounts" Icon="Contact" ToolTipService.ToolTip="Accounts" Tag="AccountsPage"/>
            </NavigationView.MenuItems>
            <Frame x:Name="contentFrame8" />
        </NavigationView>
    </Grid>
</Page>

MainPage.xaml.cs（简化版） #

using Microsoft.UI.Xaml.Controls;

namespace MyProject
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            nvSample8.SelectedItem = nvSample8.MenuItems.OfType<NavigationViewItem>().First();
            // 标题已通过绑定Window.Title实现，无需重复设置
        }

        private void NavigationView_SelectionChanged8(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
        {
            // 你的导航逻辑实现
        }
    }
}

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