Creating path-based animations

Along with property-based animations, which we learned about in the previous recipe, WPF also supports path-based animations that run along a path specified by the PathGeometry.

In this recipe, we will learn how to use a PathGeometry to animate an element along its way.

Getting ready

Let's begin with creating a new WPF application project. Name it CH08.PathBasedAnimationDemo.

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