Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
DoubleAnimationUsingPath Class
Collapse the table of content
Expand the table of content

DoubleAnimationUsingPath Class

Animates the value of a Double property between two or more target values using a PathGeometry to specify those values. This animation can be used to move a visual object along a path.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

public class DoubleAnimationUsingPath : DoubleAnimationBase
<DoubleAnimationUsingPath .../>

DoubleAnimationUsingPath uses linear interpolation over a specified Duration.

DoubleAnimationUsingPath is similar to DoubleAnimation except that it uses a PathGeometry to interpolate over two or more values rather then between only two values like DoubleAnimation. Although DoubleAnimation is used for most simple animations involving a Double value, DoubleAnimationUsingPath is particularly well suited for animating the position of an object on the screen.

This example shows how to use the DoubleAnimationUsingPath class to move an object along a path defined by a PathGeometry.

The following example uses two DoubleAnimationUsingPath objects to move a rectangle along a geometric path:

  • The first DoubleAnimationUsingPath animates the X of the TranslateTransform applied to the rectangle. It makes the rectangle move horizontally along the path.

  • The second DoubleAnimationUsingPath animates the Y of the TranslateTransform applied to the rectangle. It makes the rectangle move vertically along the path.


    <!-- This is the geometry creates the animation path. Because 
         this example uses it multiple times, it's declared as a resource and
         frozen to improve performance. -->
    <PathGeometry x:Key="AnimationPath"
      Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
      PresentationOptions:Freeze="True" />

  <Canvas Width="400" Height="400">

    <!-- The object to animate. -->
      Width="30" Height="30" Fill="Blue">
        <TranslateTransform x:Name="AnimatedTranslateTransform"  />   

        <EventTrigger RoutedEvent="Path.Loaded">
            <Storyboard RepeatBehavior="Forever">

              <!-- Animates the rectangle horizotally along the path. -->
                PathGeometry="{StaticResource AnimationPath}"
                Duration="0:0:5"  />

              <!-- Animates the rectangle vertically along the path. -->
                PathGeometry="{StaticResource AnimationPath}"
                Duration="0:0:5"  />
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace SDKSample

    public class DoubleAnimationUsingPathExample : Page

        public DoubleAnimationUsingPathExample()

            // Create a NameScope for the page so that 
            // we can use Storyboards.
            NameScope.SetNameScope(this, new NameScope());

            // Create a rectangle.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Width = 30;
            aRectangle.Height = 30;
            aRectangle.Fill = Brushes.Blue;

            // Create a transform. This transform 
            // will be used to move the rectangle.
            TranslateTransform animatedTranslateTransform = 
                new TranslateTransform();

            // Register the transform's name with the page 
            // so that they it be targeted by a Storyboard. 
            this.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform);    

            aRectangle.RenderTransform = animatedTranslateTransform;

            // Create a Canvas to contain the rectangle 
            // and add it to the page.
            Canvas mainPanel = new Canvas();
            mainPanel.Width = 400;
            mainPanel.Height = 400;
            this.Content = mainPanel;

            // Create the animation path.
            PathGeometry animationPath = new PathGeometry();
            PathFigure pFigure = new PathFigure();
            pFigure.StartPoint = new Point(10, 100);
            PolyBezierSegment pBezierSegment = new PolyBezierSegment();
            pBezierSegment.Points.Add(new Point(35, 0));
            pBezierSegment.Points.Add(new Point(135, 0));
            pBezierSegment.Points.Add(new Point(160, 100));
            pBezierSegment.Points.Add(new Point(180, 190));
            pBezierSegment.Points.Add(new Point(285, 200));
            pBezierSegment.Points.Add(new Point(310, 100));

            // Freeze the PathGeometry for performance benefits.

            // Create a DoubleAnimationUsingPath to move the 
            // rectangle horizontally along the path by animating  
            // its TranslateTransform.
            DoubleAnimationUsingPath translateXAnimation =
                new DoubleAnimationUsingPath();
            translateXAnimation.PathGeometry = animationPath;
            translateXAnimation.Duration = TimeSpan.FromSeconds(5);

            // Set the Source property to X. This makes 
            // the animation generate horizontal offset values from 
            // the path information. 
            translateXAnimation.Source = PathAnimationSource.X;

            // Set the animation to target the X property 
            // of the TranslateTransform named "AnimatedTranslateTransform".
            Storyboard.SetTargetName(translateXAnimation, "AnimatedTranslateTransform");
                new PropertyPath(TranslateTransform.XProperty));

            // Create a DoubleAnimationUsingPath to move the 
            // rectangle vertically along the path by animating  
            // its TranslateTransform.
            DoubleAnimationUsingPath translateYAnimation =
                new DoubleAnimationUsingPath();
            translateYAnimation.PathGeometry = animationPath;
            translateYAnimation.Duration = TimeSpan.FromSeconds(5);

            // Set the Source property to Y. This makes 
            // the animation generate vertical offset values from 
            // the path information. 
            translateYAnimation.Source = PathAnimationSource.Y;

            // Set the animation to target the Y property 
            // of the TranslateTransform named "AnimatedTranslateTransform".
            Storyboard.SetTargetName(translateYAnimation, "AnimatedTranslateTransform");
                new PropertyPath(TranslateTransform.YProperty)); 

            // Create a Storyboard to contain and apply the animations.
            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever;

            // Start the animations when the rectangle is loaded.
            aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
                // Start the storyboard.




For the complete sample, see Path Animation Sample.

Another way to move an object using a geometric path is to use a MatrixAnimationUsingPath object. For an example, see How to: Animate an Object Along a Path (Matrix Animation).

More Code

How to: Rotate an Object by Using a Geometric Path This example shows how to rotate (pivot) an object along a geometric path that is defined by a PathGeometry object.
How to: Animate an Object Along a Path (Point Animation) This example shows how to use a PointAnimationUsingPath object to animate a Point along a curved path.
How to: Animate an Object Along a Path (Matrix Animation) This example shows how to use the MatrixAnimationUsingPath class to animate an object along a path that is defined by a PathGeometry.

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

.NET Framework

Supported in: 3.5, 3.0

Community Additions

© 2015 Microsoft