在 DataGrid-Column 中显示图像答案

【问题标题】：Display an image in a DataGrid-Column在 DataGrid-Column 中显示图像
【发布时间】：2014-07-20 01:41:35
【问题描述】：

我正在尝试在 DataGrid-Column 中显示其他数据旁边的图像。我的模型如下所示：

public class Person 
{
    public string Name { get; set; }
    public string Address { get; set; }
    public Bitmap Image { get; set; }
}

视图模型：

public ObservableCollection<Person> Persons
    {
        get
        {
           return this.persons;
        }

        set
        {
            this.persons = value;
        }
    }

我的 DataGrid 是这样的：

<DataGrid Name="Persons"
              Grid.Row="1"
              Grid.Column="0"
              Margin="10"
              AutoGenerateColumns="False"
              IsReadOnly="True"
              ItemsSource="{Binding Path=Persons}">
        <DataGrid.Columns>
            <DataGridTemplateColumn Width="80">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn Width="120"
                                Binding="{Binding Path=Name}"
                                Header="Name" />
            <DataGridTextColumn Width="120"
                                Binding="{Binding Path=Address}"
                                Header="Address" />
        </DataGrid.Columns>
    </DataGrid>

姓名和地址正确显示，但图像为空... 你知道我做错了什么吗？

提前致谢，祝你有美好的一天

【问题讨论】：

你的问题是stackoverflow.com/questions/7938779/…的副本
使用<Image Source="{Binding Image}" />
@xeraphim，Image 是 System.Drawing.Bitmap 类型吗？如果是，您可以将其更改为使用System.Windows.Media.Imaging.BitmapImage吗？
@dkozl 感谢您的提示，我为 Persons 创建了一个 Dto，因为我无法更改原始模型的类型，但它仍然没有显示 :(
@dkozl 我错了，它现在可以工作了：D 谢谢！如果您可以回答而不是发表评论，我会将其设置为已接受的答案:) 谢谢！

标签： c# wpf mvvm binding datagrid

【解决方案1】：

在您的项目中添加图像文件并将您的图像添加到同一文件夹中。使用以下代码访问

<Columns> 
<ItemTemplate >
<asp:ImageButton ID="ImageButton1" runat ="server" CommandName="Preview" ImageUrl="~/images/MSWord_Icon.jpg"/>
</ItemTemplate>
</Columns>

【讨论】：

我相信他/她使用的是 WPF，而不是 ASP.NET ;-)

【解决方案2】：

如果您的Image 属于System.Drawing.Bitmap，则应将其更改为System.Windows.Media.Imaging.BitmapImage，然后还将Image.Source 绑定更改为当前绑定到整个Person 对象的Image 属性

<Image Source="{Binding Image}" />

【讨论】：

还是不行。它改为显示图像位置的路径。您会对此提出任何解决方案吗？

【解决方案3】：

尝试使用该代码来显示您的图像：

 <DataGridTemplateColumn Width="80">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Image Source="{Binding Image}" />
            </DataTemplate>
       </DataGridTemplateColumn.CellTemplate>
     </DataGridTemplateColumn>

【讨论】：

嘿moiz 感谢您的回答，但图像仍然没有显示...在设计器中，显示提示“无法解析数据上下文中的属性图像...”..
能否请您展示一个人物图像集的示例

【解决方案4】：

您需要为图像设置一些高度和宽度，例如

<Image Source="{Binding}" Height="200" Width="200"/>

【讨论】：

嘿 harjeet 我试图设置高度和宽度，但它仍然不显示图像:(

【解决方案5】：

xmlns:converter="clr-namespace:ProjectName.Converters"
<Window.Resource>
 <converter:BindableConverter x:Key="bindableConverter"/>
</Window.Resource>    
<DataGridTemplateColumn Header="HeaderName">
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Image x:Name="BindImg" Height="35" Width="35" Source="{Binding IsBindable,Converter={StaticResource bindableConverter}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>                             
                            </DataGridTemplateColumn> 


 public class BindableConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string imageSource = string.Empty;
            bool isBinded;
            if (value == null || string.IsNullOrWhiteSpace(value.ToString()))
            {
                imageSource = "../../Resource/Images/unbinded.jpg";
            }
            if (Boolean.TryParse(value.ToString(), out isBinded))
            {
                if (isBinded)
                {
                    imageSource = "../../Resource/Images/binded.jpg";
                }
                else
                {
                    imageSource = "../../Resource/Images/unbinded.jpg";
                }
            }
            return imageSource;
        }

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

【讨论】：