WinUI 3自定义标题栏显示偏白异常如何解决

问题根源 #

自定义标题栏发白是WinUI 3扩展标题栏场景的典型问题，白色层来自系统默认绘制的标题栏背景，不属于你在XAML里写的视觉树，所以直接修改CustomDragRegion的Background属性不会生效。

修复方案 #

按以下步骤修改即可解决：

• 透明化系统标题栏的默认绘制层
• 显式指定TabView标签栏区域的背景，修正错误的笔刷使用
• 正确绑定拖拽区域，避免系统自动填充空白

1. 修改C#标题栏配置代码 #

替换你现有的2行标题栏相关代码，在MainWindow构造函数的InitializeComponent()调用后添加如下代码：

using Microsoft.UI;
using Microsoft.UI.Windowing;
using Windows.UI;

var windowId = WinRT.Interop.WindowNative.GetWindowId(this);
var appWindow = AppWindow.GetFromWindowId(windowId);
var titleBar = appWindow.TitleBar;

// 关闭系统默认绘制的标题栏背景、按钮背景
titleBar.BackgroundColor = Colors.Transparent;
titleBar.InactiveBackgroundColor = Colors.Transparent;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
// 按你的深色主题配置标题栏按钮的交互颜色
titleBar.ButtonForegroundColor = Colors.White;
titleBar.ButtonHoverBackgroundColor = Color.FromArgb(60, 255, 255, 255);
titleBar.ButtonPressedBackgroundColor = Color.FromArgb(90, 255, 255, 255);

// 开启内容扩展到标题栏
ExtendsContentIntoTitleBar = true;
// 等拖拽区域加载完成后再设置，避免尺寸识别错误
CustomDragRegion.Loaded += (_, _) => SetTitleBar(CustomDragRegion);
SizeChanged += (_, _) => SetTitleBar(CustomDragRegion);

2. 修正XAML笔刷配置 #

你当前根Grid使用的SystemControlBackgroundAccentRevealBorderBrush是边框专用笔刷，不适合作为容器背景，同时TabView的标签栏背景没有显式指定，会继承异常值，修改核心XAML节点如下：

<!-- 根Grid背景替换为和页面一致的深色值 -->
<Grid BorderBrush="Transparent" x:Name="Browser" Margin="0,0,0,0" Background="#282828">
    <TabView 
        x:Name="Tabv" 
        Margin="0,0,0,0"
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        AddTabButtonClick="TabView_AddTabButtonClick" 
        TabCloseRequested="TabView_TabCloseRequested"
        Background="#282828"
        TabStripBackground="#282828">
        <!-- 原有TabViewItem内容保持不变 -->
        <TabView.TabStripFooter>
            <!-- 给拖拽区域设置最小宽度，保证标题栏按钮左侧有足够拖拽空间 -->
            <Grid x:Name="CustomDragRegion" Margin="0,0,0,0" Background="Transparent" MinWidth="48"/>
        </TabView.TabStripFooter>
    </TabView>
</Grid>

注意点 #

• 不要在控件加载完成前调用SetTitleBar()，否则拖拽区域尺寸识别错误，系统会自动填充默认白色背景。
• 如果需要适配多主题，把硬编码的#282828替换为对应的主题资源笔刷即可。

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