Moving a XAML Element from One Postion to another

Question

I took the following tutorial as a good start point to animation and also explored the toolkit Offset option but found it somehow complex to accomplish what I want, unless proven otherwise.

Goal: Upon clicking a matrix button, move the object from its starting position to the position of the clicked button, then return the object back to its initial position.

Challenge: The main challenge might be in determining the exact position of each matrix element (Button); the element's position in regard to the Grid is pretty clear, for example Grid.Row="1" Grid.Column="2", but in regard to Canvas and animation in general...no idea!

According to the code below, how to move the EllipseFigure from square 6 to square 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>

CodeBehind:

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

score 3 · Accepted Answer · answered May 19 '17 at 22:29

Using the Storyboard approach you have, you can accomplish this by getting the position of the button and the ball and set the To property of the animation. You can also return the ball by setting AutoReverse to true

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

</Storyboard>

Make sure you subscribe to the Click event of the buttons and not the PointerPressed of the ball.

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

Note that I give your Path element an x:Name of "Ball"

Moving a XAML Element from One Postion to another

1 Answers1