Storyboard Storyboard Storyboard Storyboard Class

Definition

Controls animations with a timeline, and provides object and property targeting information for its child animations.

public : sealed class Storyboard : Timeline, IStoryboard
struct winrt::Windows::UI::Xaml::Media::Animation::Storyboard : Timeline, IStoryboard
public sealed class Storyboard : Timeline, IStoryboard
Public NotInheritable Class Storyboard Inherits Timeline Implements IStoryboard
<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>
Inheritance
StoryboardStoryboardStoryboardStoryboard
Attributes

Windows 10 requirements

Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Examples

The following example shows how to use the Begin, Stop, Pause, and Resume methods to control the playback of a storyboard (animation). A set of buttons allow the user to call these methods.

<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

Remarks

Storyboard is an important class in the concept of storyboarded animations. For more info on the concept, see Storyboarded animations.

Storyboard is used for these properties:

These properties aren't the only place where a Storyboard is defined. The typical way that a Storyboard is used for a storyboarded animation is that the Storyboard is defined in a Resources collection (either Application.Resources or FrameworkElement.Resources, or possibly as a resource within a file such as Generic.xaml for a custom control). Whenever it's defined as a XAML resource, you should always assign an x:Name attribute value to your Storyboard. You can then reference the name as a programming variable later in code-behind. You'll need this reference to actually run the animations that the Storyboard contains, by calling the Begin method on that Storyboard instance. Storyboard also has other control methods such as Stop that can control the animation thereafter.

Storyboard inherits several properties from Timeline. These properties can be applied either to a Storyboard or to one of the animations within it (in the Children collection). There are pros and cons to setting Timeline properties on the main Storyboard instead of on each animation. For more info, see Storyboarded animations.

You also need a Storyboard in order to control the predefined animations that you add to controls or UI, if you are using one of the theme animations. Theme animations don't have an innate trigger point, so you need to contain theme animations in a Storyboard as the Children. If the Storyboard is used as the VisualState.Storyboard value then the animation runs when that visual state is loaded. Or, if it's in a VisualTransition.Storyboard, the animation runs when that transition is detected by the visual state manager. These are the most common way to use a theme animation, but you could also put one in a loose Storyboard resource and explicitly start the animation by calling Begin. For more info on how to use theme animations, see Quickstart: Animating your UI using library animations or Storyboarded animations for visual states.

Storyboard XAML attached properties

Storyboard is the host service class for several XAML attached properties. Theses enable child animations under control by the Storyboard to each target separate target elements and target properties, while still following the same controlling timeline and triggering mechanism as the parent.

The XAML attached properties that are supported by Storyboard are:

  • Storyboard.TargetName
  • Storyboard.TargetProperty Storyboard.TargetName is used to reference another element by its name. The element being referenced is the element/object where the animation should apply. This mechanism is part of the basic design of the animation system: it enables animation resources to be declared separately from UI declaration resources, and makes it possible to apply one animation definition to several different property behaviors. For the value of Storyboard.TargetName on a particular animation, you specify the target element's Name or x:Name attribute value, which is a string. That named element should already exist in some other area of XAML markup.

The meaning of Name /x:Name attribute strings is controlled by a XAML namescope concept. For most animation targeting scenarios you won't need to worry about the influence of XAML namescopes, but you might encounter XAML name resolution issues if you're trying to target template parts, or objects that were created using XamlReader.Load and subsequently added to the object tree. For more info, see XAML namescopes.

Storyboard.TargetProperty targets a particular property of the element as named by Storyboard.TargetName. The value you provide for Storyboard.TargetProperty involves a concept known as a property path. For more information on how to specify a property path for an animation, see Remarks in SetTargetProperty or Storyboard.TargetProperty, or the Property-path syntax topic.

In order to support XAML processor access to the attached properties, and also to expose equivalent get and set operations to code, each XAML attached property has a pair of Get and Set accessor methods. For example, the GetTargetName and SetTargetName methods support and provide the equivalent code-only support for Storyboard.TargetName. Alternatively, you can use the dependency property system to get or set the value of the attached property. Call GetValue or SetValue, passing the arguments of the dependency property identifier to set, and a reference to the target object on which to get or set the value.

Constructors

Storyboard() Storyboard() Storyboard() Storyboard()

Initializes a new instance of the Storyboard class.

Properties

AllowDependentAnimations AllowDependentAnimations AllowDependentAnimations AllowDependentAnimations

Gets or sets a value that determines whether dependent animations should be permitted to run, throughout the app.

(Inherited from Timeline)
AutoReverse AutoReverse AutoReverse AutoReverse

Gets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration.

(Inherited from Timeline)
AutoReverseProperty AutoReverseProperty AutoReverseProperty AutoReverseProperty

Identifies the AutoReverse dependency property.

(Inherited from Timeline)
BeginTime BeginTime BeginTime BeginTime

Gets or sets the time at which this Timeline should begin.

(Inherited from Timeline)
BeginTimeProperty BeginTimeProperty BeginTimeProperty BeginTimeProperty

Identifies the BeginTime dependency property.

(Inherited from Timeline)
Children Children Children Children

Gets the collection of child Timeline objects.

Dispatcher Dispatcher Dispatcher Dispatcher

Gets the CoreDispatcher that this object is associated with. The CoreDispatcher represents a facility that can access the DependencyObject on the UI thread even if the code is initiated by a non-UI thread.

(Inherited from DependencyObject)
Duration Duration Duration Duration

Gets or sets the length of time for which this timeline plays, not counting repetitions.

(Inherited from Timeline)
DurationProperty DurationProperty DurationProperty DurationProperty

Identifies the Duration dependency property.

(Inherited from Timeline)
FillBehavior FillBehavior FillBehavior FillBehavior

Gets or sets a value that specifies how the animation behaves after it reaches the end of its active period.

(Inherited from Timeline)
FillBehaviorProperty FillBehaviorProperty FillBehaviorProperty FillBehaviorProperty

Identifies the FillBehavior dependency property.

(Inherited from Timeline)
RepeatBehavior RepeatBehavior RepeatBehavior RepeatBehavior

Gets or sets the repeating behavior of this timeline.

(Inherited from Timeline)
RepeatBehaviorProperty RepeatBehaviorProperty RepeatBehaviorProperty RepeatBehaviorProperty

Identifies the RepeatBehavior dependency property.

(Inherited from Timeline)
SpeedRatio SpeedRatio SpeedRatio SpeedRatio

Gets or sets the rate, relative to its parent, at which time progresses for this Timeline.

(Inherited from Timeline)
SpeedRatioProperty SpeedRatioProperty SpeedRatioProperty SpeedRatioProperty

Identifies for the SpeedRatio dependency property.

(Inherited from Timeline)
TargetNameProperty TargetNameProperty TargetNameProperty TargetNameProperty

Identifies the Storyboard.TargetName XAML attached property.

TargetPropertyProperty TargetPropertyProperty TargetPropertyProperty TargetPropertyProperty

Identifies the Storyboard.TargetProperty XAML attached property.

Methods

Begin() Begin() Begin() Begin()

Initiates the set of animations associated with the storyboard.

ClearValue(DependencyProperty) ClearValue(DependencyProperty) ClearValue(DependencyProperty) ClearValue(DependencyProperty)

Clears the local value of a dependency property.

(Inherited from DependencyObject)
GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty) GetAnimationBaseValue(DependencyProperty)

Returns any base value established for a dependency property, which would apply in cases where an animation is not active.

(Inherited from DependencyObject)
GetCurrentState() GetCurrentState() GetCurrentState() GetCurrentState()

Gets the clock state of the Storyboard.

GetCurrentTime() GetCurrentTime() GetCurrentTime() GetCurrentTime()

Gets the current animation clock time of the Storyboard.

GetTargetName(Timeline) GetTargetName(Timeline) GetTargetName(Timeline) GetTargetName(Timeline)

Gets the value of the Storyboard.TargetName XAML attached property from a target element.

GetTargetProperty(Timeline) GetTargetProperty(Timeline) GetTargetProperty(Timeline) GetTargetProperty(Timeline)

Gets the value of the Storyboard.TargetProperty XAML attached property from a target element.

GetValue(DependencyProperty) GetValue(DependencyProperty) GetValue(DependencyProperty) GetValue(DependencyProperty)

Returns the current effective value of a dependency property from a DependencyObject.

(Inherited from DependencyObject)
Pause() Pause() Pause() Pause()

Pauses the animation clock associated with the storyboard.

ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty) ReadLocalValue(DependencyProperty)

Returns the local value of a dependency property, if a local value is set.

(Inherited from DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback) RegisterPropertyChangedCallback(DependencyProperty,DependencyPropertyChangedCallback)

Registers a notification function for listening to changes to a specific DependencyProperty on this DependencyObject instance.

(Inherited from DependencyObject)
Resume() Resume() Resume() Resume()

Resumes the animation clock, or run-time state, associated with the storyboard.

Seek(TimeSpan) Seek(TimeSpan) Seek(TimeSpan) Seek(TimeSpan)

Moves the storyboard to the specified animation position. The storyboard performs the requested seek when the next clock tick occurs.

SeekAlignedToLastTick(TimeSpan) SeekAlignedToLastTick(TimeSpan) SeekAlignedToLastTick(TimeSpan) SeekAlignedToLastTick(TimeSpan)

Moves the storyboard to the specified animation position immediately (synchronously).

SetTarget(Timeline, DependencyObject) SetTarget(Timeline, DependencyObject) SetTarget(Timeline, DependencyObject) SetTarget(Timeline, DependencyObject)

Causes the specified Timeline to target the specified object.

SetTargetName(Timeline, String) SetTargetName(Timeline, String) SetTargetName(Timeline, String) SetTargetName(Timeline, String)

Sets the value of the Storyboard.TargetName XAML attached property for a target element.

SetTargetProperty(Timeline, String) SetTargetProperty(Timeline, String) SetTargetProperty(Timeline, String) SetTargetProperty(Timeline, String)

Sets the value of the Storyboard.TargetProperty XAML attached property for a target element.

SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object) SetValue(DependencyProperty,Object)

Sets the local value of a dependency property on a DependencyObject.

(Inherited from DependencyObject)
SkipToFill() SkipToFill() SkipToFill() SkipToFill()

Advances the current time of the storyboard's clock to the end of its active period.

Stop() Stop() Stop() Stop()

Stops the storyboard.

UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64) UnregisterPropertyChangedCallback(DependencyProperty,Int64)

Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback.

(Inherited from DependencyObject)

Events

Completed Completed Completed Completed

Occurs when the Storyboard object has completed playing.

(Inherited from Timeline)

See also