How to declare a combobox element table element that has Itemource as Enum values ​​in WPF?

Question

I have enum let say

enum MyEnum { FirstImage, SecondImage, ThirdImage, FourthImage }; 

I linked this Enum to my combobox in XAML.

When defining combobox, I defined ItemTemplate from combox to take two UI elements:

• Text block displaying an enumeration value (Description)
• Picture

I have done a lot in XAML.

I am wondering where can I specify an image that responds to each element of the Enum value in the drop-down list? Is this possible with a data trigger?

I am very grateful if anyone has XAML for this scenario.

Thank you very much in advance

Answer 1

You can use a DataTrigger, but would be more convenient if you would use a converter. Here's a sample that uses a DataTrigger to represent the image and text on its own, and then the same DataTrigger to display the image and text in the ListBox and ComboBox, and finally ListBox and ComboBox, which use the converter to display the image and text:

Xaml

 <Window x:Class="WpfSandbox.EnumToImage.EnumToImage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:local="clr-namespace:WpfSandbox.EnumToImage" Title="Enum To Image" SizeToContent="WidthAndHeight" > <Window.DataContext> <local:ImageViewModel x:Name="Model" /> </Window.DataContext> <Window.Resources> <ObjectDataProvider x:Key="EnumDataProvider" MethodName="GetValues" ObjectType="{x:Type System:Enum}"> <ObjectDataProvider.MethodParameters> <x:Type TypeName="local:Decade"/> </ObjectDataProvider.MethodParameters> </ObjectDataProvider> <local:DecadeEnumImageConverter x:Key="ImageConverter" /> <ControlTemplate x:Key="ImageTemplate" > <StackPanel Orientation="Horizontal"> <Image x:Name="MyImage" Width="64" Height="32" /> <TextBlock Text="{Binding}" VerticalAlignment="Center" /> </StackPanel> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding}" Value="Ninties" > <DataTrigger.Setters> <Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/90s.jpg"/> </DataTrigger.Setters> </DataTrigger> <DataTrigger Binding="{Binding}" Value="Eighties" > <DataTrigger.Setters> <Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/80s.jpg"/> </DataTrigger.Setters> </DataTrigger> <DataTrigger Binding="{Binding}" Value="Seventies" > <DataTrigger.Setters> <Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/70s.jpg"/> </DataTrigger.Setters> </DataTrigger> <DataTrigger Binding="{Binding}" Value="Sixties" > <DataTrigger.Setters> <Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/60s.jpg"/> </DataTrigger.Setters> </DataTrigger> <DataTrigger Binding="{Binding}" Value="Fifties" > <DataTrigger.Setters> <Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/50s.jpg"/> </DataTrigger.Setters> </DataTrigger> <DataTrigger Binding="{Binding}" Value="Forties" > <DataTrigger.Setters> <Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/40s.jpg"/> </DataTrigger.Setters> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> <DataTemplate x:Key="ItemsTemplateWithConverter"> <StackPanel Orientation="Horizontal"> <Image Width="64" Height="32" Source="{Binding Converter={StaticResource ImageConverter}}"/> <TextBlock Text="{Binding}" VerticalAlignment="Center" /> </StackPanel> </DataTemplate> <DataTemplate x:Key="ItemsTemplateWithDataTrigger"> <ContentControl Template="{StaticResource ImageTemplate}" /> </DataTemplate> </Window.Resources> <StackPanel> <ContentControl Margin="10" MouseUp="OnImageMouseUp" HorizontalAlignment="Center" Cursor="Hand" DataContext="{Binding Path=ImageEnum}" Template="{StaticResource ImageTemplate}" /> <StackPanel Orientation="Horizontal"> <StackPanel> <ListView Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithConverter}" /> <ComboBox Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithConverter}" /> </StackPanel> <StackPanel> <ListView Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithDataTrigger}" /> <ComboBox Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithDataTrigger}" /> </StackPanel> </StackPanel> </StackPanel> </Window> 

Code for

 using System; using System.ComponentModel; using System.Globalization; using System.Windows; using System.Windows.Input; using System.Windows.Data; namespace WpfSandbox.EnumToImage { /// <summary> /// Interaction logic for EnumToImage.xaml /// </summary> public partial class EnumToImage : Window { public EnumToImage() { InitializeComponent(); } private int i = 1; private void OnImageMouseUp( object sender, MouseButtonEventArgs e ) { i++; Model.ImageEnum = ( Decade )i; if( i == 6 ) i = 0; } } public enum Decade { Ninties = 1, Eighties = 2, Seventies = 3, Sixties = 4, Fifties = 5, Forties = 6, }; public class ImageViewModel : INotifyPropertyChanged { private Decade _imageEnum; public Decade ImageEnum { get { return _imageEnum; } set { _imageEnum = value; RaisePropertyChanged( "ImageEnum" ); } } public ImageViewModel() { ImageEnum = Decade.Ninties; } public event PropertyChangedEventHandler PropertyChanged; protected void RaisePropertyChanged( string propertyName ) { var handler = PropertyChanged; if( handler != null ) { handler( this, new PropertyChangedEventArgs( propertyName ) ); } } } public class DecadeEnumImageConverter : IValueConverter { public object Convert( object value, Type targetType, object parameter, CultureInfo culture ) { var myEnum = ( Decade )Enum.Parse( typeof( Decade ), value.ToString() ); switch( myEnum ) { case Decade.Ninties: return "/EnumToImage/images/90s.jpg"; case Decade.Eighties: return "/EnumToImage/images/80s.jpg"; case Decade.Seventies: return "/EnumToImage/images/70s.jpg"; case Decade.Sixties: return "/EnumToImage/images/60s.jpg"; case Decade.Fifties: return "/EnumToImage/images/50s.jpg"; case Decade.Forties: return "/EnumToImage/images/40s.jpg"; default: throw new ArgumentOutOfRangeException(); } } public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture ) { throw new NotImplementedException(); } } }