WinUI 3中IsLightDismissEnabled设为True时TeachingTip背景不生效问题

我在WinUI 3应用中创建了一个TeachingTip，遇到以下问题：

• 设置IsLightDismissEnabled="False"时，自定义背景可以正常生效；
• 设置IsLightDismissEnabled="True"时，控件自动应用默认背景，自定义背景失效。

相关XAML代码片段：

<?xml version="1.0" encoding="utf-8" ?>
<Window
    x:Class="TeachingTip.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:TeachingTip"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="TeachingTip"
    mc:Ignorable="d">

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="ShowTipBtn" Content="显示提示" Click="ShowTipBtn_Click"/>
        <TeachingTip x:Name="DemoTip"
                     Title="自定义背景测试"
                     Subtitle="测试轻触关闭时的背景问题"
                     IsLightDismissEnabled="True"
                     Background="#FF4CAF50">
            <!-- 提示内容 -->
        </TeachingTip>
    </Grid>
</Window>

问题根源在于：启用IsLightDismissEnabled时，TeachingTip会被包裹在Popup控件中，该Popup的默认背景会覆盖你设置的TeachingTip背景。以下是三种可行的解决方式：

方法1：修改TeachingTip控件模板 #

1. 在设计器中右键TeachingTip控件，选择「编辑模板」→「编辑副本」，生成完整的控件模板到项目中；
2. 在模板代码里找到Popup元素，将其Background属性绑定到模板的Background：

<Popup x:Name="Popup"
       Background="{TemplateBinding Background}"
       IsLightDismissEnabled="{TemplateBinding IsLightDismissEnabled}"
       Placement="{TemplateBinding Placement}"
       PlacementTarget="{TemplateBinding PlacementTarget}">
    <!-- 模板其他内容保持不变 -->
</Popup>

3. 保存后，自定义背景即可在轻触关闭模式下正常生效。

方法2：代码动态设置Popup背景 #

如果不想修改完整模板，可通过代码找到TeachingTip内部的Popup，手动同步背景：

private void ShowTipBtn_Click(object sender, RoutedEventArgs e)
{
    DemoTip.IsOpen = true;
    DemoTip.Loaded += (s, args) =>
    {
        var popup = FindVisualChild<Popup>(DemoTip);
        if (popup != null)
        {
            popup.Background = DemoTip.Background;
        }
    };
}

// 辅助方法：遍历视觉树查找子控件
private T FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild)
            return typedChild;
        
        var foundChild = FindVisualChild<T>(child);
        if (foundChild != null)
            return foundChild;
    }
    return null;
}

方法3：全局样式覆盖 #

在App.xaml的资源字典中添加以下样式，全局修改TeachingTip的Popup背景绑定：

<Style TargetType="TeachingTip" BasedOn="{StaticResource DefaultTeachingTipStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TeachingTip">
                <!-- 复制默认模板内容，仅修改Popup的Background绑定 -->
                <Popup x:Name="Popup"
                       Background="{TemplateBinding Background}"
                       IsLightDismissEnabled="{TemplateBinding IsLightDismissEnabled}"
                       Placement="{TemplateBinding Placement}"
                       PlacementTarget="{TemplateBinding PlacementTarget}">
                    <!-- 原模板其余内容 -->
                </Popup>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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