How to: Animate a Rectangle
This example shows how to animate changes to the size and position of a rectangle.
Example
The following example uses an instance of the RectAnimation class to animate the Rect property of a RectangleGeometry, which animates changes to the size and position of the rectangle.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace SDKSamples
{
public class RectAnimationExample : Page
{
public RectAnimationExample()
{
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
RectangleGeometry myRectangleGeometry = new RectangleGeometry();
myRectangleGeometry.Rect = new Rect(0, 200, 100, 100);
// Assign the geometry a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"MyAnimatedRectangleGeometry", myRectangleGeometry);
Path myPath = new Path();
myPath.Fill = Brushes.LemonChiffon;
myPath.StrokeThickness = 1;
myPath.Stroke = Brushes.Black;
myPath.Data = myRectangleGeometry;
RectAnimation myRectAnimation = new RectAnimation();
myRectAnimation.Duration = TimeSpan.FromSeconds(2);
myRectAnimation.FillBehavior = FillBehavior.HoldEnd;
// Set the animation to repeat forever.
myRectAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the From and To properties of the animation.
myRectAnimation.From = new Rect(0, 200, 100, 100);
myRectAnimation.To = new Rect(600, 50, 200, 50);
// Set the animation to target the Rect property
// of the object named "MyAnimatedRectangleGeometry."
Storyboard.SetTargetName(myRectAnimation, "MyAnimatedRectangleGeometry");
Storyboard.SetTargetProperty(
myRectAnimation, new PropertyPath(RectangleGeometry.RectProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(myRectAnimation);
// Start the storyboard when the Path loads.
myPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
Canvas containerCanvas = new Canvas();
containerCanvas.Children.Add(myPath);
Content = containerCanvas;
}
}
}
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
<Path.Data>
<RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the Rect property of the RectangleGeometry which causes the
rectangle to animate postion and size. -->
<RectAnimation
Storyboard.TargetName="myRectangleGeometry"
Storyboard.TargetProperty ="Rect"
Duration="0:0:2" FillBehavior="HoldEnd" From="0,200,100,100" To="600,50,200,50" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</StackPanel>
</Page>
See Also
Concepts
WPF Graphics, Animation, and Media Overview