Introduction
In this article we will learn how to create an animated bouncing ball. This ball is being thrown across the screen, landing and bouncing. Here, we have to create a bounce effect. To understand that, note that in physics the vertical motion of a ball in motion is completely independent of the horizontal motion and each of these independent motions creates two separate story boards. We have two sections in the storyboard, one for animating the x direction and one for animating the y direction. In the MainPage.xaml we have to make some changes in this Metro Application.
So, we have to use the following steps to make this application.
Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File -> New -> Project
- Choose Template -> Visual C# -> Windows Metro Style -> Application
- Rename this Application
![homepage.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.
![solutionexplorer.gif]()
Step 3 : The MainPage.xaml file is as in the following code.
Code : Let us see the code which is given below.
<UserControl x:Class="Application8.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<UserControl.Resources>
<Storyboard RepeatBehavior="Forever" x:Name="Bounce">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform)(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="297"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="320"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
<SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="-20">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="Horizontal">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="297"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Pink" >
<Ellipse Height="85" HorizontalAlignment="Left" Margin="71,0,0,151" VerticalAlignment="Bottom" Width="93" Fill="#FFF40B0B" Stroke="Blue" x:Name="ball"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<UserControl.Resources>
<Storyboard RepeatBehavior="Forever" x:Name="Bounce">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform)(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="297"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="320"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform)
(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
<SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="-20">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="Horizontal">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="297"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="-3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Pink" >
<Ellipse Height="85" HorizontalAlignment="Left" Margin="71,0,0,151" VerticalAlignment="Bottom" Width="93" Fill="#FFF40B0B" Stroke="Blue" x:Name="ball" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</UserControl>
Step 4 : In this step you will see the code for the MainPage.Xaml.cs file.
Code :
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace BouncingBall
{
public partial class Page : UserControl
{
public Page()
{
// Required to initialize variables
InitializeComponent();
Loaded += new RoutedEventHandler(PageLoaded);
}
void PageLoaded(object sender, RoutedEventArgs e)
{
Bounce.Begin();
}
}
}
Step 5 : After running this code we get the following output.
![output.gif]()
A different look is as below.
![output1.gif]()