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

PrerequisitesPrerequisites

このトピックを理解するには、さまざまな種類のアニメーションとその基本的な機能に精通している必要があります。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 クラスから派生し、ParallelTimelineStoryboardを含みます。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 はフレームワークレベルの機能であるため、オブジェクトは FrameworkElement または FrameworkContentElementNameScope に属している必要があります。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 または FrameworkContentElementに登録されていないか、または FrameworkElement または FrameworkContentElementのプロパティの設定に使用されていない SolidColorBrush をアニメーション化することはできませんでした。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では、EventTriggerTrigger、または DataTriggerBeginStoryboard オブジェクトを使用します。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
BeginStoryboardEventTriggerBeginStoryboard 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
BeginStoryboardDataTriggerBeginStoryboard 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 を使用して、Rectangle 要素の Width と、その SolidColorBrush を描画するために使用される RectangleColor をアニメーション化します。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. XAMLXAML 内の FrameworkElement または FrameworkContentElement への名前の割り当ては、Freezable オブジェクトへの名前の割り当てとは異なります。Assigning 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. フレームワーク要素の例としては、WindowDockPanelButtonRectangleがあります。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.

前の例で取得した次の例では、RectangleMyRectangle 名前を 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.

XAMLXAMLのアニメーションによって Freezable のターゲット設定を有効にするには、 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 がリソースとして宣言されている場合や、スタイルのプロパティ値を設定するために使用される場合など、Freezable がアニメーションによって直接対象になることはありません。There 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. Freezableの名前を使用して TargetName プロパティを設定する代わりに、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." たとえば、四角形要素の Fill を設定するために使用される SolidColorBrush は、その四角形に属します。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. たとえば、特定のボタンの BackgroundSolidColorBrush で設定され、その色をアニメーション化しようとしたとします。実際には、ボタンの背景を設定するために 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. このような場合、例外はスローされません。LinearGradientBrushColor プロパティの変更に反応しないため、アニメーションは表示されません。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

XAMLXAMLで freezable のプロパティを対象にするには、次の構文を使用します。To target a property of a freezable in XAMLXAML, use the following syntax.

Elementpropertyname . FreezablePropertyNameElementPropertyName . FreezablePropertyName

WhereWhere

  • Elementpropertynameは、Freezable を設定するために使用される FrameworkElement のプロパティです。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.

次のコードは、四角形要素の Fill の設定に使用される SolidColorBrushColor をアニメーション化する方法を示しています。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.

たとえば、四角形に RenderTransform プロパティに適用されている TransformGroup リソースがあり、そこに含まれている変換の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>

次のコードは、前の例で示した RotateTransformAngle プロパティをアニメーション化する方法を示しています。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.

四角形要素の Fill を設定するために使用される SolidColorBrushColor を対象とする依存関係プロパティチェーンの例を次に示します。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 は、PathParametersの解釈方法を Path に指示する String です。A Path is a String that tells the Path how to interpret its PathParameters. 次の構文が使用されます。It uses the following syntax.

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

WhereWhere

  • Ownerpropertyarrayindexは、Freezable が設定に使用する FrameworkElement オブジェクトのプロパティの識別子を含む DependencyProperty 配列のインデックスです。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.

次の例は、前の例で定義した PathParameters に付随する Path を示しています。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)";

次の例では、前の例のコードを組み合わせて、四角形要素の Fill を設定するために使用される SolidColorBrushColor をアニメーション化します。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. たとえば、四角形に RenderTransform プロパティに適用されている TransformGroup リソースがあり、そこに含まれている変換の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.

TransformGroupの2番目の変換である RotateTransformAngle プロパティを対象にするには、次の 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);

次の例は、TransformGroup内に含まれる RotateTransformAngle をアニメーション化するための完全なコードを示しています。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

前のセクションでは、FrameworkElement または FrameworkContentElement から開始し、Freezable サブプロパティへのプロパティチェーンを作成することによって、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 を使用する場合に適用される追加の制限が1つあります。開始 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 での対話形式でのストーリーボードの制御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. 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. Style 内の Storyboard を使用したアニメーション化は、次の3つの例外を除き、Storyboard を別の場所で使用することと似ています。Animating 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.

  • EventTrigger または TriggerSourceName を指定することはできません。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 内のすべてがスレッドセーフである必要があり、タイミングシステムは Storyboard オブジェクトを Freezeしてスレッドセーフにする必要があるためです。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. ControlTemplate 内の Storyboard を使用したアニメーション化は、次の2つの例外を除き、Storyboard を別の場所で使用することと似ています。Animating with a Storyboard in a ControlTemplate is similar to using a Storyboard elsewhere, with the following two exceptions:

  • TargetName は、ControlTemplateの子オブジェクトのみを参照できます。The 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 または TriggerSourceName は、ControlTemplateの子オブジェクトのみを参照できます。The 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 内のすべてがスレッドセーフである必要があり、タイミングシステムは Storyboard オブジェクトを Freezeしてスレッドセーフにする必要があるためです。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 オブジェクトによって適用されるアニメーションは、Storyboard メソッドを使用して開始されたアニメーションまたはアニメーション EventTrigger よりも複雑な方法で動作します。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