Background of Teaching Tip is not applied when IsLightDismissEnabled="True" in WinUI 3

Question

I am creating a teaching tip in my WinUI 3 application. Setting the background of the teaching tip works fine when IsLightDismissEnabled="False". However, when I set it to True, a default background is applied. The first and the second pictures are generated when IsLightDismissEnabled is False and True respectively.

How can I fix this problem?

IsLightDismissEnabled="False"

[![enter image description here][1]][1]

IsLightDismissEnabled="True" [![When I set it to True][2]][2] 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" VerticalAlignme

Answer 1

The Background color changes because the TeachingTip has some VisualStates according to the IsLightDismissEnabled value.

What you need to do is to override the resource brush used for the Visual State:

<TeachingTip x:Name="SomeTeachingTip"
    IsLightDismissEnabled="True">
    <TeachingTip.Resources>
        <SolidColorBrush x:Key="TeachingTipTransientBackground"
            Color="LightGreen" />
    </TeachingTip.Resources>
</TeachingTip>

You can learn more about these VisualStates on the generic.xaml file.