ストーリーボードの概要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クラス、および含めるParallelTimelineStoryboardします。Container timelines derive from the TimelineGroup class, and include ParallelTimeline and Storyboard.

AStoryboardが含まれているタイムラインの対象情報を提供するコンテナー タイムラインの一種です。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?

AStoryboardアニメーション クラスの依存関係プロパティをアニメーション化に使用できます (アニメーション化できるクラスは、詳細については、次を参照してください。、アニメーションの概要)。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). ただし、ストーリーボーディング フレームワーク レベルの機能があるため、オブジェクトに属する必要があります、NameScopeFrameworkElementまたは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をアニメーション化する、 SolidColorBrush 、その名前を登録しなかった、FrameworkElementまたはFrameworkContentElement、またはのプロパティを設定するには使用されませんでした、FrameworkElementまたは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.TargetNameStoryboard.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を使用する、BeginStoryboardオブジェクトをEventTriggerTrigger、またはDataTriggerします。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をアニメーション化する、WidthRectangle要素とColorSolidColorBrushを描画するために使用Rectangleします。The following example uses a Storyboard to animate the Width of a Rectangle element and the Color of a SolidColorBrush used to paint that Rectangle.

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


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

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

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

次のセクションで説明します、TargetNameTargetProperty添付プロパティについて詳しく説明します。The following sections describe the TargetName and TargetProperty attached properties in more detail.

フレームワーク要素、フレームワーク コンテンツ要素、およびフリーズ可能オブジェクトの対象化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またはFrameworkContentElementXAMLXAMLする名前の割り当てとは異なります、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. フレームワーク要素の例として、 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作成した要素を持つ要素の名前を登録するメソッド、 NameScopeIn 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含めるSolidColorBrushRotateTransform、およびGradientStopします。Examples of Freezable include SolidColorBrush, RotateTransform, and GradientStop.

ターゲットを有効にする、FreezableをアニメーションでXAMLXAMLを使用する、 X:name ディレクティブ名前を指定します。To enable the targeting of a Freezable by an animation in XAMLXAML, you use the x:Name Directive to assign it a name. コードで使用する、RegisterNameメソッドを作成した要素に名前を登録、NameScopeします。In code, you use the RegisterName method to register its name with the element for which you've created a NameScope.

次の例は、名前を割り当てて、Freezableオブジェクト。The following example assigns a name to a Freezable object.

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

これで、オブジェクトをアニメーションのターゲットにすることができます。The object can then be targeted by an animation.

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

Storyboard オブジェクトでは、名前スコープを使用して、解決するには、TargetNameプロパティ。Storyboard objects use name scopes to resolve the TargetName property. WPF 名前スコープの詳細については、「WPF XAML 名前スコープ」を参照してください。For more information about WPF name scopes, see WPF XAML Namescopes. 場合、TargetNameプロパティが省略された場合、または、要素の定義は、スタイル、スタイル設定された要素の場合、アニメーションのターゲットします。If the TargetName property is omitted, the animation targets the element on which it is defined, or, in the case of styles, the styled element.

名前を割り当てることはできないことがあります、Freezableオブジェクト。Sometimes a name can't be assigned to a Freezable object. たとえば場合、Freezableリソースとして宣言またはスタイルのプロパティ値を設定するために使用されている名前を指定することはできません。For example, if a Freezable is declared as a resource or used to set a property value in a style, it can't be given a name. 名前が割り当てられていないため、それを直接ターゲットにすることができません。ただし、間接的にターゲットにすることはできます。Because it doesn't have a name, it can't be targeted directly—but it can be targeted indirectly. 以下のセクションでは、間接的な対象化の使用方法について説明します。The following sections describe how to use indirect targeting.

間接的な対象化Indirect Targeting

あります、Freezable場合など、アニメーションで直接対象とすることはできません、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. 設定ではなく、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

フリーズ可能オブジェクトのプロパティを対象とするXAMLXAML、次の構文を使用します。To target a property of a freezable in XAMLXAML, use the following syntax.

ElementPropertyName . FreezablePropertyNameElementPropertyName . FreezablePropertyName

WhereWhere

  • ElementPropertyNameのプロパティである、FrameworkElementFreezableを設定するために使用し、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.

次のコードは、アニメーション化する方法を示しています、ColorSolidColorBrushを設定するため、The following code shows how to animate the Color of a SolidColorBrush used to set the

Fill 四角形要素。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プロパティ、およびするが、その変換のいずれかをアニメーション化します。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またはFrameworkContentElementFreezableを設定するために使用します。The first identifier field is for the property of the FrameworkElement or FrameworkContentElement that the Freezable is used to set. 次の識別子フィールドのプロパティを表す、Freezableターゲットにします。The next identifier field represents the property of the Freezable to target. 接続プロパティのチェーンを考えて、FreezableFrameworkElementオブジェクト。Think of it as a chain of properties that connects the Freezable to the FrameworkElement object.

対象とする依存関係プロパティのチェーンの例を次に、ColorSolidColorBrushを設定するため、Fillの四角形要素。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. APathは、Stringを示す、Pathを解釈する方法、PathParametersします。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のインデックス、DependencyPropertyの識別子を含む配列、FrameworkElementオブジェクトのプロパティをFreezableを設定するために使用し、OwnerPropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of the FrameworkElement object's property that the Freezable is used to set, and

  • FreezablePropertyArrayIndexのインデックス、DependencyPropertyをターゲットにするプロパティの識別子を含む配列。FreezablePropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of property to target.

次の例は、Pathに付属する、PathParameters前の例で定義されています。The following example shows the Path that would accompany the PathParameters defined in the preceding example.

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

次の例は、アニメーション化する前の例のコードを組み合わせて、ColorSolidColorBrushを設定するため、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プロパティ、およびするが、その変換のいずれかをアニメーション化します。For example, suppose that a rectangle has a TransformGroup resource applied to its RenderTransform property, and you want to animate one of the transforms it contains.

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

ターゲットに、Freezableコレクション内に含まれている、次のパス構文を使用します。To target a Freezable contained in a collection, you use the following path syntax.

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

場所CollectionIndexはその配列またはコレクション内のオブジェクトのインデックスです。Where CollectionIndex is the index of the object in its array or collection.

ターゲットに、Angleのプロパティ、 RotateTransform、2 つ目の変換、 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);

次の例では、アニメーション化するための完全なコード、AngleRotateTransform内に含まれる、TransformGroupします。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サブプロパティ。You can also use a Freezable as a starting point and indirectly target one of its Freezable sub-properties. 使用する場合、その他の制限が適用されます、Freezable間接的な対象化の開始点として: 開始Freezable、毎回Freezableと間接的にターゲットのサブプロパティの必要がありますは固定されません。One additional restriction applies when using a Freezable as a starting point for indirect targeting: the starting Freezable and every Freezable between it and the indirectly targeted sub-property must not be frozen.

XAML での対話形式でのストーリーボードの制御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. (詳細については、このプロセスは、次を参照してください、アニメーションとタイミング システムの概要。)。提供する場合、BeginStoryboard名前を指定してそのNameプロパティをできるようにする制御可能なストーリー ボード。(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は、次の描画の少し前に行われるタイミング エンジンの次の目盛りで発生します。Note: 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 Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample

    Public Class ControllableStoryboardExample
        Inherits Page
        Private myStoryboard As Storyboard

        Public Sub New()

            ' Create a name scope for the page.

            NameScope.SetNameScope(Me, New NameScope())

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

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

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

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

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

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


        End Sub

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

        End Sub

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

        End Sub

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

        End Sub

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

        End Sub

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

        End Sub

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

        End Sub

    End Class

End Namespace

スタイル内でアニメーション化を行うAnimate in a Style

使用することができますStoryboardでアニメーションを定義するオブジェクト、Styleします。You can use Storyboard objects to define animations in a Style. アニメーション化、Storyboardで、Style使用と似ています、Storyboard次の 3 つの例外で、他の場所。Animating with a Storyboard in a Style is similar to using a Storyboard elsewhere, with the following three exceptions:

  • 指定しない、 TargetNameStoryboard先の要素をターゲットと常に、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.

  • 指定することはできません、SourceNameEventTriggerまたはTriggerします。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スレッド セーフである必要がありますとタイミング システムにする必要がありますFreezeStoryboardスレッド セーフであるようにするオブジェクト。That's because everything inside a Style must be thread-safe, and the timing system must FreezeStoryboard objects to make them thread-safe. AStoryboardまたはその子タイムラインに動的リソース参照またはデータ バインディング式が含まれている場合に固定することはできません。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で、ControlTemplate使用と似ています、Storyboard次の 2 つの例外で、他の場所。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.

  • SourceNameEventTriggerまたはTriggerの子オブジェクトしか参照、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スレッド セーフである必要がありますとタイミング システムにする必要がありますFreezeStoryboardスレッド セーフであるようにするオブジェクト。That's because everything inside a ControlTemplate must be thread-safe, and the timing system must FreezeStoryboard objects to make them thread-safe. AStoryboardまたはその子タイムラインに動的リソース参照またはデータ バインディング式が含まれている場合に固定することはできません。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オブジェクトで、compose をEventTriggerメソッドによってトリガーされるアニメーションです。They "handoff" with animations defined by other Trigger objects, but compose with EventTrigger and method-triggered animations.

関連項目See also