6장. WPF Data Trigger 란?

6장. WPF Data Trigger 란?

참조

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

목적

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

DataTrigger 란?

• DataTrigger 클래스는 이전의 프로퍼티 트리거의 Property를 바인딩(Binding)으로 대신하는 것을 제외하고는 Trigger와 유사한데, 바인딩은 다른 엘리먼트를 참조한다.
• DataTrigger는 바인딩 되는 값이 특정 값을 가질 때 프로퍼티를 설정할 수 있게 해준다.
• 요소로 표시하며 트리거는 의존속성이 아닌 속성에 사용된다.
• Model View ViewModel(MVVM) 디자인 패턴을 사용하여 데이터 바인딩을 사용하는 경우 이상적이다.

실습

예제 1

• CheckBox와 TextBlock 컨트롤을 만드는데 최초 화면을 로드할 때는 TextBlock이 화면에 나타나지만 CheckBox 를 클릭하면 사라지는 예제를 만들어 봅니다.
• 그리고 다시 CheckBox를 클릭하면 보이게 된다.

MainWindow.xaml

<Window x:Class="WPF06_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:WPF06_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="MyStyle" TargetType="TextBlock">
            <Setter Property="Visibility" Value="Visible"/>

            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=cb1, Path=IsChecked}"
                             Value="True">
                    <Setter Property="Visibility" Value="Hidden"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel>
        <CheckBox x:Name="cb1" Content="Click Me!" FontSize="20"/>
        <TextBlock Text="Hello WPF!" FontSize="20"
                   Style="{StaticResource MyStyle}"/>
    </StackPanel>
</Window>

실행 결과

• CheckBox 를 체크 하게 되면, TextBlock 컨트롤이 사라지고 다시 CheckBox를 체크 해제 하게되면 TextBlock이 보입니다.

예제 2

• Slider 컨트롤과 ProgressBar 컨트롤을 만들어 Slider 컨트롤을 움직이면 ProgressBar도 같이 움직이도록 합니다.
• DataTrigger를 이용하여 Slider 끝에 오면 ProgressBar의 Foreground 를 Red로 변경하는 예제를 작성한다.

MainWindow.xaml

<Window x:Class="WPF06_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:WPF06_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="MyStyle" TargetType="ProgressBar">
            <Setter Property="Foreground" Value="Green"/>

            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=progressBar, Path=Value}" Value="100">
                    <Setter Property="Foreground" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel>
        <Slider Margin="10" x:Name="slider"
                Maximum="100" Minimum="0"/>
        <ProgressBar Width="280" Margin="10" x:Name="progressBar"
                     Height="10"
                     Maximum="100" Minimum="0"
                     Value="{Binding ElementName=slider, Path=Value}"
                     Style="{StaticResource MyStyle}"/>
        <TextBlock Text="{Binding ElementName=slider, Path=Value}"/>
    </StackPanel>
</Window>

실행 결과