在 DataGrid 列中显示图像

Question

我正在尝试在 DataGrid 列中的其他数据旁边显示图像。 我的模型看起来像这样：

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 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>

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

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

Answer 1

如果您的

Image

属于

System.Drawing.Bitmap

，您应该将其更改为

System.Windows.Media.Imaging.BitmapImage

，然后还更改

Image.Source

绑定，该绑定目前将整个

Person

对象绑定到其

Image

属性

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Answer 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();
        }
    }

Answer 6

首先，您将整个数据对象绑定到图像，而不仅仅是数据对象的“图像”。

像这样更改您的 XAML 代码：

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

第二： XAML

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

确实需要 ImageSource 或 BitmapSource 作为数据，而不是 Windows 位图。 您必须将位图转换为 BitmapSource 并相应地更改您的数据对象：

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

这是一个将 Drawing.Bitmap 转换为 BitmapSource 的工作示例：

public static BitmapSource 
 Convert(System.Drawing.Bitmap bitmap)
{
    var bitmapData = bitmap.LockBits(
    new System.Drawing.Rectangle(0, 0, bitmap.Width, 
        bitmap.Height),
                 
      System.Drawing.Imaging.ImageLockMode.ReadOnly, 
     bitmap.PixelFormat);

    var bitmapSource = BitmapSource.Create(
    bitmapData.Width, bitmapData.Height,
    bitmap.HorizontalResolution, 
     bitmap.VerticalResolution,
    PixelFormats.Bgr24, null,
    bitmapData.Scan0, bitmapData.Stride * 
    bitmapData.Height, bitmapData.Stride);

    bitmap.UnlockBits(bitmapData);

    return bitmapSource;}

现在您可以从文件中加载位图并将其转换并将其绑定到您的数据对象：

person = new Person()
person.Image =  Convert(new Bitmap("myimage.png"));

.....