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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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.