WPF 트리거(Trigger), 데이터트리거(DataTrigger), 멀티데이터트리거(MultiDataTrigger)

WPF 트리거(Trigger), 데이터트리거(DataTrigger), 멀티데이터트리거(MultiDataTrigger)

​

n DataTrigger 클래스는 이전의 프로퍼티 트리거의 Property를 바인딩(Binding)으로 대신하는 것을 제외하고는 Trigger와 유사한데 바인딩은 다른 엘리먼트를 참조한다.

n DataTrigger는 바인딩 되는 값이 특정 값을 가질 때 프로퍼티를 설정할 수 있게 해준다.

n <DataTrigger> 요소로 표시하며 트리거는 의존속성이 아닌 속성에 사용된다.

n Model View ViewModel (M-V-VM) 디자인 패턴을 사용하여 데이터 바인딩을 사용하는 경우 이상적이다.

n CheckBox와 TextBlock 컨트롤을 만드는데 최초 화면을 로드할 때는 TextBlock이 화면에 나타나지만 Checkbox를 클릭하면 사라지는 예제이다. 물론 다시 Checkbox를 클릭하면 보이게 된다.

<Window x:Class="WpfApp18.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:WpfApp18" mc:Ignorable="d" Title="MainWindow" Height="150" Width="250"> <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 Name="cb1" Content="Click Me!" FontSize="20" /> <TextBlock Text="Hello WPF!" FontSize="20" Style="{StaticResource MyStyle}"/> </StackPanel> </Window>

n 일반적으로 DialogBox의 경우 특정조건을 만족할 때 컨트롤을 활성화 하는 경우가 많이 있으므로 활용하면 좋을 것이다.

n 이번에는 Slider 컨트롤과 ProgressBar, TextBox 컨트롤을 만들어 Slider 컨트롤을 움지이면 ProgressBar도 같이 움직이고, TextBox에는 현재의 Value 값이 표시되도록 하자.

n 데이터 바인딩으로 ProgressBar와 TextBox에는 값이 바인딩 되어 같이 따라서 변하는데 Data Trigger를 이용하여 스크롤바의 끝에 오면 ProgressBar의 전경색(Foreground)를 빨강으로 변경하는 예제를 작성해 보자.

[MainWindow.xaml]

<Window x:Class="WpfApp17.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:WpfApp17" mc:Ignorable="d" Title="MainWindow" Height="150" Width="525"> <Window.Resources> <Style TargetType="{x:Type ProgressBar}"> <Setter Property="Foreground" Value="Blue" /> <Style.Triggers> <DataTrigger Binding="{Binding TheValue}" Value="20"> <Setter Property="Foreground" Value="Red" /> </DataTrigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Slider x:Name="MySlider" Margin="5" Minimum="10" Maximum="20" Value="{Binding TheValue}"/> <ProgressBar Grid.Row="1" Minimum="10" Maximum="20" Value="{Binding TheValue}" /> <TextBox Grid.Row="2" Text="{Binding TheValue}" /> </Grid> </Window>

[MainWindow.xaml.cs]

namespace WpfApp17 { public class DataObject { public int TheValue { get; set; } } public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DataContext = new DataObject(); } } }

n 실행화면

n MultiDataTrigger와 DataTrigger의 관계는 MultiTrigger와 Trigger의 관계와 같은데 MultiDataTrigger는 하나 이상의 Condition 엘리먼트를 참조하며 Condition 엘리먼트에 Property, Binding, Value 속성을 정의한다. 아래 예제는 두 CheckBox 컨트롤이 체크 되었을 때 버튼을 활성화 시키는 예문이다.

​

<Window x:Class="WpfApp6.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:WpfApp6" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel.Resources> <Style TargetType="{x:Type CheckBox}"> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="Margin" Value="12" /> </Style> <Style TargetType="{x:Type Button}"> <Setter Property="FontSize" Value="24" /> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="Margin" Value="12" /> <Setter Property="IsEnabled" Value="False" /> <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding ElementName=chkbox1, Path=IsChecked}" Value="True" /> <Condition Binding="{Binding ElementName=chkbox2, Path=IsChecked}" Value="True" /> </MultiDataTrigger.Conditions> <Setter Property="IsEnabled" Value="True" /> </MultiDataTrigger> </Style.Triggers> </Style> </StackPanel.Resources> <CheckBox Name="chkbox1">Check 1</CheckBox> <CheckBox Name="chkbox2">Check 2</CheckBox> <Button>Button 1</Button> <Button>Button 2</Button> </StackPanel> </Window>

n 이번 예제는 ListBox 컨트롤에 사원들을 출력하는데 DataTrigger를 사용하여 특정 부서 사원들을 다르게 표시하고 MultiDataTrigger를 이용하여 사번과 이름이 지정된 값인 경우 배경색을 다르게 표시하는 예제이다.

n 실행화면

n [Emp.cs]

using System.Collections.ObjectModel; namespace WpfApp1 { public class Emp { private int _Empno; private string _Ename; private int _Deptno; public int Empno { get { return _Empno; } set { _Empno = value; } } public string Ename { get { return _Ename; } set { _Ename= value; } } public int Deptno { get { return _Deptno; } set { _Deptno = value; } } public Emp(int Empno, string Ename, int Deptno) { this.Empno = Empno; this.Ename = Ename; this.Deptno = Deptno; } } public class Emps : ObservableCollection<Emp> { public Emps() { Add(new Emp(1001, "SMITH", 10)); Add(new Emp(1002, "KING", 10)); Add(new Emp(1003, "ALLEN", 20)); Add(new Emp(1004, "TIGER", 10)); Add(new Emp(1005, "SCOTT", 20)); Add(new Emp(1006, "JHON", 10)); } } }

n [MainWindow.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="250" Width="450"> <Window.Resources> <local:Emps x:Key="Emps"/> <Style TargetType="{x:Type ListBoxItem}"> <Style.Triggers> <DataTrigger Binding="{Binding Path=Deptno}" Value="10"> <Setter Property="Background" Value="Yellow" /> </DataTrigger> <DataTrigger Binding="{Binding Path=Deptno}" Value="20"> <Setter Property="Background" Value="Green" /> </DataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Path=Empno}" Value="1001" /> <Condition Binding="{Binding Path=Ename}" Value="SMITH" /> </MultiDataTrigger.Conditions> <MultiDataTrigger.Setters> <Setter Property="Background" Value="RED" /> </MultiDataTrigger.Setters> </MultiDataTrigger> </Style.Triggers> </Style> <DataTemplate DataType="{x:Type local:Emp}"> <Canvas Width="260" Height="20"> <TextBlock FontSize="12" Width="130" Canvas.Left="0" Text="{Binding Path=Empno}"/> <TextBlock FontSize="12" Width="130&ot; Canvas.Left="130" Text="{Binding Path=Ename}"/> </Canvas> </DataTemplate> </Window.Resources> <StackPanel> <TextBlock FontSize="18" FontWeight="Bold" HorizontalAlignment="Center">데이터 트리거 샘플</TextBlock> <ListBox Width="300" HorizontalAlignment="Center" Background="White" ItemsSource="{Binding Source={StaticResource Emps}}"/> </StackPanel> </Window>

#데이터트리거, #멀티데이터트리거, #WPF트리거, #데이터바인딩, #WPF데이터바인딩, #DataBinding, #WPF, #WPF강좌, #WPF교육, #WPF강의, #시샵, #닷넷, #Csharp, #XAML,