How to: Control an Animation using From, To, and By

A "From/To/By" or "basic animation" creates a transition between two target values (see Animation Overview for an introduction to different types of animations). To set the target values of a basic animation, use its From, To, and By properties. The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.

The animation progresses from the value specified by the From property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.

<!-- This example shows the different effects of setting
To, By, and From properties on animations. --><Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><StackPanelMargin="20"><!-- Demonstrates the From and To properties used together. --><RectangleName="fromToAnimatedRectangle"Height="10"Width="100"HorizontalAlignment="Left"Margin="10"Fill="#99FF9900"/><!-- Demonstrates the use of the To property. --><RectangleName="toAnimatedRectangle"Height="10"Width="100"HorizontalAlignment="Left"Margin="10"Fill="#99FF9900"/><!-- Demonstrates the use of the By property. --><RectangleName="byAnimatedRectangle"Height="10"Width="100"HorizontalAlignment="Left"Margin="10"Fill="#99FF9900"/><!-- Demonstrates the use of the From and By properties. --><RectangleName="fromByAnimatedRectangle"Height="10"Width="100"HorizontalAlignment="Left"Margin="10"Fill="#99FF9900"/><!-- Demonstrates the use of the From property. --><RectangleName="fromAnimatedRectangle"Height="10"Width="100"HorizontalAlignment="Left"Margin="10"Fill="#99FF9900"/><Button>
Start Animations
<Button.Triggers><EventTriggerRoutedEvent="Button.Click"><BeginStoryboard><StoryboardFillBehavior="Stop"><!-- Demonstrates the From and To properties used together.
Animates the rectangle's Width property from 50 to 300 over 10 seconds. --><DoubleAnimationStoryboard.TargetName="fromToAnimatedRectangle"Storyboard.TargetProperty="(Rectangle.Width)"From="50"To="300"Duration="0:0:10"/><!-- Demonstrates the To property used by itself.
Animates the Rectangle's Width property from its base value
(100) to 300 over 10 seconds. --><DoubleAnimationStoryboard.TargetName="toAnimatedRectangle"Storyboard.TargetProperty="(Rectangle.Width)"To="300"Duration="0:0:10"/><!-- Demonstrates the By property used by itself.
Increments the Rectangle's Width property by 300 over 10 seconds.
As a result, the Width property is animated from its base value
(100) to 400 (100 + 300) over 10 seconds. --><DoubleAnimationStoryboard.TargetName="byAnimatedRectangle"Storyboard.TargetProperty="(Rectangle.Width)"By="300"Duration="0:0:10"/><!-- Demonstrates the From and By properties used together.
Increments the Rectangle's Width property by 300 over 10 seconds.
As a result, the Width property is animated from 50
to 350 (50 + 300) over 10 seconds. --><DoubleAnimationStoryboard.TargetName="fromByAnimatedRectangle"Storyboard.TargetProperty="(Rectangle.Width)"From="50"By="300"Duration="0:0:10"/><!-- Demonstrates the From property used by itself.
Animates the rectangle's Width property from 50 to its base value (100)
over 10 seconds. --><DoubleAnimationStoryboard.TargetName="fromAnimatedRectangle"Storyboard.TargetProperty="(Rectangle.Width)"From="50"Duration="0:0:10"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button></StackPanel></Page>