multiple images in datagrid

Sep 30, 2008 at 6:01 AM
I have a column called ContactType....this can have multiple options.
can be Customer,Supplier,Manufacturer, Contact, Chain.
It can be that Contact John, can be Customer,Supplier and a Chain .
So, under this column, i have to display 3 different icons/images.
How can i get this?

Looking forward for a cool solution.
some example code please.
Sep 30, 2008 at 12:26 PM
So if a cell in this column is a customer you want to display a customer image, if it is a supplier you want to display a supplier image, etc.  Did I understand that correctly?  If so, one possible solution is to use a TemplateColumn with an Image as the DataTemplate and bind the source to the value of your contacttype with a converter to set it to the correct image/icon.
Sep 30, 2008 at 12:39 PM
Edited Sep 30, 2008 at 1:44 PM
not exactly.
I have two tables.
Contact and Details

Contact table has three fields....

Details table has two fields..
Dt_type (1-Customer, 2-Supplier, 3-manufacturer,4-Designer and so on.... )

Contact data
1, John,38
2, Richard,28

Details data

So, my data grid should show

id    name     age      type
1    John        38       3,4 (instead of 3,4 we have to show two images)
2    Richard   28       1,3,5 (instead of 1,3,5 we have to show three images)

To be more specific.

I have one field ContactType.
The data to this filed should be filled by rea
If the contacttype is both Contact and Customer, then, i have to display 2 images in this column
If the contacttype is Contact,manufacturer and Customer, then, i have to display 3 images in this column.

hope, its clear, please drop note, if need more info

Sep 30, 2008 at 7:11 PM
You can still follow a similar approach of using a TemplateColumn as I describe above.  Since it is going to display a list of images you can use an ItemsControl as the DataTemplate and a converter to set the correct number of items.  Here is a quick example (there are some hard-coded values but it should give you some ideas on getting started):

<dg:DataGridTemplateColumn Header="ContactType">
            <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=MyContactType, Converter={StaticResource ContactTypeConverter}, Mode=OneWay}">
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                        <ContentControl MaxWidth="50" MaxHeight="{TemplateBinding Height}" Content="{Binding}" />




object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    ObservableCollection<Image> contactValues = new ObservableCollection<Image>();
    Person.ContactType contactType = (Person.ContactType)value;
    if ((contactType & Person.ContactType.Contact) == Person.ContactType.Contact)
new Image { Source = new BitmapImage(new Uri("pack://application:,,,/" + @"Assets\Contact.jpg")) } );
    if ((contactType & Person.ContactType.Customer) == Person.ContactType.Customer)
new Image { Source = new BitmapImage(new Uri("pack://application:,,,/" + @"Assets\Customer.jpg")) } ); 
    if ((contactType & Person.ContactType.Manufacturer) == Person.ContactType.Manufacturer)
new Image { Source = new BitmapImage(new Uri("pack://application:,,,/" + @"Assets\Manufacturer.jpg")) } ); 
    return contactValues;



Oct 1, 2008 at 8:53 AM


sorry, I didnot understand this quite right.
I tried this but, not working.

can you also post  the person class, may be there is something you wrote different.


Oct 2, 2008 at 9:35 PM
I've only included the relevant lines of code:

    public class Person : INotifyPropertyChanged
        private ContactType contactType = ContactType.Contact;     

        public ContactType MyContactType
            get { return contactType; }
                contactType = value;

        public enum ContactType

public class People : ObservableCollection<Person>
        private Random random = new Random();

        public People()
            Add(new Person("James", "K.", "Polk", GenerateRandomDate(), Person.ContactType.Contact | Person.ContactType.Customer));
            Add(new Person("Zachary", "Taylor", GenerateRandomDate()));
            Add(new Person("Millard", "Fillmore", GenerateRandomDate()));
            Add(new Person("Franklin", "Pierce", GenerateRandomDate()));
            Add(new Person("James", "Buchanan", GenerateRandomDate()));
            Add(new Person("Abraham", "Lincoln", GenerateRandomDate()));
            Add(new Person("Andrew", "Johnson", GenerateRandomDate()));
            Add(new Person("Ulysses", "S.", "Grant", GenerateRandomDate(), Person.ContactType.Customer | Person.ContactType.Manufacturer));
            Add(new Person("Rutherford", "B.", "Hayes", GenerateRandomDate()));
            Add(new Person("James", "Garfield", GenerateRandomDate()));
            Add(new Person("Chester", "A.", "Arthur", GenerateRandomDate(), Person.ContactType.Manufacturer));
            Add(new Person("Grover", "Cleveland", GenerateRandomDate()));
            Add(new Person("Benjamin", "Harrison", GenerateRandomDate()));
            Add(new Person("William", "McKinley", GenerateRandomDate()));
            Add(new Person("Theodore", "Roosevelt", GenerateRandomDate()));
            Add(new Person("William", "H.", "Taft", GenerateRandomDate(), Person.ContactType.Customer));
            Add(new Person("Woodrow", "Wilson", GenerateRandomDate()));

Let me know if this helps with your problem.

Oct 6, 2008 at 8:18 AM
I could not make it to work.
Something is missing, i am not able to get there.
Could you post the whole solution?

Oct 7, 2008 at 1:16 AM
The only other thing missing from the code snippets above is to set the DataGrid.ItemsSource = new People().  Could you explain a little more what problems you are having.
Oct 8, 2008 at 1:47 PM
Itemsource is set.
The column not displaying any things.
Would appriciate, if you can post the solution.
Oct 10, 2008 at 9:55 AM
I sent couple mails with sln.
I am not sure, if you got.

I tried to attach the sln here, but, no possibility.
pl. respond.