XAML要素をある位置から別の位置に移動する

Question

tutorialをアニメーションの開始点として使用し、toolkit Offset optionを調査しましたが、別の方法で証明されていない限り、何とか複雑になりました。

目標： マトリックス]ボタンをクリックするとは、その後、クリックされたボタンの位置にその開始位置からオブジェクトを移動元の位置に戻ってオブジェクトを返します。

チャレンジ：主な課題は、各マトリックス要素（ボタン）の正確な位置を決定することです。 Grid.Row = "1" Grid.Column = "2"など、Gridに関する要素の位置はかなり明確ですが、一般的にはCanvasやアニメーションに関しては考えていません！

以下のコードによると、どのように四角形1平方6からEllipseFigureを移動しますか？

<Canvas> 
    <Canvas.Resources> 
     <Storyboard x:Name="myStoryboard"> 
      <!-- Animate the center point of the ellipse. --> 
      <PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center" 
      Storyboard.TargetName="EllipseFigure" 
      Duration="0:0:5" 
      From="1,2" 
      To="0,0" 
      RepeatBehavior="Forever" /> 
     </Storyboard> 
    </Canvas.Resources> 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <Grid.Resources> 
      <Style TargetType="Button"> 
       <Setter Property="BorderBrush" Value="Yellow" /> 
       <Setter Property="BorderThickness" Value="5" /> 
       <Setter Property="HorizontalAlignment" Value="Stretch" /> 
       <Setter Property="VerticalAlignment" Value="Stretch" /> 
      </Style> 

      <Style TargetType="TextBox"> 
       <Setter Property="BorderBrush" Value="Yellow" /> 
       <Setter Property="BorderThickness" Value="5" /> 
      </Style> 
     </Grid.Resources> 
     <Button Grid.Row="0" Grid.Column="0" Content="1" /> 
     <Button Grid.Row="0" Grid.Column="1" Content="2" /> 
     <Button Grid.Row="0" Grid.Column="2" Content="3" /> 
     <Button Grid.Row="1" Grid.Column="0" Content="4" /> 
     <Button Grid.Row="1" Grid.Column="1" Content="5" /> 
     <Button Grid.Row="1" Grid.Column="2" Content="6" /> 

     <Path Grid.Row="1" Grid.Column="2" Fill="Blue" PointerPressed="ButtonClick"> 
      <Path.Data> 
       <!-- Describe an ellipse. --> 
       <EllipseGeometry x:Name="EllipseFigure" 
     Center="20,20" RadiusX="15" RadiusY="15" /> 
      </Path.Data> 
     </Path> 
    </Grid> 
</Canvas> 

分離コード：あなたが持っているストーリーボードのアプローチを使用して

private void ButtonClick(object sender, RoutedEventArgs e) 
    { 
     myStoryboard.Begin(); 
    } 

Answer 1

は、あなたがボタンやボールの位置を取得することによって、これを達成し、アニメーションのプロパティに設定することができます。あなたはまた、真

にオートリバースを設定することで、ボールを返すことができ

<Storyboard x:Name="myStoryboard"> 
    <PointAnimation Storyboard.TargetProperty="Center" 
        Storyboard.TargetName="EllipseFigure" 
        Duration="0:0:1" 
        AutoReverse="True" 
        EnableDependentAnimation="True"/> 

</Storyboard> 

あなたはボタンではなくボールのPointerPressedのClickイベントにサブスクライブしていることを確認します。私はあなたのパス要素Xを与える

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    var button = (Button)sender; 

    // Get the position (top left) of the Button 
    GeneralTransform transform = button.TransformToVisual(this); 
    Point buttonPosition = transform.TransformPoint(new Point(0, 0)); 

    // Get the center of the button 
    Point buttonCenter = new Point(buttonPosition.X + (button.ActualWidth/2), buttonPosition.Y + (button.ActualHeight/2)); 

    // Get the position of the ball 
    transform = Ball.TransformToVisual(this); 
    Point ballPosition = transform.TransformPoint(new Point(0, 0)); 

    // Get the center of the ball 
    Point ballCenter = new Point(ballPosition.X + (EllipseFigure.Center.X), ballPosition.Y + (EllipseFigure.Center.Y)); 

    // The animation acts like it's at 0,0. calculate position to go to 
    Point to = new Point(buttonCenter.X - ballCenter.X, buttonCenter.Y - ballCenter.Y); 

    var storyBoard = (Storyboard)Root.Resources["myStoryboard"]; 
    var animation = (PointAnimation)storyBoard.Children[0]; 
    animation.To = to; 

    storyBoard.Begin(); 
} 

注：「ボール」の名前