Làm cách nào để hiển thị các biểu tượng Enum khác nhau bằng cách sử dụng XAML?

Question

Tôi muốn hiển thị một biểu tượng/hình ảnh khác nhau tùy thuộc vào giá trị enum. Ví dụ, nếu tôi đã có enum sau:

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

Tôi muốn viết XAML mà trông giống như sau:

... 

<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> 

... 

tôi đã tìm thấy nhiều bài viết cho thấy IValueConverters tùy chỉnh, nhưng những giải pháp đó không phù hợp với mô hình XAML.

Bất kỳ gợi ý hay đề xuất nào?

Answer 1

Đây là bộ chuyển đổi giá trị duy trì mô hình XAML "" là mối quan hệ giữa các giá trị enum và hình ảnh được duy trì trong 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"); 
    } 
} 

Lưu ý rằng điều này rất chung chung, nó thực sự ánh xạ các giá trị của bất kỳ loại enum nào cho bất kỳ đối tượng arbitary nào. Đây là những gì sử dụng của nó trông giống như trong 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> 

chuyển đổi này có thể được sử dụng khi ràng buộc tài sản của kiểu enum: -

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

Answer 2

bạn EnumImage có thể được thiết lập sử dụng Image với 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> 

Nguồn: Displaying an image based on value in XAML