Storyboard クラス

定義

public ref class Storyboard sealed : Timeline

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class Storyboard final : Timeline

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class Storyboard : Timeline

Public NotInheritable Class Storyboard
Inherits Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

継承

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

属性

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

例

次の例は、Begin、Stop、Pause、Resume の各メソッドを使用してストーリーボード (アニメーション) の再生を制御する方法を示しています。 一連のボタンを使用すると、ユーザーはこれらのメソッドを呼び出します。

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="1" To="6" Duration="00:00:6" 
            Storyboard.TargetName="rectScaleTransform" 
            Storyboard.TargetProperty="ScaleY">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                            Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <!-- Button that begins animation. -->
    <Button Click="Animation_Begin"
         Margin="2" Content="Begin" />

    <!-- Button that pauses Animation. -->
    <Button Click="Animation_Pause"
         Margin="2" Content="Pause" />

    <!-- Button that resumes Animation. -->
    <Button Click="Animation_Resume"
         Margin="2" Content="Resume" />

    <!-- Button that stops Animation. Stopping the animation 
         returns the ellipse to its original location. -->
    <Button Click="Animation_Stop"
         Margin="2" Content="Stop" />

    <Rectangle Fill="Blue" Width="200" Height="30">
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="rectScaleTransform" />
        </Rectangle.RenderTransform>
    </Rectangle>

</StackPanel>

private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

この例では、コード内でアニメーションを完全に作成して実行する方法を示します。

<Button Content="Create animation" Click="Button_Click"/>

private void Button_Click(object sender, RoutedEventArgs e)
{
    Create_And_Run_Animation();
}

private void Create_And_Run_Animation()
{
    Storyboard justintimeStoryboard = null;
    // If the storyboard already exists in the resources dictionary,
    // get it and make sure it's stopped.
    if (LayoutRoot.Resources.ContainsKey("justintimeStoryboard"))
    {
        justintimeStoryboard = (Storyboard)LayoutRoot.Resources["justintimeStoryboard"];
        justintimeStoryboard.Stop();
    }
    // Otherwise, create the storyboard and add it to the resources dictionary.
    else
    {
        // Create a red rectangle that will be the target
        // of the animation.
        Rectangle myRectangle = new Rectangle();
        myRectangle.Width = 200;
        myRectangle.Height = 200;
        SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
        myRectangle.Fill = myBrush;

        // Create the transform.
        TranslateTransform moveTransform = new TranslateTransform();
        moveTransform.X = 0;
        moveTransform.Y = 0;
        myRectangle.RenderTransform = moveTransform;

        // Add the rectangle to the tree.
        LayoutRoot.Children.Add(myRectangle);

        // Create a duration of 2 seconds.
        Duration duration = new Duration(TimeSpan.FromSeconds(2));
        // Create two DoubleAnimations and set their properties.
        DoubleAnimation myDoubleAnimationX = new DoubleAnimation();
        DoubleAnimation myDoubleAnimationY = new DoubleAnimation();
        myDoubleAnimationX.Duration = duration;
        myDoubleAnimationY.Duration = duration;
        justintimeStoryboard = new Storyboard();
        justintimeStoryboard.Duration = duration;
        justintimeStoryboard.Children.Add(myDoubleAnimationX);
        justintimeStoryboard.Children.Add(myDoubleAnimationY);
        Storyboard.SetTarget(myDoubleAnimationX, moveTransform);
        Storyboard.SetTarget(myDoubleAnimationY, moveTransform);

        // Set the X and Y properties of the Transform to be the target properties
        // of the two respective DoubleAnimations.
        Storyboard.SetTargetProperty(myDoubleAnimationX, "X");
        Storyboard.SetTargetProperty(myDoubleAnimationY, "Y");
        myDoubleAnimationX.To = 200;
        myDoubleAnimationY.To = 200;

        // Make the Storyboard a resource.
        LayoutRoot.Resources.Add("justintimeStoryboard", justintimeStoryboard);
    }

    // Begin the animation.
    justintimeStoryboard.Begin();
}

注釈

ストーリーボードは、 ストーリーボードに設定されたアニメーションの概念における重要なクラスです。 概念の詳細については、「 ストーリーボードに設定されたアニメーション」を参照してください。

ストーリーボードは、次のプロパティに使用されます。

• VisualState.Storyboard
• VisualTransition.Storyboard
• BeginStoryboard.Storyboard

ストーリーボードが定義されている場所は、これらのプロパティだけではありません。 ストーリーボードがストーリーボードアニメーションに使用される一般的な方法は、ストーリーボードが Resources コレクション ( Application.Resources または FrameworkElement.Resources、または場合によってはカスタム コントロールの Generic.xaml などのファイル内のリソースとして) で定義されていることです。 XAML リソースとして定義されている場合は常に、ストーリーボードに x:Name 属性値 を割り当てる必要があります。 その後、分離コードで後でプログラミング変数として名前を参照できます。 ストーリーボードに含まれるアニメーションを実際に実行するには、この参照が必要です。そのストーリーボード インスタンスで Begin メソッドを呼び出します。 ストーリーボードには、その後アニメーションを制御できる Stop などの他のコントロール メソッドもあります。

ストーリーボードはタイムラインからいくつかのプロパティを継承 します。 これらのプロパティは、ストーリーボードまたはその中のアニメーション ( Children コレクション内) のいずれかに適用できます。 各アニメーションではなく、メインストーリーボードで Timeline プロパティを設定する場合には長所と短所があります。 詳細については、ストーリーボードアニメーションを参照してください。

テーマ アニメーションのいずれかを使用している場合は、コントロールまたは UI に追加する定義済みのアニメーションを制御するためにストーリーボードも必要です。 テーマ アニメーションには生来のトリガー ポイントがないため、ストーリーボードにテーマ アニメーションを 子として含める必要があります。 ストーリーボードが VisualState.Storyboard 値として使用されている場合、そのビジュアル状態が読み込まれるとアニメーションが実行されます。 または、 VisualTransition.Storyboard 内にある場合、その遷移がビジュアル状態マネージャーによって検出されたときにアニメーションが実行されます。 これらはテーマ アニメーションを使用する最も一般的な方法ですが、緩いストーリーボード リソースに配置し、 Begin を呼び出してアニメーションを明示的に開始することもできます。

XAML 添付プロパティ

ストーリーボードは、いくつかの XAML 添付プロパティのホスト サービス クラスです。 これにより、ストーリーボードによって制御下にある子アニメーションが、親と同じ制御タイムラインとトリガー メカニズムに従いながら、各ターゲットに個別のターゲット要素とターゲット プロパティに対して有効になります。

添付プロパティへの XAML プロセッサ アクセスをサポートし、同等の 取得 操作と 設定 操作をコードに公開するために、各 XAML 添付プロパティには、Get アクセサー メソッドと Set アクセサー メソッドのペアがあります。 コードで値を取得または設定するもう 1 つの方法は、依存関係プロパティ システムを使用して GetValue または SetValue を呼び出し、識別子フィールドを依存関係プロパティ識別子として渡すことです。

こちらもご覧ください

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• ストーリーボード化されたアニメーション
• キー フレーム アニメーションとイージング関数アニメーション
• プロパティ パスの構文
• 添付プロパティの概要