ストーリーボードの概要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.

ストーリーボードとは何かWhat Is a Storyboard?

タイムラインの型で役に立つのは、アニメーションだけではありません。Animations are not the only useful type of timeline. 他にも一連のタイムラインの編成を容易にし、タイムラインをプロパティに適用するための Timeline クラスが提供されています。Other timeline classes are provided to help you organize sets of timelines, and to apply timelines to properties. コンテナータイムラインはTimelineGroupクラスから派生し、およびStoryboardを含みParallelTimelineます。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オブジェクトを使用すると、さまざまなオブジェクトやプロパティに影響を与えるタイムラインを1つのタイムラインツリーにまとめることができるため、複雑なタイミングの動作を簡単に整理および制御できます。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. たとえば、次の 3 つのことを実行するボタンを必要としているとします。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オブジェクトを使用すると、アニメーションを整理し、グループ内で1つ以上のオブジェクトに適用することができます。Storyboard objects enable you to organize animations and apply them in groups to one or more objects.

ストーリーボードはどこで使用できるかWhere Can You Use a Storyboard?

Storyboard 、system.windows.media.animation.animatable> クラスの依存関係プロパティをアニメーション化するために使用できます (クラス system.windows.media.animation.animatable> を作成する方法の詳細については、「アニメーションの概要」を参照してください)。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). ただし、storyboarding はフレームワークレベルの機能であるため、オブジェクトは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またSolidColorBrushFrameworkContentElementに登録していないをアニメーション化すること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.

ストーリーボードを使用してアニメーションを適用する方法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. クラスStoryboardは、添付Storyboard.TargetNameプロパティStoryboard.TargetPropertyとアタッチされたプロパティを提供します。The 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は、、 、TriggerまたBeginStoryboardDataTriggerを含むオブジェクトを使用します。In XAMLXAML, you use a BeginStoryboard object with an EventTrigger, Trigger, or DataTrigger. コードでは、 Beginメソッドを使用することもできます。In code, you can also use the Begin method.

次の表は、各Storyboard開始手法がサポートされる場所を示しています。インスタンスごと、スタイル、コントロールテンプレート、データテンプレートです。The following table shows the different places where each Storyboard begin technique is supported: per-instance, style, control template, and data template. "インスタンス単位" とは、スタイル、コントロール テンプレート、またはデータ テンプレート内のインスタンスではなく、オブジェクトのインスタンスに直接アニメーションまたはストーリーボードを適用する方法のことです。"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 is begun using… インスタンス単位Per-instance スタイルStyle コントロール テンプレートControl template データ テンプレートData template Example
BeginStoryboardおよびEventTriggerBeginStoryboard and an EventTrigger [はい]Yes はいYes はいYes [はい]Yes ストーリーボードを使ってプロパティをアニメーション化する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
BeginStoryboardおよびDataTriggerBeginStoryboard and a DataTrigger いいえNo はいYes はいYes [はい]Yes 方法: データが変更したときにアニメーションをトリガーするHow to: Trigger an Animation When Data Changes
Begin メソッドBegin method [はい]Yes いいえNo いいえNo いいえNo ストーリーボードを使ってプロパティをアニメーション化するAnimate a Property by Using a Storyboard

次の例ではStoryboard 、を使用WidthしてRectangle 、要素ColorRectangleと、 SolidColorBrush描画に使用されるのをアニメーション化します。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.

フレームワーク要素、フレームワーク コンテンツ要素、およびフリーズ可能オブジェクトの対象化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 Freezableのまたはへの名前の割り当ては、オブジェクトへの名前の割り当てとは異なります。XAMLXAML 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. フレームワーク要素の例とWindowDockPanelButton Rectangle、、、、があります。Examples 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. フレームワークコンテンツ要素の例とFlowDocumentParagraphて、やがあります。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.

前の例で作成した次の例では、 MyRectangleRectangle FrameworkElementいう名前を割り当てています。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. Freezable例とSolidColorBrushRotateTransformGradientStop、、、などがあります。Examples of Freezable include SolidColorBrush, RotateTransform, and GradientStop.

FreezableXAMLXAMLアニメーションによるのターゲット設定を有効にするには、 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で設定SolidColorBrushされ、その色をアニメーション化しようとするとします。実際にはLinearGradientBrush 、ボタンの背景を設定するためにが使用されていました。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. このような場合、例外はスローされません。は、プロパティへの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 でフリーズ可能オブジェクトのプロパティを間接的に対象化する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.

次のコードは、四角形要素のColorFill設定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>

コレクションまたは配列に含まれるフリーズ可能オブジェクトをターゲットにしなければならない場合があります。Sometimes you need to target a freezable contained in a collection or array.

コレクションに含まれるフリーズ可能オブジェクトをターゲットにするには、次のパス構文を使用します。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プロパティに適用されていて、そこに含まれている変換の1つをアニメーション化するとします。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>  

コードでフリーズ可能オブジェクトのプロパティを間接的に対象化するIndirectly Targeting a Property of a Freezable in Code

コードでは、オブジェクトをPropertyPath作成します。In code, you create a PropertyPath object. を作成PropertyPathするときは、 PathPathParametersを指定します。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のプロパティに対して、またFreezable FrameworkContentElementはを設定するために使用されます。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. これは、 FreezableFrameworkElementオブジェクトに接続するプロパティのチェーンと考えることができます。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. は、の解釈PathParameters方法を示すです。 Path Path 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 Freezable設定に使用されるFrameworkElementオブジェクトのプロパティの識別子を含む配列のインデックスです。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て、 SolidColorBrush四角形要素Fillのを設定するために使用されるのをアニメーション化します。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);

コレクションまたは配列に含まれるフリーズ可能オブジェクトをターゲットにしなければならない場合があります。Sometimes you need to target a freezable contained in a collection or array. たとえば、四角形TransformGroupにリソースがRenderTransformプロパティに適用されていて、そこに含まれている変換の1つをアニメーション化するとします。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.

の2番Angle目の変換RotateTransform TransformGroupであるのプロパティを対象にするには、次PathPathParametersとを使用します。To 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 TransformGroupRotateTransform含まれるのをアニメーション化するための完全なコードを示しています。The 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サブプロパティの1つを間接的にターゲットにすることもできます。You can also use a Freezable as a starting point and indirectly target one of its Freezable sub-properties. 間接的なターゲット設定の開始Freezable点としてを使用する場合にはFreezable 、1 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 での対話形式でのストーリーボードの制御Interactively Controlling a Storyboard in XAML

Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)ストーリーボードを開始するには、 BeginStoryboardトリガーアクションを使用します。To start a storyboard in Extensible Application Markup Language (XAML)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を指定し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. ストーリーボードが開始すると対話的に制御できます。You can then interactively control the storyboard after it's started. 制御可能なストーリーボード アクションの一覧を次に示します。これらをイベント トリガーで使用して、ストーリーボードを制御します。The following is a list of controllable storyboard actions that you use with event triggers to control a 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>

コードを使用した対話形式でのストーリーボードの制御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. をコード内で対話型にするには、ストーリーボードのBeginメソッドの適切なオーバーロードを使用し、 trueを指定して、制御可能にする必要があります。 StoryboardFor 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アニメーションStoryboard化は、次の3つの例外を除き、別のを使用する場合と似Styleています。Animating with a Storyboard in a Style is similar to using a Storyboard elsewhere, with the following three exceptions:

  • TargetName指定しStyleないでください。は常に、が適用される要素を対象とします。StoryboardYou 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.

  • EventTriggerまたSourceNameTriggerに対してを指定することはできません。You 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.

スタイルでストーリーボードを定義する方法を示す例については、「スタイルのアニメーション化の例」を参照してください。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アニメーションStoryboard化は、次の2つの例外を除き、別のを使用する場合と似ControlTemplateています。Animating with a Storyboard in a ControlTemplate is similar to using a Storyboard elsewhere, with the following two exceptions:

  • は、ControlTemplateの子オブジェクトのみを参照できます。TargetNameThe TargetName may only refer to child objects of the ControlTemplate. TargetName指定されていない場合、アニメーションはが適用ControlTemplateされる要素を対象とします。If TargetName is not specified, the animation targets the element to which the ControlTemplate is applied.

  • またはEventTrigger のは、ControlTemplateの子オブジェクトのみを参照できます。Trigger SourceNameThe SourceName for an EventTrigger or a Trigger may only refer to child objects of the ControlTemplate.

  • 動的リソース参照またはデータバインディング式を使用してStoryboardプロパティ値を設定またはアニメーションすることはできません。You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. これは、 ControlTemplate内のすべてがスレッドセーフである必要があり、タイミングシステムFreezeがオブジェクトをスレッドセーフにするためにオブジェクトを必要Storyboardとするためです。That's because everything inside a ControlTemplate 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.

ControlTemplateストーリーボードを定義する方法を示す例については、「 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

スタイル内およびコントロール テンプレート内では、トリガー オブジェクトを使用して、プロパティが変化したときにストーリーボードを開始します。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オブジェクトによって適用されるアニメーションは、メソッドEventTriggerを使用してStoryboard開始されたアニメーションまたはアニメーションよりも複雑な方法で動作します。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