Let's follow these steps to create an animation with various kinds of easing effects:
- From Solution Explorer, open the MainWindow.xaml file.
- Divide the existing Grid panel into two columns, by applying ColumnDefinition to it:
<Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions>
- Now, inside the Grid, place a Canvas panel, and set its Grid.Column attribute to 0 (zero).
- Inside the canvas, add an Ellipse (name it as circle) and set its Height and Width properties to 80 to give it a circular look. Set its Fill color property, and position it to a (150,80) location. Here's the code snippet:
<Canvas Grid.Column="0"> <Ellipse x:Name="circle" Height="80" Width="80" Fill="OrangeRed" Canvas.Left="150" Canvas...