XAML or HTML

009. 4가지 트리거(Triggers)

XAML 뽀개기

Style Trigger 비슷 점이 많습니다. 다른 점이라면 스타일은 무조건 적용되는 반면 트리거는 조건을 수반한다는 점입니다.

 

트리거는 4가지 종류가 있습니다.

 

  1. Property : Dependency Property 변경될 호출됩니다.
  2. Event : 이벤트가 발생할 호출됩니다.
  3. Data : Binding 문법으로 연결된 .NET property 특정 데이타일 호출됩니다.
  4. Multi(& MultiData) : 조건을 다수 사용해 논리곱(AND) 관계를 정의합니다.

 

1
2
3
<TextBox Style="{StaticResource Style_BlueFocusTextBox}"/>
<TextBox Style="{StaticResource Style_BlueFocusTextBox}"
         Grid.Column="1"/>
cs

 

2개의 TextBox에 동일한 스타일을 적용했습니다. 2개를 예제로 이유는 포커스 상태를 쉽게 잃기 위함일뿐 다른 이유는 없습니다.

 

1. 프로퍼티 트리거


1
2
3
4
5
6
7
8
9
10
<Style x:Key="Style_BlueFocusTextBox">
    <Style.Triggers>
        <!-- IsFocused 프로퍼티 트리거 -->
        <Trigger Property="TextBox.IsFocused" Value="True">
            <Setter Property="TextBox.BorderThickness" Value="3"/>
        </Trigger>
    </Style.Triggers>
    <Setter Property="Control.Width" Value="60"/>
    <Setter Property="Control.Height" Value="30"/>
</Style>
cs

 

TextBox Focused 상태(State) 되면 IsFocused 속성이 True 변경됩니다. 조건일 BorderThickness 속성이 3으로 변경되는 트리거를 정의했습니다.

 

 

해당 조건을 벗어나면 추가 코드 없이도 트리거가 자동 취소됩니다.

 

2. 이벤트 트리거


1
2
3
4
5
6
7
8
9
10
<Storyboard x:Key="MouseEnterAnimation">
    <ColorAnimation 
        Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)" 
        To="LightGray" Duration="0:0:0.1"/>
</Storyboard>
<Storyboard x:Key="MouseLeaveAnimation">
    <ColorAnimation 
        Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)" 
        To="White" Duration="0:0:0.1"/>
</Storyboard>
cs


1
2
3
4
5
6
7
8
<!-- MouseEnter 이벤트 트리거 -->
<EventTrigger RoutedEvent="TextBox.MouseEnter">
    <BeginStoryboard Storyboard="{StaticResource MouseEnterAnimation}"/>
</EventTrigger>
<!-- MouseLeave 이벤트 트리거 -->
<EventTrigger RoutedEvent="TextBox.MouseLeave">
    <BeginStoryboard Storyboard="{StaticResource MouseLeaveAnimation}"/>
</EventTrigger>
cs

  

MouseEnter와 MouseLeave 이벤트가 발생할 MouseEnterAnimation와 MouseLeaveAnimation Storyboard 각각 실행합니다. 스토리보드는 리소스에 정의합니다. 이벤트 트리거는 프로퍼티 트리거와 약간 다릅니다. 스토리보드를 사용하기 때문에 트리거를 취소하려면 이전 트리거에 반하는 또는 그에 준하는 트리거를 추가해야 합니다.

 

 

이렇게 추가 코드가 없으면 트리거가 자동 취소되지 않습니다. 스토리보드의 동작을 이해한다면 알맞은 트리거를 추가할 있습니다.

 

3. 데이 트리거


1
2
3
4
<!-- Text 데이타 트리거 -->
<DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value="Bad">
    <Setter Property="TextBox.Foreground" Value="Red" />
</DataTrigger>
cs

 

 

데이타 트리거는 프로퍼티 트리거와 비슷합니다. 예제는 Bad라는 문자열이 Text 속성에 들어왔을 호출됩니다.

 

4. 멀티 트리거


1
2
3
4
5
6
7
8
9
10
<!-- Text 멀티 트리거 -->
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="TextBox.Text" Value="Good"/>
        <!-- AND -->
        <Condition Property="TextBox.IsMouseOver" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter Property="TextBox.Foreground" Value="LimeGreen"/>
    <Setter Property="TextBox.FontWeight" Value="Bold"/>
</MultiTrigger>
cs


1
2
3
4
<TextBox Style="{StaticResource Style_BlueFocusTextBox}" 
         Tag="Good"/>
<TextBox Style="{StaticResource Style_BlueFocusTextBox}"
         Grid.Column="1"/>
cs



이전에 정의한 각각의 트리거가 논리합(OR)이라면, 멀티트리거는 논리곱(AND)이라 있습니다. 정의된 모든 Condition이 참일 트리거가 호출됩니다. 예제에서는  Text 속성 Good으로 참이되고 IsMouseOver 속성이 True로 참이될 트리거가 호출됩니다. 

 

5. 멀티 데이 트리거


1
2
3
4
5
6
7
8
9
10
<!-- Text  & Tag 멀티 데이타 트리거 -->
<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value="Bad"/>
        <!-- AND -->
        <Condition Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="Bad"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="TextBox.Foreground" Value="Red"/>
    <Setter Property="TextBox.FontWeight" Value="Bold"/>
</MultiDataTrigger>
cs

  

1
2
3
4
<TextBox Style="{StaticResource Style_BlueFocusTextBox}" 
         Tag="Good"/>
<TextBox Style="{StaticResource Style_BlueFocusTextBox}"
         Grid.Column="1" Tag="Bad"/>
cs

 


이번엔 설명이 필요없을 같습니다. 기존 두번째 TextBox  Tag="Bad"를 추가하 트리거의 모든 조건이 참이 되도록 했습니다. DataTrigger 대해서는 다음 포스트에서 다시 살펴보겠습니다.


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