Displaying Images based on column value in WPF datagrid

Question

I have a datatable queried from SQL server table.
The data table contains only one column, it will have numbers from 0 -9.
I need to display that in WPF datagrid. I have done displaying as ordinary datagrid.
But I need to display a separate picture and some text for that specific number in that column.
Is it possible thorugh Datagrid?

Answer 1

Use DataGridTemplateColumn and bind it using an IValueConverter that will transform your int into an ImageSource

Here is a small working example :

MainWindow.xaml

<Window x:Class="StackOverflow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:StackOverflow"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <local:IntToImageConverter x:Key="IntToImageConverter" />
    </Window.Resources>

    <DataGrid>

        <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Converter={StaticResource IntToImageConverter}}" />
                            <TextBlock Text="Image number : " Margin="5, 0, 0, 0" />
                            <TextBlock Text="{Binding}" Margin="5, 0, 0, 0" />
                    </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>

        <sys:Int32>0</sys:Int32>
        <sys:Int32>1</sys:Int32>

    </DataGrid>

</Window>

MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace StackOverflow
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class IntToImageConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            ImageSource result = null;
            var intValue = (int)value;
            switch (intValue)
            {
                case 0:
                    {
                        result = new BitmapImage(new Uri(@"your_path_to_image_0"));
                        break;
                    }

                case 1:
                    {
                        result = new BitmapImage(new Uri(@"your_path_to_image_1"));
                        break;
                    }
            }
            return result;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}