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>

Please format the XAML. There is currently only a closing ``. That said, why do you think the MatrixAnimationUsingPath should have an effect on the Image? You don't seem to specify that anywhere. Also, what's happening in the Button_Start event handler? — Clemens, Dec 09 '17 at 09:07

Clemens · Accepted Answer · 2017-12-10T08:34:15.533

0

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>

edited Dec 10 '17 at 08:34

answered Dec 09 '17 at 09:18

Clemens

123,504
12
155
268

Thanks for the tips. However, after i set the targetname="ParentNode" and I click the start button, the animation won't move at all. – red Dec 09 '17 at 23:45
No idea what you did wrong now. It works fine for me with these modifications. By the way, ParentNode isn't a clever name for the Image anyway. I've edited my answer. – Clemens Dec 10 '17 at 08:29
It worked! i forgot to add my in-code with : Storyboard s = this.FindResource("Storyboard1") as Storyboard; s.Begin(this); Thanks @Clemens ! – red Dec 10 '17 at 12:22

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

1 Answers1