ListBox의 ItemContainerStyle 변경 WPVM의 MVVM MVVM 패턴

Question

ListConBox에 item 컨테이너 스타일이 있고이 스타일로 배경색이 있습니다 (녹색이라고도 함). MVVM에서 배경색을 변경하고 싶습니다. 일부 특정 조건에서 색상이 변경되며, 그렇지 않으면 기본 색상 (예 : 녹색)이 적용됩니다.

<ListBox x:Name="lst1" ItemsSource="{Binding DataSource}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" Style="{DynamicResource StepListBox}" ItemContainerStyle="{DynamicResource ListBoxItemStyle}" Margin="-10,0,0,0"> 
//Listbox Items 
</ListBox> 

이는

<Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}"> 
     <Setter Property="Margin" Value="20,0,0,10"/> 
     <Setter Property="Background" Value="{DynamicResource Green}"/> 
     <Setter Property="BorderBrush" Value="{DynamicResource TertiaryMediumStroke}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="{DynamicResource SecondaryDark}"/> 
     <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="Padding" Value="10,10,0,10"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ListBoxItem}"> 
        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
         <Grid Margin="0"> 
          <Rectangle x:Name="BgColor" Fill="{DynamicResource TertiaryMediumStroke}" Margin="-10,-10,0,-10" Opacity="0.1"/> 
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsSelected" Value="true"> 
          <!--#FFD1EFD6--> 
          <Setter Property="Background" TargetName="Bd" Value="#FFD7F0DB" /> 
          <Setter Property="Opacity" TargetName="BgColor" Value="0" /> 
          <Setter Property="Foreground" Value="{DynamicResource ForeLight}"/> 
         </Trigger> 
         <!-- 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="Selector.IsSelectionActive" Value="false"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
         </MultiTrigger> 
         --> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Opacity" TargetName="BgColor" Value="0" /> 
          <Setter Property="Foreground" Value="{DynamicResource ForeDisable}"/> 
          <Setter Property="Background" TargetName="Bd" Value="{StaticResource TertiaryMedium}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

가 어떻게 내 뷰 모델에서 변경할 수있는 별도의 XAML 파일에 정의 된 내 ListboxItemStyle은 무엇입니까?

당신은 당신의 ViewModel 층에 부울에 스타일에 DataTrigger가 필요합니다

Answer 1

:

<Style.Triggers> 
    <DataTrigger Binding="{Binding MyBooleanProperty, Mode=OneWay}" Value="True"> 
     <Setter Property="Background" Value="WhatEverColorYouWant"/> 
    </DataTrigger> 
</Style.Triggers> 
<Setter Property="Background" Value="Green"/> 

그리고 당신의 ViewModel에 :

public bool MyBool { 
    get { return _firstCondition && _secondCondition && _thirdCondition; } 
} 

때 조건 변경 한 경우 MyBool에서 NotifyPropertyChanged를 발생시키고 자합니다.

Answer 2

MVVM을 사용할 때 뷰 모델은 뷰에 대해 실제로 알지 못합니다. 그러나 뷰 모델에서 UI 요소 색상을 변경하려고한다면이 방법을 사용할 수 있습니다. 이 아이디어는 bool, int 또는 enum과 같은 기본 유형이 UI에 바인딩 된 하나 이상의 속성을 갖는 것입니다. DataTrigger을 사용하면 UI가 이러한 속성의 변경 내용을 '수신 대기'하고 그에 따라 색상을 업데이트 할 수 있습니다. 이 예제를 보자

업데이트 단지 하나 또는 두 개의 색상이있는 경우, 당신은 bool 속성과 일부 DataTrigger의를 사용할 수 있습니다

<Style> 
    <Setter Property="Background" Value="White" /> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding IsElementRed}" Value="True"> 
      <Setter Property="Background" Value="Red" /> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

업데이트하는 색상의 범위가있는 경우, 당신은 할 수 사용자 정의 enum 사용 또는

<Style> 
    <Setter Property="Background" Value="White" /> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding EnumInstance}" Value="SomeValue"> 
      <Setter Property="Background" Value="Red" /> 
     </DataTrigger> 
     ... 
     <DataTrigger Binding="{Binding EnumInstance}" Value="SomeOtherValue"> 
      <Setter Property="Background" Value="Green" /> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

을, 당신은 또한 enum 인스턴스와 각종 필요한 색상을 변환하는 IValueConverter를 사용할 수 있습니다.