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.

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>