如何在Windows App SDK (WinUI/Project Reunion)项目中自定义窗口标题栏

问题原因 #

你存在两处核心配置遗漏：

1. 直接将仅承载文字的TextBlock作为自定义标题栏的根元素传入了SetTitleBar方法，该元素默认无背景、尺寸仅适配文字大小，导致看不到你期望的标题栏背景，且没有为系统窗口控制按钮预留显示区域，按钮被完全遮挡。
2. 你重写的WindowCaption*系列资源仅作用于系统自动渲染的窗口控制按钮区域，自定义标题栏的主体背景需要你手动给标题栏根容器设置，无法通过上述资源生效。

修复步骤 #

1. 替换你的标题栏XAML代码，外层套一个Grid作为标题栏根容器，设置固定高度、背景，右侧预留188px的控制按钮专属区域：

<Grid x:Name="TitleBarContainer" Height="32" Background="Green" HorizontalAlignment="Stretch">
    <TextBlock Text="Hello" VerticalAlignment="Center" Margin="8,0,0,0" />
    <!-- 右侧预留区域，系统会自动在此渲染控制按钮，不要在此区域放置自定义交互控件 -->
    <Grid x:Name="CaptionReservedArea" Width="188" HorizontalAlignment="Right" />
</Grid>

2. 修改代码后置逻辑，将外层Grid容器传入SetTitleBar方法：

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    App.MainWindow.ExtendsContentIntoTitleBar = true;
    App.MainWindow.SetTitleBar(TitleBarContainer);
    App.MainWindow.Activate();
}

3. 你之前定义的WindowCaptionForeground等资源可保留，会自动作用在右侧系统渲染的控制按钮文字/图标上。

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