How do I add an image and data to a WPF Data Grid

Question

2.20/5 (4 votes)

See more:

VS2008

I would like to add an image and data to a Data Grid.
I have written code to add an image to the first column, but I also want to add the game name in the second column in C#.

My WPF Code:

XML

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="334" Width="686" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" Loaded="Window_Loaded">
    <Grid>
        <my:DataGrid AutoGenerateColumns="False" Margin="144,60,141,0" Name="dataGrid1" VerticalAlignment="Top"
                        ItemsSource="{Binding}" Height="40">
            <my:DataGrid.Columns>
                <my:DataGridTemplateColumn Header="Icon">
                    <my:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Height="25" Width="50" Source="{Binding}" />
                        </DataTemplate>
                    </my:DataGridTemplateColumn.CellTemplate>
                </my:DataGridTemplateColumn>
                <my:DataGridTextColumn Header="Game Name" Binding="{Binding Path=Position}"/>
                </my:DataGrid.Columns>
        </my:DataGrid>
    </Grid>
</Window>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
         Loaded += new RoutedEventHandler(Window_Loaded);
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List<string> imageList = new List<string>();
            imageList.Add(@"D:\play.png");
            dataGrid1.ItemsSource = imageList;
        }
    }
}

If anyone can help me I would be most grateful

Posted 31-May-11 2:10am

vishal_h

Updated 31-May-11 2:26am

Rob Branaghan

v3

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tarun.K.S · Answer 1 · 2011-05-31T02:32:00

Since you are having a list of strings containing the path of the Images, you have to use a Converter class to convert the string to BitmapImage.

C#

namespace WpfApplication1
{
class ConvertTextToImage:IValueConverter
    {
        #region IValueConverter Members
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if(value!=null)
            {
              return new BitmapImage(new Uri(value.ToString(), UriKind.RelativeOrAbsolute));
            }
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
        #endregion
    }
}

Use the XAML as follows (removed the ItemsSource from the XAML)

XML

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="334" Width="686" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" Loaded="Window_Loaded">
    <window.resources>
       <local:converttexttoimage x:key="convert" xmlns:x="#unknown" xmlns:local="#unknown" />
    </window.resources>
    <Grid>
        <my:DataGrid AutoGenerateColumns="False" Margin="144,60,141,0" Name="dataGrid1" VerticalAlignment="Top"
                        Height="40">
            <my:DataGrid.Columns>
                <my:DataGridTemplateColumn Header="Icon">
                    <my:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Height="25" Width="50" Source="{Binding Converter={StaticResource convert}}" />
                        </DataTemplate>
                    </my:DataGridTemplateColumn.CellTemplate>
                </my:DataGridTemplateColumn>
                <my:DataGridTextColumn Header="Game Name" Binding="{Binding Path=Position}"/>
                </my:DataGrid.Columns>
        </my:DataGrid>
    </Grid>
</Window

Should work now.

Abhinav S · Answer 2 · 2011-05-31T02:37:00

Solution 2

Instead of binding to a list of type string, tou will need to bind to a list of a model type. This model will consist of two properties image and image name.

Create a class (say GameModel) with two properties Image and Name and then use this (List<gamemodel) to bind to your itemsource instead of <List<string>.

Posted 31-May-11 2:37am

Abhinav S

Updated 31-May-11 2:39am

v2

Comments

Tarun.K.S 31-May-11 8:47am

Good advice. 5+

Abhinav S 31-May-11 8:49am

Thanks Tarun.

vishal_h 1-Jun-11 1:00am

hii Abhinav Sir Should i get the GameModel class code ...

vishal_h 1-Jun-11 3:23am

thank you sir i have done it

Tarun.K.S 1-Jun-11 4:14am

Then please vote and accept the answer(s) that have helped you. Its considered as a good thing to do as others are taking their time helping to solve your queries. Rewarding them by voting and accepting the answer is much appreciated.

Abhinav S 1-Jun-11 10:15am

Good point Tarun.

Tarun.K.S 1-Jun-11 14:01pm

Thanks boss. Now vishal is in my "Not to help" list. I wish there was some system in which super(elite) members like you can have the power to accept the answers in such cases. :)
But this is again debatable.

How do I add an image and data to a WPF Data Grid

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How do I add an image and data to a WPF Data Grid

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us