XAML-트리거

기본적으로 트리거를 사용하면 속성 값을 변경하거나 속성 값에 따라 작업을 수행 할 수 있습니다. 따라서 기본적으로 새 컨트롤을 만들지 않고도 컨트롤의 모양 및 / 또는 동작을 동적으로 변경할 수 있습니다.

트리거는 특정 조건이 충족 될 때 특정 속성의 값을 변경하는 데 사용됩니다. 트리거는 일반적으로 특정 컨트롤에 적용되는 문서의 스타일 또는 루트에서 정의됩니다. 트리거에는 세 가지 유형이 있습니다.

속성 트리거
데이터 트리거
이벤트 트리거

속성 트리거

속성 트리거에서 한 속성에서 변경이 발생하면 다른 속성에서 즉시 또는 애니메이션 변경을 가져옵니다. 예를 들어, 마우스가 버튼 위에있을 때 버튼 모양을 변경하려는 경우 속성 트리거를 사용할 수 있습니다.

예

다음 예제는 마우스가 해당 영역에 들어갈 때 버튼의 전경색을 변경하는 방법을 보여줍니다.

<Window x:Class = "XAMLPropertyTriggers.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources>
      <Style x:Key = "TriggerStyle" TargetType = "Button">
         <Setter Property = "Foreground" Value = "Blue" />
         <Style.Triggers>
            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter Property = "Foreground" Value = "Green" />
            </Trigger> 
         </Style.Triggers>
      </Style>
   </Window.Resources>
	
   <Grid>
      <Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}" 
         Content = "Trigger"/>
   </Grid>
	
</Window>

위의 코드를 컴파일하고 실행하면 다음과 같은 출력이 생성됩니다.

마우스가 버튼 영역에 들어가면 전경색이 녹색으로 변경됩니다.

데이터 트리거

데이터 트리거는 바인딩 된 데이터가 일부 조건을 충족 할 때 일부 작업을 수행합니다. 몇 가지 속성을 사용하여 확인란과 텍스트 블록이 생성되는 다음 XAML 코드를 살펴 보겠습니다. 확인란을 선택하면 전경색이 빨간색으로 변경됩니다.

<Window x:Class = "XAMLDataTrigger.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Data Trigger" Height = "350" Width = "604">
	
   <StackPanel HorizontalAlignment = "Center">
      <CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/>
		
      <TextBlock Name = "txtblock" VerticalAlignment = "Center" 
         Text = "Event Trigger" FontSize = "24" Margin = "20">
         <TextBlock.Style>
            <Style>
               <Style.Triggers>
                  <DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}" 
                     Value = "true">
                     <Setter Property = "TextBlock.Foreground" Value = "Red"/>
                     <Setter Property = "TextBlock.Cursor" Value = "Hand" />
                  </DataTrigger>
               </Style.Triggers>
            </Style>
         </TextBlock.Style>
      </TextBlock>
   </StackPanel>
	
</Window>

위의 코드를 컴파일하고 실행하면 다음과 같은 출력이 생성됩니다.

확인란을 선택하면 텍스트 블록의 전경색이 빨간색으로 변경됩니다.

이벤트 트리거

이벤트 트리거는 특정 이벤트가 시작될 때 일부 작업을 수행합니다. 일반적으로 DoubleAnimation, ColorAnimation 등과 같은 일부 애니메이션을 수행하는 데 사용됩니다. 다음 코드 블록은 간단한 버튼을 만듭니다. 클릭 이벤트가 시작되면 버튼의 너비와 높이가 확장됩니다.

<Window x:Class = "XAMLEventTrigger.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <Button Content = "Click Me" Width = "60" Height = "30">
         <Button.Triggers>
            <EventTrigger RoutedEvent = "Button.Click">
               <EventTrigger.Actions>
                  <BeginStoryboard>
                     <Storyboard>
                     
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>
         </Button.Triggers>
      </Button>
   </Grid>
</Window>

위의 코드를 컴파일하고 실행하면 다음과 같은 출력이 생성됩니다.

이제 버튼을 클릭하면 두 차원에서 모두 확장되기 시작하는 것을 볼 수 있습니다.