title: How can I animate an image along a circular path in WPF?
body: <p>I need to create a rather complex animation involving images in WPF where an image has to move along a circular path. <a href="http://www.freeimagehosting.net/image.php?a181609e78.jpg" rel="nofollow noreferrer">Here is a picture of what it looks like...</a></p>
  
  <p>Here is my xaml:</p>
  
  <pre><code>&lt;ControlTemplate x:Key="ValveStyle" TargetType="{x:Type CheckBox}"&gt;
    &lt;ControlTemplate.Resources&gt;
      &lt;PathGeometry x:Key="CirclePathGeometry" PresentationOptions:Freeze="True"&gt;
        &lt;PathGeometry.Figures&gt;
          &lt;PathFigureCollection&gt;
            &lt;PathFigure StartPoint="340,120"&gt;
              &lt;PathFigure.Segments&gt;
                &lt;PathSegmentCollection&gt;
                  &lt;ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
                      Point="-30,120" /&gt;
                &lt;/PathSegmentCollection&gt;
              &lt;/PathFigure.Segments&gt;
            &lt;/PathFigure&gt;
          &lt;/PathFigureCollection&gt;
        &lt;/PathGeometry.Figures&gt;
      &lt;/PathGeometry&gt;
    &lt;/ControlTemplate.Resources&gt;
    &lt;Viewbox Stretch="Uniform"&gt;
      &lt;VisualStateManager.VisualStateGroups&gt;
        &lt;VisualStateGroup x:Name="CheckStates"&gt;
          &lt;VisualStateGroup.Transitions&gt;
            &lt;VisualTransition GeneratedDuration="00:00:00.2000000" /&gt;
          &lt;/VisualStateGroup.Transitions&gt;
          &lt;VisualState x:Name="Unchecked" /&gt;
          &lt;VisualState x:Name="Checked"&gt;
            &lt;Storyboard&gt;
  
              &lt;!--DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X"
                  DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" /&gt;
          &lt;DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y"
                  DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" /--&gt;
  
              &lt;MatrixAnimationUsingPath Storyboard.TargetName="Image3MatrixTransform" Storyboard.TargetProperty="Matrix"
                  MatrixAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" /&gt;
              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                  Storyboard.TargetName="image1"
                  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"&gt;
                &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" /&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                  Storyboard.TargetName="image2"
                  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"&gt;
                &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" /&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                  Storyboard.TargetName="image"
                  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"&gt;
                &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" /&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
            &lt;/Storyboard&gt;
          &lt;/VisualState&gt;
        &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;VisualStateManager.CustomVisualStateManager&gt;
        &lt;ic:ExtendedVisualStateManager /&gt;
      &lt;/VisualStateManager.CustomVisualStateManager&gt;
      &lt;Canvas Width="685" Height="527"&gt;
        &lt;Image Source="/VT;component/Images/Valve121.1-Base.png" Stretch="Fill" /&gt;
        &lt;Image x:Name="image" Source="/VT;component/Images/Valve121.1-LeftBar1.png" Stretch="Fill"
            Canvas.Left="61.991" Canvas.Top="49.329" RenderTransformOrigin="0.286,0.5428"&gt;
          &lt;Image.RenderTransform&gt;
            &lt;TransformGroup&gt;
              &lt;ScaleTransform /&gt;
              &lt;SkewTransform /&gt;
              &lt;RotateTransform /&gt;
              &lt;TranslateTransform /&gt;
            &lt;/TransformGroup&gt;
          &lt;/Image.RenderTransform&gt;
        &lt;/Image&gt;
        &lt;Image x:Name="image2" Source="/VT;component/Images/Valve121.1-RightBar.png" Stretch="Fill"
            Canvas.Left="436.491" Canvas.Top="49.388" RenderTransformOrigin="0.249,0.756"&gt;
          &lt;Image.RenderTransform&gt;
            &lt;TransformGroup&gt;
              &lt;ScaleTransform /&gt;
              &lt;SkewTransform /&gt;
              &lt;RotateTransform /&gt;
              &lt;TranslateTransform /&gt;
            &lt;/TransformGroup&gt;
          &lt;/Image.RenderTransform&gt;
        &lt;/Image&gt;
        &lt;Image x:Name="image3" Source="/VT;component/Images/Valve121.1-HzBar.png" Stretch="Fill"
            Canvas.Left="277.491" Canvas.Top="58.345"&gt;
          &lt;Image.RenderTransform&gt;
            &lt;MatrixTransform x:Name="Image3MatrixTransform" /&gt;
          &lt;/Image.RenderTransform&gt;
        &lt;/Image&gt;
        &lt;Image Source="/VT;component/Images/Valve121.1-Overlay.png" Stretch="Fill" /&gt;
        &lt;Image x:Name="image1" Source="/VT;component/Images/Valve121.1-LeftBar2.png" Stretch="Fill"
            Canvas.Left="129.824" Canvas.Top="24.661" RenderTransformOrigin="0.5,0.5"&gt;
          &lt;Image.RenderTransform&gt;
            &lt;TransformGroup&gt;
              &lt;ScaleTransform /&gt;
              &lt;SkewTransform /&gt;
              &lt;RotateTransform /&gt;
              &lt;TranslateTransform /&gt;
            &lt;/TransformGroup&gt;
          &lt;/Image.RenderTransform&gt;
        &lt;/Image&gt;
        &lt;Path Stroke="Blue" StrokeThickness="10" RenderTransformOrigin="-0.333,-0.227"&gt;
          &lt;Path.Data&gt;
            &lt;PathGeometry&gt;
              &lt;PathFigureCollection&gt;
                &lt;PathFigure StartPoint="340,120"&gt;
                  &lt;PathFigure.Segments&gt;
                    &lt;PathSegmentCollection&gt;
                      &lt;ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
                          Point="-30,120" /&gt;
                    &lt;/PathSegmentCollection&gt;
                  &lt;/PathFigure.Segments&gt;
                &lt;/PathFigure&gt;
              &lt;/PathFigureCollection&gt;
            &lt;/PathGeometry&gt;
          &lt;/Path.Data&gt;
        &lt;/Path&gt;
      &lt;/Canvas&gt;
    &lt;/Viewbox&gt;
  &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>I'm facing several problems:  </p>
  
  <ul>
  <li>The image (image3) doesn't seem to move correctly along the path I have set, so I guess I made a mistake there...  </li>
  <li>The animation of the image (image3) starts after all other animation are done. I would like that all animations start at the same time.</li>
  </ul>
  
  <p>I've tried both <code>DoubleAnimationUsingPath</code> and <code>MatrixAnimationUsingPath</code> but none of them worked the way I want. Is it even possible to mix Key Frames animation and Path animations ?</p>
  
  <p>Is it possible to do such an animation in WPF? If so, how can I achieve this?</p>