Databinding and Animating Timelines

Most timeline properties can be databound or animated; however, because of the way the timing system works, databound or animated timelines do not behave like other databound 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 unmodifiable) 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 databound 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 databinding 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 applied an animation directly to a property using the BeginAnimation method, call the BeginAnimation method again and pass it the animation that's 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 generated clocks.

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 TargetPropertyattached 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. --><Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"WindowTitle="Animate Properties with Storyboards"><BorderBackground="White"><StackPanelMargin="30"HorizontalAlignment="Left"MinWidth="500"><TextBlock>Storyboard Animation Example</TextBlock><!-- The width of this button is animated. --><ButtonName="myWidthAnimatedButton"Height="30"Width="200"HorizontalAlignment="Left">
A Button
<Button.Triggers><!-- Animates the width of the first button
from 200 to 300. --><EventTriggerRoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.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. --><ButtonHeight="30"Width="200"HorizontalAlignment="Left">Another Button
<Button.Background><SolidColorBrushx:Name="myAnimatedBrush"Color="Blue"/></Button.Background><Button.Triggers><!-- Animates the color of the brush used to paint
the second button from red to blue . --><EventTriggerRoutedEvent="Button.Click"><BeginStoryboard><Storyboard><ColorAnimationStoryboard.TargetName="myAnimatedBrush"Storyboard.TargetProperty="Color"From="Red"To="Blue"Duration="0:0:7"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button></StackPanel></Border></Page>

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.

This 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 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.