Adding image do DataGrid programically in C# wpf project - how?

Question

I have a problem.

I want to write ALL things programically in C#, without VS Designer.

So, I'm creating an image and and DataGrid (and I'm adding it as a child of 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);

Then I want to add 4 columns for example, 3 of text and one of image. So at first I need to create a DataTable and DataRow with sample data:

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

Now I have a DataTable with 4 columns and 1 row of data.

Then all I need to do is to set ItemsSource of DataGrid like this:

dg.ItemsSource = dt.DefaultView;

What I'm doing wrong? Why on the final grid there is System.Windows.Controls.Image in a row instead of real image? Do I need to bind it or something?

All things I need to do programically, without designer.

How to display real image instead of that string?

OMG! without designer? what about writing XAML? this is not winforms. do not manipulate UI elements in code. — Federico Berasategui, Nov 23 '12 at 14:54

score 4 · Answer 1 · answered Nov 23 '12 at 23:16

Still don't know how to do it in 100% programically, but i figure it out.

The most important thing is that DataGrid (or GridView) doesn't support Image. Why? Don't ask me. So i changed image to BitmapImage and it works like a charm.

So there is my modifications:

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

But i needed to add Resources to XAML (don't know how to program it). So there is a code:

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

And all is working FINE!

The same for GridView or ListView. Hope it helps someone.

score 0 · Answer 2 · answered Oct 04 '15 at 02:32

here has a super simple example that helped me so much

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

I adapted the sample code for the MVVM

View

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

Entity

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

ViewModel

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

How does one do this when AutoGenerateColumns is set to "True"? Or alternatively, if AutoGenerateColumns must be "False", how can one create multiple Column templates and dynamically switch between them depending on the ItemsSource? — Sean Worle, Feb 07 '19 at 04:50

Adding image do DataGrid programically in C# wpf project - how?

2 Answers2

Linked