Verschieben eines XAML-Elements von einer Position in eine andere

Question

Ich nahm die folgenden tutorial als einen guten Startpunkt für die Animation und erforschte auch die toolkit Offset option, fand es aber irgendwie komplex zu erreichen, was ich will, es sei denn, das Gegenteil bewiesen.

Tor: Bei einer Matrix Schaltfläche klicken, wird das Objekt von seiner Ausgangsposition zu der Position des angeklickten Taste, dann wieder das Objekt wieder in seine Ausgangsposition.

Aufgabe: Die größte Herausforderung könnte darin bestehen, die genaue Position jedes Matrixelements zu bestimmen (Button); die Position des Elements in Bezug auf das Raster ist ziemlich klar, zum Beispiel Grid.Row = "1" Grid.Column = "2", aber in Bezug auf Canvas und Animation im Allgemeinen ... keine Ahnung!

Wie wird die EllipseFigure nach dem folgenden Code von Quadrat 6 auf Quadrat 1 verschoben?

<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> 

Codebehind:

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

Answer 1

die Storyboard-Ansatz verwenden Sie haben, können Sie dies erreichen, indem die Position der Taste bekommen und den Ball und legen Sie die To-Eigenschaft der Animation. Sie können auch den Ball zurückgeben durch Auto auf true

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

</Storyboard> 

Stellen Sie sicher, Einstellung abonnieren Sie dem Click-Ereignis der Tasten und nicht die PointerPressed des Balles.

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(); 
} 

Bitte beachte, dass ich Ihr Path-Element ein x geben: Name des "Ball"