.NET MAUI如何通过ViewModel动态设置FontImageSource的Glyph属性

核心问题在于StaticResource是静态引用，没法直接和ViewModel的属性绑定；DynamicResource需要通过资源键动态查找，但ViewModel默认无法直接访问资源字典的值。下面给你三种可行的实现方案：

方案一：ViewModel直接引用图标Unicode值 #

Icons.xaml里的图标资源本质是存储了图标的Unicode字符串（比如），直接把这些值拿到ViewModel里用就行：

1. 先从Icons.xaml里复制目标图标的Unicode值，比如：

<!-- Icons.xaml里的定义 -->
<x:String x:Key="IconX">&#xf001;</x:String>
<x:String x:Key="IconY">&#xf002;</x:String>

2. 在ViewModel里用ObservableProperty定义当前图标的属性：

using CommunityToolkit.Mvvm.ComponentModel;

public partial class MyViewModel : ObservableObject
{
    // 初始设为IconX的Unicode
    [ObservableProperty]
    private string _currentGlyph = "\uf001";

    // 满足条件时调用这个方法切换图标
    public void ToggleIcon()
    {
        CurrentGlyph = CurrentGlyph == "\uf001" ? "\uf002" : "\uf001";
    }
}

3. XAML里直接绑定这个属性：

<Image>
    <Image.Source>
        <FontImageSource
            FontFamily="MYGLIYPHS"
            Glyph="{Binding CurrentGlyph}"
            Color="{StaticResource DarkGray}"
            Size="35" />
    </Image.Source>
</Image>

方案二：用转换器把资源键转成Glyph值 #

如果不想在ViewModel里硬编码Unicode，可以写个转换器，让ViewModel只存资源键，转换器负责从资源字典里取对应的值：

1. 实现IValueConverter：

using System.Globalization;
using Microsoft.Maui.Controls;

public class ResourceKeyToGlyphConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string key && Application.Current.Resources.TryGetValue(key, out var glyph))
        {
            return glyph;
        }
        return string.Empty;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在页面的资源里声明转换器：

<ContentPage.Resources>
    <local:ResourceKeyToGlyphConverter x:Key="GlyphConverter" />
</ContentPage.Resources>

3. ViewModel里存储资源键：

using CommunityToolkit.Mvvm.ComponentModel;

public partial class MyViewModel : ObservableObject
{
    // 初始设为IconX的资源键
    [ObservableProperty]
    private string _currentIconKey = "IconX";

    public void ToggleIcon()
    {
        CurrentIconKey = CurrentIconKey == "IconX" ? "IconY" : "IconX";
    }
}

4. XAML绑定的时候用转换器：

<Image>
    <Image.Source>
        <FontImageSource
            FontFamily="MYGLIYPHS"
            Glyph="{Binding CurrentIconKey, Converter={StaticResource GlyphConverter}}"
            Color="{StaticResource DarkGray}"
            Size="35" />
    </Image.Source>
</Image>

方案三：纯XAML用触发器切换DynamicResource #

如果切换逻辑简单，能在XAML里处理，可以用DataTrigger结合DynamicResource：

1. ViewModel里定义判断条件的属性：

using CommunityToolkit.Mvvm.ComponentModel;

public partial class MyViewModel : ObservableObject
{
    // 标记是否满足切换条件
    [ObservableProperty]
    private bool _isConditionMet;
}

2. 先定义一个静态类存图标键（避免硬编码字符串）：

public static class IconKeys
{
    public const string IconX = "IconX";
    public const string IconY = "IconY";
}

3. XAML里用触发器切换资源键：

<Image>
    <Image.Source>
        <FontImageSource
            FontFamily="MYGLIYPHS"
            Color="{StaticResource DarkGray}"
            Size="35">
            <FontImageSource.Glyph>
                <DynamicResource Key="CurrentIcon" />
            </FontImageSource.Glyph>
        </FontImageSource>
    </Image.Source>
    <Image.Triggers>
        <DataTrigger TargetType="Image" Binding="{Binding IsConditionMet}" Value="True">
            <Setter Property="Resources">
                <ResourceDictionary>
                    <x:String x:Key="CurrentIcon">{StaticResource IconY}</x:String>
                </ResourceDictionary>
            </Setter>
        </DataTrigger>
        <DataTrigger TargetType="Image" Binding="{Binding IsConditionMet}" Value="False">
            <Setter Property="Resources">
                <ResourceDictionary>
                    <x:String x:Key="CurrentIcon">{StaticResource IconX}</x:String>
                </ResourceDictionary>
            </Setter>
        </DataTrigger>
    </Image.Triggers>
</Image>

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