WPF ComboBox with image

Question

I am trying to fill Combo with images. It is defined as:

<ComboBox SelectedItem="{Binding SelectedLangComboItem}" ItemsSource="{Binding Languages}"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Source="{Binding Image}" /> <TextBlock Text="{Binding Label}" /> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> 

If the elements are LanguageItem classes:

 public class LanguageItem { public System.Drawing.Bitmap Image { get; set; } public string Label { get; set; } public string Culture { get; set; } public LanguageItem(System.Drawing.Bitmap image, string label, string culture) { Image = image; Label = label; Culture = culture; } } 

Now, in my ViewModel c'tor I do:

  _Languages = new ObservableCollection<LanguageItem>(); System.Reflection.Assembly app = System.Reflection.Assembly.GetExecutingAssembly(); System.IO.Stream file; file = app.GetManifestResourceStream("MyNamespace.Images.FLAG1.gif"); _Languages.Add(new LanguageItem(new Bitmap(file), "ITALIAN", "it-IT")); file = app.GetManifestResourceStream("MyNamespace.Images.FLAG2.gif"); _Languages.Add(new LanguageItem(new Bitmap(file), "ENGLISH", "en-EN")); this.SelectedLangItem = _Languages[0]; 

Images are embedded resources. Here I have two problems:

• Images are not displayed;

• Element not selected, SelectedLangItem:

  public LanguageItem SelectedLangItem {get {return _SelectedLangItem; } set {if (_SelectedLangItem == value) return;

    _SelectedLangItem = value; this.RaisePropertyChanged("SelectedLangItem"); } } 

Answer 1

Using

 new BitmapImage(new Uri("MyNamespace.Images.FLAG1.gif", UriKind.Relative)); 

since it must implement ImageSource

And in relation not selected: the property name is "SelectedLangItem", but in xaml SelectedLangComboItem, if you are not mistaken.

CODE:

 this.RaisePropertyChanged("SelectedLangItem"); 

XAML:

 <ComboBox SelectedItem="{Binding SelectedLangComboItem}" 

Answer 2

Your problem is that you are trying to bind the Image property to the Image.Source property, which is of type ImageSource .

The easiest solution is to add your actual image files to the folder and change the Image property in your class to a string containing the path to the image in this format:

 /ApplicationName;component/ImageFolderName/ImageName.png 

Then you can correctly bind this string (which the Framework converts to an ImageSource object) to the Image.Source property in the DataTemplate .

Answer 3

Try entering the xaml code and link the list of images to combobox ...

 <Window.Resources> <DataTemplate x:Key="cmbTemplate"> <WrapPanel Margin="0 5 0 5" Height="80"> <Image Width="65" Height="65" Stretch="Fill" Source="{Binding Photo}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,15,0"/> <Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/> </WrapPanel> </DataTemplate> </Window.Resources> <StackPanel HorizontalAlignment="Center"> <Label Content="Dropdown list with Image" HorizontalAlignment="Center" FontSize="30" Margin="20"/> <ComboBox x:Name="lstwithimg" HorizontalAlignment="Center" VerticalAlignment="Top" ItemTemplate="{StaticResource cmbTemplate}" Height="80" Width="400"/> </StackPanel> 

Check below ... for a better understanding of a living example ...

http://www.codescratcher.com/wpf/wpf-combobox-with-image/