WinUI3中如何让标题栏内的Button可点击？

核心实现步骤 #

1. 正确配置系统标题栏 #

首先需要让应用内容延伸到标题栏区域，并隐藏系统标题栏的背景，避免视觉重叠：

// 在窗口初始化逻辑中（如MainWindow构造函数）
var appWindow = Microsoft.UI.Xaml.WindowExtensions.GetAppWindow(this);
var titleBar = appWindow.TitleBar;

// 启用内容延伸到标题栏
titleBar.ExtendsContentIntoTitleBar = true;
// 设置系统标题栏按钮为透明背景，消除视觉冲突
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

2. 区分拖拽区域与交互区域 #

系统默认将整个标题栏视为窗口拖拽区，会拦截按钮点击事件。必须明确标记非拖拽的交互区域，以下两种方式均可靠：

方式一：使用官方TitleBarDragArea控件（推荐）

WinUI 3.0及以上版本提供了TitleBarDragArea控件，仅该控件内的区域可拖拽窗口，外部区域可正常响应交互：

<Grid x:Name="CustomTitleBar" Height="32">
    <!-- 仅此区域可拖拽窗口 -->
    <muxc:TitleBarDragArea>
        <StackPanel Orientation="Horizontal" Margin="8,0">
            <Image Source="Assets/AppIcon.png" Width="16" Height="16"/>
            <TextBlock Text="我的应用" Margin="8,0" VerticalAlignment="Center"/>
        </StackPanel>
    </muxc:TitleBarDragArea>

    <!-- 可交互的用户按钮：不在拖拽区域内，可正常响应点击 -->
    <Button x:Name="ProfileButton" Content="👤" 
            HorizontalAlignment="Right" Margin="0,0,16,0"
            Width="32" Height="24"/>
</Grid>

注意：需在XAML头部引入命名空间 xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

方式二：通过代码手动设置拖拽矩形

如果使用旧版WinUI，可通过SetDragRectangles方法指定拖拽区域，排除按钮所在范围：

private void UpdateDragRectangles()
{
    var appWindow = Microsoft.UI.Xaml.WindowExtensions.GetAppWindow(this);
    var titleBar = appWindow.TitleBar;
    if (ProfileButton == null) return;

    // 获取按钮在屏幕坐标系中的位置
    var buttonBounds = ProfileButton.TransformToVisual(null)
        .TransformBounds(new Rect(0, 0, ProfileButton.ActualWidth, ProfileButton.ActualHeight));
    
    // 设置拖拽区域为标题栏左侧到按钮左边缘的区域
    titleBar.SetDragRectangles(new[]
    {
        new Rect(0, 0, buttonBounds.X - 8, titleBar.Height)
    });
}

// 窗口大小变化时重新计算拖拽区域，避免按钮被误判为拖拽区
private void MainWindow_SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
    UpdateDragRectangles();
}

3. 适配系统标题栏高度 #

为适配不同DPI和系统设置，建议将自定义标题栏高度绑定到系统标题栏高度：

CustomTitleBar.Height = titleBar.Height;
// 监听标题栏高度变化（如系统缩放调整时）
titleBar.LayoutMetricsChanged += (s, e) => CustomTitleBar.Height = titleBar.Height;

常见问题修复 #

• 系统标题栏重叠：确保未手动添加系统标题栏元素，ExtendsContentIntoTitleBar设为true后，系统的最小化/最大化/关闭按钮会自动叠加在自定义标题栏右侧，无需重复绘制。
• 按钮点击无响应：检查按钮是否被包含在拖拽区域内，确保TitleBarDragArea未覆盖按钮，或SetDragRectangles的范围正确排除了按钮区域。同时不要给自定义标题栏Grid设置IsHitTestVisible="False"。
• UWP Z-Index方案无效：WinUI3中标题栏层级由系统管理，无需手动调整Z-Index，正确区分拖拽与交互区域即可解决问题。

可参考的示例资源 #

• 微软官方WinUI3 Gallery应用：内置自定义标题栏的交互示例，可直接查看源代码学习实现逻辑。
• GitHub社区项目：搜索关键词“WinUI3 Custom TitleBar”，能找到大量开源模板项目，例如部分桌面应用模板集成了带用户按钮的可交互标题栏实现。

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