How can I animate an image along a circular path in WPF?
I need to create a rather complex animation involving images in WPF where an image has to move along a circular path. [Here is a picture of what it looks like...][1]

Here is my xaml:

    <ControlTemplate x:Key="ValveStyle" TargetType="{x:Type CheckBox}">
      <ControlTemplate.Resources>
        <PathGeometry x:Key="CirclePathGeometry" PresentationOptions:Freeze="True">
          <PathGeometry.Figures>
            <PathFigureCollection>
              <PathFigure StartPoint="340,120">
                <PathFigure.Segments>
                  <PathSegmentCollection>
                    <ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
                        Point="-30,120" />
                  </PathSegmentCollection>
                </PathFigure.Segments>
              </PathFigure>
            </PathFigureCollection>
          </PathGeometry.Figures>
        </PathGeometry>
      </ControlTemplate.Resources>
      <Viewbox Stretch="Uniform">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CheckStates">
            <VisualStateGroup.Transitions>
              <VisualTransition GeneratedDuration="00:00:00.2000000" />
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Unchecked" />
            <VisualState x:Name="Checked">
              <Storyboard>

                <!--DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X"
                    DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" />
            <DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y"
                    DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" /-->

                <MatrixAnimationUsingPath Storyboard.TargetName="Image3MatrixTransform" Storyboard.TargetProperty="Matrix"
                    MatrixAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" />
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                    Storyboard.TargetName="image1"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                    Storyboard.TargetName="image2"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                    Storyboard.TargetName="image"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <VisualStateManager.CustomVisualStateManager>
          <ic:ExtendedVisualStateManager />
        </VisualStateManager.CustomVisualStateManager>
        <Canvas Width="685" Height="527">
          <Image Source="/VT;component/Images/Valve121.1-Base.png" Stretch="Fill" />
          <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">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          <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">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          <Image x:Name="image3" Source="/VT;component/Images/Valve121.1-HzBar.png" Stretch="Fill"
              Canvas.Left="277.491" Canvas.Top="58.345">
            <Image.RenderTransform>
              <MatrixTransform x:Name="Image3MatrixTransform" />
            </Image.RenderTransform>
          </Image>
          <Image Source="/VT;component/Images/Valve121.1-Overlay.png" Stretch="Fill" />
          <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">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          <Path Stroke="Blue" StrokeThickness="10" RenderTransformOrigin="-0.333,-0.227">
            <Path.Data>
              <PathGeometry>
                <PathFigureCollection>
                  <PathFigure StartPoint="340,120">
                    <PathFigure.Segments>
                      <PathSegmentCollection>
                        <ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
                            Point="-30,120" />
                      </PathSegmentCollection>
                    </PathFigure.Segments>
                  </PathFigure>
                </PathFigureCollection>
              </PathGeometry>
            </Path.Data>
          </Path>
        </Canvas>
      </Viewbox>
    </ControlTemplate>

I'm facing several problems:  

 - The image (image3) doesn't seem to move correctly along the path I have set, so I guess I made a mistake there...  
 - The animation of the image (image3) starts after all other animation are done. I would like that all animations start at the same time.

I've tried both `DoubleAnimationUsingPath` and `MatrixAnimationUsingPath` but none of them worked the way I want. Is it even possible to mix Key Frames animation and Path animations ?


  [1]: http://<a href=http://www.freeimagehosting.net/image.php?a181609e78.jpg><img src=http://www.freeimagehosting.net/uploads/th.a181609e78.jpg


  [1]: http://www.freeimagehosting.net/image.php?a181609e78.jpg
How can I animate an image along a circular path in WPF?
===

I need to create a rather complex animation involving images in WPF where an image has to move along a circular path. [Here is a picture of what it looks like...][1]

Here is my xaml:

    <ControlTemplate x:Key="ValveStyle" TargetType="{x:Type CheckBox}">
      <ControlTemplate.Resources>
        <PathGeometry x:Key="CirclePathGeometry" PresentationOptions:Freeze="True">
          <PathGeometry.Figures>
            <PathFigureCollection>
              <PathFigure StartPoint="340,120">
                <PathFigure.Segments>
                  <PathSegmentCollection>
                    <ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
                        Point="-30,120" />
                  </PathSegmentCollection>
                </PathFigure.Segments>
              </PathFigure>
            </PathFigureCollection>
          </PathGeometry.Figures>
        </PathGeometry>
      </ControlTemplate.Resources>
      <Viewbox Stretch="Uniform">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CheckStates">
            <VisualStateGroup.Transitions>
              <VisualTransition GeneratedDuration="00:00:00.2000000" />
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Unchecked" />
            <VisualState x:Name="Checked">
              <Storyboard>

                <!--DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X"
                    DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" />
            <DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y"
                    DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" /-->

                <MatrixAnimationUsingPath Storyboard.TargetName="Image3MatrixTransform" Storyboard.TargetProperty="Matrix"
                    MatrixAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" />
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                    Storyboard.TargetName="image1"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                    Storyboard.TargetName="image2"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
                    Storyboard.TargetName="image"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
                </DoubleAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <VisualStateManager.CustomVisualStateManager>
          <ic:ExtendedVisualStateManager />
        </VisualStateManager.CustomVisualStateManager>
        <Canvas Width="685" Height="527">
          <Image Source="/VT;component/Images/Valve121.1-Base.png" Stretch="Fill" />
          <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">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          <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">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          <Image x:Name="image3" Source="/VT;component/Images/Valve121.1-HzBar.png" Stretch="Fill"
              Canvas.Left="277.491" Canvas.Top="58.345">
            <Image.RenderTransform>
              <MatrixTransform x:Name="Image3MatrixTransform" />
            </Image.RenderTransform>
          </Image>
          <Image Source="/VT;component/Images/Valve121.1-Overlay.png" Stretch="Fill" />
          <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">
            <Image.RenderTransform>
              <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
          <Path Stroke="Blue" StrokeThickness="10" RenderTransformOrigin="-0.333,-0.227">
            <Path.Data>
              <PathGeometry>
                <PathFigureCollection>
                  <PathFigure StartPoint="340,120">
                    <PathFigure.Segments>
                      <PathSegmentCollection>
                        <ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
                            Point="-30,120" />
                      </PathSegmentCollection>
                    </PathFigure.Segments>
                  </PathFigure>
                </PathFigureCollection>
              </PathGeometry>
            </Path.Data>
          </Path>
        </Canvas>
      </Viewbox>
    </ControlTemplate>

I'm facing several problems:  

 - The image (image3) doesn't seem to move correctly along the path I have set, so I guess I made a mistake there...  
 - The animation of the image (image3) starts after all other animation are done. I would like that all animations start at the same time.

I've tried both `DoubleAnimationUsingPath` and `MatrixAnimationUsingPath` but none of them worked the way I want. Is it even possible to mix Key Frames animation and Path animations ?


  [1]: http://<a href=http://www.freeimagehosting.net/image.php?a181609e78.jpg><img src=http://www.freeimagehosting.net/uploads/th.a181609e78.jpg


  [1]: http://www.freeimagehosting.net/image.php?a181609e78.jpg