Export (0) Print
Expand All
0 out of 1 rated this helpful - Rate this topic

Storyboard Class

A container timeline that provides object and property targeting information for its child animations.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationFramework (in PresentationFramework.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation
public class Storyboard : ParallelTimeline
<Storyboard>
  Children
</Storyboard>

The Storyboard type exposes the following members.

  NameDescription
Public methodStoryboardInitializes a new instance of the Storyboard class.
Top
  NameDescription
Public propertyAccelerationRatioGets or sets a value specifying the percentage of the timeline's Duration spent accelerating the passage of time from zero to its maximum rate. (Inherited from Timeline.)
Public propertyAutoReverseGets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration. (Inherited from Timeline.)
Public propertyBeginTimeGets or sets the time at which this Timeline should begin. (Inherited from Timeline.)
Public propertyCanFreezeGets a value that indicates whether the object can be made unmodifiable. (Inherited from Freezable.)
Public propertyChildrenGets or sets the collection of direct child Timeline objects of the TimelineGroup. (Inherited from TimelineGroup.)
Public propertyDecelerationRatioGets or sets a value specifying the percentage of the timeline's Duration spent decelerating the passage of time from its maximum rate to zero. (Inherited from Timeline.)
Public propertyDependencyObjectTypeGets the DependencyObjectType that wraps the CLR type of this instance.  (Inherited from DependencyObject.)
Public propertyDispatcherGets the Dispatcher this DispatcherObject is associated with. (Inherited from DispatcherObject.)
Public propertyDurationGets or sets the length of time for which this timeline plays, not counting repetitions. (Inherited from Timeline.)
Public propertyFillBehaviorGets or sets a value that specifies how the Timeline behaves after it reaches the end of its active period. (Inherited from Timeline.)
Public propertyHasAnimatedPropertiesGets a value that indicates whether one or more AnimationClock objects is associated with any of this object's dependency properties. (Inherited from Animatable.)
Public propertyIsFrozenGets a value that indicates whether the object is currently modifiable. (Inherited from Freezable.)
Public propertyIsSealedGets a value that indicates whether this instance is currently sealed (read-only). (Inherited from DependencyObject.)
Public propertyName Gets or sets the name of this Timeline. (Inherited from Timeline.)
Public propertyRepeatBehaviorGets or sets the repeating behavior of this timeline. (Inherited from Timeline.)
Public propertySlipBehaviorGets or sets a value that specifies how this timeline will behave when one or more of its Timeline children slips. (Inherited from ParallelTimeline.)
Public propertySpeedRatioGets or sets the rate, relative to its parent, at which time progresses for this Timeline. (Inherited from Timeline.)
Top
  NameDescription
Public attached propertyTargetGets or sets the object that should be animated.
Public attached propertyTargetNameGets or sets the name of the object to animate. The object must be a FrameworkElement, FrameworkContentElement, or Freezable.
Public attached propertyTargetPropertyGets or sets the property that should be animated.
Top
  NameDescription
Protected methodAddChildAdds a child Timeline to this TimelineGroup. (Inherited from TimelineGroup.)
Protected methodAddTextAdds a text string as a child of this Timeline. (Inherited from TimelineGroup.)
Protected methodAllocateClockCreates a type-specific clock for this timeline. (Inherited from TimelineGroup.)
Public methodApplyAnimationClock(DependencyProperty, AnimationClock)Applies an AnimationClock to the specified DependencyProperty. If the property is already animated, the SnapshotAndReplace handoff behavior is used. (Inherited from Animatable.)
Public methodApplyAnimationClock(DependencyProperty, AnimationClock, HandoffBehavior)Applies an AnimationClock to the specified DependencyProperty. If the property is already animated, the specified HandoffBehavior is used. (Inherited from Animatable.)
Public methodBegin()Applies the animations associated with this Storyboard to their targets and initiates them.
Public methodBegin(FrameworkContentElement)Applies the animations associated with this Storyboard to their targets and initiates them.
Public methodBegin(FrameworkElement)Applies the animations associated with this Storyboard to their targets and initiates them.
Public methodBegin(FrameworkContentElement, Boolean)Applies the animations associated with this Storyboard to their targets and initiates them.
Public methodBegin(FrameworkContentElement, HandoffBehavior)Applies the animations associated with this Storyboard to their targets and initiates them, using the specified HandoffBehavior.
Public methodBegin(FrameworkElement, Boolean)Applies the animations associated with this Storyboard to their targets and initiates them.
Public methodBegin(FrameworkElement, FrameworkTemplate)Applies the animations associated with this Storyboard to their targets within the specified template and initiates them.
Public methodBegin(FrameworkElement, HandoffBehavior)Applies the animations associated with this Storyboard to their targets and initiates them, using the specified HandoffBehavior.
Public methodBegin(FrameworkContentElement, HandoffBehavior, Boolean)Applies the animations associated with this Storyboard to their targets and initiates them, using the specified HandoffBehavior.
Public methodBegin(FrameworkElement, FrameworkTemplate, Boolean)Applies the animations associated with this Storyboard to their targets within the specified template and initiates them.
Public methodBegin(FrameworkElement, FrameworkTemplate, HandoffBehavior)Applies the animations associated with this Storyboard to their targets within the specified template and initiates them.
Public methodBegin(FrameworkElement, HandoffBehavior, Boolean)Applies the animations associated with this Storyboard to their targets and initiates them.
Public methodBegin(FrameworkElement, FrameworkTemplate, HandoffBehavior, Boolean)Applies the animations associated with this Storyboard to their targets within the specified template and initiates them.
Public methodBeginAnimation(DependencyProperty, AnimationTimeline)Applies an animation to the specified DependencyProperty. The animation is started when the next frame is rendered. If the specified property is already animated, the SnapshotAndReplace handoff behavior is used. (Inherited from Animatable.)
Public methodBeginAnimation(DependencyProperty, AnimationTimeline, HandoffBehavior)Applies an animation to the specified DependencyProperty. The animation is started when the next frame is rendered. If the specified property is already animated, the specified HandoffBehavior is used. (Inherited from Animatable.)
Public methodCheckAccessDetermines whether the calling thread has access to this DispatcherObject. (Inherited from DispatcherObject.)
Public methodClearValue(DependencyProperty)Clears the local value of a property. The property to be cleared is specified by a DependencyProperty identifier. (Inherited from DependencyObject.)
Public methodClearValue(DependencyPropertyKey)Clears the local value of a read-only property. The property to be cleared is specified by a DependencyPropertyKey. (Inherited from DependencyObject.)
Public methodCloneCreates a modifiable clone of this Storyboard, making deep copies of this object's values. When copying dependency properties, this method copies resource references and data bindings (but they might no longer resolve) but not animations or their current values.
Protected methodCloneCoreMakes the instance a clone (deep copy) of the specified Freezable using base (non-animated) property values. (Inherited from Freezable.)
Public methodCloneCurrentValueCreates a modifiable clone of this ParallelTimeline object, making deep copies of this object's current values. Resource references, data bindings, and animations are not copied, but their current values are. (Inherited from ParallelTimeline.)
Protected methodCloneCurrentValueCoreMakes the instance a modifiable clone (deep copy) of the specified Freezable using current property values. (Inherited from Freezable.)
Public methodCoerceValueCoerces the value of the specified dependency property. This is accomplished by invoking any CoerceValueCallback function specified in property metadata for the dependency property as it exists on the calling DependencyObject. (Inherited from DependencyObject.)
Public methodCreateClock()Instantiates a new ClockGroup object, using this instance. (Inherited from TimelineGroup.)
Public methodCreateClock(Boolean)Creates a new Clock from this Timeline and specifies whether the new Clock is controllable. If this Timeline has children, a tree of clocks is created with this Timeline as the root. (Inherited from Timeline.)
Protected methodCreateInstanceInitializes a new instance of the Freezable class. (Inherited from Freezable.)
Protected methodCreateInstanceCoreCreates a new instance of the Storyboard class. (Overrides ParallelTimeline.CreateInstanceCore().)
Public methodEqualsDetermines whether a provided DependencyObject is equivalent to the current DependencyObject. (Inherited from DependencyObject.)
Protected methodFinalizeAllows an object to try to free resources and perform other cleanup operations before it is reclaimed by garbage collection. (Inherited from Object.)
Public methodFreeze()Makes the current object unmodifiable and sets its IsFrozen property to true. (Inherited from Freezable.)
Protected methodFreezeCoreMakes this Timeline unmodifiable or determines whether it can be made unmodifiable. (Inherited from Timeline.)
Public methodGetAnimationBaseValueReturns the non-animated value of the specified DependencyProperty. (Inherited from Animatable.)
Public methodGetAsFrozenCreates a frozen copy of the Freezable, using base (non-animated) property values. Because the copy is frozen, any frozen sub-objects are copied by reference. (Inherited from Freezable.)
Protected methodGetAsFrozenCoreMakes this instance a clone of the specified Timeline object. (Inherited from Timeline.)
Public methodGetCurrentGlobalSpeed()Retrieves the CurrentGlobalSpeed of the Clock that was created for this Storyboard.
Public methodGetCurrentGlobalSpeed(FrameworkContentElement)Retrieves the CurrentGlobalSpeed of the Clock that was created for this Storyboard.
Public methodGetCurrentGlobalSpeed(FrameworkElement)Retrieves the CurrentGlobalSpeed of the Clock that was created for this Storyboard.
Public methodGetCurrentIteration()Retrieves the CurrentIteration of the Clock that was created for this Storyboard.
Public methodGetCurrentIteration(FrameworkContentElement)Retrieves the CurrentIteration of the Clock that was created for this Storyboard.
Public methodGetCurrentIteration(FrameworkElement)Retrieves the CurrentIteration of the Clock that was created for this Storyboard.
Public methodGetCurrentProgress()Retrieves the CurrentProgress of the Clock that was created for this Storyboard.
Public methodGetCurrentProgress(FrameworkContentElement)Retrieves the CurrentProgress of the Clock that was created for this Storyboard.
Public methodGetCurrentProgress(FrameworkElement)Retrieves the CurrentProgress of the Clock that was created for this Storyboard.
Public methodGetCurrentState()Retrieves the CurrentState of the Clock that was created for this Storyboard.
Public methodGetCurrentState(FrameworkContentElement)Retrieves the CurrentState of the Clock that was created for this Storyboard.
Public methodGetCurrentState(FrameworkElement)Retrieves the CurrentState of the Clock that was created for this Storyboard.
Public methodGetCurrentTime()Retrieves the CurrentTime of the Clock that was created for this Storyboard.
Public methodGetCurrentTime(FrameworkContentElement)Retrieves the CurrentTime of the Clock that was created for this Storyboard.
Public methodGetCurrentTime(FrameworkElement)Retrieves the CurrentTime of the Clock that was created for this Storyboard.
Public methodGetCurrentValueAsFrozenCreates a frozen copy of the Freezable using current property values. Because the copy is frozen, any frozen sub-objects are copied by reference. (Inherited from Freezable.)
Protected methodGetCurrentValueAsFrozenCoreMakes this instance a frozen clone of the specified Timeline. Resource references, data bindings, and animations are not copied, but their current values are. (Inherited from Timeline.)
Public methodGetHashCodeGets a hash code for this DependencyObject. (Inherited from DependencyObject.)
Public methodGetIsPaused()Retrieves a value that indicates whether the Clock that was created for this Storyboard is paused.
Public methodGetIsPaused(FrameworkContentElement)Retrieves a value that indicates whether the Clock that was created for this Storyboard is paused.
Public methodGetIsPaused(FrameworkElement)Retrieves a value that indicates whether the Clock that was created for this Storyboard is paused.
Public methodGetLocalValueEnumeratorCreates a specialized enumerator for determining which dependency properties have locally set values on this DependencyObject. (Inherited from DependencyObject.)
Protected methodGetNaturalDurationReturns the length of a single iteration of this Timeline. (Inherited from Timeline.)
Protected methodGetNaturalDurationCore Return the natural duration (duration of a single iteration) from a specified Clock. (Inherited from ParallelTimeline.)
Public methodStatic memberGetTargetRetrieves the Target value of the specified Timeline.
Public methodStatic memberGetTargetNameRetrieves the TargetName value of the specified Timeline.
Public methodStatic memberGetTargetPropertyRetrieves the TargetProperty value of the specified Timeline.
Public methodGetTypeGets the Type of the current instance. (Inherited from Object.)
Public methodGetValueReturns the current effective value of a dependency property on this instance of a DependencyObject. (Inherited from DependencyObject.)
Public methodInvalidatePropertyRe-evaluates the effective value for the specified dependency property (Inherited from DependencyObject.)
Protected methodMemberwiseCloneCreates a shallow copy of the current Object. (Inherited from Object.)
Protected methodOnChangedCalled when the current Freezable object is modified. (Inherited from Freezable.)
Protected methodOnFreezablePropertyChanged(DependencyObject, DependencyObject)Ensures that appropriate context pointers are established for a DependencyObjectType data member that has just been set. (Inherited from Freezable.)
Protected methodOnFreezablePropertyChanged(DependencyObject, DependencyObject, DependencyProperty)This member supports the Windows Presentation Foundation (WPF) infrastructure and is not intended to be used directly from your code. (Inherited from Freezable.)
Protected methodOnPropertyChangedOverrides the DependencyObject implementation of OnPropertyChanged to also invoke any Changed handlers in response to a changing dependency property of type Freezable. (Inherited from Freezable.)
Public methodPause()Pauses the Clock that was created for this Storyboard.
Public methodPause(FrameworkContentElement)Pauses the Clock of the specified FrameworkContentElement associated with this Storyboard.
Public methodPause(FrameworkElement)Pauses the Clock of the specified FrameworkElement associated with this Storyboard.
Public methodReadLocalValueReturns the local value of a dependency property, if it exists. (Inherited from DependencyObject.)
Protected methodReadPreambleEnsures that the Freezable is being accessed from a valid thread. Inheritors of Freezable must call this method at the beginning of any API that reads data members that are not dependency properties. (Inherited from Freezable.)
Public methodRemove()Removes the Clock objects that were created for this Storyboard. Animations that belong to this Storyboard no longer affect the properties they once animated, regardless of their FillBehavior setting.
Public methodRemove(FrameworkContentElement)Removes the Clock objects that were created for this Storyboard. Animations that belong to this Storyboard no longer affect the properties they once animated, regardless of their FillBehavior setting.
Public methodRemove(FrameworkElement)Removes the Clock objects that were created for this Storyboard. Animations that belong to this Storyboard no longer affect the properties they once animated, regardless of their FillBehavior setting.
Public methodResume()Resumes the Clock that was created for this Storyboard.
Public methodResume(FrameworkContentElement)Resumes the Clock that was created for this Storyboard.
Public methodResume(FrameworkElement)Resumes the Clock that was created for this Storyboard.
Public methodSeek(TimeSpan)Seeks this Storyboard to the specified position. The Storyboard performs the requested seek when the next clock tick occurs.
Public methodSeek(TimeSpan, TimeSeekOrigin)Seeks this Storyboard to the specified position. The Storyboard performs the requested seek when the next clock tick occurs.
Public methodSeek(FrameworkContentElement, TimeSpan, TimeSeekOrigin)Seeks this Storyboard to the specified position. The Storyboard performs the requested seek when the next clock tick occurs.
Public methodSeek(FrameworkElement, TimeSpan, TimeSeekOrigin)Seeks this Storyboard to the specified position. The Storyboard performs the requested seek when the next clock tick occurs.
Public methodSeekAlignedToLastTick(TimeSpan)Seeks this Storyboard to a new position immediately (synchronously).
Public methodSeekAlignedToLastTick(TimeSpan, TimeSeekOrigin)Seeks this Storyboard to a new position immediately (synchronously).
Public methodSeekAlignedToLastTick(FrameworkContentElement, TimeSpan, TimeSeekOrigin)Seeks this Storyboard to a new position immediately (synchronously).
Public methodSeekAlignedToLastTick(FrameworkElement, TimeSpan, TimeSeekOrigin)Seeks this Storyboard to a new position immediately (synchronously).
Public methodSetCurrentValueSets the value of a dependency property without changing its value source. (Inherited from DependencyObject.)
Public methodSetSpeedRatio(Double)Sets the interactive speed ratio for the Clock that was created for this Storyboard.
Public methodSetSpeedRatio(FrameworkContentElement, Double)Sets the interactive speed ratio of the Clock that was created for this Storyboard.
Public methodSetSpeedRatio(FrameworkElement, Double)Sets the interactive speed ratio of the Clock that was created for this Storyboard.
Public methodStatic memberSetTargetMakes the specified Timeline target the dependency object.
Public methodStatic memberSetTargetNameMakes the specified Timeline target the dependency object with the specified name.
Public methodStatic memberSetTargetPropertyMakes the specified Timeline target the specified dependency property.
Public methodSetValue(DependencyProperty, Object)Sets the local value of a dependency property, specified by its dependency property identifier. (Inherited from DependencyObject.)
Public methodSetValue(DependencyPropertyKey, Object)Sets the local value of a read-only dependency property, specified by the DependencyPropertyKey identifier of the dependency property. (Inherited from DependencyObject.)
Protected methodShouldSerializePropertyReturns a value that indicates whether serialization processes should serialize the value for the provided dependency property. (Inherited from DependencyObject.)
Public methodSkipToFill()Advances the current time of this storyboard's Clock to the end of its active period.
Public methodSkipToFill(FrameworkContentElement)Advances the current time of this storyboard's Clock to the end of its active period.
Public methodSkipToFill(FrameworkElement)Advances the current time of this storyboard's Clock to the end of its active period.
Public methodStop()Stops the Clock that was created for this Storyboard.
Public methodStop(FrameworkContentElement)Stops the Clock that was created for this Storyboard.
Public methodStop(FrameworkElement)Stops the Clock that was created for this Storyboard.
Public methodToStringReturns a string that represents the current object. (Inherited from Object.)
Public methodVerifyAccessEnforces that the calling thread has access to this DispatcherObject. (Inherited from DispatcherObject.)
Protected methodWritePostscriptRaises the Changed event for the Freezable and invokes its OnChanged method. Classes that derive from Freezable should call this method at the end of any API that modifies class members that are not stored as dependency properties. (Inherited from Freezable.)
Protected methodWritePreambleVerifies that the Freezable is not frozen and that it is being accessed from a valid threading context. Freezable inheritors should call this method at the beginning of any API that writes to data members that are not dependency properties. (Inherited from Freezable.)
Top
  NameDescription
Public eventChangedOccurs when the Freezable or an object it contains is modified. (Inherited from Freezable.)
Public eventCompletedOccurs when this timeline has completely finished playing: it will no longer enter its active period. (Inherited from Timeline.)
Public eventCurrentGlobalSpeedInvalidatedOccurs when the rate at which time progresses for the timeline's clock changes. (Inherited from Timeline.)
Public eventCurrentStateInvalidatedOccurs when the CurrentState property of the timeline's Clock is updated. (Inherited from Timeline.)
Public eventCurrentTimeInvalidatedOccurs when the CurrentTime property of the timeline's Clock is updated. (Inherited from Timeline.)
Public eventRemoveRequestedOccurs when the clock created for this timeline or one of its parent timelines is removed. (Inherited from Timeline.)
Top
  NameDescription
Public fieldStatic memberTargetNamePropertyIdentifies the TargetName attached property.
Public fieldStatic memberTargetPropertyIdentifies the Target attached property.
Public fieldStatic memberTargetPropertyPropertyIdentifies the TargetProperty attached property.
Top
  NameDescription
Explicit interface implemetationPrivate methodIAddChild.AddChildAdds a child object. (Inherited from TimelineGroup.)
Explicit interface implemetationPrivate methodIAddChild.AddTextAdds the text content of a node to the object. (Inherited from TimelineGroup.)
Top

Interactively Controlling Storyboards

A controllable storyboard can pause, resume, seek, stop, and be removed. To make a storyboard controllable in markup, you specify the Name property of the BeginStoryboard object that creates it; for an example, see How to: Use Event Triggers to Control a Storyboard After It Starts. To make a storyboard controllable in code, you must use the appropriate overload of the storyboard's Begin method and specify true to make it controllable. For an example, see How to: Control a Storyboard After It Starts.

Data Binding and Animating Timelines

Most timeline properties can be data bound or animated; however, because of the way the timing system works, data bound or animated timelines do not behave like other data bound or animated objects. To understand their behavior, it helps to understand what it means to activate a timeline.

When a timeline is activated, copies are made of the timeline and its child timelines. These copies are frozen (made read-only) and Clock objects are created from them. These clocks do the actual work of animating the targeted properties. If a timeline is data bound or animated, a snapshot of its current values is made when its clock is created. Even though the original timeline might continue to change, its clock does not.

For a timeline to reflect data binding or animation changes, its clock must be re-created. Clocks are not re-created for you automatically. The following are several ways to apply timeline changes:

  • If the timeline is or belongs to a Storyboard, you can make it reflect changes by reapplying its storyboard using a BeginStoryboard or the Begin method. This has the side effect of also restarting the animation. In code, you can use the Seek method to advance the storyboard back to its previous position.

  • If you applied an animation directly to a property using the BeginAnimation method, call the BeginAnimation method again and pass it the animation that has been modified.

  • If you are working directly at the clock level, create and apply a new set of clocks and use them to replace the previous set of created clocks.

For an example of a data bound animation, see Key Spline Animation Sample .

This example shows how to use a Storyboard to animate properties. To animate a property by using a Storyboard, create an animation for each property that you want to animate and also create a Storyboard to contain the animations.

The type of property determines the type of animation to use. For example, to animate a property that takes Double values, use a DoubleAnimation. The TargetName and TargetProperty attached properties specify the object and property to which the animation is applied.

To start a storyboard in Extensible Application Markup Language (XAML), use a BeginStoryboard action and an EventTrigger. The EventTrigger begins the BeginStoryboard action when the event that is specified by its RoutedEvent property occurs. The BeginStoryboard action starts the Storyboard.

The following example uses Storyboard objects to animate two Button controls. To make the first button change in size, its Width is animated. To make the second button change color, the Color property of the SolidColorBrush is used to set the Background of the button that is animated.


<!-- StoryboardExample.xaml
     Uses storyboards to animate properties. -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Animate Properties with Storyboards">

  <Border Background="White">
    <StackPanel Margin="30" HorizontalAlignment="Left" MinWidth="500">

      <TextBlock>Storyboard Animation Example</TextBlock>

      <!-- The width of this button is animated. -->
      <Button Name="myWidthAnimatedButton"
        Height="30" Width="200" HorizontalAlignment="Left">
        A Button   
        <Button.Triggers>

          <!-- Animates the width of the first button 
               from 200 to 300. -->         
          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard>           
                <DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"
                  Storyboard.TargetProperty="Width"
                  From="200" To="300" Duration="0:0:3" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>

      <!-- The color of the brush used to paint this button is animated. -->
      <Button Height="30" Width="200" 
        HorizontalAlignment="Left">Another Button
        <Button.Background>
          <SolidColorBrush x:Name="myAnimatedBrush" Color="Blue" />
        </Button.Background>
        <Button.Triggers>

        <!-- Animates the color of the brush used to paint 
             the second button from red to blue . -->             
          <EventTrigger RoutedEvent="Button.Click">    
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetName="myAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  From="Red" To="Blue" Duration="0:0:7" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>
    </StackPanel>
  </Border>
</Page>


NoteNote

Although animations can target both a FrameworkElement object, such as a Control or Panel, and a Freezable object, such as a Brush or Transform, only framework elements have a Name property. To assign a name to a freezable so that it can be targeted by an animation, use the x:Name Directive, as the previous example shows.

If you use code, you must create a NameScope for a FrameworkElement and register the names of the objects to animate with that FrameworkElement. To start the animations in code, use a BeginStoryboard action with an EventTrigger. Optionally, you can use an event handler and the Begin method of Storyboard. The following example shows how to use the Begin method.


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.Samples.Animation.AnimatingWithStoryboards
{


    // Uses a storyboard to animate the properties
    // of two buttons.
    public class StoryboardExample : Page
    {

        public StoryboardExample()
        {
            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Animate Properties using Storyboards";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.MinWidth = 500;
            myStackPanel.Margin = new Thickness(30);
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
            TextBlock myTextBlock = new TextBlock();
            myTextBlock.Text = "Storyboard Animation Example";
            myStackPanel.Children.Add(myTextBlock);

            //
            // Create and animate the first button.
            //

            // Create a button.
            Button myWidthAnimatedButton = new Button();
            myWidthAnimatedButton.Height = 30;
            myWidthAnimatedButton.Width = 200;
            myWidthAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
            myWidthAnimatedButton.Content = "A Button";

            // Set the Name of the button so that it can be referred
            // to in the storyboard that's created later.
            // The ID doesn't have to match the variable name;
            // it can be any unique identifier.
            myWidthAnimatedButton.Name = "myWidthAnimatedButton";

            // Register the name with the page to which the button belongs.
            this.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton);

            // Create a DoubleAnimation to animate the width of the button.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 200;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));          

            // Configure the animation to target the button's Width property.
            Storyboard.SetTargetName(myDoubleAnimation, myWidthAnimatedButton.Name); 
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Button.WidthProperty));

            // Create a storyboard to contain the animation.
            Storyboard myWidthAnimatedButtonStoryboard = new Storyboard();
            myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation);

            // Animate the button width when it's clicked.
            myWidthAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)
                {
                    myWidthAnimatedButtonStoryboard.Begin(myWidthAnimatedButton);
                };


            myStackPanel.Children.Add(myWidthAnimatedButton);

            //
            // Create and animate the second button.
            //

            // Create a second button.
            Button myColorAnimatedButton = new Button();
            myColorAnimatedButton.Height = 30;
            myColorAnimatedButton.Width = 200;
            myColorAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
            myColorAnimatedButton.Content = "Another Button";

            // Create a SolidColorBrush to paint the button's background.
            SolidColorBrush myBackgroundBrush = new SolidColorBrush();
            myBackgroundBrush.Color = Colors.Blue;

            // Because a Brush isn't a FrameworkElement, it doesn't
            // have a Name property to set. Instead, you just
            // register a name for the SolidColorBrush with
            // the page where it's used.
            this.RegisterName("myAnimatedBrush", myBackgroundBrush);

            // Use the brush to paint the background of the button.
            myColorAnimatedButton.Background = myBackgroundBrush;

            // Create a ColorAnimation to animate the button's background.
            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Red;
            myColorAnimation.To = Colors.Blue;
            myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(7000));    

            // Configure the animation to target the brush's Color property.
            Storyboard.SetTargetName(myColorAnimation, "myAnimatedBrush");                        
            Storyboard.SetTargetProperty(myColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));    

            // Create a storyboard to contain the animation.
            Storyboard myColorAnimatedButtonStoryboard = new Storyboard();
            myColorAnimatedButtonStoryboard.Children.Add(myColorAnimation);

            // Animate the button background color when it's clicked.
            myColorAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)
                {
                    myColorAnimatedButtonStoryboard.Begin(myColorAnimatedButton);
                };


            myStackPanel.Children.Add(myColorAnimatedButton);
            this.Content = myStackPanel;

        }
    }
}


For more information about animation and storyboards, see Animation Overview.

If you use code, you are not limited to using Storyboard objects in order to animate properties. For more information and examples, see How to: Animate a Property Without Using a Storyboard and How to: Animate a Property by Using an AnimationClock.

More Code

How to: Trigger an Animation When a Property Value ChangesThis example shows how to use a Trigger to start a Storyboard when a property value changes. You can use a Trigger inside a Style, ControlTemplate, or DataTemplate.
How to: Control a Storyboard After It StartsThis example shows how to use code to control a Storyboard after it has started. To control a storyboard in XAML, use Trigger and TriggerAction objects; for an example, see How to: Use Event Triggers to Control a Storyboard After It Starts.
How to: Use Event Triggers to Control a Storyboard After It StartsThis example shows how to control a Storyboard after it starts. To start a Storyboard by using XAML, use BeginStoryboard, which distributes the animations to the objects and properties they animate and then starts the storyboard. If you give BeginStoryboard a name by specifying its Name property, you make it a controllable storyboard. You can then interactively control the storyboard after it starts.

.NET Framework

Supported in: 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.
Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.