How to do it...

In this demonstration, we will use a circle to animate it on the click of a button. The animation will be performed based on a path specified by a set of geometry coordinates. Let's build this by following the steps mentioned here:

1. From Solution Explorer, navigate to the MainWindow.xaml file.

2. A default Grid panel will be present inside the file. Let's divide it into two rows by specifying the row definition as follows:

<Grid.RowDefinitions> 
    <RowDefinition Height="*"/> 
    <RowDefinition Height="Auto"/> 
</Grid.RowDefinitions> 

3. Let's place a Canvas panel inside the first row. Add an Ellipse of Height="30" and Width="30" to form the circle. Give it a name circle.
4. Set the fill color of the Ellipse and position it at the (100, 100) coordinate location of the canvas. Here's the complete mark-up for your reference:

<Canvas Grid.Row="0"> 
    <Ellipse x:Name=&quot...