Storyboard Klasse

Definition

public ref class Storyboard sealed : Timeline

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

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

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

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

Public NotInheritable Class Storyboard
Inherits Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

Vererbung

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Attribute

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Windows-Anforderungen

Beispiele

Das folgende Beispiel zeigt, wie Sie die Methoden Begin, Stop, Pause und Resume verwenden, um die Wiedergabe eines Storyboards (Animation) zu steuern. Eine Reihe von Schaltflächen ermöglicht es dem Benutzer, diese Methoden aufzurufen.

<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();
}

Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub

Private Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
    myStoryboard.Resume()
End Sub

Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
    myStoryboard.Stop()
End Sub

//using Windows.UI.Xaml.Media.Animation;
//using Windows.UI.Xaml.Shapes;
//using Windows.UI

private void Create_And_Run_Animation(object sender, RoutedEventArgs e)
{
    // 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;
    Storyboard 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();
}

' need Imports for Windows.UI.Xaml.Shapes, Windows.UI.Media.Animation, Windows.UI
Private Sub Create_And_Run_Animation(sender As Object, e As RoutedEventArgs)
    ' Create a red rectangle that will be the target
    ' of the animation.
    Dim myRectangle As Rectangle = New Rectangle
    myRectangle.Width = 200
    myRectangle.Height = 200
    Dim myBrush As SolidColorBrush = New SolidColorBrush(Colors.Red)
    myRectangle.Fill = myBrush

   ' Create the transform
    Dim moveTransform As TranslateTransform = 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.
    Dim duration As Duration = New Duration(TimeSpan.FromSeconds(2))
    ' Create two DoubleAnimations and set their properties.
    Dim myDoubleAnimationX As DoubleAnimation = New DoubleAnimation
    Dim myDoubleAnimationY As DoubleAnimation = New DoubleAnimation
    myDoubleAnimationX.Duration = duration
    myDoubleAnimationY.Duration = duration
    Dim justintimeStoryboard As Storyboard = 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()
End Sub

Hinweise

Storyboard ist eine wichtige Klasse im Konzept von Storyboardanimationen. Weitere Informationen zum Konzept finden Sie unter Storyboardanimationen.

Storyboard wird für die folgenden Eigenschaften verwendet:

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

Diese Eigenschaften sind nicht der einzige Ort, an dem ein Storyboard definiert wird. Die typische Verwendung eines Storyboards für eine Storyboardanimation besteht darin, dass das Storyboard in einer Resources-Auflistung (entweder Application.Resources oder FrameworkElement.Resources oder möglicherweise als Ressource in einer Datei wie Generic.xaml für ein benutzerdefiniertes Steuerelement) definiert wird. Wenn sie als XAML-Ressource definiert ist, sollten Sie Ihrem Storyboard immer einen x:Name-Attributwert zuweisen. Sie können dann später im CodeBehind auf den Namen als Programmiervariable verweisen. Sie benötigen diesen Verweis, um tatsächlich die Animationen auszuführen, die das Storyboard enthält, indem Sie die Begin-Methode für dieses Storyboard-instance aufrufen. Storyboard verfügt auch über andere Steuerungsmethoden wie Stop , mit denen die Animation danach gesteuert werden kann.

Storyboard erbt mehrere Eigenschaften von Der Zeitachse. Diese Eigenschaften können entweder auf ein Storyboard oder auf eine der darin enthaltenen Animationen (in der Children-Auflistung ) angewendet werden. Es gibt Vor- und Nachteile beim Festlegen von Zeitachseneigenschaften auf der Standard Storyboards statt für jede Animation. Weitere Informationen finden Sie unter Storyboardanimationen.

Sie benötigen auch ein Storyboard, um die vordefinierten Animationen zu steuern, die Sie zu Steuerelementen oder der Benutzeroberfläche hinzufügen, wenn Sie eine der Designanimationen verwenden. Designanimationen verfügen nicht über einen angeborenen Triggerpunkt, sodass Sie Designanimationen als Kinder in einem Storyboard enthalten müssen. Wenn das Storyboard als VisualState.Storyboard-Wert verwendet wird, wird die Animation ausgeführt, wenn dieser visuelle Zustand geladen wird. Oder wenn sie sich in einem VisualTransition.Storyboard befindet, wird die Animation ausgeführt, wenn dieser Übergang vom visuellen Zustands-Manager erkannt wird. Dies ist die gebräuchlichste Möglichkeit, eine Designanimation zu verwenden, aber Sie können auch eine in eine lose Storyboardressource einfügen und die Animation explizit starten, indem Sie Begin aufrufen. Weitere Informationen zur Verwendung von Designanimationen finden Sie unter Schnellstart: Animieren der Benutzeroberfläche mithilfe von Bibliotheksanimationen oder Storyboardanimationen für visuelle Zustände.

Angefügte XAML-Eigenschaften

Storyboard ist die Hostdienstklasse für mehrere angefügte XAML-Eigenschaften. Diese ermöglichen untergeordnete Animationen, die vom Storyboard für jedes Ziel separate Zielelemente und Zieleigenschaften gesteuert werden, während weiterhin demselben Steuerungs Zeitleiste- und Triggermechanismus wie das übergeordnete Element folgen.

Um den XAML-Prozessorzugriff auf die angefügten Eigenschaften zu unterstützen und auch äquivalente Get - und Set-Vorgänge für Code verfügbar zu machen, verfügt jede angefügte XAML-Eigenschaft über ein Paar von Get- und Set-Accessormethoden. Eine weitere Möglichkeit zum Abrufen oder Festlegen des Werts im Code besteht darin, das Abhängigkeitseigenschaftensystem zu verwenden, entweder GetValue oder SetValue aufzurufen und das Bezeichnerfeld als Abhängigkeitseigenschaftsbezeichner zu übergeben.

Konstruktoren

Eigenschaften

Angefügte Eigenschaften

Methoden

Ereignisse

Gilt für:

Weitere Informationen

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• Storyboardanimationen
• Storyboardanimationen für visuelle Zustände
• Keyframeanimationen und Animationen für Beschleunigungsfunktionen
• Schnellstart: Animieren der Benutzeroberfläche mithilfe von Bibliotheksanimationen
• PropertyPath-Syntax
• Übersicht über angefügte Eigenschaften