Storyboard 개요Storyboards Overview

이 항목에서는 개체를 사용 Storyboard 하 여 애니메이션을 구성 하 고 적용 하는 방법을 보여 줍니다.This topic shows how to use Storyboard objects to organize and apply animations. 개체를 대화형으로 조작 Storyboard 하 고 간접 속성 대상 지정 구문을 설명 하는 방법을 설명 합니다.It describes how to interactively manipulate Storyboard objects and describes indirect property targeting syntax.

전제 조건Prerequisites

이 항목을 이해하려면 다양한 애니메이션 형식과 해당 기본 기능에 대해 잘 알고 있어야 합니다.To understand this topic, you should be familiar with the different animation types and their basic features. 애니메이션 소개를 보려면 애니메이션 개요를 참조하세요.For an introduction to animation, see the Animation Overview. 또한 연결된 속성을 사용하는 방법을 알아야 합니다.You should also know how to use attached properties. 연결된 속성에 대한 자세한 내용은 연결된 속성 개요를 참조하세요.For more information about attached properties, see the Attached Properties Overview.

Storyboard란?What Is a Storyboard?

애니메이션만이 타임라인의 유용한 형식은 아닙니다.Animations are not the only useful type of timeline. 타임라인의 집합을 구성하고 속성에 타임라인을 적용하는 데 도움이 되는 다른 타임라인 클래스도 제공됩니다.Other timeline classes are provided to help you organize sets of timelines, and to apply timelines to properties. 컨테이너 타임 라인은 TimelineGroup 클래스에서 파생 되며 및 ParallelTimeline Storyboard를 포함 합니다.Container timelines derive from the TimelineGroup class, and include ParallelTimeline and Storyboard.

Storyboard 포함 된 타임 라인에 대 한 대상 정보를 제공 하는 컨테이너 타임 라인의 유형입니다.A Storyboard is a type of container timeline that provides targeting information for the timelines it contains. 스토리 보드에는 다른 컨테이너 타임 Timeline라인 및 애니메이션을 비롯 한 모든 유형이 포함 될 수 있습니다.A Storyboard can contain any type of Timeline, including other container timelines and animations. Storyboard개체를 사용 하면 다양 한 개체와 속성에 영향을 주는 타임 라인을 단일 타임 라인 트리에 결합 하 여 복잡 한 타이밍 동작을 쉽게 구성 하 고 제어할 수 있습니다.Storyboard objects enable you to combine timelines that affect a variety of objects and properties into a single timeline tree, making it easy to organize and control complex timing behaviors. 예를 들어 다음 세 가지 작업을 수행하는 단추가 필요하다고 가정해 봅니다.For example, suppose you want a button that does these three things.

  • 단추를 선택하면 단추가 커지고 색이 변경됩니다.Grow and change color when the user selects the button.

  • 클릭할 때 축소되었다가 다시 원래 크기로 커집니다.Shrink away and then grow back to its original size when clicked.

  • 사용되지 않도록 설정되면 축소되었다가 50% 불투명도로 페이드됩니다.Shrink and fade to 50 percent opacity when it becomes disabled.

이 경우 동일한 개체에 적용되는 여러 애니메이션 집합이 있고 단추 상태에 따라 다른 시간에 재생하려고 합니다.In this case, you have multiple sets of animations that apply to the same object, and you want to play at different times, dependent on the state of the button. Storyboard개체를 사용 하 여 애니메이션을 구성 하 고 그룹에서 하나 이상의 개체에 적용할 수 있습니다.Storyboard objects enable you to organize animations and apply them in groups to one or more objects.

Storyboard를 사용할 수 있는 위치Where Can You Use a Storyboard?

Storyboard 애니메이션 효과 클래스의 종속성 속성에 애니메이션 효과를 주는 데 사용할 수 있습니다. 클래스를 애니메이션 효과 하는 방법에 대 한 자세한 내용은 애니메이션 개요를 참조 하세요.A Storyboard can be used to animate dependency properties of animatable classes (for more information about what makes a class animatable, see the Animation Overview). 그러나 스토리 보 딩은 프레임 워크 수준 기능 이므로 개체는 NameScope FrameworkElement 또는 FrameworkContentElement의에 속해야 합니다.However, because storyboarding is a framework-level feature, the object must belong to the NameScope of a FrameworkElement or a FrameworkContentElement.

예를 들어를 사용 Storyboard 하 여 다음을 수행할 수 있습니다.For example, you could use a Storyboard to do the following:

그러나를 사용 Storyboard 하 여 FrameworkElement 이름을 FrameworkElement 또는 FrameworkContentElement로 등록 하지 SolidColorBrush 않았거나 또는 FrameworkContentElement의 속성을 설정 하는 데 사용 되지 않은에 애니메이션 효과를 적용할 수 없습니다.However, you could not use a Storyboard to animate a SolidColorBrush that did not register its name with a FrameworkElement or FrameworkContentElement, or was not used to set a property of a FrameworkElement or FrameworkContentElement.

Storyboard를 사용하여 애니메이션을 적용하는 방법How to Apply Animations with a Storyboard

를 사용 Storyboard 하 여 애니메이션을 구성 하 고 적용 하려면 애니메이션을 Storyboard의 자식 타임 라인으로 추가 합니다.To use a Storyboard to organize and apply animations, you add the animations as child timelines of the Storyboard. 클래스 StoryboardStoryboard.TargetName 및 연결된속성을제공합니다.Storyboard.TargetPropertyThe Storyboard class provides the Storyboard.TargetName and Storyboard.TargetProperty attached properties. 애니메이션에 이러한 속성을 설정하여 해당 대상 개체 및 속성을 지정합니다.You set these properties on an animation to specify its target object and property.

애니메이션을 대상에 적용 하려면 트리거 동작이 나 메서드 Storyboard 를 사용 하 여를 시작 합니다.To apply animations to their targets, you begin the Storyboard using a trigger action or a method. 에서 XAMLXAML EventTrigger, BeginStoryboard 또는 와DataTrigger함께 개체를사용합니다Trigger.In XAMLXAML, you use a BeginStoryboard object with an EventTrigger, Trigger, or DataTrigger. 코드에서 Begin 메서드를 사용할 수도 있습니다.In code, you can also use the Begin method.

다음 표에서는 각 Storyboard begin 기술이 지원 되는 다양 한 위치, 즉 인스턴스별, 스타일, 컨트롤 템플릿 및 데이터 템플릿을 보여 줍니다.The following table shows the different places where each Storyboard begin technique is supported: per-instance, style, control template, and data template. "인스턴스별"은 스타일, 컨트롤 템플릿 또는 데이터 템플릿이 아닌 개체의 인스턴스에 직접 애니메이션 또는 storyboard를 적용하는 기술을 나타냅니다."Per-Instance" refers to the technique of applying an animation or storyboard directly to instances of an object, rather than in a style, control template, or data template.

storyboard 시작 방법...Storyboard is begun using… 인스턴스별Per-instance 스타일Style 컨트롤 템플릿Control template 데이터 템플릿Data template 예제Example
BeginStoryboardEventTriggerBeginStoryboard and an EventTrigger Yes Yes Yes Yes Storyboard를 사용하여 속성에 애니메이션 효과 주기Animate a Property by Using a Storyboard
BeginStoryboard및 속성TriggerBeginStoryboard and a property Trigger 아니요No Yes Yes Yes 속성 값이 변경될 때 애니메이션 트리거Trigger an Animation When a Property Value Changes
BeginStoryboardDataTriggerBeginStoryboard and a DataTrigger 아니요No Yes Yes Yes 방법: 데이터가 변경 될 때 애니메이션 트리거How to: Trigger an Animation When Data Changes
Begin 메서드Begin method Yes 아니오No 아니요No 아니요No Storyboard를 사용하여 속성에 애니메이션 효과 주기Animate a Property by Using a Storyboard

다음 예제에서는를 Storyboard 사용 하 여 Rectangle 요소의 Width Color 에 애니메이션 효과를 주는 SolidColorBrush Rectangle데 사용 되는의를 그립니다.The following example uses a Storyboard to animate the Width of a Rectangle element and the Color of a SolidColorBrush used to paint that Rectangle.

<!-- This example shows how to animate with a storyboard.-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.StoryboardsExample" 
  WindowTitle="Storyboards Example">
  <StackPanel Margin="20">
    
    <Rectangle Name="MyRectangle"
      Width="100"
      Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />
              
              <ColorAnimation 
                Storyboard.TargetName="MySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Blue" To="Red" Duration="0:0:1" />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle> 
  </StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Data;
using System.Windows.Shapes;
using System.Windows.Input;


namespace Microsoft.Samples.Animation
{
    public class StoryboardsExample : Page
    {      
        public StoryboardsExample()
        {
            this.WindowTitle = "Storyboards Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "MyRectangle";
            
            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());            
            
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
            this.RegisterName("MySolidColorBrush", mySolidColorBrush);
            myRectangle.Fill = mySolidColorBrush;
            
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, 
                new PropertyPath(Rectangle.WidthProperty));
            
            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
            Storyboard.SetTargetProperty(myColorAnimation, 
                new PropertyPath(SolidColorBrush.ColorProperty)); 
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            myStoryboard.Children.Add(myColorAnimation);

            myRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
            {
                myStoryboard.Begin(this);
            };
            
            myStackPanel.Children.Add(myRectangle);
            this.Content = myStackPanel;
        } 
    }
}

다음 섹션에서는 TargetNameTargetProperty 연결 된 속성에 대해 자세히 설명 합니다.The following sections describe the TargetName and TargetProperty attached properties in more detail.

프레임워크 요소, 프레임워크 콘텐츠 요소 및 Freezable을 대상으로 지정Targeting Framework Elements, Framework Content Elements, and Freezables

이전 섹션에서는 애니메이션이 대상을 찾기 위해서는 대상의 이름 및 애니메이션 효과를 주려는 속성을 알고 있어야 한다는 사실을 언급했습니다.The previous section mentioned that, for an animation to find its target, it must know the target's name and the property to animate. 애니메이션 효과를 적용할 속성을 지정 하는 것은 Storyboard.TargetProperty 바로 애니메이션 효과가 적용 되는 속성의 이름으로 설정 하면 됩니다.Specifying the property to animate is straight forward: simply set Storyboard.TargetProperty with the name of the property to animate. 애니메이션에 속성을 Storyboard.TargetName 설정 하 여 애니메이션 효과를 적용할 속성을 가진 개체의 이름을 지정 합니다.You specify the name of the object whose property you want to animate by setting the Storyboard.TargetName property on the animation.

TargetName 속성이 작동 하려면 대상 개체에 이름이 있어야 합니다.For the TargetName property to work, the targeted object must have a name. 이름을 FrameworkElement 또는XAMLXAML 에 할당 하Freezable 는 것은 개체에 이름을 할당 하는 것과 다릅니다. FrameworkContentElementAssigning a name to a FrameworkElement or a FrameworkContentElement in XAMLXAML is different than assigning a name to a Freezable object.

프레임 워크 요소는 FrameworkElement 클래스에서 상속 되는 클래스입니다.Framework elements are those classes that inherit from the FrameworkElement class. 프레임 Window워크 요소의 DockPanel Rectangle예로는,, 및가 있습니다. ButtonExamples of framework elements include Window, DockPanel, Button, and Rectangle. 기본적으로 모든 창, 패널 및 컨트롤은 요소입니다.Essentially all windows, panels, and controls are elements. 프레임 워크 콘텐츠 요소는 FrameworkContentElement 클래스에서 상속 되는 클래스입니다.Framework content elements are those classes that inherit from the FrameworkContentElement class. 프레임 워크 콘텐츠 요소의 FlowDocument 예로는 및 Paragraph가 있습니다.Examples of framework content elements include FlowDocument and Paragraph. 형식이 프레임워크 요소인지 또는 프레임워크 콘텐츠 요소인지 확실하지 않은 경우 Name 속성을 가지는지 여부를 확인합니다.If you're not sure whether a type is a framework element or a framework content element, check to see whether it has a Name property. 이 속성을 가질 경우 프레임워크 요소이거나 프레임워크 콘텐츠 요소일 것입니다.If it does, it's probably a framework element or a framework content element. 확실히 하려면 해당 형식 페이지의 상속 계층 구조 섹션을 확인합니다.To be sure, check the Inheritance Hierarchy section of its type page.

에서 XAMLXAML프레임 워크 요소나 프레임 워크 콘텐츠 요소를 대상으로 지정할 수 있도록 설정 하려면 해당 Name 속성을 설정 합니다.To enable the targeting of a framework element or a framework content element in XAMLXAML, you set its Name property. 또한 코드에서 RegisterName 메서드를 사용 하 여를 NameScope만든 요소에 요소 이름을 등록 해야 합니다.In code, you also need to use the RegisterName method to register the element's name with the element for which you've created a NameScope.

앞의 예제에서 가져온 다음 예제는 이름 MyRectangle a RectangleFrameworkElement할당 합니다.The following example, taken from the preceding example, assigns the name MyRectangle a Rectangle, a type of FrameworkElement.

<Rectangle Name="MyRectangle"
  Width="100"
  Height="100">
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle";

// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());            

this.RegisterName(myRectangle.Name, myRectangle);

이름이 지정되면 해당 요소의 속성에 애니메이션 효과를 줄 수 있습니다.After it has a name, you can animate a property of that element.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle"
  Storyboard.TargetProperty="Width"
  From="100" To="200" Duration="0:0:1" />
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, 
    new PropertyPath(Rectangle.WidthProperty));

Freezable형식은 Freezable 클래스에서 상속 되는 클래스입니다.Freezable types are those classes that inherit from the Freezable class. 예를 들면 ,RotateTransformGradientStop가있습니다. Freezable SolidColorBrushExamples of Freezable include SolidColorBrush, RotateTransform, and GradientStop.

Freezable 에서XAMLXAML애니메이션을 통해를 대상으로 하도록 설정 하려면 x:Name 지시문 을 사용 하 여 이름을 할당 합니다.To enable the targeting of a Freezable by an animation in XAMLXAML, you use the x:Name Directive to assign it a name. 코드에서는 RegisterName 메서드를 사용 하 여를 NameScope만든 요소에 해당 이름을 등록 합니다.In code, you use the RegisterName method to register its name with the element for which you've created a NameScope.

다음 예에서는 Freezable 개체에 이름을 할당 합니다.The following example assigns a name to a Freezable object.

<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);

그런 후 개체를 애니메이션 대상으로 지정할 수 있습니다.The object can then be targeted by an animation.

<ColorAnimation 
  Storyboard.TargetName="MySolidColorBrush"
  Storyboard.TargetProperty="Color"
  From="Blue" To="Red" Duration="0:0:1" />  
Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
Storyboard.SetTargetProperty(myColorAnimation, 
    new PropertyPath(SolidColorBrush.ColorProperty)); 

Storyboard개체는 TargetName 이름 범위를 사용 하 여 속성을 확인 합니다.Storyboard objects use name scopes to resolve the TargetName property. WPF 이름 범위에 대한 자세한 내용은 WPF XAML 이름 범위를 참조하세요.For more information about WPF name scopes, see WPF XAML Namescopes. TargetName 속성이 생략 된 경우 애니메이션은 해당 속성이 정의 된 요소를 대상으로 하거나 스타일의 경우 스타일이 지정 된 요소를 대상으로 지정 합니다.If the TargetName property is omitted, the animation targets the element on which it is defined, or, in the case of styles, the styled element.

경우에 따라 Freezable 개체에 이름을 할당할 수 없습니다.Sometimes a name can't be assigned to a Freezable object. 예를 들어, Freezable 이 리소스로 선언 되거나 속성 값을 스타일로 설정 하는 데 사용 되는 경우에는 이름을 지정할 수 없습니다.For example, if a Freezable is declared as a resource or used to set a property value in a style, it can't be given a name. 이름이 없기 때문에 직접적으로 대상으로 지정할 수 없지만 간접적으로 지정할 수는 있습니다.Because it doesn't have a name, it can't be targeted directly—but it can be targeted indirectly. 다음 섹션에서는 간접 대상 지정을 사용하는 방법을 설명합니다.The following sections describe how to use indirect targeting.

간접 대상 지정Indirect Targeting

가 리소스로 선언 되거나 Freezable 스타일에서 속성 값을 설정 하는 데 사용 되는 경우와 같이 애니메이션에서 직접 대상을 지정할 수 없는 경우가 있습니다. FreezableThere are times a Freezable can't be targeted directly by an animation, such as when the Freezable is declared as a resource or used to set a property value in a style. 이러한 경우 직접 대상으로 지정할 수 없지만 개체에 Freezable 도 애니메이션 효과를 적용할 수 있습니다.In these cases, even though you can't target it directly, you can still animate the Freezable object. 속성을 TargetName 의 이름 Freezable으로 설정 하는 대신 Freezable "속해 있는" 요소의 이름을 지정 합니다.Instead of setting the TargetName property with the name of the Freezable, you give it the name of the element to which the Freezable "belongs." 예를 들어 사각형 SolidColorBrush 요소의를 Fill 설정 하는 데 사용 되는은 해당 사각형에 속합니다.For example, a SolidColorBrush used to set the Fill of a rectangle element belongs to that rectangle. 브러시에 애니메이션 효과를 주려면 애니메이션의 TargetProperty 속성을 Freezable 설정 하 고 종료 하는 데 사용 된 프레임 워크 요소 또는 프레임 워크 콘텐츠 Freezable 요소의 속성에서 시작 하는 속성 체인으로 애니메이션을 설정 합니다.To animate the brush, you would set the animation's TargetProperty with a chain of properties that starts at the property of the framework element or framework content element the Freezable was used to set and ends with the Freezable property to animate.

<ColorAnimation 
  Storyboard.TargetName="Rectangle01"
  Storyboard.TargetProperty="Fill.Color"
  From="Blue" To="AliceBlue" Duration="0:0:1" />
DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Freezable 이 고정 되 면 복제본이 생성 되 고 복제에 애니메이션 효과가 적용 됩니다.Note that, if the Freezable is frozen, a clone will be made, and that clone will be animated. 이 경우 원래 개체에 실제로 애니메이션이 적용 HasAnimatedProperties 되지 않기 때문에 false원래 개체의 속성은을 계속 반환 합니다.When this happens, the original object's HasAnimatedProperties property continues to return false, because the original object is not actually animated. 복제에 대 한 자세한 내용은 Freezable 개체 개요를 참조 하세요.For more information about cloning, see the Freezable Objects Overview.

또한 간접 속성 대상 지정을 사용할 경우에는 존재하지 않는 개체를 대상으로 지정할 수 있습니다.Also note that, when using indirect property targeting, it's possible to target objects that don't exist. 예를 들어, 실제로 Background LinearGradientBrush 가 단추의 배경을 설정 하는 데 사용 된 경우 특정 SolidColorBrush 단추의가로 설정 되 고 색에 애니메이션을 적용 하는 경우를 가정 합니다.For example, you might assume that the Background of a particular button was set with a SolidColorBrush and try to animate its Color, when in fact a LinearGradientBrush was used to set the button's Background. 이 경우 예외가 throw 되지 않습니다. 가 LinearGradientBrush Color 속성 변경 내용에 반응 하지 않으므로 애니메이션이 표시 되지 않습니다.In these cases, no exception is thrown; the animation fails to have a visible effect because LinearGradientBrush does not react to changes to the Color property.

다음 섹션에서는 간접 속성 대상 지정 구문을 좀 더 자세히 설명합니다.The following sections describe indirect property targeting syntax in more detail.

XAML에서 Freezable 속성을 간접적으로 대상으로 지정Indirectly Targeting a Property of a Freezable in XAML

에서 XAMLXAMLfreezable의 속성을 대상으로 하려면 다음 구문을 사용 합니다.To target a property of a freezable in XAMLXAML, use the following syntax.

ElementPropertyName . FreezablePropertyNameElementPropertyName . FreezablePropertyName

WhereWhere

  • Elementpropertyname 은를 설정 하는 FrameworkElement 데 사용 Freezable 되는의 속성입니다.ElementPropertyName is the property of the FrameworkElement which the Freezable is used to set, and

  • FreezablePropertyName 은 애니메이션 효과 Freezable 를 적용할의 속성입니다.FreezablePropertyName is the property of the Freezable to animate.

다음 코드에서는 사각형 요소의를 Color Fill 설정 하는 SolidColorBrush 데 사용 되는의에 애니메이션 효과를 주는 방법을 보여 줍니다.The following code shows how to animate the Color of a SolidColorBrush used to set the Fill of a rectangle element.

<Rectangle
  Name="Rectangle01"
  Height="100"
  Width="100"
  Fill="{StaticResource MySolidColorBrushResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation 
            Storyboard.TargetName="Rectangle01"
            Storyboard.TargetProperty="Fill.Color"
            From="Blue" To="AliceBlue" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

컬렉션 또는 배열에 포함된 Freezable을 대상으로 지정해야 하는 경우도 있습니다.Sometimes you need to target a freezable contained in a collection or array.

컬렉션에 포함된 Freezable을 대상으로 지정하려면 다음 경로 구문을 사용합니다.To target a freezable contained in a collection, you use the following path syntax.

ElementPropertyName .Children[ CollectionIndex ]. FreezablePropertyNameElementPropertyName .Children[ CollectionIndex ]. FreezablePropertyName

여기서 Collectionindex 는 배열 또는 컬렉션에 있는 개체의 인덱스입니다.Where CollectionIndex is the index of the object in its array or collection.

예를 들어 사각형 TransformGroup 에 해당 RenderTransform 속성에 적용 된 리소스가 있고 포함 된 변환 중 하나에 애니메이션 효과를 적용 하려는 경우를 가정 합니다.For example, suppose that a rectangle has a TransformGroup resource applied to its RenderTransform property, and you want to animate one of the transforms it contains.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>

다음 코드에서는 앞의 예제에 Angle RotateTransform 표시 된의 속성에 애니메이션 효과를 주는 방법을 보여 줍니다.The following code shows how to animate the Angle property of the RotateTransform shown in the previous example.

<Rectangle
  Name="Rectangle02"
  Height="100"
  Width="100"
  Fill="Blue"
  RenderTransform="{StaticResource MyTransformGroupResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="Rectangle02"
            Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
            From="0" To="360" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>  

코드에서 Freezable 속성을 간접적으로 대상으로 지정Indirectly Targeting a Property of a Freezable in Code

코드에서 PropertyPath 개체를 만듭니다.In code, you create a PropertyPath object. 를 만들 PropertyPathPathPathParameters를 지정 합니다.When you create the PropertyPath, you specify a Path and PathParameters.

을 만들려면 PathParameters종속성 속성 식별자 필드의 목록이 포함 DependencyProperty 된 형식의 배열을 만듭니다.To create PathParameters, you create an array of type DependencyProperty that contains a list of dependency property identifier fields. 첫 번째 식별자 필드는의 속성 FrameworkElement 에 대 한 것 이거나 FrameworkContentElementFreezable 설정 하는 데 사용 되는입니다.The first identifier field is for the property of the FrameworkElement or FrameworkContentElement that the Freezable is used to set. 다음 식별자 필드는 대상 Freezable 으로 할의 속성을 나타냅니다.The next identifier field represents the property of the Freezable to target. Freezable 개체FrameworkElement 에 연결 하는 속성 체인으로 생각 하면 됩니다.Think of it as a chain of properties that connects the Freezable to the FrameworkElement object.

다음은 사각형 요소의를 Color Fill 설정 하는 SolidColorBrush 데 사용 되는의를 대상으로 하는 종속성 속성 체인의 예입니다.The following is an example of a dependency property chain that targets the Color of a SolidColorBrush used to set the Fill of a rectangle element.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};

또한를 지정 Path해야 합니다.You also need to specify a Path. Path를 해석 Path 하는방법을설명하는입니다.PathParameters StringA Path is a String that tells the Path how to interpret its PathParameters. 여기서는 다음 구문을 사용합니다.It uses the following syntax.

( OwnerPropertyArrayIndex ).( FreezablePropertyArrayIndex )( OwnerPropertyArrayIndex ).( FreezablePropertyArrayIndex )

WhereWhere

  • OwnerPropertyArrayIndex 는를 설정 하는 DependencyProperty 데 사용 되는 FrameworkElement Freezable 개체의 속성 식별자를 포함 하는 배열의 인덱스입니다.OwnerPropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of the FrameworkElement object's property that the Freezable is used to set, and

  • FreezablePropertyArrayIndex 은 대상으로 할 속성 DependencyProperty 의 식별자를 포함 하는 배열의 인덱스입니다.FreezablePropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of property to target.

다음 예제에서는 앞의 Path 예제에서 정의 된 PathParameters 와 함께 제공 되는을 보여 줍니다.The following example shows the Path that would accompany the PathParameters defined in the preceding example.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";

다음 예제에서는 이전 예제의 코드를 결합 하 여 사각형 요소의를 Color Fill 설정 하 SolidColorBrush 는 데 사용 되는의에 애니메이션 효과를 줍니다.The following example combines the code in the previous examples to animate the Color of a SolidColorBrush used to set the Fill of a rectangle element.


// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope()); 

Rectangle rectangle01 = new Rectangle();
rectangle01.Name = "Rectangle01";   
this.RegisterName(rectangle01.Name, rectangle01);
rectangle01.Width = 100;
rectangle01.Height = 100;
rectangle01.Fill = 
    (SolidColorBrush)this.Resources["MySolidColorBrushResource"];

ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Blue;
myColorAnimation.To = Colors.AliceBlue;
myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myColorAnimation, rectangle01.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myColorAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle01.Triggers.Add(myMouseEnterTrigger);

컬렉션 또는 배열에 포함된 Freezable을 대상으로 지정해야 하는 경우도 있습니다.Sometimes you need to target a freezable contained in a collection or array. 예를 들어 사각형 TransformGroup 에 해당 RenderTransform 속성에 적용 된 리소스가 있고 포함 된 변환 중 하나에 애니메이션 효과를 적용 하려는 경우를 가정 합니다.For example, suppose that a rectangle has a TransformGroup resource applied to its RenderTransform property, and you want to animate one of the transforms it contains.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>  

컬렉션에 포함 Freezable 된를 대상으로 하려면 다음 경로 구문을 사용 합니다.To target a Freezable contained in a collection, you use the following path syntax.

( OwnerPropertyArrayIndex ).( CollectionChildrenPropertyArrayIndex ) [ CollectionIndex ].( FreezablePropertyArrayIndex )( OwnerPropertyArrayIndex ).( CollectionChildrenPropertyArrayIndex ) [ CollectionIndex ].( FreezablePropertyArrayIndex )

여기서 Collectionindex 는 배열 또는 컬렉션에 있는 개체의 인덱스입니다.Where CollectionIndex is the index of the object in its array or collection.

Angle 에서 RotateTransform PathParameters두 번째 변환의 속성을 대상으로 하려면 다음 Path 및를 사용 합니다. TransformGroupTo target the Angle property of the RotateTransform, the second transform in the TransformGroup, you would use the following Path and PathParameters.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty, 
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

다음 예제에서는 내 Angle RotateTransform 에 포함 된의에 애니메이션 효과를 주는 전체 코드를 보여 줍니다. TransformGroupThe following example shows the complete code for animating the Angle of a RotateTransform contained within a TransformGroup.

Rectangle rectangle02 = new Rectangle();
rectangle02.Name = "Rectangle02";
this.RegisterName(rectangle02.Name, rectangle02);
rectangle02.Width = 100;
rectangle02.Height = 100;
rectangle02.Fill = Brushes.Blue;
rectangle02.RenderTransform = 
    (TransformGroup)this.Resources["MyTransformGroupResource"];

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0;
myDoubleAnimation.To = 360;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myDoubleAnimation, rectangle02.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty, 
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle02.Triggers.Add(myMouseEnterTrigger);

Freezable을 시작 지점으로 사용해서 간접적으로 대상 지정Indirectly Targeting with a Freezable as the Starting Point

이전 Freezable 섹션에서는 FrameworkElement 또는 FrameworkContentElement 를 시작 하 고 Freezable 하위 속성에 대 한 속성 체인을 만들어를 간접적으로 대상으로 하는 방법에 대해 설명 했습니다.The previous sections described how to indirectly target a Freezable by starting with a FrameworkElement or FrameworkContentElement and creating a property chain to a Freezable sub-property. 또한를 Freezable 시작 점으로 사용 하 고 해당 Freezable 하위 속성 중 하나를 간접적으로 대상으로 지정할 수 있습니다.You can also use a Freezable as a starting point and indirectly target one of its Freezable sub-properties. Freezable 간접 대상 지정의 시작 점으로 사용 하는 경우 한 가지 추가 제한 사항이 적용 Freezable 됩니다. Freezable 즉, 시작 및 그 사이의 모든 및 간접적으로 대상이 지정 된 하위 속성은 고정 되지 않아야 합니다.One additional restriction applies when using a Freezable as a starting point for indirect targeting: the starting Freezable and every Freezable between it and the indirectly targeted sub-property must not be frozen.

XAML에서 Storyboard를 대화형으로 제어Interactively Controlling a Storyboard in XAML

에서 XAML(Extensible Application Markup Language)Extensible Application Markup Language (XAML)storyboard를 시작 하려면 BeginStoryboard 트리거 동작을 사용 합니다.To start a storyboard in XAML(Extensible Application Markup Language)Extensible Application Markup Language (XAML), you use a BeginStoryboard trigger action. BeginStoryboard애니메이션을 적용 하는 개체 및 속성에 애니메이션을 배포 하 고 스토리 보드를 시작 합니다.BeginStoryboard distributes the animations to the objects and properties they animate, and starts the storyboard. 이 프로세스에 대 한 자세한 내용은 애니메이션 및 타이밍 시스템 개요를 참조 하세요. 속성을Name 지정 하 여 이름을 지정 하면 제어 가능한 storyboard로 설정 됩니다. BeginStoryboard(For details about this process, see the Animation and Timing System Overview.) If you give the BeginStoryboard a name by specifying its Name property, you make it a controllable storyboard. 그러면 Storyboard를 시작한 후에 대화형으로 제어할 수 있습니다.You can then interactively control the storyboard after it's started. 다음은 Storyboard를 제어하기 위해 이벤트 트리거와 함께 사용하는 제어 가능한 Storyboard 작업 목록입니다.The following is a list of controllable storyboard actions that you use with event triggers to control a storyboard.

다음 예제에서는 제어 가능한 Storyboard 작업이 Storyboard를 대화형으로 제어하는 데 사용됩니다.In the following example, controllable storyboard actions are used to interactively control a storyboard.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.SDK.Animation.ControllableStoryboardExample"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle>

    <Button Name="BeginButton">Begin</Button>
    <Button Name="PauseButton">Pause</Button>
    <Button Name="ResumeButton">Resume</Button>
    <Button Name="SkipToFillButton">Skip To Fill</Button>
    <Button Name="StopButton">Stop</Button>

    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
        <BeginStoryboard Name="MyBeginStoryboard">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyRectangle" 
              Storyboard.TargetProperty="(Rectangle.Opacity)"
              From="1.0" To="0.0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">
        <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">
        <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
        <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
        <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Page>

코드를 사용하여 Storyboard를 대화형으로 제어Interactively Controlling a Storyboard by Using Code

앞의 예제에서는 트리거 작업을 사용해서 애니메이션 효과를 적용하는 방법을 살펴보았습니다.The previous examples have shown how to animate using trigger actions. 코드에서 Storyboard 클래스의 대화형 메서드를 사용 하 여 스토리 보드를 제어할 수도 있습니다.In code, you may also control a storyboard using interactive methods of the Storyboard class. 코드에서 Storyboard 대화형으로 만들려면 storyboard의 Begin 메서드에 적절 한 오버 로드를 사용 하 고를 제어 하 여 제어 가능 true 하도록 지정 해야 합니다.For a Storyboard to be made interactive in code, you must use the appropriate overload of the storyboard's Begin method and specify true to make it controllable. 참조 된 Begin(FrameworkElement, Boolean) 자세한 페이지입니다.See the Begin(FrameworkElement, Boolean) page for more information.

다음 목록에서는가 시작 된 후를 Storyboard 조작 하는 데 사용할 수 있는 메서드를 보여 줍니다.The following list shows the methods that can be used to manipulate a Storyboard after it has started:

이러한 메서드를 사용 하는 경우의 이점은 또는 Trigger TriggerAction 개체를 만들 필요가 없다는 것입니다. 조작 하려는 제어 Storyboard 대상에 대 한 참조만 있으면 됩니다.The advantage to using these methods is that you don't need to create Trigger or TriggerAction objects; you just need a reference to the controllable Storyboard you want to manipulate.

참고

에서 수행 Clock Storyboard 되는 모든 대화형 작업은 다음 렌더링 직전에 발생 하는 타이밍 엔진의 다음 틱에서 발생 합니다.All interactive actions taken on a Clock, and therefore also on a Storyboard will occur on the next tick of the timing engine which will happen shortly before the next render. 예를 들어 Seek 메서드를 사용 하 여 애니메이션의 다른 위치로 이동 하는 경우 속성 값이 즉시 변경 되지 않고 타이밍 엔진의 다음 틱에서 값이 변경 됩니다.For example, if you use the Seek method to jump to another point in an animation, the property value does not change instantly, rather, the value changes on the next tick of the timing engine.

다음 예제에서는 Storyboard 클래스의 대화형 메서드를 사용 하 여 애니메이션을 적용 하 고 제어 하는 방법을 보여 줍니다.The following example shows how to apply and control animations using the interactive methods of the Storyboard class.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class ControllableStoryboardExample : Page
    {
        private Storyboard myStoryboard;

        public ControllableStoryboardExample()
        {

            // Create a name scope for the page.

            NameScope.SetNameScope(this, new NameScope()); 
 
            this.WindowTitle = "Controllable Storyboard Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(10);

            // Create a rectangle.
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";

            // Assign the rectangle a name by 
            // registering it with the page, so that
            // it can be targeted by storyboard
            // animations.
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myStackPanel.Children.Add(myRectangle);

            //
            // Create an animation and a storyboard to animate the
            // rectangle.
            //
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(5000));
            myDoubleAnimation.AutoReverse = true;

            // Create the storyboard.
            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            //
            // Create some buttons to control the storyboard
            // and a panel to contain them.
            //
            StackPanel buttonPanel = new StackPanel();
            buttonPanel.Orientation = Orientation.Horizontal;
            Button beginButton = new Button();
            beginButton.Content = "Begin";
            beginButton.Click += new RoutedEventHandler(beginButton_Clicked);
            buttonPanel.Children.Add(beginButton);
            Button pauseButton = new Button();
            pauseButton.Content = "Pause";
            pauseButton.Click += new RoutedEventHandler(pauseButton_Clicked);
            buttonPanel.Children.Add(pauseButton);
            Button resumeButton = new Button();
            resumeButton.Content = "Resume";
            resumeButton.Click += new RoutedEventHandler(resumeButton_Clicked);
            buttonPanel.Children.Add(resumeButton);
            Button skipToFillButton = new Button();
            skipToFillButton.Content = "Skip to Fill";
            skipToFillButton.Click += new RoutedEventHandler(skipToFillButton_Clicked);
            buttonPanel.Children.Add(skipToFillButton);
            Button setSpeedRatioButton = new Button();
            setSpeedRatioButton.Content = "Triple Speed";
            setSpeedRatioButton.Click += new RoutedEventHandler(setSpeedRatioButton_Clicked);
            buttonPanel.Children.Add(setSpeedRatioButton);
            Button stopButton = new Button();
            stopButton.Content = "Stop";
            stopButton.Click += new RoutedEventHandler(stopButton_Clicked);
            buttonPanel.Children.Add(stopButton);
            myStackPanel.Children.Add(buttonPanel);
            this.Content = myStackPanel;        
            

        }

        // Begins the storyboard.
        private void beginButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Specifying "true" as the second Begin parameter
            // makes this storyboard controllable.
            myStoryboard.Begin(this, true);

        }

        // Pauses the storyboard.
        private void pauseButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Pause(this);

        }

        // Resumes the storyboard.
        private void resumeButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Resume(this);

        }

        // Advances the storyboard to its fill period.
        private void skipToFillButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.SkipToFill(this);

        }

        // Updates the storyboard's speed.
        private void setSpeedRatioButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(this, 3);

        }

        // Stops the storyboard.
        private void stopButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Stop(this);

        }         

    }

}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample

    Public Class ControllableStoryboardExample
        Inherits Page
        Private myStoryboard As Storyboard

        Public Sub New()

            ' Create a name scope for the page.

            NameScope.SetNameScope(Me, New NameScope())

            Me.WindowTitle = "Controllable Storyboard Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(10)

            ' Create a rectangle.
            Dim myRectangle As New Rectangle()
            myRectangle.Name = "myRectangle"

            ' Assign the rectangle a name by 
            ' registering it with the page, so that
            ' it can be targeted by storyboard
            ' animations.
            Me.RegisterName(myRectangle.Name, myRectangle)
            myRectangle.Width = 100
            myRectangle.Height = 100
            myRectangle.Fill = Brushes.Blue
            myStackPanel.Children.Add(myRectangle)

            '
            ' Create an animation and a storyboard to animate the
            ' rectangle.
            '
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(5000))
            myDoubleAnimation.AutoReverse = True

            ' Create the storyboard.
            myStoryboard = New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

            '
            ' Create some buttons to control the storyboard
            ' and a panel to contain them.
            '
            Dim buttonPanel As New StackPanel()
            buttonPanel.Orientation = Orientation.Horizontal
            Dim beginButton As New Button()
            beginButton.Content = "Begin"
            AddHandler beginButton.Click, AddressOf beginButton_Clicked
            buttonPanel.Children.Add(beginButton)
            Dim pauseButton As New Button()
            pauseButton.Content = "Pause"
            AddHandler pauseButton.Click, AddressOf pauseButton_Clicked
            buttonPanel.Children.Add(pauseButton)
            Dim resumeButton As New Button()
            resumeButton.Content = "Resume"
            AddHandler resumeButton.Click, AddressOf resumeButton_Clicked
            buttonPanel.Children.Add(resumeButton)
            Dim skipToFillButton As New Button()
            skipToFillButton.Content = "Skip to Fill"
            AddHandler skipToFillButton.Click, AddressOf skipToFillButton_Clicked
            buttonPanel.Children.Add(skipToFillButton)
            Dim setSpeedRatioButton As New Button()
            setSpeedRatioButton.Content = "Triple Speed"
            AddHandler setSpeedRatioButton.Click, AddressOf setSpeedRatioButton_Clicked
            buttonPanel.Children.Add(setSpeedRatioButton)
            Dim stopButton As New Button()
            stopButton.Content = "Stop"
            AddHandler stopButton.Click, AddressOf stopButton_Clicked
            buttonPanel.Children.Add(stopButton)
            myStackPanel.Children.Add(buttonPanel)
            Me.Content = myStackPanel


        End Sub

        ' Begins the storyboard.
        Private Sub beginButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Specifying "true" as the second Begin parameter
            ' makes this storyboard controllable.
            myStoryboard.Begin(Me, True)

        End Sub

        ' Pauses the storyboard.
        Private Sub pauseButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Pause(Me)

        End Sub

        ' Resumes the storyboard.
        Private Sub resumeButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Resume(Me)

        End Sub

        ' Advances the storyboard to its fill period.
        Private Sub skipToFillButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.SkipToFill(Me)

        End Sub

        ' Updates the storyboard's speed.
        Private Sub setSpeedRatioButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(Me, 3)

        End Sub

        ' Stops the storyboard.
        Private Sub stopButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Stop(Me)

        End Sub

    End Class

End Namespace

스타일에서 애니메이션 효과 주기Animate in a Style

개체를 사용 Storyboard 하 여 Style에서 애니메이션을 정의할 수 있습니다.You can use Storyboard objects to define animations in a Style. 에서를 사용 하 여 애니메이션을 적용 하 Storyboard 는것은다른위치를사용하는것과비슷하지만다음과같은세가지예외가있습니다.Style StoryboardAnimating with a Storyboard in a Style is similar to using a Storyboard elsewhere, with the following three exceptions:

  • 는 지정 TargetName하지 않습니다 .는 Storyboard 항상 Style 이 적용 되는 요소를 대상으로 합니다.You don't specify a TargetName; the Storyboard always targets the element to which the Style is applied. 개체를 Freezable 대상으로 지정 하려면 간접 대상 지정을 사용 해야 합니다.To target Freezable objects, you must use indirect targeting. 간접 대상 지정에 대 한 자세한 내용은 간접 대상 지정 섹션을 참조 하세요.For more information about indirect targeting, see the Indirect Targeting section.

  • 또는 에대해SourceName 를 지정할 수 없습니다. Trigger EventTriggerYou can't specify a SourceName for an EventTrigger or a Trigger.

  • 동적 리소스 참조 또는 데이터 바인딩 식을 사용 하 여 또는 애니메이션 Storyboard 속성 값을 설정할 수 없습니다.You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. 내부의 Style 모든 항목은 스레드로부터 안전 해야 하며 타이밍 Freeze Storyboard 시스템은 개체를 스레드로부터 안전 하 게 만들어야 합니다.That's because everything inside a Style must be thread-safe, and the timing system must FreezeStoryboard objects to make them thread-safe. Storyboard 동적 리소스 참조 또는 데이터 바인딩 식이 포함 된 경우에는를 고정할 수 없습니다.A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. 고정 및 기타 Freezable 기능에 대 한 자세한 내용은 Freezable 개체 개요를 참조 하세요.For more information about freezing and other Freezable features, see the Freezable Objects Overview.

  • 에서 XAMLXAML또는 애니메이션 이벤트에 대 한 Storyboard 이벤트 처리기를 선언할 수 없습니다.In XAMLXAML, you can't declare event handlers for Storyboard or animation events.

스타일에서 storyboard를 정의 하는 방법을 보여 주는 예제는 스타일 예제에서 애니메이션 효과 적용 을 참조 하세요.For an example showing how to define a storyboard in a style, see the Animate in a Style example.

ControlTemplate에서 애니메이션 효과 적용Animate in a ControlTemplate

개체를 사용 Storyboard 하 여 ControlTemplate에서 애니메이션을 정의할 수 있습니다.You can use Storyboard objects to define animations in a ControlTemplate. 에서를 사용 하 여 애니메이션을 적용 하 Storyboard 는것은다른위치를사용하는것과비슷하지만다음두가지예외가있습니다.ControlTemplate StoryboardAnimating with a Storyboard in a ControlTemplate is similar to using a Storyboard elsewhere, with the following two exceptions:

에서 ControlTemplatestoryboard를 정의 하는 방법을 보여 주는 예제는 ControlTemplate 예제에서 애니메이션 효과 적용 을 참조 하세요.For an example showing how to define a storyboard in a ControlTemplate, see the Animate in a ControlTemplate example.

속성 값이 변경될 때 애니메이션 효과 주기Animate When a Property Value Changes

스타일 및 컨트롤 템플릿에서 트리거 개체를 사용하여 속성이 변경될 때 Storyboard를 시작할 수 있습니다.In styles and control templates, you can use Trigger objects to start a storyboard when a property changes. 예제는 속성 값이 변경 되ControlTemplate에서 애니메이션 효과를 주는 경우 애니메이션 트리거를 참조 하세요.For examples, see Trigger an Animation When a Property Value Changes and Animate in a ControlTemplate.

속성 Trigger 개체에서 적용 하는 애니메이션은 메서드를 사용 하 EventTriggerStoryboard 시작 된 애니메이션이 나 애니메이션 보다 더 복잡 한 방식으로 동작 합니다.Animations applied by property Trigger objects behave in a more complex fashion than EventTrigger animations or animations started using Storyboard methods. 다른 Trigger 개체에서 정의 된 애니메이션을 "전달" 하지만 EventTrigger 및 메서드 트리거 애니메이션으로 작성 합니다.They "handoff" with animations defined by other Trigger objects, but compose with EventTrigger and method-triggered animations.

참고자료See also