Defines a segment of time.
Assembly: PresentationCore (in PresentationCore.dll)
A timeline represents a segment of time. It provides properties that enable you to specify the length of that segment, when it should start, how many times it will repeat, how fast time progresses in that segment, and more.
Classes that inherit from the timeline class provide additional functionality, such as animation and media playback. The following are examples of some of the different types of specialized timelines available.
Animations: An AnimationTimeline is a type of timeline that produces output values. When you associate an animation with a property, the animation updates the property's value as it plays, thereby "animating" it. For an introduction to animations, see Animation Overview. For information about the different ways to apply animations, see the Property Animation Techniques Overview.
MediaTimelines: A MediaTimeline is a type of timeline that controls the playback of a media file.
ParallelTimelines: A ParallelTimeline is a type of timeline that groups other timelines.
Storyboards: A Storyboard is a special type of ParallelTimeline that provides object and property targeting information for the timelines it contains. For more information about Storyboard objects, see the Storyboards Overview.
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 applied, copies are made of the timeline and its child timelines. These copies are frozen (made read-only) and Clock objects are created from them. It's these clocks that do the actual work of animating the targeted properties. If a timeline was data bound or animated, a snapshot of its current values was made when its clock was 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 regenerated. Clocks are not regenerated 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 are working directly at the clock level, create and apply a new set of clocks and use them to replace the previous set of generated clocks.
For an example of a data bound animation, see the Key Spline Animation Sample .
Using a Timeline as a Timer
A timeline's clock will only progress when there's an event hander associated with it or (in the case of an AnimationClock object) it is associated with a property. For this reason (and others), it's not recommended that you use a as a timer.
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>
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 Attribute, 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.
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.
|How to: Animate in a Style||This example shows how to animate properties within a style. When animating within a style, only the framework element for which the style is defined can be targeted directly. To target a freezable object, you must "dot down" from a property of the styled element.|
|How to: Simplify Animations by Using Child Timelines||This example shows how to simplify animations by using child ParallelTimeline objects. A Storyboard is a type of that provides targeting information for the timelines it contains. Use a Storyboard to provide timeline targeting information, including object and property information.|
Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003
The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.