.NET MAUI中使用AppThemeBinding切换主题图片不显示问题

问题场景 #

开发一款货币计数应用，使用CollectionView展示纸币/硬币的数量输入字段与总值，每个条目需要根据系统明暗主题显示对应版本的图片，但当前图片完全不显示。

现有实现代码 #

DataTemplate定义

<DataTemplate x:Key="TemplateDinheiro" x:DataType="model:DinheiroModel">
    <Frame BorderColor="{AppThemeBinding Light={StaticResource Secondary}}" 
           BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource PrimaryDark}}" 
           Margin="10, 5, 10, 5" Padding="10" HeightRequest="90">
        <Grid ColumnDefinitions="2*, 3*, 1*" RowDefinitions="6*, 4*" ColumnSpacing="10">
            <Frame Grid.RowSpan="2" BorderColor="{AppThemeBinding Light={StaticResource Secondary}}">
                <Image Scale="2.2">
                    <Image.Source>
                        <AppThemeBinding Light="{Binding CaminhoDoIconeLight}" Dark="{Binding CaminhoDoIconeDark}"/>
                    </Image.Source>
                </Image>
            </Frame>
            <Frame BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}" 
                   BorderColor="{AppThemeBinding Light={StaticResource Secondary}}" Grid.Column="1" Padding="10, 0, 10, 0">
                <Entry Keyboard="Numeric" 
                       Text="{Binding Quantidade}" 
                       TextColor="{AppThemeBinding Light={StaticResource Text}, Dark={StaticResource TextDark}}" 
                       MaxLength="4"/>
            </Frame>
            <Button BackgroundColor="Transparent"  Grid.Column="2" 
                    Command="{Binding DeletarCommand, Source={RelativeSource AncestorType={x:Type viewmodel:ContagemViewModel}}}"
                    CommandParameter="{Binding .}"
                    ImageSource="{AppThemeBinding Light=trashlight.png, Dark=trashdark.png}"
                    Scale="1.1"/>
            <Label Text="{Binding ValorTotal, StringFormat='R$ {0:#,0.#0}'}"
                   TextColor="{AppThemeBinding Light={StaticResource Text}, Dark={StaticResource TextDark}}"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="End"
                   FontFamily="InterMedium"
                   Grid.Row="1" 
                   Grid.Column="1"
                   Grid.ColumnSpan="2"/>
        </Grid>   
    </Frame>
</DataTemplate>

绑定模型

public partial class DinheiroModel : ObservableObject
{
    public double Valor { get; set; }

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(ValorTotal))]
    private int quantidade;

    public double ValorTotal => Valor * Quantidade;

    public string CaminhoDoIconeLight { get; set; }
    public string CaminhoDoIconeDark { get; set; }

    public DinheiroModel(double valor, string caminhoDoIconeLight, string caminhoDoIconeDark)
    {
        Valor = valor;
        quantidade = 0;
        CaminhoDoIconeLight = caminhoDoIconeLight;
        CaminhoDoIconeDark = caminhoDoIconeDark;
    }
}

条目实例化方式

new DinheiroModel(0.05, "cinco_centavos_light.png", "cinco_centavos_dark.png")

解决方法 #

1. 检查图片资源的生成操作 #

这是最常见的原因：

• 在Visual Studio中选中所有图片文件（包括cinco_centavos_light.png、cinco_centavos_dark.png等）
• 在右侧属性面板中，将生成操作设置为MauiImage
• 确保复制到输出目录设置为如果较新则复制

MAUI依赖MauiImage生成操作来处理图片资源，否则无法通过文件名正确引用图片。

2. 修正AppThemeBinding的绑定语法 #

可以改用更简洁直观的标记扩展写法，同时确保绑定上下文正确：

<Image Scale="2.2"
       Source="{AppThemeBinding Light={Binding CaminhoDoIconeLight}, Dark={Binding CaminhoDoIconeDark}}"/>

确认DinheiroModel的CaminhoDoIconeLight和CaminhoDoIconeDark属性确实传入了正确的文件名（不含多余路径前缀，除非图片放在子文件夹中）。

3. 验证图片路径格式 #

• 如果图片放在Resources/Images根目录下，直接写文件名即可（如cinco_centavos_light.png）
• 如果图片放在子文件夹（如Resources/Images/Coin），路径需要包含子文件夹，如Coin/cinco_centavos_light.png

4. 确认绑定上下文有效性 #

• 检查CollectionView的ItemsSource是否正确绑定到ViewModel中的集合属性
• 使用Visual Studio的实时属性资源管理器查看DinheiroModel实例的CaminhoDoIconeLight和CaminhoDoIconeDark属性是否有正确的字符串值，确认绑定未中断

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