为何GridView无法加载嵌套图片？如何正确填充图片？

问题现象 #

在UWP项目中使用AdaptiveGridView，其ItemTemplate定义了包含Image控件的Grid结构。后台代码手动创建Grid和Image并添加到GridView.Items时，仅能看到Grid的边框，内部Image无任何内容；即使触发异常分支加载默认图片，问题依旧。修改Grid的背景、名称或Image的属性均不生效，始终沿用DataTemplate中的配置。

根本原因 #

AdaptiveGridView的ItemTemplate是用来定义每个数据项的UI渲染模板，当你直接将手动创建的Grid控件添加到Items集合时，这个Grid会被当作一个普通的数据项，GridView会自动使用你预先定义的DataTemplate来渲染这个项——也就是重新创建一个Grid和空Image，完全忽略你手动创建的Image控件，因此看不到图片。

解决方案：使用数据绑定模式 #

正确的做法是通过数据绑定让GridView自动渲染每个图片项，而非手动创建UI控件。

1. 定义数据模型类 #

创建一个用于存储图片源的模型类：

public class ImageItem
{
    public BitmapImage ImageSource { get; set; }
}

2. 修改XAML中的DataTemplate #

更新DataTemplate，将其绑定到新的模型类，并为Image控件设置Source绑定：

<!-- 确保UserControl的xmlns已包含模型类所在命名空间，比如：
xmlns:local="using:MyProjectName.Models" -->

<controls:AdaptiveGridView.ItemTemplate>
    <DataTemplate x:DataType="local:ImageItem">
        <Grid
            Width="NaN"
            BorderBrush="{StaticResource OverlayColor}"
            BorderThickness="5,5,5,5">
            <Image
                x:Name="EquipImage"
                Opacity="1"
                Stretch="UniformToFill"
                Source="{x:Bind ImageSource}">
            </Image>
        </Grid>
    </DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>

3. 重构后台AddImage方法 #

不再手动创建UI控件，而是创建数据模型实例并添加到GridView的Items集合：

public async void AddImage(WorkingImage img)
{
    BitmapImage bmp = new BitmapImage();
    try
    {
        var stream = await img.file.OpenAsync(FileAccessMode.Read);
        await bmp.SetSourceAsync(stream);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("Failed to add image source: " + ex.Message);
        bmp = new BitmapImage(new Uri("ms-appx:///Assets/Resources/FailedImageRender.png"));
    }
    // 创建数据项并添加到GridView
    gridView.Items.Add(new ImageItem { ImageSource = bmp });
}

进阶优化：使用ObservableCollection（可选） #

如果需要支持集合的动态更新（比如添加/删除项时自动刷新UI），可以将GridView的ItemsSource绑定到ObservableCollection：

// 在UserControl构造函数中初始化
public IUAreaExpander()
{
    InitializeComponent();
    gridView.ItemsSource = new ObservableCollection<ImageItem>();
}

// 修改AddImage方法
public async void AddImage(WorkingImage img)
{
    BitmapImage bmp = new BitmapImage();
    try
    {
        var stream = await img.file.OpenAsync(FileAccessMode.Read);
        await bmp.SetSourceAsync(stream);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("Failed to add image source: " + ex.Message);
        bmp = new BitmapImage(new Uri("ms-appx:///Assets/Resources/FailedImageRender.png"));
    }
    var items = (ObservableCollection<ImageItem>)gridView.ItemsSource;
    items.Add(new ImageItem { ImageSource = bmp });
}

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