Storyboards can only be defined on root elements or as part of a style, even though every framework element has a Storyboard collection. The difference between setting the Storyboard attribute of the root element and setting the Storyboard attribute of a style can be summed up as follows:

A style-based Storyboard can be applied to any element, not just the root element.

The target of each SetterTimeline is assumed to be the element for which the style is defined, so you do not specify the SetterTimeline object’s TargetName.

Every Storyboard must have at least one SetterTimeline. A SetterTimeline describes the target of the animation and the attribute being animated. In order to animate an attribute, it must be a dependency property. Animation in XAML is accomplished by modifying the value of an attribute over time. A Path indicates the element and the attribute to modify. The Path is another name for the target of an animation . An example of this is (Button.Width) or (Button.Height).

The target is declared using the following syntax:

(ElementName.AttributeName)

Targeting an element in a SetterTimeline
TargetName="myButton "
Path="Button.Width " />

Only framework elements can be targeted. Freezableselements deriving from the System.Windows.Freezable classcan only be targeted if they are used as an attribute value for another element. Brush is a freezable and is used to describe how to paint many attributes of elements, such as the Foreground and Background. Because Brush is used as the value of an attribute on an element, it can be targeted through the element, using syntax as follows:

(ElementName.AttributeName).(FreezableElementName.AttributeName)

Targeting a Freezable in a SetterTimeline
TargetName="myButton "
Path="(Button.Background).(SolidColorBrush. Red ) " />

If you are trying to target the attribute of an element that is part of a collection, you’ll need to push the path even deeper:

(ElementName.AttributeName).(CollectionTypeName.Children)[CollectionIndex].
(FreezableElementName.AttributeName)

An example of this is targeting a single transform inside the RenderTransform collection of a Rectangle. (Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)

Targeting an element in a collection in a SetterTimeline
TargetName="myRectangle"
Path="Rectangle.(Rectangle.RenderTransform).(TransformGroup.Children)[0].
(ScaleTransform.ScaleX) />

The type of the animation you add to the SetterTimeline must match the type of the attribute you are targeting. If you target a Color, then you must use a ColorAnimation. If the attribute is a Double, you must use a DoubleAnimation, and so on. If the attribute on the target is not declared, the animation has no effect. If you do not specify the Background color for Button, the animation does not appear to work.

Animating the Background Color of a Button
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x ="http://schemas.microsoft.com/winfx/xaml/2005">

TargetName="myButton "
Path="(Button.Background).(SolidColorBrush.Color) ">
From="Blue "
To="Yellow "
Duration="0:0:5 "
RepeatBehavior="Forever " />



Name="myButton "
Width="120 "
Background="White ">A Button

All elements of TypeAnimation have a From, To, By, Duration, and RepeatBehavior attribute. The value of From, To, and By varies according to the type. A DoubleAni-mation, for example, requires Double values for these attributes . A RectAnimation requires a Rect, and so on. The animation starts at the value From and changes according to the To or By values. Setting the To attribute means that the animation value will move from the From value to the To value in the time period specified by Duration. Setting the By attribute means that the value will change by the By value during the time period specified by Duration. You are not allowed to set both the To and By attributes at the same time.

You determine the type of animation to use based on the attribute you are trying to animate. If you’re animating the width of an element, use a DoubleAnimation because the data type of the Width attribute is a Double.