WPF DataGrid绑定数据库二进制图片出现绑定错误求助

问题说明 #

在WPF DataGrid中显示数据库存储的二进制图片时，图片可正常显示，但会出现绑定错误；上下滚动DataGrid时，错误数量持续增加，且图片字段允许为空。

现有代码 #

DataGrid的XAML代码 #

<DataGridTemplateColumn Header=" Image" Width=" 95">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate >
            <Image  Source="{Binding ProductImage ,TargetNullValue={x:Null}}" Width=" 80" Height=" 80"></Image>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.HeaderStyle >
        <Style TargetType="{x:Type DataGridColumnHeader }">
            <Setter Property="FontFamily" Value="Arial Black"/>
            <Setter Property="HorizontalContentAlignment"  Value="Center"/>
            <Setter Property="Foreground"  Value="#FF3211B8" />
            <Setter Property="FontSize"  Value="12"/>
        </Style>
    </DataGridTemplateColumn.HeaderStyle>
</DataGridTemplateColumn>

二进制图片保存的C#代码 #

FileStream fileStream = new FileStream(FilePath, FileMode.Open, FileAccess.Read);
byte[] ImgByteArr = new byte[fileStream.Length];
fileStream.Read(ImgByteArr, 0, ImgByteArr.Length);
fileStream.Close();

错误原因 #

直接将byte[]类型的ProductImage绑定到Image.Source，WPF无法自动完成byte[]到ImageSource的类型转换；虽然图片能显示，但绑定系统会抛出转换错误。加上DataGrid的UI虚拟化机制，滚动时会重复创建/复用单元格元素，导致错误数量不断增加。另外TargetNullValue={x:Null}的写法无法正确处理空值场景，加剧了绑定错误。

解决方案 #

实现一个值转换器，将byte[]转换为BitmapImage，同时处理空值情况：

1. 创建值转换器类 #

using System;
using System.Globalization;
using System.IO;
using System.Windows.Data;
using System.Windows.Media.Imaging;

public class ByteArrayToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null || !(value is byte[] byteArray) || byteArray.Length == 0)
            return null;

        try
        {
            using (var stream = new MemoryStream(byteArray))
            {
                var bitmapImage = new BitmapImage();
                bitmapImage.BeginInit();
                bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
                bitmapImage.StreamSource = stream;
                bitmapImage.EndInit();
                return bitmapImage;
            }
        }
        catch
        {
            return null;
        }
    }

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

2. 在XAML中引用转换器 #

首先在Window/UserControl的Resources中声明转换器（替换YourProjectName为实际项目命名空间）：

<Window.Resources>
    <local:ByteArrayToImageConverter x:Key="ByteArrayToImage"/>
</Window.Resources>

3. 修改Image的绑定 #

将原绑定改为使用转换器，无需再用TargetNullValue：

<Image Source="{Binding ProductImage, Converter={StaticResource ByteArrayToImage}}" 
       Width="80" Height="80"/>

这样就能正确处理byte[]到图片的转换，同时避免空值导致的绑定错误，滚动DataGrid时也不会再产生大量错误。

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