如何在 WPF、C# 中将图像缩略图和普通文本列添加到数据网格？答案

【问题标题】：how to add image thumbnail and normal texts columns to datagrid in WPF, C#?如何在 WPF、C# 中将图像缩略图和普通文本列添加到数据网格？
【发布时间】：2019-01-27 03:40:43
【问题描述】：

我想从 csv 文件中检索数据（它们都是图像参数）并将它们显示在数据网格中。此外，我想显示图像的缩略图的每个条目。如何在数据网格中同时拥有图像和其他条目？所以，我有

实体

public class ImageProperties
{
     public string ImageThumbNailPath{ get; set;}
     public string ImageFileName{ get; set;}
     public double Sharpness{ get; set;}
     public int ImageWidth{ get; set;}
     public int ImageHt{ get; set;}
     ...
}

Xaml

<DataGrid x:Name="dataGridView" ItemsSource="{Binding ImagePropertiesList}" AutoGenerateColumns="False">
                    <DataGrid.Columns>
                        <DataGridTemplateColumn Header="Image">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Image Height="25" Width="50" Source="{Binding ImageThumbNailPath}" />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>
                    </DataGrid.Columns>
                    </DataGrid>

来自 ViewModel：

var ImagePropertiesList = new ObservableCollection<ImageProperties>();
ImagePropertiesList.Add(new ImageProperties() { 
ImageThumbNailPath=@"C:\Users\imgIcon.tif", ImageFileName="imgIcon.tif", 
Sharpness = 4.5, ImageWidth=50, ImageHt = 50 });

在上面，我既看不到图像也看不到文本数据...我看到我没有启用显示文本的方法，但不确定在与图像结合时应该如何做到这一点。

我的 ImageProperties 类可能会被修改以包含更多属性，因此我不想为每个属性包含如下内容。

<DataGridTextColumn Header="ImageWidth" Binding="{Binding ImageWidth}"/>

有没有办法我仍然可以在第一列中显示图像并在后续列中显示所有其他属性？请指导我。

【问题讨论】：

对我来说似乎很好。可能你有一些绑定错误。
DataGrid shows path of image instead of image itself的可能重复
我检查了绑定，它看起来不错。我在 DataGridTextColumn 下启用了文本绑定，现在正在显示文本，但我还没有看到图像。知道我错过了什么吗？

标签： c# wpf image datagrid

【解决方案1】：

ImagePropertiesList 必须是 ViewModel 中的公共属性。

public ObservableCollection<ImageProperties> ImagePropertiesList
{
    get;
    set;
}

通过此更改，您必须从当前的 ImagePropertiesList 实例中删除 var

ImagePropertiesList = new ObservableCollection<ImageProperties>();

如果这不起作用，请确保将 DataContext 设置为您的 ViewModel。

【讨论】：