스타일에 애니메이션 효과를 적용하는 방법

이 예제에서는 스타일 내에서 속성에 애니메이션 효과를 적용하는 방법을 볼 수 있습니다. 스타일 내에서 애니메이션 효과를 주는 경우, 스타일이 정의된 프레임워크 요소만 직접 대상으로 지정할 수 있습니다. 고정 가능한 개체를 대상으로 지정하려면 스타일이 지정된 요소의 속성에서 "아래로 점을 찍어"야 합니다.

다음 예제에서는 여러 애니메이션이 같은 스타일 내에서 정의되고 Button에 적용됩니다. 사용자가 단추 위로 마우스를 옮기면 불투명에서 부분 반투명으로 페이드된 다음 다시 원래대로 돌아가는 작업이 반복됩니다. 사용자가 마우스를 단추에서 치우면 완전히 불투명해집니다. 단추를 클릭하면 배경색이 주황색에서 흑백으로 다시 변경됩니다. 단추를 채색하는 데 사용한 SolidColorBrush는 직접 대상으로 지정할 수 없으므로, 단추의 Background 속성을 아래로 점을 찍어 액세스합니다.

예제

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Storyboards in Styles Example" Background="White">
  <Page.Resources>
  
    <!-- Defines a Button style. -->
    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
      <Setter Property="Button.Background">
        <Setter.Value>
          <SolidColorBrush Color="Orange" />
        </Setter.Value>
      </Setter>
      <Style.Triggers>
      
        <!-- Animates the button's opacity on mouse over. -->
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  From="1.0" To="0.5" Duration="0:0:0.5" AutoReverse="True"
                  RepeatBehavior="Forever" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
        
        <!-- Returns the button's opacity to 1 when the mouse leaves. -->
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  To="1" Duration="0:0:0.1" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>   
        
        <!-- Changes the button's color when clicked. 
             Notice that the animation can't target the
             SolidColorBrush used to paint the button's background
             directly. The brush must be accessed through the button's
             Background property. -->
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                  From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
      </Style.Triggers>
    </Style>
  </Page.Resources>
  
  <StackPanel Margin="20">
    <Button Style="{StaticResource MyButtonStyle}">Click Me</Button>
  </StackPanel>
</Page>

스타일 내에서 애니메이션 효과를 적용할 때는 존재하지 않는 개체를 대상으로 지정할 수 있습니다. 예를 들어 스타일이 SolidColorBrush를 사용하여 단추의 배경 속성을 설정하지만 특정 시점에서 스타일이 재정의되고 단추의 배경이 LinearGradientBrush로 설정된다고 가정해 보겠습니다. SolidColorBrush에 애니메이션을 적용하면 예외가 throw되지 않습니다. 애니메이션은 자동으로 실패합니다.

스토리보드 대상 지정 구문에 대한 자세한 내용은 스토리보드 개요를 참조하세요. 애니메이션에 대한 자세한 내용은 애니메이션 개요를 참조하세요. 스타일에 대한 자세한 내용은 스타일 지정 및 템플릿을 참조하세요.