c# - DataGrid shows path of image instead of image itself

Question

The following lines end up showing the path instead of the image it leads to. The AutoGenerateColums is set to true, setting it to false will end up in totally empty lines.

System.Data.DataTable DataTable = new System.Data.DataTable();
System.Data.DataColumn DataColumn = new System.Data.DataColumn();

Uri uri = new Uri(@"C:/Users/User/Desktop/szagdoga/error.png");
BitmapImage img = new BitmapImage(uri);
DataColumn.DataType = img.GetType();
DataColumn.ColumnName = ("this");

DataTable.Columns.Add("Test #");
DataTable.Columns.Add(DataColumn);
DataTable.Columns.Add("Min Range");
DataTable.Columns.Add("Max Range");
DataTable.Columns.Add("Result");
for (int i = 6; i <50; i++)
    DataTable.Rows.Add(ExcelFile[0, i],img, ExcelFile[1,i],0,0,0);

ChannelDataGrid.ItemsSource = DataTable.DefaultView;

Please help me somehow show the images! Thank you.

Answer 1

first of all, DataGrid generate DataGridTextColumns by default and we have to use AutoGeneratingColumn event to change type of column. We need to use DataGridTemplateColumn which contains Image in template (image source should be bound to correct DataTable column). The best place to define template is in Resources.

here is how the issue can be solved:

xaml part

<DataGrid Name="ChannelDataGrid" AutoGeneratingColumn="ChannelDataGrid_OnAutoGeneratingColumn">

    <DataGrid.Resources>
        <DataTemplate x:Key="ImgCell">
            <Image Source="{Binding Path=Img}"/>
        </DataTemplate>
    </DataGrid.Resources>        
</DataGrid>

code:

private void InitializeDataTable()
{
    System.Data.DataTable DataTable = new System.Data.DataTable
    {
        Columns = {"Test #", "Img", "Min Range", "Max Range", "Result"}
    };

    Uri uri = new Uri(@"C:/Users/User/Desktop/szagdoga/error.png");

    for (int i = 6; i < 50; i++)
        DataTable.Rows.Add(ExcelFile[0, i], uri, ExcelFile[1, i], 0, 0);

    ChannelDataGrid.ItemsSource = DataTable.DefaultView;
}

private void ChannelDataGrid_OnAutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
    if (e.PropertyName == "Img")
    {
        // replace text column with image column
        e.Column = new DataGridTemplateColumn
        {
            // searching for predefined tenplate in Resources
            CellTemplate = (sender as DataGrid).Resources["ImgCell"] as DataTemplate,
            HeaderTemplate = e.Column.HeaderTemplate,
            Header = e.Column.Header
        };
    }
}