You can make your application feel more natural and organic (and fun) using storyboard animations.

Add a new Blank App (Universal Windows) project named Ch13_BouncingBall.

Open the MainPage.xaml file, change Grid into Canvas, and add an ellipse to make a red ball. Save your changes:

    <Canvas Background= 
      "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Ellipse Fill="Red" Height="100" Width="100"/> 
    </Canvas> 

In the Solution Explorer window, right-click on the Ch13_BouncingBall project and choose Design in Blend...

The project will open in the Microsoft Blend for Visual Studio tool, which is used by designers because it has better support for graphical effects and animation than Visual Studio does.

On the drawing surface, click on the red ellipse to select it, as shown in the following screenshot.

In the Objects and Timeline window on the left, click on the small green + button, or click on the down triangle to drop down a menu, to create a New Storyboard resource:

Change the name of the storyboard resource to BounceBall and click on OK:

A red box appears around the drawing surface, and you will see in the top-right corner that timeline recording is on. Later, you will click on the red dot to stop recording:

In the Objects and Timeline window, click on the Record Keyframe button---it looks like a green + symbol combined with a small diamond, and is to the left of the current time indicator. This will record the current properties of the ball at time 0:00.000:

On the timeline, drag the down-pointing orange triangle and its vertical orange line to time position 0:00.800. This means 0.8 seconds later:

On the drawing surface, drag the red ellipse down and a little to the right. This change will be recorded automatically:

Drag the orange triangle to time position 0:01.000. Click and drag the resize handle at the top of the ball to squash it down a little:

Drag the orange triangle to time position 0:01.200. Resize the ball to stretch it back to its original height. Don't worry about accuracy. You will modify the recorded values later.

Drag the orange triangle to time position 0:02.000. Click near the middle of the ball when the mouse pointer has a four-pointed arrow next to it, and drag it back up to near the top of the window and a little to the right:

Click the red dot to stop recording:

In the Objects and Timeline window, click on the small green triangle Play button.

You should see the red ball smoothly drop down. When it hits the bottom, it squashes slightly, as a rubber ball would in real life, before bouncing back up to the top.

Save your work and exit from Blend.

When you return to Visual Studio 2017, it should warn you that the file has changes and prompts you to reload it. Click on Yes.

Notice that Blend created some XAML elements to define a storyboard named BounceBall that animates properties of the Ellipse object.

Three properties were animated, and are listed as follows:

Modify the squashing effect by changing the value of ScaleY to be 0.666 (that is, 66.6%) of its normal height at time position 1s, and return to exactly 1 at time position 1.2s:

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty= 
        "(UIElement.RenderTransform).(CompositeTransform.ScaleY)"  
        Storyboard.TargetName="ellipse"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.666"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/> 
    </DoubleAnimationUsingKeyFrames> 

In the toolbox, choose Button and draw one on the canvas named BounceBallButton. Change its contents to Bounce Ball. Give it a Click event handler:

    <Button Name="BounceBallButton" Content="Bounce Ball"  
      Canvas.Left="154" Canvas.Top="45" 
      Click="BounceBallButton_Click"/> 

In the code behind file, add the following statement to the event handler method:

    BounceBall.Begin(); 

Run the application. Click on the Bounce Ball button to run the animation: