WinUI3 TreeView鼠标悬停颜色未正确更新问题及解决办法

开发WinUI3项目时，TreeView已通过XAML配置并绑定后台数据，使用自定义TreeNode类管理前景色，但通过代码修改前景色后，鼠标悬停时的颜色无法正确更新。

相关代码参考 #

XAML 初始代码 #

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

    <StackPanel Orientation="Horizontal"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
        <Grid Margin="3"
              BorderThickness="1"
              Width="239"
              Height="220"
              BorderBrush="Black"
              HorizontalAlignment="Center">
            <TreeView FontWeight="Bold"
                      ItemsSource="{x:Bind TreeNodes, Mode=OneWay}">
                <TreeView.ItemTemplate>
                    <DataTemplate x:DataType="local:TreeNode">
                        <TreeViewItem Foreground="{Binding Foreground}"
                                      Content="{Binding Name}"
                                      ItemsSource="{Binding Children}" />
                    </DataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>
        </Grid>
    </StackPanel>
</Window>

后台代码 #

public sealed partial class MainWindow : Window
{
    public ObservableCollection<TreeNode> TreeNodes { get; set; }

    public MainWindow()
    {
        this.InitializeComponent();

        TreeNodes = new ObservableCollection<TreeNode>();

        // 示例数据
        var superParent = new TreeNode { Name = "Super Parent", Foreground = new SolidColorBrush(Colors.DarkSeaGreen) };

        var parent1 = new TreeNode { Name = "Parent1", Foreground = new SolidColorBrush(Colors.Blue) };
        parent1.Children.Add(new TreeNode { Name = "Child1 of Parent1", Foreground = new SolidColorBrush(Colors.Red) });
        parent1.Children.Add(new TreeNode { Name = "Child2 of Parent1" , Foreground = new SolidColorBrush(Colors.Red) });
        parent1.Children.Add(new TreeNode { Name = "Child3 of Parent1", Foreground = new SolidColorBrush(Colors.Red) });

        superParent.Children.Add(parent1);


        var parent2 = new TreeNode { Name = "Parent2" };
        parent2.Children.Add(new TreeNode { Name = "Child1 of Parent2" , Foreground = new SolidColorBrush(Colors.Red) });
        parent2.Children.Add(new TreeNode { Name = "Child2 of Parent2", Foreground = new SolidColorBrush(Colors.Red) });
        parent2.Children.Add(new TreeNode { Name = "Child3 of Parent2" , Foreground = new SolidColorBrush(Colors.Red) });

        superParent.Children.Add(parent2);

        var parent3 = new TreeNode { Name = "Parent3" };
        parent3.Children.Add(new TreeNode { Name = "Child1 of Parent3", Foreground = new SolidColorBrush(Colors.Red) });
        parent3.Children.Add(new TreeNode { Name = "Child2 of Parent3" , Foreground = new SolidColorBrush(Colors.Red) });
        parent3.Children.Add(new TreeNode { Name = "Child3 of Parent3" , Foreground = new SolidColorBrush(Colors.Red) });

        superParent.Children.Add(parent3);

        TreeNodes.Add(superParent);
    }
}

自定义TreeNode类 #

public class TreeNode
{
    public string Name { get; set; }
    public SolidColorBrush Foreground { get; set; }
    public ObservableCollection<TreeNode> Children { get; set; } = new ObservableCollection<TreeNode>();
}

问题解决过程 #

最初尝试自定义样式但未生效，之后在TreeView的Resources中添加以下资源后，问题得以解决：

<TreeView.Resources>
    <SolidColorBrush x:Key="TreeViewItemForegroundPointerOver"
                     Color="White" />
    <SolidColorBrush x:Key="TreeViewItemBackgroundSelected"
                     Color="Gray" />
    <SolidColorBrush x:Key="TreeViewItemBackgroundSelectedPointerOver"
                     Color="Gray" />
    <SolidColorBrush x:Key="TreeViewItemBackgroundSelectedPressed"
                     Color="Gray" />
    <SolidColorBrush x:Key="TreeViewItemBackgroundSelectedDisabled"
                     Color="Gray" />
    <SolidColorBrush x:Key="TreeViewItemForegroundSelected"
                     Color="White" />
    <SolidColorBrush x:Key="TreeViewItemForegroundSelectedPointerOver"
                     Color="White" />
    <SolidColorBrush x:Key="TreeViewItemForegroundSelectedPressed"
                     Color="White" />
    <SolidColorBrush x:Key="TreeViewItemForegroundSelectedDisabled"
                     Color="White" />
    <SolidColorBrush x:Key="TreeViewItemBackgroundPointerOver"
                     Color="Gray" />
</TreeView.Resources>

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