Edit

How to: Animate a Rectangle

  • Article

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;
        }
    }
}


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace SDKSamples
    Public Class RectAnimationExample
        Inherits Page
        Public Sub New()

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangleGeometry As New RectangleGeometry()
            myRectangleGeometry.Rect = New Rect(0, 200, 100, 100)

            ' Assign the geometry a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("MyAnimatedRectangleGeometry", myRectangleGeometry)

            Dim myPath As New Path()
            With myPath
                .Fill = Brushes.LemonChiffon
                .StrokeThickness = 1
                .Stroke = Brushes.Black
                .Data = myRectangleGeometry
            End With

            Dim myRectAnimation As New RectAnimation()
            With myRectAnimation
                .Duration = TimeSpan.FromSeconds(2)
                .FillBehavior = FillBehavior.HoldEnd

                ' Set the animation to repeat forever. 
                .RepeatBehavior = RepeatBehavior.Forever

                ' Set the From and To properties of the animation.
                .From = New Rect(0, 200, 100, 100)
                .To = New Rect(600, 50, 200, 50)
            End With

            ' 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.
            Dim ellipseStoryboard As New Storyboard()
            ellipseStoryboard.Children.Add(myRectAnimation)

            ' Start the storyboard when the Path loads.
            AddHandler myPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)

            Dim containerCanvas As New Canvas()
            containerCanvas.Children.Add(myPath)

            Content = containerCanvas
        End Sub
    End Class
End Namespace

See also