Property Value

The TargetProperty property supports complex syntax that enables you to target properties of other properties. For a detailed description of the different ways to target properties, see the Animating with Storyboards Overview .

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.