How to do it...

Let's follow these steps to create a key-frame-based animation:

1. Open the MainWindow.xaml file.
2. Add two rows inside the Grid, by specifying RowDefinitions:

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

3. Add a Canvas panel at 0^th row of the Grid.
4. Insert an Ellipse inside the canvas and set its Height and Width properties to 30, so that it displays as a circle.
5. Provide a name to the Ellipse, and position it to the (50,100) coordinate position on the Canvas panel, and fill the background with an OrangeRed color.

6. Insert a Button control inside a horizontal StackPanel, and place the panel inside the second row. Here's the complete XAML of the UI that we have generated for this demonstration:

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