如何根据明暗主题绑定FirebaseDatabase中CollectionView的图片

问题场景 #

我将Firebase Database中的图片名称（存储在Pic和Picdark字段）绑定到CollectionView的Image组件，单独绑定Pic（浅色主题）或Picdark（深色主题）时功能正常：修改数据库中的图片名称后，CollectionView能同步更新显示对应图片。但尝试用AppThemeBinding同时实现主题切换绑定的代码无效，Image无图片显示：

无效代码：

<Image
    Grid.Column="1"
    Aspect="AspectFill"
    BackgroundColor="Transparent"
    HeightRequest="60"
    Source="{AppThemeBinding Light={Binding Pic},
                             Dark={Binding Picdark}}"
    WidthRequest="60" />

单独绑定的有效代码：

• 浅色主题：

<Image
    BackgroundColor="Transparent"
    Grid.Column="1"
    Aspect="AspectFill"
    HeightRequest="60"
    Source="{Binding Pic}"
    WidthRequest="60" />

• 深色主题：

<Image
    BackgroundColor="Transparent"
    Grid.Column="1"
    Aspect="AspectFill"
    HeightRequest="60"
    Source="{Binding Picdark}"
    WidthRequest="60" />

原因 #

AppThemeBinding标记扩展不支持直接嵌套{Binding}标记扩展，因此无法直接在Light/Dark参数中绑定ViewModel的动态属性。

解决方案 #

方案1：ViewModel中添加主题适配属性 #

在你的数据模型或ViewModel中添加一个CurrentImage属性，根据当前应用主题返回对应的Pic或Picdark值：

public string CurrentImage
{
    get
    {
        var currentTheme = Application.Current.RequestedTheme;
        return currentTheme == AppTheme.Light ? Pic : Picdark;
    }
}

然后在主题切换时，触发PropertyChanged通知更新属性：

// 在ViewModel构造函数或初始化逻辑中添加
Application.Current.RequestedThemeChanged += (s, e) =>
{
    OnPropertyChanged(nameof(CurrentImage));
};

最后绑定到这个属性：

<Image
    Grid.Column="1"
    Aspect="AspectFill"
    BackgroundColor="Transparent"
    HeightRequest="60"
    Source="{Binding CurrentImage}"
    WidthRequest="60" />

方案2：使用自定义转换器 #

创建一个实现IValueConverter的转换器，根据当前主题选择对应的属性：

public class ThemeImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is YourDataModel model)
        {
            var currentTheme = Application.Current.RequestedTheme;
            return currentTheme == AppTheme.Light ? model.Pic : model.Picdark;
        }
        return null;
    }

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

在XAML中声明转换器：

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

然后绑定并使用转换器：

<Image
    Grid.Column="1"
    Aspect="AspectFill"
    BackgroundColor="Transparent"
    HeightRequest="60"
    Source="{Binding ., Converter={StaticResource ThemeImageConverter}}"
    WidthRequest="60" />

这样就能实现浅色主题显示Pic图片、深色主题显示Picdark图片的效果，且能同步响应数据库的更新。

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