WPF 프로그래밍 - 6. WPF 트리거(Trigger)란?

Soonyoung Kim·2021년 8월 17일
1

WPF 프로그래밍

목록 보기
3/5

6. WPF 트리거(Trigger)란?

  • WPF Trigger란?
  • 프로퍼티 트리거(Property Trigger)

WPF Trigger란?

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

프로퍼티 트리거(Property Trigger)

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

실습1

  • 전경색(Background) - Green
  • 마우스가 진입시, 전경색(Background) - Red
  • 글씨 아래 - UnderLine
  • xaml
<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock Name="tblk1" Text="Hello, WPF world" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Green"></Setter>
                    <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="IsMouseOver" 동작을 하면
    • 다음과 같이 동작하시오.
      <Setter Property="Foreground" Value="Red"/>
      <Setter Property="TextDecorations" Value="Underline"/>
<Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="TextDecorations" Value="Underline"/>
</Trigger>

실습2

  • 최초 화면 로딩 시, Button과 TextBlock 전경색(Background) - Red
  • TextBlock Text 속성 - "Hello WPF"
  • Button과 TextBlock 컨트롤 - 마우스 진입시, 프로퍼티 트리거가 동작 - Property="IsMouseOver"
  • Button - 전경색을 파랑 변경
  • TextBlock - 전경색이 파랑 변경, Text 속성은 "버튼으로 진입했습니다. "
  • xaml
<Window x:Class="WpfApp1.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:WpfApp1"
        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 Width="100" Height="70"
                Style="{StaticResource MyStyle}" Content="Trigger" />
        <TextBlock Style="{StaticResource MyStyle}" 
                   FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </StackPanel>
</Window>
profile
Sin prisa, sin pausa.

0개의 댓글