wpf - 如何在 WPF 中声明将 Itemsource 作为枚举值的组合框 itemTemplate？

Question

我有一个枚举

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

我已将此枚举绑定(bind)到 XAML 中的组合框。

在定义组合框时，我定义了组合框的 ItemTemplate 来获取两个 UI 元素:

1. 显示枚举值(说明)的 TextBlock
2. 图片

我在 XAML 中做了这么多。

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

如果有人拥有此场景的 XAML，我真的很感激。

提前非常感谢

Answer 1

您可以使用 DataTrigger，但如果使用 Converter 会更易于维护。下面的示例使用 DataTrigger 来单独查看图像和文本，然后使用相同的 DataTrigger 在 ListBox 和 ComboBox 中显示图像和文本，最后使用 Converter 来显示图像和 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();
        }
    }
}