2009-11-03 7 views
13

나는 부울에 바인딩 된 이미지를 갖고 싶어하고 부울 값에 의존하는 이미지의 원본이 나는 경우 궁금 해서요 = "이미지 2"바인더 Image.Source 변환기없이 부울에 따라?

즉 진정한 소스 = "image1에"거짓 소스 변환기가 필요없이 인라인으로 처리하는 방법이 있습니다.

답변

40

DataTrigger를 사용하여 바인딩에 따라 이미지 소스를 바꾸는 스타일을 이미지에 만들 수 있습니다. 이 예제에서 이미지는 단순히 "값"이라고하는 부울 값에 따라 변경됩니다.

<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

0

Image::Source 속성을 직접 바인딩하는 경우이를 수행하는 유일한 방법은 맞춤 IValueConverter입니다.

2

누구든지 바인딩 용 밸류 계산기를 찾고 있다면. 여기에 적절한 이미지를 바인딩의 ViewModel 컨버터에서

<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

+0

의 열거 값 대중 열거 DeviceStatus { 유휴 = 1, 오프라인 = 2, 활동 = 3, } – dnxit

+0

<이미지 출처는 = "{DevStatus 바인딩, 변환기 = {정적 리소스 ImageConverter}}"/> – dnxit