[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
Controls animations with a timeline, and provides object and property targeting information for its child animations.
Assembly: System.Windows (in System.Windows.dll)
XMLNS for XAML: Not mapped to an xmlns.
Thetype exposes the following members.
|AutoReverse||Gets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration. (Inherited from Timeline.)|
|BeginTime||Gets or sets the time at which this Timeline should begin. (Inherited from Timeline.)|
|Children||Gets the collection of child Timeline objects.|
|Dispatcher||Gets the Dispatcher this object is associated with. (Inherited from DependencyObject.)|
|Duration||Gets or sets the length of time for which this timeline plays, not counting repetitions. (Inherited from Timeline.)|
|FillBehavior||Gets or sets a value that specifies how the animation behaves after it reaches the end of its active period. (Inherited from Timeline.)|
|RepeatBehavior||Gets or sets the repeating behavior of this timeline. (Inherited from Timeline.)|
|SpeedRatio||Gets or sets the rate, relative to its parent, at which time progresses for this Timeline. (Inherited from Timeline.)|
|Begin||Initiates the set of animations associated with the storyboard.|
|CheckAccess||Determines whether the calling thread has access to this object. (Inherited from DependencyObject.)|
|ClearValue||Clears the local value of a dependency property. (Inherited from DependencyObject.)|
|Equals(Object)||Determines whether the specified Object is equal to the current Object. (Inherited from Object.)|
|Finalize||Allows an object to try to free resources and perform other cleanup operations before the Object is reclaimed by garbage collection. (Inherited from Object.)|
|GetAnimationBaseValue||Returns any base value established for a Windows Phone dependency property, which would apply in cases where an animation is not active. (Inherited from DependencyObject.)|
|GetCurrentState||Gets the clock state of the storyboard.|
|GetCurrentTime||Gets the current time of the storyboard.|
|GetHashCode||Serves as a hash function for a particular type. (Inherited from Object.)|
|GetTargetName||Gets the TargetName of the specified Timeline object.|
|GetTargetProperty||Gets the TargetProperty of the specified Timeline object.|
|GetType||Gets the Type of the current instance. (Inherited from Object.)|
|GetValue||Returns the current effective value of a dependency property from a DependencyObject. (Inherited from DependencyObject.)|
|MemberwiseClone||Creates a shallow copy of the current Object. (Inherited from Object.)|
|Pause||Pauses the animation clock associated with the storyboard.|
|ReadLocalValue||Returns the local value of a dependency property, if a local value is set. (Inherited from DependencyObject.)|
|Resume||Resumes the animation clock, or run-time state, associated with the storyboard.|
|Seek||Moves the storyboard to the specified animation position. The storyboard performs the requested seek when the next clock tick occurs.|
|SeekAlignedToLastTick||Moves the storyboard to the specified animation position immediately (synchronously).|
|SetTarget||Causes the specified Timeline to target the specified object.|
|SetTargetName||Causes the specified Timeline to target the object with the specified name.|
|SetTargetProperty||Causes the specified Timeline to target the specified dependency property.|
|SetValue||Sets the local value of a dependency property on a DependencyObject. (Inherited from DependencyObject.)|
|SkipToFill||Advances the current time of the storyboard's clock to the end of its active period.|
|Stop||Stops the storyboard.|
|ToString||Returns a string that represents the current object. (Inherited from Object.)|
You can think of a as a container for other animation objects (for example, a DoubleAnimation) as well as other objects. In other words, you can nest objects within each other and specify BeginTime values for each separately. Using nested storyboards can help you orchestrate elaborate animation sequences. Each child waits until its parent begins and then starts the countdown before it in turn begins.
You can use the interactive methods of the object to start, pause, resume, and stop an animation. For more information, see Animations, motion, and output for Windows Phone.
Do not attempt to call members (for example, Begin) within the constructor of the page. This will cause the animation to fail silently.
<phone:PhoneApplicationPage x:Class="interactive_animation.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="800" d:DesignWidth="480"> <StackPanel> <TextBlock Margin="10" TextWrapping="Wrap">This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.</TextBlock> <Canvas> <Canvas.Resources> <Storyboard x:Name="myStoryboard"> <!-- Animate the center point of the ellipse. --> <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="20,200" To="400,100" RepeatBehavior="Forever" /> </Storyboard> </Canvas.Resources> <Path Fill="Blue"> <Path.Data> <!-- Describes an ellipse. --> <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="20,20" RadiusX="15" RadiusY="15" /> </Path.Data> </Path> <StackPanel Orientation="Horizontal" Canvas.Left="0" Canvas.Top="265"> <!-- Button that begins animation. --> <Button Click="Animation_Begin" Content="Begin" /> <!-- Button that pauses Animation. --> <Button Click="Animation_Pause" Content="Pause" /> <!-- Button that resumes Animation. --> <Button Click="Animation_Resume" Content="Resume" /> <!-- Button that stops Animation. Stopping the animation returns the ellipse to its original location. --> <Button Click="Animation_Stop" Content="Stop" /> </StackPanel> </Canvas> </StackPanel> </phone:PhoneApplicationPage>
Private Sub Animation_Begin(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Begin() End Sub Private Sub Animation_Pause(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Pause() End Sub Private Sub Animation_Resume(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Resume() End Sub Private Sub Animation_Stop(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Stop() End Sub
The following example shows how to create a using code.
Private Sub Create_And_Run_Animation(ByVal sender As Object, ByVal e As EventArgs) ' 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 myColor As Color = Color.FromArgb(255, 255, 0, 0) Dim myBrush As SolidColorBrush = New SolidColorBrush myBrush.Color = myColor myRectangle.Fill = myBrush ' 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 myDoubleAnimation1 As DoubleAnimation = New DoubleAnimation Dim myDoubleAnimation2 As DoubleAnimation = New DoubleAnimation myDoubleAnimation1.Duration = duration myDoubleAnimation2.Duration = duration Dim sb As Storyboard = New Storyboard sb.Duration = duration sb.Children.Add(myDoubleAnimation1) sb.Children.Add(myDoubleAnimation2) Storyboard.SetTarget(myDoubleAnimation1, myRectangle) Storyboard.SetTarget(myDoubleAnimation2, myRectangle) ' Set the attached properties of Canvas.Left and Canvas.Top ' to be the target properties of the two respective DoubleAnimations Storyboard.SetTargetProperty(myDoubleAnimation1, New PropertyPath("(Canvas.Left)")) Storyboard.SetTargetProperty(myDoubleAnimation2, New PropertyPath("(Canvas.Top)")) myDoubleAnimation1.To = 200 myDoubleAnimation2.To = 200 ' Make the Storyboard a resource. LayoutRoot.Resources.Add("unique_id", sb) ' Begin the animation. sb.Begin() End Sub