如何声明在WPF中具有Itemsource作为枚举值的组合框itemTemplate？

Question

我有一个enum让我们说

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

我已将这个Enum绑定到XAML中的组合框中.

在定义组合框时,我已经定义了一个combox的ItemTemplate来获取两个UI元素:

1. 显示枚举值的TextBlock(描述)
2. 图片

我在XAML中做了这么多.

我想知道在哪里可以指定与组合框中的每个Enum值项目相对应的图像？这可能通过数据触发吗？

如果有人为此场景设置了XAML,我真的很感激.

提前谢谢了

Answer 1

您可以使用DataTrigger,但如果使用Converter,则可以更加维护.下面是一个示例,它使用DataTrigger自己查看图像和文本,然后使用相同的DataTrigger在ListBox和ComboBox中显示图像和文本,最后是使用Converter显示图像的ListBox和ComboBox文本:

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>

代码背后

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();
        }
    }
}