how to move object using path geometry by clicking a button?

Question

I try a Path geometry to move my image in curve path using WPF. However, when i click the 'Start' button,the canvas itself moving in the path, not the image. So how i am going to move the image by clicking a 'Start' button? Below are codes that have done.

This is my xaml code:

     <Window x:Class="WpfAppPoint4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfAppPoint4"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
   <Storyboard x:Key="Storyboard1">
        <MatrixAnimationUsingPath 
            Storyboard.TargetProperty="RenderTransform.(MatrixTransform.Matrix)"
                Duration="0:0:5" DoesRotateWithTangent="True">
            <MatrixAnimationUsingPath.PathGeometry>
                <PathGeometry Figures="M0,0 L50,0 A100,100 0 0 1 150,100
                                           A50,50 0 1 1 100,50 L200,50"/>
            </MatrixAnimationUsingPath.PathGeometry>
        </MatrixAnimationUsingPath>
    </Storyboard>

</Window.Resources>
<Grid>
   <Canvas Name="MyCanvas" Margin="4,10,-4,-10">
   <Button x:Name="button_Start" Content="Start" HorizontalAlignment="Right" 
   VerticalAlignment="Top" Width="150" Click="Button_Start" 
   Canvas.Right="320" Canvas.Top="553" Height="45" FontFamily="Microsoft 
   Sans Serif" FontSize="20">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource 
                     Storyboard1}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>

      <Image Source="C:\Users\Merlinz\Downloads\Kid-Tap\Kid-Tap\parent.png" 
             x:Name="ParentNode" Width="40" Height="40" Canvas.Top="100" 
             Canvas.Left="5"

RenderTransformOrigin="0.5,0.5">
   <Image.RenderTransform>
        <TransformGroup>
            <MatrixTransform/>
        </TransformGroup>

    </Image.RenderTransform>

        </Image>
    </Grid>       
</Canvas>

Answer 1

In order to make the animation work on the Image element, you have to set the Storyboard.TargetName property.

Besides that, when you want to animate a MatrixTransform in the RenderTransform property of an element, you must not put the MatrixTransform in a TransformGroup.

So change your Image declaration to this:

<Image x:Name="movingImage" ...>
    <Image.RenderTransform>
        <MatrixTransform/>
    </Image.RenderTransform>
</Image>

an animate it like this (where the property path RenderTransform.Matrix is equivalent to yours, but shorter):

<MatrixAnimationUsingPath 
    Storyboard.TargetProperty="RenderTransform.Matrix"
    Storyboard.TargetName="movingImage" ...>
    ...
</MatrixAnimationUsingPath>