将XAML元素从一个位置移动到另一个位置

我把下面的内容作为动画的一个很好的起点，也探索了动画的发展，但我发现要实现我想要的东西有些复杂，除非另有证明

目标： 单击矩阵按钮后，将对象从其起始位置移动到单击按钮的位置，然后将对象返回到其初始位置

挑战：主要挑战可能是确定每个矩阵元素（按钮）的确切位置；元素在网格中的位置非常清楚，例如Grid.Row=“1”Grid.Column=“2”，但在画布和动画中，一般来说……不知道

根据下面的代码，如何将椭圆曲线从第6格移动到第1格

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

---

使用已有的情节提要方法，可以通过获取按钮和球的位置并设置动画的“设置为”属性来实现这一点。您还可以通过将“自动翻转”设置为true来回球

确保您订阅了按钮的单击事件，而不是球的指针

private void按钮\u单击（对象发送者，路由目标）
{
var按钮=（按钮）发送器；
//获取按钮的位置（左上角）
GeneralTransform transform=button.TransformToVisual（此）；
点按钮位置=transform.TransformPoint（新点（0,0））；
//找到按钮的中心
Point buttonCenter=新点（buttonPosition.X+（button.ActualWidth/2），buttonPosition.Y+（button.ActualHeight/2））；
//得到球的位置
transform=Ball.TransformToVisual（此）；
Point ballPosition=transform.TransformPoint（新点（0,0））；
//抓住球的中心
圆心点=新点（ballPosition.X+（EllipseFigure.Center.X），ballPosition.Y+（EllipseFigure.Center.Y））；
//动画的行为就像它在0,0。计算要转到的位置
指向=新点（buttonCenter.X-圆心.X，buttonCenter.Y-圆心.Y）；
var storyBoard=（storyBoard）Root.Resources[“myStoryboard”]；
var animation=（PointAnimation）故事板.Children[0]；
动画。To=To；
故事板。开始（）；
}

---

请注意，我为路径元素指定了一个x:Name“Ball”

使用您已有的故事板方法，您可以通过获取按钮和球的位置并设置动画的“To”属性来实现这一点。您还可以通过将“自动翻转”设置为true来回球

确保您订阅了按钮的单击事件，而不是球的指针

private void按钮\u单击（对象发送者，路由目标）
{
var按钮=（按钮）发送器；
//获取按钮的位置（左上角）
GeneralTransform transform=button.TransformToVisual（此）；
点按钮位置=transform.TransformPoint（新点（0,0））；
//找到按钮的中心
Point buttonCenter=新点（buttonPosition.X+（button.ActualWidth/2），buttonPosition.Y+（button.ActualHeight/2））；
//得到球的位置
transform=Ball.TransformToVisual（此）；
Point ballPosition=transform.TransformPoint（新点（0,0））；
//抓住球的中心
圆心点=新点（ballPosition.X+（EllipseFigure.Center.X），ballPosition.Y+（EllipseFigure.Center.Y））；
//动画的行为就像它在0,0。计算要转到的位置
指向=新点（buttonCenter.X-圆心.X，buttonCenter.Y-圆心.Y）；
var storyBoard=（storyBoard）Root.Resources[“myStoryboard”]；
var animation=（PointAnimation）故事板.Children[0]；
动画。To=To；
故事板。开始（）；
}

注意，我给您的Path元素一个x:Name“Ball”

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