C# MAUI MVVM中Image绑定自定义类属性值为空问题

核心问题分析 #

1. QueryProperty无法绑定嵌套属性：你写的[QueryProperty("ImageUris.normal", "ImageUris.normal")]完全无效，QueryProperty特性只能将导航参数映射到ViewModel的直接公共属性，无法直接绑定嵌套对象的子属性。
2. Uri属性未被正确赋值：即使XAML绑定语法正确，如果ViewModel中的Uri对象本身是null，Uri.normal自然取不到值——这大概率是导航传递参数时没有正确传递ImageUris对象导致的。
3. 潜在的空值与权限问题：如果normal是网络图片地址，未配置网络权限会导致图片加载失败；若数据源中normal字段为空，也会显示空白。

分步解决 #

1. 修正ViewModel的QueryProperty配置 #

删除无效的[QueryProperty("ImageUris.normal", "ImageUris.normal")]，改为直接绑定Uri属性：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MauiApp2.Model;

namespace MauiApp2.ViewModel
{
    [QueryProperty("Text", "Text")]
    [QueryProperty("Uri", "Uri")] // 绑定到ViewModel的Uri属性，参数key要和导航时一致
    public partial class DetailViewModel : ObservableObject
    {
        [ObservableProperty]
        string text;
        [ObservableProperty]
        Cards_Root.ImageUris uri;

        [RelayCommand]
        async Task GoBack()
        {
            await Shell.Current.GoToAsync("..");
        }
    }
}

2. 确保导航时正确传递ImageUris对象 #

从列表页跳转详情页时，传递完整的ImageUris对象（对应实体类的image_uris字段）：

// 假设你有一个Cards_Root类型的对象card
await Shell.Current.GoToAsync(nameof(DetailPage), new Dictionary<string, object>
{
    {"Text", card.SomeTextProperty}, // 替换为你的文本字段
    {"Uri", card.image_uris} // 将实体类的image_uris传给ViewModel的Uri属性
});

3. 处理空值与网络权限（可选但重要） #

• 空值处理：在XAML中添加FallbackValue，避免因normal为空显示空白：

  <Image Source="{Binding Uri.normal, FallbackValue='placeholder.png'}" />
  

  注意：placeholder.png需要放在项目的资源目录中（如Resources/Images），并设置其生成操作为MauiImage。

• 网络权限配置：如果normal是HTTP/HTTPS地址：

  • Android：在AndroidManifest.xml中添加权限：

    <uses-permission android:name="android.permission.INTERNET" />
    

  • iOS：在Info.plist中添加（HTTP地址需要，HTTPS可省略）：

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    

4. 验证绑定有效性 #

可以在ViewModel的Uri属性赋值时打个断点，确认Uri对象是否被正确初始化，且Uri.normal是否有值。如果Uri始终为null，检查导航传递参数的key是否和QueryProperty的第二个参数完全一致（大小写敏感）。

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