WPF 기초 - Style.Triggers 사용하기

WPF 기초 - Style.Triggers 사용하기

 

 

Style.Triggers는 UI 요소의 상태 변화에 따라 스타일을 동적으로 적용할 수 있게 해주는 강력한 기능입니다.

Style.Triggers 를 이용하면 Control 에 액션을 취한경우 어떠한 처리를 할 수 있습니다.

아래 예시는 Label 에 마우스를 올렸을때 글자가 파란색으로 굵게 나타도록 하고

Button 은 클릭 시 글자 색을 변경하도록 한 것입니다.

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <StackPanel.Resources>
            <Style
                x:Key="normal">
                <Setter
                    Property="Control.FontSize"
                    Value="20" />
                <Setter
                    Property="Control.HorizontalAlignment"
                    Value="Center" />
                <Style.Triggers>
                    <Trigger
                        Property="Control.IsMouseOver"
                        Value="true">
                        <Setter
                            Property="Control.FontWeight"
                            Value="Bold" />
                        <Setter
                            Property="Control.Foreground"
                            Value="Blue" />
                    </Trigger>
                    <Trigger
                        Property="Button.IsPressed"
                        Value="true">
                        <Setter
                            Property="Control.Foreground"
                            Value="Red" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Resources>
        <Button Style="{StaticResource normal}" Content="Test Button"/>
        <Label Style="{StaticResource normal}" Content="Test Label"/>
    </StackPanel>
</Window>

결과

기본 / Button 마우스 오버 시 / Label 마우스 오버 시

Button 클릭 시

 

아래처럼 정의하면 모든 Button 에 Trigger 설정을 할 수 있습니다.

<Style TargetType="Button">
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="Foreground" Value="Black"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="DarkBlue"/>
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </Style.Triggers>
</Style>

Trigger 에는 여러 종류가 있습니다. 위에서 언급했던 Property Triggers가 있으며

DataTriggers 는 아래처럼 바인딘된 값에 따라 처리가 가능합니다.

<DataTrigger Binding="{Binding IsEnabled}" Value="False">
    <Setter Property="Opacity" Value="0.5"/>
</DataTrigger>

EventTrigger 는 아래처럼 특정 이벤트 발생 시 처리가 가능합니다.

<EventTrigger RoutedEvent="Button.Click">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:1"/>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

MultiTrigger 를 이용하면 여러 조건에 따라 처리가 가능합니다.

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="IsPressed" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" Value="Red"/>
</MultiTrigger>