how to add image thumbnail and normal texts columns to datagrid in WPF, C#?

Question

I want to retrieve data(they are all image parameters) from csv file and display them in the datagrid. Alongside, each entry I want to display thumbnail of an image. How do I go about having both image and other entries in the datagrid ? So, here I have

Entity

public class ImageProperties
{
     public string ImageThumbNailPath{ get; set;}
     public string ImageFileName{ get; set;}
     public double Sharpness{ get; set;}
     public int ImageWidth{ get; set;}
     public int ImageHt{ get; set;}
     ...
}

Xaml

<DataGrid x:Name="dataGridView" ItemsSource="{Binding ImagePropertiesList}" AutoGenerateColumns="False">
                    <DataGrid.Columns>
                        <DataGridTemplateColumn Header="Image">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Image Height="25" Width="50" Source="{Binding ImageThumbNailPath}" />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>
                    </DataGrid.Columns>
                    </DataGrid>

From ViewModel:

var ImagePropertiesList = new ObservableCollection<ImageProperties>();
ImagePropertiesList.Add(new ImageProperties() { 
ImageThumbNailPath=@"C:\Users\imgIcon.tif", ImageFileName="imgIcon.tif", 
Sharpness = 4.5, ImageWidth=50, ImageHt = 50 });

With above, I'm neither able to see the image nor the text data...I see I'm not enabling a way to display the texts but not sure how I should do that when combining with image.

My ImageProperties class might get modified to include more properties hence i don't want to include something like below for each property.

<DataGridTextColumn Header="ImageWidth" Binding="{Binding ImageWidth}"/>

Is there a way I could still show the image in the first column and all other properties in subsequent columns ? Please, guide me.

Possible duplicate of [DataGrid shows path of image instead of image itself](https://stackoverflow.com/questions/40358111/datagrid-shows-path-of-image-instead-of-image-itself) — ASh, Aug 21 '18 at 07:48
I checked the binding, it looks good to me. I enabled binding for text under DataGridTextColumn and now texts are displaying but i don't see the image yet. Any idea what i'm missing? — jamilia, Aug 21 '18 at 17:36

dontbyteme · Answer 1 · 2018-08-21T07:39:40.693

0

ImagePropertiesList must be a public property in your ViewModel.

public ObservableCollection<ImageProperties> ImagePropertiesList
{
    get;
    set;
}

With this change you must then just remove var from your current instantiation of ImagePropertiesList

ImagePropertiesList = new ObservableCollection<ImageProperties>();

If this does not work make sure that the DataContext is set to your ViewModel.

edited Aug 21 '18 at 07:39

answered Aug 21 '18 at 07:26

dontbyteme

1,221
1
11
23

how to add image thumbnail and normal texts columns to datagrid in WPF, C#?

1 Answers1