방법: 속성 값이 변경될 때 애니메이션 트리거

이 예제에서는 속성 값이 변경될 때 Trigger를 사용하여 Storyboard를 시작하는 방법을 보여 줍니다. Trigger는 Style, ControlTemplate 또는 DataTemplate 내에서 사용할 수 있습니다.

예제

다음 예제에서는 Trigger를 사용하여 Button의 IsMouseOver 속성이 true가 될 때 해당 Opacity에 애니메이션 효과를 적용합니다.

<!-- PropertyTriggerExample.xaml
     Shows how to use property triggers to start animations. -->
<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Animate Properties with Storyboards">
  <Page.Resources>

    <Style x:Key="PropertyTriggerExampleButtonStyle" TargetType="{x:Type Button}">

      <Setter Property="Opacity" Value="0.25" />

      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">

          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                  To="1" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                  To="0.25" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>          
        </Trigger>               
      </Style.Triggers>    
    </Style>
  </Page.Resources>

  <StackPanel Margin="20">

    <Button Style="{StaticResource PropertyTriggerExampleButtonStyle}">
      Move the mouse over me.
    </Button>

  </StackPanel>
</Page>

속성 Trigger 개체에 의해 적용된 애니메이션은 EventTrigger 애니메이션 또는 Storyboard 메서드를 사용하여 시작된 애니메이션보다 복잡한 방식으로 작동합니다. 이러한 애니메이션은 다른 Trigger 개체에 의해 정의된 애니메이션과 "핸드오프"하지만 EventTrigger 및 메서드에서 트리거한 애니메이션으로 구성됩니다.

참고 항목

참조

Trigger

개념

속성 애니메이션 기술 개요

Storyboard 개요