[Note: This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]
Controls animations with a timeline, and provides object and property targeting information for its child animations.
(in System.Windows.dll)
Visual Basic (Declaration)
<ContentPropertyAttribute("Children", True)> _
Public NotInheritable Class Storyboard _
Inherits Timeline
Dim instance As Storyboard
[ContentPropertyAttribute("Children", true)]
public sealed class Storyboard : Timeline
XAML Object Element Usage
<Storyboard ...>
oneOrMoreChildTimelines
</Storyboard>
XAML Values
- oneOrMoreChildTimelines
One or more object elements for classes that derive from Timeline. This can be either another Storyboard or any of a number of animation types.
You can think of a Storyboard as a container for other animation objects (for example, a DoubleAnimation) as well as other Storyboard objects. In other words, you can nest Storyboard objects within each other and specify BeginTime values for each Storyboard separately. Using nested storyboards can help you orchestrate elaborate animation sequences. Each child Storyboard waits until its parent Storyboard begins and then starts the countdown before it in turn begins.
You can use the interactive methods of the Storyboard object to start, pause, resume, and stop an animation. For more information, see Animation Overview.
.gif) Note: |
|---|
Do not attempt to call Storyboard members (for example, Begin) within the constructor of the page. This will cause the animation to fail silently. |
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.
Run this sample
<UserControl x:Class="interactive_animation.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<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="10" Canvas.Top="265">
<!-- Button that begins animation. -->
<Button Click="Animation_Begin"
Width="65" Height="30" Margin="2" Content="Begin" />
<!-- Button that pauses Animation. -->
<Button Click="Animation_Pause"
Width="65" Height="30" Margin="2" Content="Pause" />
<!-- Button that resumes Animation. -->
<Button Click="Animation_Resume"
Width="65" Height="30" Margin="2" Content="Resume" />
<!-- Button that stops Animation. Stopping the animation returns the
ellipse to its original location. -->
<Button Click="Animation_Stop"
Width="65" Height="30" Margin="2" Content="Stop" />
</StackPanel>
</Canvas>
</StackPanel>
</UserControl>
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
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();
}
The following example shows how to create a Storyboard using code.
Run this sample
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
private void Create_And_Run_Animation(object sender, EventArgs e)
{
// Create a red rectangle that will be the target
// of the animation.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
Color myColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = myColor;
myRectangle.Fill = myBrush;
// 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 myDoubleAnimation1 = new DoubleAnimation();
DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation2.Duration = duration;
Storyboard sb = 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();
}
System..::.Object
System.Windows..::.DependencyObject
System.Windows.Media.Animation..::.Timeline
System.Windows.Media.Animation..::.Storyboard
Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.
For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.
Reference
Other Resources