C# WPF에서의 Data Trigger 이해하기

해당 포스팅은 개인적으로 C# WPF를 공부하면서 익힌 내용을 기억에 남기기 위한 작업의 일환으로 작성된 글로서
일부 내용에 오류가 있을 수도 있으니 참고하시기 바랍니다.

 

# WPF에서의 Data Trigger에 대해 알아보고,

이해하는 시간을 가져보자.

 

 

 

내용 요약

 

Trigger

- 정의 : 트리거란 특정 조건, 예를들어 특정 속성의 값이 변경되는 경우 또는

이벤트가 발생하도록하여, 원하는 속성의 값을 바꿀 수 있도록해주는 개체이다.

​

-종류 : 트리거의 종류로는 크게 네가지가 있다.

1.Property Trigger : Dependency Property가 변경될 때 실행

2.Event Trigger : Routed Event가 발생할 때 실행

3.Data Trigger : Binding으로 연결된 Property 값이 변경되었을 때 실행

4.Multi Trigger : 다수의 Property 조건이 만족할 때 실행

​

이 포스팅에서는 Data Trigger에 대한 내용을 살펴보도록 하겠다.

​

 

목차
1.Data Binding을 위한 속성 만들기
2.UI 만들기
3.실행 결과

 

Slider, ProgressBar 그리고 TextBox가 MainWindow의 속성

TheValue에 Binding되어있으며,

​

Slider를 움직이거나 TextBox에 값을 입력하면,

나머지 두개의 UI Control의 속성이 변한다.

​

이때 속성이 특정 값이 될 경우

Data Trigger가 발생하여

특정 속성을 변경할 수 있으며,

​

CheckBox의 Check여부를 확인하여

TextBox의 FontSize, FontWeight 및 Text를

변경하는 DataTrigger를 발생시키는 예제를

하도록 하겠다.

 

1.Data Binding을 위한 속성 만들기

 

접근 지정자를 통해 private 멤버와 public 멤버를 생성하고

두 멤버를 get, set을 통해 값을 대입 해준다.

​

여기서, set의 경우 속성값 변경에 대한

자동 알림 정의(INotifyPropertyChanged)를 해준다.

 

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    /*===============================================================*/
    private int _theValue;
    public int TheValue
    {
        get
        {
            return _theValue;
        }
        set
        {
            _theValue = value;
            OnPropertyChanged();
        }
    }
        
    public event PropertyChangedEventHandler? PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string parameter = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(parameter));
    }
    /*===============================================================*/
}

 

 

2. UI 만들기

 

TheValue 속성과 연동하기 위한 UI Controller를 아래와 같이

코딩 하였다.

 

<Window.Resources>
    <!-- DataTrigger : Progress Bar -->
        <Style TargetType="{x:Type ProgressBar}">
        <Setter Property="Foreground" Value="Blue"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding TheValue}" Value="50">
                <Setter Property="Foreground" Value="Red"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    <!-- DataTrigger : TextBox -->
    <Style TargetType="{x:Type TextBox}">
        <Setter Property="Foreground" Value="Black"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding TheValue}" Value="50">
                <Setter Property="Foreground" Value="Red"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    <!-- DataTrigger : TextBlock -->
    <Style x:Key="MyStyle" TargetType="TextBlock">
        <Setter Property="Visibility" Value="Visible"/>
        <Setter Property="Text" Value="CheckBox Un-Selected!"/>
        <Setter Property="FontSize" Value="15"/>
        <Style.Triggers>                
            <DataTrigger Binding="{Binding ElementName=cb1, Path=IsChecked}" Value="True">
                <Setter Property="FontSize" Value="25"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Text" Value="CheckBox Selected"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Slider -->
    <StackPanel Grid.Row="0" Grid.ColumnSpan="2" >
        <TextBlock Text="Slider" FontSize="15" FontWeight="Bold" Padding="5"/>
        <Slider x:Name="MySlider" Margin="5 10 5 5" Minimum="0" Maximum="100"
                Value="{Binding TheValue}"/>
    </StackPanel>
        
    <!-- Progress Bar -->
    <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
        <TextBlock Text="Progress Bar : " FontSize="15" FontWeight="Bold"  Padding="5" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBox   Width="100" FontSize="15" FontWeight="Bold" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
                   Text="{Binding TheValue, UpdateSourceTrigger=PropertyChanged}"/>
    </StackPanel>
    <StackPanel Grid.Row="2" Grid.ColumnSpan="2">
            <ProgressBar Height="20" Minimum="0" Maximum="100" Value="{Binding TheValue}"/>
    </StackPanel>

 

 

3. 실행 결과

 

프로그램을 처음 실행하면 아래 그림과 같이

Slider 및 Progress Bar의 초기 값 0으로 나타난다.

​

이후 Slider를 움직이면,

아래와 같이 Progress Bar와 TextBox의 값이

모두 Binding되어있어서 같은 값을 나타내며

​

​

아래 그림과 같이

Slider를 마우스로 드래그하다가

값이 50을 가리킬때

아래 그림과 같이 ProgressBar의 색상과 값을 나타내는 TextBox의

글자 색이 빨간색으로 변하는 것을 볼 수 있다.

​

​

CheckBox를 클릭하게 되면, 아래와 같이 오른쪽 TextBox의

FontSize, FontWeight, Text등의

속성이 변경된다.

​

"

마치며...

특정 UI Controller의 값을 다른 UI Controller와 Binding하여

설정된 값이 되었을 경우 Trigger를 발생시켜서

원하는 Controller의 속성을

변경 시킬 수 있음을 본 포스팅을 통해 알게 되었다.

"