ボタンをクリックしてパスジオメトリを使用してオブジェクトを移動する方法は？

Question

私はWPFを使用してカーブパスで画像を移動するためにパスジオメトリを試しています。しかし、「開始」ボタンをクリックすると、キャンバス自体がパスではなく画像で移動します。では、「スタート」ボタンをクリックして画像を移動する方法は？以下は、行われたコードです。

これは私のXAMLコードです：Image要素のアニメーション作品を作るために

 <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

、あなたはStoryboard.TargetNameプロパティを設定する必要があります。

さらに、要素のRenderTransformプロパティでMatrixTransformをアニメートする場合は、MatrixTransformをTransformGroupに配置しないでください。

だからこれにあなたのイメージの宣言を変更します。

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

このようなアニメーション、それ（プロパティパスRenderTransform.Matrixがあなたと同じですが、短いの）：

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