AvaloniaUI控件主题切换时颜色未自动更新问题解决

问题背景 #

我在AvaloniaUI应用中实现了一个包含PathIcon和带标题TextBlock的用户控件，所有内容均绑定到依赖属性（DP）。IsActive属性为true时，图标与文本显示主题强调色；为false时显示主题默认前景色。当前功能正常，但切换明暗主题时，颜色必须修改IsActive绑定状态才会更新。需要实现主题切换时颜色自动更新，且不愿使用接收状态与主题的转换器，也不想追踪所有绑定状态标志重复切换（低效且可能引发副作用）。

修改后的用户控件XAML #

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="48" d:DesignHeight="48"
             xmlns:views="clr-namespace:MyApp.Views"
             x:Class="MyApp.Views.CaptionedToggleIcon">
  <UserControl.Styles>
    <Style Selector="views|CaptionedToggleIcon">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="views:CaptionedToggleIcon">
            <Panel VerticalAlignment="Stretch">
              <Rectangle Fill="Transparent" />
              <StackPanel>
                <PathIcon Width="{TemplateBinding IconWidth}"
                          Height="{TemplateBinding IconHeight}"
                          Data="{TemplateBinding IconGeo}">
                  <PathIcon.Styles>
                    <Style Selector="PathIcon">
                      <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimary}" />
                    </Style>
                    <Style Selector="views|CaptionedToggleIcon[IsActive=True] PathIcon">
                      <Setter Property="Foreground" Value="{DynamicResource AccentButtonBackground}" />
                    </Style>
                  </PathIcon.Styles>
                </PathIcon>
                <TextBlock Text="{TemplateBinding Caption}">
                  <TextBlock.Styles>
                    <Style Selector="TextBlock">
                      <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimary}" />
                    </Style>
                    <Style Selector="views|CaptionedToggleIcon[IsActive=True] TextBlock">
                      <Setter Property="Foreground" Value="{DynamicResource AccentButtonBackground}" />
                    </Style>
                  </TextBlock.Styles>
                </TextBlock>
              </StackPanel>
            </Panel>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Styles>
</UserControl>

修正后的代码后置（修复CaptionProperty注册笔误） #

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;

namespace MyApp.Views;

public partial class CaptionedToggleIcon : UserControl
{
  public static readonly StyledProperty<string> CaptionProperty =
      AvaloniaProperty.Register<CaptionedToggleIcon, string>(nameof(Caption), defaultValue: string.Empty);

  public static readonly StyledProperty<Geometry> IconGeoProperty =
    AvaloniaProperty.Register<CaptionedToggleIcon, Geometry>(nameof(IconGeo));

  public static readonly StyledProperty<bool> IsActiveProperty =
      AvaloniaProperty.Register<CaptionedToggleIcon, bool>(nameof(IsActive), defaultValue: false);

  public static readonly StyledProperty<double> IconWidthProperty =
      AvaloniaProperty.Register<CaptionedToggleIcon, double>(nameof(IconWidth), defaultValue: 24d);

  public static readonly StyledProperty<double> IconHeightProperty =
      AvaloniaProperty.Register<CaptionedToggleIcon, double>(nameof(IconHeight), defaultValue: 24d);

  public string Caption {
    get => GetValue(CaptionProperty);
    set => SetValue(CaptionProperty, value);
  }
  
  public Geometry IconGeo {
    get => GetValue(IconGeoProperty);
    set => SetValue(IconGeoProperty, value);
  }

  public bool IsActive {
    get => GetValue(IsActiveProperty);
    set => SetValue(IsActiveProperty, value);
  }

  public double IconWidth {
    get => GetValue(IconWidthProperty);
    set => SetValue(IconWidthProperty, value);
  }

  public double IconHeight {
    get => GetValue(IconHeightProperty);
    set => SetValue(IconHeightProperty, value);
  }

  public CaptionedToggleIcon() {
    InitializeComponent();
  }
}

原代码问题说明 #

• 原实现用DataTriggerBehavior的ChangePropertyAction会直接把Foreground设置为动态资源的当前快照值，而非绑定到动态资源本身。主题切换时动态资源更新，但行为不会重新触发，因此颜色无法自动同步。
• 使用样式选择器后，Foreground直接绑定到动态资源，Avalonia的样式系统会在动态资源值更新时自动同步控件属性，无需额外触发逻辑。

示例用法（保持不变） #

<Button Command="{Binding ToggleFlag}">
  <Button.Content>
    <views:CaptionedToggleIcon IconWidth="20" IconHeight="20" Caption="Text below icon"
                               IsActive="{Binding IsFlagSet}"
                               IconGeo="{StaticResource IconStreamGeometry}" />
  </Button.Content>
</Button>

ViewModel代码（保持不变） #

[RelayCommand]
public void ToggleFlag() {
  IsFlagSet = !IsFlagSet;
}

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