방법: 스타일에 애니메이션 효과 적용

업데이트: 2007년 11월

이 예제에서는 스타일 내에서 속성에 애니메이션 효과를 적용하는 방법을 보여 줍니다. 스타일 내에서 애니메이션 효과를 적용할 때는 스타일이 정의된 프레임워크 요소만 직접 대상으로 사용할 수 있습니다. Freezable 개체를 대상으로 하려면 스타일이 지정된 요소의 속성과 "점으로 구분"해야 합니다.

다음 예제에서는 몇 개의 애니메이션을 스타일 안에서 정의하고 Button에 적용합니다. 사용자가 단추 위로 마우스를 옮기면 불투명했던 단추가 부분적으로 반투명해졌다가 다시 원래 상태로 돌아오는 과정이 반복됩니다. 사용자가 마우스를 단추 바깥으로 옮기면 단추가 완전히 불투명해집니다. 단추를 클릭하면 배경색이 주황색에서 흰색으로 변했다 다시 원래 색상으로 돌아옵니다. 단추를 칠하는 데 사용되는 SolidColorBrush는 직접 대상으로 지정할 수 없기 때문에 단추의 Background 속성과 점으로 구분하여 액세스합니다.

예제

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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되지 않고 애니메이션이 만들어지지 않습니다.

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