Adding an image performs a DataGrid programmatically in a C # wpf project - how?

Question

I have a problem.

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

So, I create an image and a DataGrid (and add it as a child of the 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 text and one image. So first I need to create a DataTable and a DataRow with data samples:

  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 set the ItemsSource DataGrid as follows:

 dg.ItemsSource = dt.DefaultView; 

What am I doing wrong? Why on the last grid is System.Windows.Controls.Image in the line instead of the real image? Do I need to tie it or something else?

All I need to do programmatically, without a designer.

How to display the real image instead of this line?

Answer 1

I still don’t know how to do it 100% programmatically, but I understand.

Most importantly, the DataGrid (or GridView) does not support Image. What for? Do not ask me. So I changed the image to BitmapImage and it works like a charm.

So there are 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 (I 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 everything works FINE!

Same for GridView or ListView. Hope this helps someone.

Answer 2

here is a super simple example that helped me a lot

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

I adapted the sample code for 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> 

An object

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