WPF-트리거

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

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

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

속성 트리거

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

다음 예제 코드는 마우스가 버튼 위에있을 때 버튼의 전경색을 변경하는 방법을 보여줍니다.

<Window x:Class = "WPFPropertyTriggers.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 = "WPFDataTrigger.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>

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

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

이벤트 트리거

이벤트 트리거는 특정 이벤트가 시작될 때 몇 가지 작업을 수행합니다. 일반적으로 DoubleAnumatio, ColorAnimation 등과 같은 제어에 대한 일부 애니메이션을 수행하는 데 사용됩니다. 다음 예제에서는 간단한 버튼을 생성합니다. 클릭 이벤트가 시작되면 버튼 너비와 높이가 확장됩니다.

<Window x:Class = "WPFEventTrigger.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>

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

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

위의 예제를 컴파일 및 실행하고 다른 속성에도 트리거를 적용하는 것이 좋습니다.