title: Moving a XAML Element from One Postion to another
body: <p>I took the following <a href="http://www.c-sharpcorner.com/UploadFile/c25b6d/move-stop-pause-and-resume-an-object-in-windows-8-apps/" rel="nofollow noreferrer">tutorial</a> as a good start point to animation and also explored the <a href="https://developer.microsoft.com/en-us/windows/uwp-community-toolkit/animations/offset" rel="nofollow noreferrer">toolkit Offset option</a> but found it somehow complex to accomplish what I want, unless proven otherwise.</p>
  
  <p><strong>Goal</strong>:
  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.</p>
  
  <p><strong>Challenge</strong>: 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! </p>
  
  <p>According to the code below, how to move the EllipseFigure from square 6 to square 1?</p>
  
  <pre><code>&lt;Canvas&gt;
      &lt;Canvas.Resources&gt;
          &lt;Storyboard x:Name="myStoryboard"&gt;
              &lt;!-- Animate the center point of the ellipse. --&gt;
              &lt;PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center"
            Storyboard.TargetName="EllipseFigure"
            Duration="0:0:5"
            From="1,2"
            To="0,0"
            RepeatBehavior="Forever" /&gt;
          &lt;/Storyboard&gt;
      &lt;/Canvas.Resources&gt;
      &lt;Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"&gt;
  
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="*" /&gt;
              &lt;RowDefinition Height="*" /&gt;
              &lt;RowDefinition Height="*" /&gt;
              &lt;RowDefinition Height="*" /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Grid.Resources&gt;
              &lt;Style TargetType="Button"&gt;
                  &lt;Setter Property="BorderBrush" Value="Yellow" /&gt;
                  &lt;Setter Property="BorderThickness" Value="5" /&gt;
                  &lt;Setter Property="HorizontalAlignment" Value="Stretch" /&gt;
                  &lt;Setter Property="VerticalAlignment" Value="Stretch" /&gt;
              &lt;/Style&gt;
  
              &lt;Style TargetType="TextBox"&gt;
                  &lt;Setter Property="BorderBrush" Value="Yellow" /&gt;
                  &lt;Setter Property="BorderThickness" Value="5" /&gt;
              &lt;/Style&gt;
          &lt;/Grid.Resources&gt;
          &lt;Button  Grid.Row="0" Grid.Column="0" Content="1"   /&gt;
          &lt;Button  Grid.Row="0"  Grid.Column="1" Content="2"   /&gt;
          &lt;Button  Grid.Row="0"  Grid.Column="2" Content="3"   /&gt;
          &lt;Button  Grid.Row="1" Grid.Column="0" Content="4"   /&gt;
          &lt;Button  Grid.Row="1"  Grid.Column="1" Content="5"   /&gt;
          &lt;Button  Grid.Row="1"  Grid.Column="2" Content="6"   /&gt;
  
          &lt;Path Grid.Row="1" Grid.Column="2" Fill="Blue" PointerPressed="ButtonClick"&gt;
              &lt;Path.Data&gt;
                  &lt;!-- Describe an ellipse. --&gt;
                  &lt;EllipseGeometry x:Name="EllipseFigure"
           Center="20,20" RadiusX="15" RadiusY="15" /&gt;
              &lt;/Path.Data&gt;
          &lt;/Path&gt;
      &lt;/Grid&gt;
  &lt;/Canvas&gt;
  </code></pre>
  
  <p><strong>CodeBehind</strong>:</p>
  
  <pre><code>  private  void ButtonClick(object sender, RoutedEventArgs e)
      {
          myStoryboard.Begin();
      }
  </code></pre>