How to: Animate the Position of an Object by Using PointAnimation

This example shows how to use the PointAnimation class to animate an object along a Path.

Example

The following example moves an ellipse along a Path from one point on the screen to another. The example animates the position of an EllipseGeometry by using PointAnimation to animate the Center property.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace SDKSamples
{
    // This example shows how to use PointAnimation to animate the
    // position of an ellipse by animating the Center property of an 
    // EllipseGeometry. PointAnimation is used because the Center property
    // takes a Point value.
    public class PointAnimationExample : Page
    {
        public PointAnimationExample()
        {

            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            EllipseGeometry myEllipseGeometry = new EllipseGeometry();
            myEllipseGeometry.Center = new Point(200, 100);
            myEllipseGeometry.RadiusX = 15;
            myEllipseGeometry.RadiusY = 15;

            // Assign the EllipseGeometry a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName(
                "MyAnimatedEllipseGeometry", myEllipseGeometry);

            Path myPath = new Path();
            myPath.Fill = Brushes.Blue;
            myPath.Margin = new Thickness(15);
            myPath.Data = myEllipseGeometry;

            PointAnimation myPointAnimation = new PointAnimation();
            myPointAnimation.Duration = TimeSpan.FromSeconds(2);

            // Set the animation to repeat forever. 
            myPointAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the From and To properties of the animation.
            myPointAnimation.From = new Point(200, 100);
            myPointAnimation.To = new Point(450, 250);

            // Set the animation to target the Center property
            // of the object named "MyAnimatedEllipseGeometry."
            Storyboard.SetTargetName(myPointAnimation, "MyAnimatedEllipseGeometry");
            Storyboard.SetTargetProperty(
                myPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));

            // Create a storyboard to apply the animation.
            Storyboard ellipseStoryboard = new Storyboard();
            ellipseStoryboard.Children.Add(myPointAnimation);

            // 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 Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace SDKSamples
	' This example shows how to use PointAnimation to animate the
	' position of an ellipse by animating the Center property of an 
	' EllipseGeometry. PointAnimation is used because the Center property
	' takes a Point value.
	Public Class PointAnimationExample
		Inherits Page
		Public Sub New()

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

            Dim myEllipseGeometry As New EllipseGeometry()
            With myEllipseGeometry
                .Center = New Point(200, 100)
                .RadiusX = 15
                .RadiusY = 15
            End With

			' Assign the EllipseGeometry a name so that
			' it can be targeted by a Storyboard.
			Me.RegisterName("MyAnimatedEllipseGeometry", myEllipseGeometry)

            Dim myPath As New Path()
            With myPath
                .Fill = Brushes.Blue
                .Margin = New Thickness(15)
                .Data = myEllipseGeometry
            End With

            Dim myPointAnimation As New PointAnimation()
            With myPointAnimation
                .Duration = TimeSpan.FromSeconds(2)

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

                ' Set the From and To properties of the animation.
                .From = New Point(200, 100)
                .To = New Point(450, 250)
            End With

            ' Set the animation to target the Center property
            ' of the object named "MyAnimatedEllipseGeometry."
            Storyboard.SetTargetName(myPointAnimation, "MyAnimatedEllipseGeometry")
            Storyboard.SetTargetProperty(myPointAnimation, New PropertyPath(EllipseGeometry.CenterProperty))

            ' Create a storyboard to apply the animation.
            Dim ellipseStoryboard As New Storyboard()
            ellipseStoryboard.Children.Add(myPointAnimation)

            ' 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

PointAnimation
Path
EllipseGeometry
Center
Animation Overview
Graphics and Multimedia
How-to Topics
Animation and Timing
How-to Topics