如何仅使用 XAML 显示不同的枚举图标？答案

【问题标题】：How to display different Enum icons using XAML only?如何仅使用 XAML 显示不同的枚举图标？
【发布时间】：2010-05-07 10:08:24
【问题描述】：

我想根据枚举值显示不同的图标/图像。例如，如果我有以下枚举：

  public enum UploadStatus
  {
      Unknown = 0,
      WaitingToUpload = 10,
      Uploading = 20,
      Uploaded = 30,
      UploadFailed = 40
  }

我想编写如下所示的 XAML：

...

<EnumImage Value="{Binding Path=CurrentStatus}">
  <EnumImageItem Value="Unknown"         Image="/images/unknown.png" />
  <EnumImageItem Value="WaitingToUpload" Image="/images/clock.png" />
  <EnumImageItem Value="Uploading"       Image="/images/upload.png" />
  <EnumImageItem Value="Uploaded"        Image="/images/tick.png" />
  <EnumImageItem Value="UploadFailed"    Image="/images/error.png" />
</EnumImage>

...

我发现很多帖子建议自定义 IValueConverters，但这些解决方案不符合 XAML 范例。

有什么指点或建议吗？

【问题讨论】：

值以何种方式转换不“符合 XAML 范式”？
好吧，我相信图像路径应该保留在 XAML 中，而不是 C# 代码中。在我看来的 IValueConverter 解决方案中，转换器负责将枚举值映射到图像路径。我看到将其全部保存在 XAML 中的更多好处。
ValueConverter 正是出于这个原因而存在的。它旨在获取数据类型并转换为视图。
@Stephan：是的，但是应该可以在 Xaml 中声明关系映射，同时使用转换器“执行”映射。
@AnthonyWJones 我完全同意，但这并不能改变这样一个事实，即无论他尝试什么，他都可能需要一个 ValueConverter。

标签： silverlight xaml enums

【解决方案1】：

这是一个值转换器，它维护“XAML 范例”，即枚举值和图像之间的关系在 XAML 中维护。

[ContentProperty("Items")]
public class EnumToObjectConverter : IValueConverter
{
    public ResourceDictionary Items { get; set; }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string key = Enum.GetName(value.GetType(), value);
        return Items[key];
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException("This converter only works for one way binding");
    }
}

请注意，这是非常通用的，它实际上将任何枚举类型的值映射到任何任意对象。这是它在 Xaml 中的用法：-

<Grid.Resources>
  <local:EnumToObjectConverter x:Key="Icons">
    <ResourceDictionary>
 <BitmapImage x:Key="Unknown" UriSource="/images/unknown.png" />
      <BitmapImage x:Key="WaitingToUpload" UriSource="/images/clock.png" />        
      <BitmapImage x:Key="Uploading"       UriSource="/images/upload.png" />        
      <BitmapImage x:Key="Uploaded"        UriSource="/images/tick.png" />        
      <BitmapImage x:Key="UploadFailed"    UriSource="/images/error.png" />        
    </ResourceDictionary>
  </local:EnumToObjectConverter>
</Grid.Resources>

这个转换器可以在绑定枚举类型的属性时使用：-

 <Image Source="{Binding Status, Converter={StaticResource Icons}}" />

【讨论】：

谢谢安东尼，我会试一试！

【解决方案2】：

您的EnumImage 可以使用Image 和DataTrigger 进行设置：

   <Image Tag="{Binding Gender}" Width="48" Height="48">
      <Image.Style>
        <Style TargetType="Image">
            <Style.Triggers>
                <DataTrigger  Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}" Value="Male">
                    <Setter Property="Source" Value="/Resources/Client_Male.png"/>
                </DataTrigger>
                <DataTrigger  Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}" Value="Female">
                    <Setter Property="Source" Value="/Resources/Client_Female.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
      </Image.Style>
     </Image>

来源：Displaying an image based on value in XAML

【讨论】：