在C# wpf项目中以编程方式向DataGrid添加图片 - 如何实现？

Question

我有一个问题。

我希望能够在C#中以编程方式编写所有的内容，而不是使用VS Designer。

因此，我正在创建一个图像和DataGrid（并将其作为MainWindow Grid的子项添加）：

  Image img = new Image();
  Uri uri = new Uri(@"C:\d1.jpg");
  img.Source = new System.Windows.Media.Imaging.BitmapImage(uri);

  DataGrid dg = new DataGrid();
  grid1.Children.Add(dg);

接下来我想举例添加4列，其中3列是文本，1列是图像。因此，首先需要创建一个包含样例数据的DataTable和DataRow：

  DataTable dt = new DataTable();

  dt.Columns.Add("Column1");
  dt.Columns.Add("Column2");
  dt.Columns.Add("Column3");
  dt.Columns.Add("Column4", typeof(Image)); // type of image!

  DataRow dr = dt.NewRow();
  dr[0] = "aaa";
  dr[1] = "bbb";
  dr[2] = "ccc";
  dr[3] = img; // add a sample image

  dt.Rows.Add(dr);

现在我有一个包含4列和1行数据的DataTable。

然后，我只需要像这样设置DataGrid的ItemsSource：

dg.ItemsSource = dt.DefaultView;

我做错了什么？为什么在最终的网格中，一行中有一个System.Windows.Controls.Image而不是真正的图片？我需要绑定它还是做些其他的操作？

所有的事情都需要通过编程来完成，没有使用设计师。

如何显示真正的图片而不是那个字符串？

- miecio1998

---

天哪！没有设计师？那写XAML怎么办？这不是WinForms。不要在代码中操纵UI元素。 - Federico Berasategui

Answer 1

我仍然不知道如何完全以编程方式实现，但我已经找到了解决方法。

最重要的是，DataGrid（或GridView）不支持图像。为什么呢？别问我。所以我将图像更改为BitmapImage，它就可以完美地工作了。

这是我的修改：

        Uri uri = new Uri(@"C:\d1.jpg");
        BitmapImage bmp = new System.Windows.Media.Imaging.BitmapImage(uri);

        ...

        DataGrid dg = new DataGrid();
        dg.AutoGenerateColumns = false;

        DataGridTemplateColumn col1 = (DataGridTemplateColumn)this.FindResource("dgt");
        dg.Columns.Add(col1);

        DataGridTextColumn col2 = new DataGridTextColumn();
        col2.Header = "Column2";
        col2.Binding = new Binding("Column2");
        dg.Columns.Add(col2);

        ...

        DataTable dt = new DataTable();
        dt.Columns.Add("Column1", typeof(BitmapImage));
        dt.Columns.Add("Column2");

        DataRow dr = dt.NewRow();
        dr[0] = bmp;
        dr[1] = "test";
        dt.Rows.Add(dr);

        ...

        dg.ItemsSource = dt.DefaultView;
        grid1.Children.Add(dg);

但是我需要在XAML中添加资源（不知道如何编程）。所以这里有一段代码：

<Window.Resources>
    <DataGridTemplateColumn x:Key="dgt" Header="Column1" Width="SizeToCells">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Image Source="{Binding Column1}" />
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</Window.Resources>

一切都很好地运作着！

对于GridView或ListView也是一样的。 希望能对某些人有所帮助。

- miecio1998

Answer 2

这里有一个超级简单的例子，对我帮助很大

http://www.c-sharpcorner.com/Forums/Thread/80586/displaying-images-in-datagrid-in-wpf-C-Sharp.aspx

我为MVVM适配了示例代码

视图

    <DataGrid x:Name="dgGrid" ItemsSource="{Binding collection}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="Image">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Image Height="25" Width="50" Source="{Binding path}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding name}"/>
    </DataGrid>

实体

public class File
{
    public string path{ get; set; }
    public string name{ get; set; }
}

视图模型

var collection = new ObservableCollection<File>();
collection.Add(new File() { path=@"C:\Users\homeIcon.png", name="Home" });

- Rodolfo Gaspar

---

当AutoGenerateColumns设置为“True”时，如何实现这一点？或者，如果必须将AutoGenerateColumns设置为“False”，如何创建多个列模板并根据ItemsSource动态切换它们？ - Sean Worle