How to bind images to a Combobox in WPF, getting the images from a lookup.

Question

I have a WPF combobox that I would like to bind to an observable collection of Teams on my ViewModel class e.g.

class Team 
{
  public int Id { get; set; }
  public string Name { get; set; }
  public int CountryId { get; set; }
}

class ViewModel
{
   public ObservableCollection<Team> Teams { get; set; }
   public IDictionary<int, Image> CountryFlags { get; set; }
}

I'd like to have the combobox display the flag and name of each team, what is the best way to do this?

I don't want to add the image directly to the team object if I can avoid it and would be happy to move the CountryFlags lookup to another class if need be.

Answer 1

You'll need to make a custom IValueConverter for this. Basically, you'll want to have the converter convert from Team -> Image, and have it do the lookup within the Dictionary based on the CountryId in the Team.