XAML or HTML

010. 데이타트리거(DataTrigger)

XAML 뽀개기

데이타 트리거에 대해서 다시 한번 살펴봅니다.  

  

1
2
3
4
public class SampleData
{
    public string Type { get; set; }
}
cs

 

예제를 위해 간단히 SampleData 클래스를 추가합니다. string 타입의 Type .Net property 정의합니다.

 

1
2
3
4
5
6
7
8
<!-- Type 데이타 트리거 -->
<DataTrigger Binding="{Binding Type}" Value="Good">
    <Setter Property="TextBox.Foreground" Value="LimeGreen" />
</DataTrigger>
<!--OR-->
<DataTrigger Binding="{Binding Type}" Value="Bad">
    <Setter Property="TextBox.Foreground" Value="Red" />
</DataTrigger>
cs

 

Style_DataTriggerTextBox 스타일에 데이타 트리거를 추가하고 Type 프로퍼티와 바인딩합니다. Type이 Good이거나 Bad 호출됩니다.

 

1
2
3
4
<TextBox x:Name="txbGood" Style="{StaticResource Style_DataTriggerTextBox}"
         Text="Good"/>
<TextBox x:Name="txbBad" Style="{StaticResource Style_DataTriggerTextBox}"
         Text="Bad" Grid.Column="1"/>
cs

 

1
2
this.txbGood.DataContext = new SampleData { Type = "Good" };
this.txbBad.DataContext = new SampleData { Type = "Bad" };
cs

 

비하인드코드에서 TextBox의 DataContext에 SampleData가 생성되도록 정의합니다.


 


런타임에서만 확인됩니다.

 

여기서 Text 속성은 의미가 없습니다. DataContext를 통해 바인딩된 Type 프로퍼티에 의해 호출됩니다.

 

멀티 데이타 트리거에 대해서도 다시 한번 살펴봅니다.  

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 멀티 데이타 트리거 -->
<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding Type}" Value="Good"/>
        <Condition Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value="Good"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="TextBox.Foreground" Value="LimeGreen"/>
    <Setter Property="TextBox.FontWeight" Value="Bold"/>
</MultiDataTrigger>
<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding Type}" Value="Bad"/>
        <Condition Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value="Bad"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="TextBox.Foreground" Value="Red"/>
    <Setter Property="TextBox.FontWeight" Value="Bold"/>
</MultiDataTrigger>
cs

 

기존 스타일에 멀티 데이타 트리거를 추가합니다. TextBox Text 속성을 추가 조건으로 추가했습니다. 그리고 FontWeight 속성이 Bold 되도록 Setter 추가했습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
<TextBox x:Name="txbGood" Style="{StaticResource Style_DataTriggerTextBox}"
         Text="Good">
    <TextBox.DataContext>
        <local:SampleData Type="Good"/>
    </TextBox.DataContext>
</TextBox>
<TextBox x:Name="txbBad" Style="{StaticResource Style_DataTriggerTextBox}"
         Text="Bad" Grid.Column="1">
    <TextBox.DataContext>
        <local:SampleData Type="Bad"/>
    </TextBox.DataContext>
</TextBox>
cs

 

기존 비하인드코드에서 DataContext에 생성한 SampleData 주석처리하고 XAML 코드에서 생성하도록 변경했습니다. 멀티 데이타 트리거의 조건에 맞게 Type Text 준비되었습니다.


 


이제는 디자인 타임에서도 바로 확인 가능합니다. 빌드를 해줘야 보입니다.

 


런타임에서 확인해보면 데이타 트리거 멀티 데이타 트리거 모두 동작하는 것을 확인할 있습니다.


샘플 코드 : https://github.com/CharlesKwon/XamlSimplified