Storyboard Klasse

Definition

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>

Vererbung

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Attribute

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

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

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

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.

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
• Keyframeanimationen und Animationen für Beschleunigungsfunktionen
• PropertyPath-Syntax
• Übersicht über angefügte Eigenschaften