.NET MAUI中DynamicResource修改IconTintColorBehavior的TintColor失效

问题背景 #

在.NET MAUI中使用DynamicResource全局更新应用颜色时，按钮背景色等常规属性能正常响应，但Community Toolkit的IconTintColorBehavior设置的TintColor无法随资源更新而变化。已排除SVG文件问题（使用StaticResource手动设置有效）。

核心原因 #

IconTintColorBehavior的默认实现仅在初始加载时应用一次着色逻辑，当TintColor绑定的DynamicResource更新时，Behavior未监听属性变更事件，因此不会自动重新执行着色操作。

解决方案 #

方案1：自定义Behavior（推荐） #

创建继承自IconTintColorBehavior的自定义Behavior，重写属性变更逻辑，在TintColor变化时重新应用着色：

using CommunityToolkit.Maui.Behaviors;

namespace YourAppNamespace.Behaviors;

public class DynamicIconTintColorBehavior : IconTintColorBehavior
{
    protected override void OnPropertyChanged(string? propertyName)
    {
        base.OnPropertyChanged(propertyName);
        
        // 当TintColor属性变更且关联控件存在时，重新应用着色
        if (propertyName == nameof(TintColor) && AssociatedObject != null)
        {
            ApplyTint(AssociatedObject, TintColor);
        }
    }
}

在XAML中替换原Behavior：

<ImageButton Grid.Row="2" Grid.Column="0" 
             BackgroundColor="{DynamicResource SecondaryColor}" 
             CornerRadius="0" Clicked="NavigateHome" 
             BorderWidth="2" BorderColor="Transparent" 
             Source="profileicon.svg" Padding="5" x:Name="profileBTN">
    <ImageButton.Behaviors>
        <local:DynamicIconTintColorBehavior TintColor="{DynamicResource PrimaryColor}" />
    </ImageButton.Behaviors>
</ImageButton>

方案2：手动遍历更新Behavior #

如果不想自定义Behavior，可在修改全局资源后，遍历所有页面的控件，手动更新IconTintColorBehavior的TintColor：

private void ColorLayout1(object sender, EventArgs e)
{
    // 更新全局资源
    Application.Current.Resources["PrimaryColor"] = Colors.Red;
    Application.Current.Resources["SecondaryColor"] = Colors.Red;
    Application.Current.Resources["TertiaryColor"] = Colors.Red;

    // 获取新的主色调
    var newPrimaryColor = (Color)Application.Current.Resources["PrimaryColor"];
    
    // 遍历所有页面的控件，更新对应的Behavior
    foreach (var window in Application.Current.Windows)
    {
        UpdateTintBehaviors(window.Page, newPrimaryColor);
    }
}

private void UpdateTintBehaviors(Element element, Color tintColor)
{
    if (element is VisualElement visualElement)
    {
        // 更新当前控件的所有IconTintColorBehavior
        foreach (var behavior in visualElement.Behaviors.OfType<IconTintColorBehavior>())
        {
            behavior.TintColor = tintColor;
        }
    }

    // 递归处理子控件
    foreach (var child in element.Descendants())
    {
        UpdateTintBehaviors(child, tintColor);
    }
}

方案3：MVVM绑定（适合MVVM架构） #

将颜色属性托管到ViewModel中，通过数据绑定替代DynamicResource，利用INotifyPropertyChanged自动触发更新：

1. 创建全局ViewModel：

using System.ComponentModel;
using System.Runtime.CompilerServices;
using Microsoft.Maui.Graphics;

namespace YourAppNamespace.ViewModels;

public class AppSettingsViewModel : INotifyPropertyChanged
{
    public static AppSettingsViewModel Instance { get; } = new();

    private Color _primaryColor = Color.FromHex("#ff69b4");
    public Color PrimaryColor
    {
        get => _primaryColor;
        set
        {
            _primaryColor = value;
            OnPropertyChanged();
            // 同步更新全局资源，保证其他控件正常响应
            Application.Current.Resources["PrimaryColor"] = value;
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    
    protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. XAML中绑定到ViewModel：

<ImageButton ...>
    <ImageButton.Behaviors>
        <toolkit:IconTintColorBehavior TintColor="{Binding PrimaryColor, Source={x:Static vm:AppSettingsViewModel.Instance}}" />
    </ImageButton.Behaviors>
</ImageButton>

3. 修改颜色的方法：

private void ColorLayout1(object sender, EventArgs e)
{
    AppSettingsViewModel.Instance.PrimaryColor = Colors.Red;
    // 同步更新其他颜色资源
    Application.Current.Resources["SecondaryColor"] = Colors.Red;
    Application.Current.Resources["TertiaryColor"] = Colors.Red;
}

验证 #

应用任意一种方案后，修改全局颜色时，IconTintColorBehavior的TintColor会随资源或ViewModel属性变化自动更新。

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