This documentation is archived and is not being maintained.

How to: Rotate an Object by Using a Geometric Path (Matrix Animation)

This example shows how to use a MatrixAnimationUsingPath and a MatrixTransform to rotate (pivot) an object along a geometric path defined by a PathGeometry object.

The following example uses the MatrixAnimationUsingPath object to animate the Matrix property of a MatrixTransform. The MatrixTransform is applied to a button and causes it to move along a curved path. Because the DoesRotateWithTangent property is set to true, the rectangle rotates along the tangent of the path.

  mc:Ignorable="PresentationOptions" Margin="20">
  <Canvas Width="400" Height="400">

    <!-- The Button that is animated across the screen by animating
         the MatrixTransform applied to the button. -->
    <Button MinWidth="100" Content="A Button">
        <MatrixTransform x:Name="ButtonMatrixTransform">
          <MatrixTransform.Matrix >
            <Matrix />
        <EventTrigger RoutedEvent="Button.Loaded">
              RepeatBehavior="Forever" >
                    Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" 
                    PresentationOptions:Freeze="True" />
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

    /// <summary> 
    /// Shows how to animate an object along 
    /// a geometric path. 
    /// </summary> 
    public class MatrixAnimationUsingPathDoesRotateWithTangentExample : Page

        public MatrixAnimationUsingPathDoesRotateWithTangentExample()
            this.Margin = new Thickness(20);

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

            // Create a button.
            Button aButton = new Button();
            aButton.MinWidth = 100;
            aButton.Content = "A Button";

            // Create a MatrixTransform. This transform 
            // will be used to move the button.
            MatrixTransform buttonMatrixTransform = new MatrixTransform();
            aButton.RenderTransform = buttonMatrixTransform;

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

            // Create a Canvas to contain the button 
            // and add it to the page. 
            // Although this example uses a Canvas, 
            // any type of panel will work.
            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 MatrixAnimationUsingPath to move the 
            // button along the path by animating 
            // its MatrixTransform.
            MatrixAnimationUsingPath matrixAnimation =
                new MatrixAnimationUsingPath();
            matrixAnimation.PathGeometry = animationPath;
            matrixAnimation.Duration = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation's DoesRotateWithTangent property 
            // to true so that rotates the rectangle in addition 
            // to moving it.
            matrixAnimation.DoesRotateWithTangent = true;

            // Set the animation to target the Matrix property 
            // of the MatrixTransform named "ButtonMatrixTransform".
            Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
                new PropertyPath(MatrixTransform.MatrixProperty));

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

            // Start the storyboard when the button is loaded.
            aButton.Loaded += delegate(object sender, RoutedEventArgs e)
                // Start the storyboard.


For the complete sample, see Path Animation Sample.

The code version of the preceding sample used a Storyboard to animate the EllipseGeometry, even though only one animation was applied. An easier way to apply a single animation to a property in code is to use the BeginAnimation method. For an example, see How to: Animate a Property Without Using a Storyboard.