WPF DataGridView中显示含图片的数据：能否跨源绑定图片列与DataTable列？

嘿，刚好折腾过WPF DataGrid的图片显示和混合绑定需求，先给你补个小知识点：WPF里对应的控件是DataGrid（WinForms里才叫DataGridView），别搞混啦！下面分两部分给你讲清楚：

一、在DataGrid中显示带图片的数据 #

有两种常用方式，看你数据源类型选：

1. 直接用DataTable存储图片 #

如果你的数据源本身就是DataTable，可以直接加一个ImageSource（或BitmapImage）类型的列，然后在XAML里用DataGridTemplateColumn来渲染：

后台代码示例：

// 创建带图片列的DataTable
var dataTable = new DataTable();
dataTable.Columns.Add("ProductName", typeof(string));
dataTable.Columns.Add("ProductImage", typeof(BitmapImage));

// 加载图片并添加行
var sampleImg = new BitmapImage(new Uri("pack://application:,,,/Assets/Product1.png"));
dataTable.Rows.Add("无线耳机", sampleImg);

// 把DataTable绑定到DataGrid的ItemsSource
YourDataGrid.ItemsSource = dataTable.DefaultView;

XAML部分：

<DataGrid x:Name="YourDataGrid" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="产品名称" Binding="{Binding ProductName}" />
        <DataGridTemplateColumn Header="产品图片">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <!-- 这里绑定DataTable里的ProductImage列 -->
                    <Image Source="{Binding ProductImage}" Width="60" Height="60" Stretch="Uniform" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

2. 绑定自定义对象的图片属性 #

如果是MVVM模式，更推荐用自定义实体类，比如：

public class Product
{
    public string Name { get; set; }
    public ImageSource Image { get; set; }
}

然后把ObservableCollection<Product>作为DataGrid的ItemsSource，XAML里的绑定逻辑和上面类似，只是绑定路径换成实体类的属性就行。

二、图片列绑定其他数据源，其余列绑定DataTable #

完全可以实现！核心思路是：文本列直接绑定DataTable的字段，图片列通过转换器（Converter）或多绑定（MultiBinding）关联到另一个数据源。

举个实际场景：DataTable里存的是产品ID、名称，图片存在另一个字典或集合里，根据产品ID匹配图片。

步骤1：写一个ID转图片的转换器 #

public class ProductIdToImageConverter : IValueConverter
{
    // 这里可以注入存放图片的字典/集合
    public Dictionary<int, BitmapImage> ProductImageDict { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is int productId && ProductImageDict.ContainsKey(productId))
        {
            return ProductImageDict[productId];
        }
        // 返回默认占位图
        return new BitmapImage(new Uri("pack://application:,,,/Assets/Default.png"));
    }

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

步骤2：在XAML中配置转换器并绑定 #

先把转换器作为资源，同时传入图片字典：

<Window.Resources>
    <local:ProductIdToImageConverter x:Key="ProductImgConverter">
        <local:ProductIdToImageConverter.ProductImageDict>
            <Dictionary<int, BitmapImage> xmlns:sys="clr-namespace:System;assembly=mscorlib">
                <sys:Int32 x:Key="1">pack://application:,,,/Assets/Headphone.png</sys:Int32>
                <sys:Int32 x:Key="2">pack://application:,,,/Assets/Keyboard.png</sys:Int32>
            </Dictionary<int, BitmapImage>>
        </local:ProductIdToImageConverter.ProductImageDict>
    </local:ProductIdToImageConverter>
</Window.Resources>

然后DataGrid的配置：

<DataGrid ItemsSource="{Binding YourDataTable.DefaultView}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <!-- 绑定DataTable的ProductId列 -->
        <DataGridTextColumn Header="产品ID" Binding="{Binding ProductId}" />
        <!-- 绑定DataTable的ProductName列 -->
        <DataGridTextColumn Header="产品名称" Binding="{Binding ProductName}" />
        <!-- 图片列：通过转换器，用ProductId匹配另一个数据源的图片 -->
        <DataGridTemplateColumn Header="产品图片">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding ProductId, Converter={StaticResource ProductImgConverter}}"
                           Width="60" Height="60" Stretch="Uniform" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

另一种方案：用RelativeSource绑定外部数据源 #

如果图片数据源是ViewModel里的集合，也可以用RelativeSource找到父容器的DataContext，再绑定到那个集合，比如：

<Image Source="{Binding DataContext.ProductImages, 
                        RelativeSource={RelativeSource AncestorType=Window},
                        Converter={StaticResource ProductImgConverter},
                        ConverterParameter={Binding ProductId}}" />

然后在转换器里，根据ConverterParameter的ProductId去ProductImages集合里找对应的图片就行。

总结 #

不管是直接显示图片，还是混合绑定不同数据源，WPF DataGrid都能搞定——关键是用DataGridTemplateColumn来自定义图片列的渲染逻辑，再配合转换器来关联不同数据源的数据。

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