5장. WPF 트리거란?

5장. WPF 트리거란?

참조

• https://www.youtube.com/watch?v=KfY6DqWtcqs&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=6

목적

• WPF Property Trigger 사용 방법에 대해서 학습합니다.

WPF Trigger 란?

• Trigger는 어떤 조건, 이벤트등 주어졌을 때 묵시적으로 컨트롤의 상태 또는 이벤트 핸들러 등을 호출하는 기능을 의미합니다.
• 즉 Trigger를 사용하면 엘리먼트의 프로퍼티나 데이터 바인딩, 이벤트에서 발생하는 변화에 엘리먼트와 컨트롤이 어떻게 반응할지를 정할 수 있다.
• Style의 Setter와 비교할 때 둘 다 프로퍼티를 설정하지만 Setter 는 엘리먼트가 처음 생성되었을 때의 프로퍼티를 설정하며 Trigger 는 프로퍼티가 변경되는 경우에 프로퍼티를 설정하는 점이 다르다.
• Style의 Triggers 프로퍼티는 TriggerBase 객체의 컬렉션인 TriggerCollection 타입이며 추상클래스 TriggerBase에서 파생된 클래스는 아래와 같다.
• System.Object
  • System.Windows.Threading.DispatcherObject
    • Stystem.Windows.DependencyObject
      • System.Windows.TriggerBase
        • System.Windows.DataTrigger
        • System.Windows.EventTrigger
        • System.Windows.MultiDataTrigger
        • System.Windows.MultiTrigger
        • System.Windows.Trigger

WPF Property Trigger 란?

• TriggerBase 중 가장 일반적인 파생클래스는 특정 프로퍼티의 변화(어떤 값을 가졌을 때)에 내부에 정의한 Setter 컬렉션이 실행되는 트리거이다.
• 컨트롤이나 엘리먼트가 반응하는 방법을 정의하는 Trigger 인데 대부분 이 프로퍼티는 IsMouseOver 프로퍼티와 같은 사용자의 입력 프로퍼티를 포함하는데 이때 Trigger는 Setter 에서 정의된 프로퍼티를 변경한다.

Property Trigger 실습

예제 1

• 한개의 TextBlock 컨트롤을 만들고, 해당 TextBlock 에 마우스를 가져다 대면 텍스트 색상이 Red 로 변경이 되면서, 동시에 밑줄까지 그어지도록 Property Trigger, Style 을 이용하여 구현해 봅니다.

MainWindow.xaml

<Window x:Class="WPF05_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF05_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock x:Name="tblk1" Text="Hello, WPF world!"
                   FontSize="30"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Green"/>

                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red"/>
                            <Setter Property="TextDecorations" Value="Underline"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

실행 결과

• Property Trigger의 프로퍼티가 Boolean으로 제한되는 것은 아니지만 흔히 사용되고 이 프로퍼티는 반드시 의존프로퍼티에 의해 지원되어야 합니다. (IsMouseOver, IsFocused, IsPressed 등)
• Style과 같이 Trigger는 Setters 라는 이름의 프로퍼티를 가지고 있으며 이 프로퍼티 Triggers의 컨텐트 프로퍼티(ContentProperty)로 Trigger는 하나 이상의 Setter 엘리먼트를 포함할 수 있습니다.

예제 2

• 최초 화면이 로딩될 때 Button 및 TextBlock의 Foreground는 빨강, TextBlock의 Text 속성은 "Hello WPF!" 라는 값을 가진다.
• 두 컨트롤 모두 마우스가 진입을 하면 프로퍼티 트리거가 동작을 하는데 Button은 Foreground을 파랑으로 변경하고, TextBlock은 Foreground이 파랑으로, Text 속성은 "버튼이 눌러졌습니다." 로 변경 된다.

MainWindows.xaml

<Window x:Class="WPF05_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF05_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style x:Key="MyStyle">
            <Setter Property="Control.Foreground" Value="Red"/>
            <Setter Property="TextBlock.Text" Value="Hello WPF!"/>

            <Style.Triggers>
                <Trigger Property="Control.IsMouseOver" Value="True">
                    <Setter Property="Control.Foreground" Value="Blue"/>
                    <Setter Property="TextBlock.Text" Value="버튼으로 진입했습니다."/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel>
        <Button Content="Button1"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Style="{StaticResource MyStyle}"/>

        <TextBlock 
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   Style="{StaticResource MyStyle}"/>
    </StackPanel>
</Window>

실행 결과