Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can use a DataTrigger, but would be more maintainable if you used a Converter. Here's a sample that uses a DataTrigger for a view of the image and text by itself, and then the same DataTrigger to display the image and text in ListBox and ComboBox, and finally, a ListBox and ComboBox that use a Converter to display the image and text:</p> <p><strong>XAML</strong></p> <pre><code>&lt;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" &gt; &lt;Window.DataContext&gt; &lt;local:ImageViewModel x:Name="Model" /&gt; &lt;/Window.DataContext&gt; &lt;Window.Resources&gt; &lt;ObjectDataProvider x:Key="EnumDataProvider" MethodName="GetValues" ObjectType="{x:Type System:Enum}"&gt; &lt;ObjectDataProvider.MethodParameters&gt; &lt;x:Type TypeName="local:Decade"/&gt; &lt;/ObjectDataProvider.MethodParameters&gt; &lt;/ObjectDataProvider&gt; &lt;local:DecadeEnumImageConverter x:Key="ImageConverter" /&gt; &lt;ControlTemplate x:Key="ImageTemplate" &gt; &lt;StackPanel Orientation="Horizontal"&gt; &lt;Image x:Name="MyImage" Width="64" Height="32" /&gt; &lt;TextBlock Text="{Binding}" VerticalAlignment="Center" /&gt; &lt;/StackPanel&gt; &lt;ControlTemplate.Triggers&gt; &lt;DataTrigger Binding="{Binding}" Value="Ninties" &gt; &lt;DataTrigger.Setters&gt; &lt;Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/90s.jpg"/&gt; &lt;/DataTrigger.Setters&gt; &lt;/DataTrigger&gt; &lt;DataTrigger Binding="{Binding}" Value="Eighties" &gt; &lt;DataTrigger.Setters&gt; &lt;Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/80s.jpg"/&gt; &lt;/DataTrigger.Setters&gt; &lt;/DataTrigger&gt; &lt;DataTrigger Binding="{Binding}" Value="Seventies" &gt; &lt;DataTrigger.Setters&gt; &lt;Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/70s.jpg"/&gt; &lt;/DataTrigger.Setters&gt; &lt;/DataTrigger&gt; &lt;DataTrigger Binding="{Binding}" Value="Sixties" &gt; &lt;DataTrigger.Setters&gt; &lt;Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/60s.jpg"/&gt; &lt;/DataTrigger.Setters&gt; &lt;/DataTrigger&gt; &lt;DataTrigger Binding="{Binding}" Value="Fifties" &gt; &lt;DataTrigger.Setters&gt; &lt;Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/50s.jpg"/&gt; &lt;/DataTrigger.Setters&gt; &lt;/DataTrigger&gt; &lt;DataTrigger Binding="{Binding}" Value="Forties" &gt; &lt;DataTrigger.Setters&gt; &lt;Setter TargetName="MyImage" Property="Source" Value="/EnumToImage/images/40s.jpg"/&gt; &lt;/DataTrigger.Setters&gt; &lt;/DataTrigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;DataTemplate x:Key="ItemsTemplateWithConverter"&gt; &lt;StackPanel Orientation="Horizontal"&gt; &lt;Image Width="64" Height="32" Source="{Binding Converter={StaticResource ImageConverter}}"/&gt; &lt;TextBlock Text="{Binding}" VerticalAlignment="Center" /&gt; &lt;/StackPanel&gt; &lt;/DataTemplate&gt; &lt;DataTemplate x:Key="ItemsTemplateWithDataTrigger"&gt; &lt;ContentControl Template="{StaticResource ImageTemplate}" /&gt; &lt;/DataTemplate&gt; &lt;/Window.Resources&gt; &lt;StackPanel&gt; &lt;ContentControl Margin="10" MouseUp="OnImageMouseUp" HorizontalAlignment="Center" Cursor="Hand" DataContext="{Binding Path=ImageEnum}" Template="{StaticResource ImageTemplate}" /&gt; &lt;StackPanel Orientation="Horizontal"&gt; &lt;StackPanel&gt; &lt;ListView Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithConverter}" /&gt; &lt;ComboBox Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithConverter}" /&gt; &lt;/StackPanel&gt; &lt;StackPanel&gt; &lt;ListView Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithDataTrigger}" /&gt; &lt;ComboBox Margin="10" ItemsSource="{Binding Source={StaticResource EnumDataProvider}}" ItemTemplate="{StaticResource ItemsTemplateWithDataTrigger}" /&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;/Window&gt; </code></pre> <p><strong>Code Behind</strong></p> <pre><code>using System; using System.ComponentModel; using System.Globalization; using System.Windows; using System.Windows.Input; using System.Windows.Data; namespace WpfSandbox.EnumToImage { /// &lt;summary&gt; /// Interaction logic for EnumToImage.xaml /// &lt;/summary&gt; 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(); } } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload