2009-11-03 44 views

回答

40

您可以在圖像上使用DataTrigger根據綁定來交換圖像源來創建樣式。在這個例子中,圖像根據名爲「Value」的布爾值而改變。

<Image Width="16"> 
     <Image.Style> 
      <Style TargetType="{x:Type Image}"> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding Value}" Value="False"> 
         <Setter Property="Source" Value="Resources/image1.png"/> 
        </DataTrigger> 
        <DataTrigger Binding="{Binding Value}" Value="True"> 
         <Setter Property="Source" Value="Resources/image2.png"/> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Image.Style> 
    </Image> 
+0

這是否適用於不同元素的屬性?例如,如果我想要根據標籤的值綁定圖像,它的工作原理是否相同?你能詳細說明一下嗎? – user3841581 2017-07-07 11:49:46

0

如果您只是直接綁定Image::Source屬性,那麼完成此操作的唯一方法是使用自定義IValueConverter

2

如果有人正在尋找價值轉換器進行綁定。以下是我用

<Image Source="{Binding Converter={StaticResource ImageConverter},ConverterParameter=\{Status\}}" /> 

public class StatusToImageConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     string statusValue = parameter.ToString().ToUpper(); 

     if (!string.IsNullOrEmpty(statusValue)) 
     { 
      string result = string.Empty; 

      switch (statusValue) 
      { 
       case "IDLE": 
        result = "idle.png"; 
        break; 
       case "OFFLINE": 
        result = "offline.png"; 
        break; 
       default: 
        result = "online.png"; 
        break; 
      } 

      var uri = new Uri("pack://application:,,,/PIE;component/Images/" + result); 

      return uri; 
     } 

     return string.Empty; 
    } 

    // No need to implement converting back on a one-way binding 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     return DependencyProperty.UnsetValue; 
    } 
} 

界枚舉

public enum DevStatus 
{ 
    Idle = 1, 
    Offline = 2, 
    Active = 3, 
} 

集枚舉從視圖模型和轉換器將結合適當的圖像。

<Image Source="{Binding DevStatus, Converter={StaticResource ImageConverter}}" /> 
+0

您能否介紹ConverterParameter = \ {Status \}部分? – user3841581 2017-07-10 19:18:02

+0

在我的情況其枚舉值公共枚舉DeviceStatus { 空閒= 1, 離線= 2, 主動= 3, } – dnxit 2017-07-11 06:50:30

+0

<圖像源= 「{結合DevStatus,轉換器= {StaticResource的ImageConverter}}」/> – dnxit 2017-07-11 06:51:53