Moving Ball Animation in Windows Phone 7

Introduction

In this article we will show an animation of a moving ball in a Windows Phone application through the ApplicationBar code buttons start and stop. In this animation we will add a storyboard_Completed event that will move the ellipse and also check for collisions against the layoutroots dimensions. When a collision happens the direction will be reversed. The way that the start and stop buttons work are, when the user clicks the start button the IsBouncing property of the control is true and the ball begins to move in the phone screen and simply when the stop button is clicked the Isbouncing property is set to false and the ball will be stop. To move the ball in the phone's screen we will create a method startMove() in code behind; the speed and direction of the ball will be set randomly.

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select Silverlight for Windows Phone application
Name the project
Now name of project is "MovingBallApplication"

Step 2: Now make some modification on MainPage.xaml page.

Modify the ContentGrid, change it to a canvas and add an ellipse
Uncomment the sample app bar code and change it to the following, to add a click event and button images
Add a UserControl.Resources for Storyboard control

Step 3 : The whole code of the MainPage.xaml page is:

Code

<phone:PhoneApplicationPage

x:Class="MovingBallApplication.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"

shell:SystemTray.IsVisible="True">

<UserControl.Resources>

</Storyboard>

</UserControl.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<Ellipse.Fill>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

<Canvas.Background>

</LinearGradientBrush>

</Canvas.Background>

</Canvas>

</Grid>

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/start-button.png" Text="Start a new bounce" Click="appbar_button1_Click" ></shell:ApplicationBarIconButton>

<shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/inward_black_stop.png" Text="Stop bounce" Click="appbar_button2_Click" ></shell:ApplicationBarIconButton>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

The application looks like this at design time:

Step 4 : Now we will do the code behind file MainPage.xaml.

create a method to start the motion of ball "startMoving()"
put the code of click event of buttons "start" and "stop"

Step 5 : The final source code of the MainPage.xaml.cs file is:

Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace MovingBallApplication

{

public partial class MainPage : PhoneApplicationPage

{

#region Instance members and Constructors

private int xVelocity = 5;

private int yVelocity = 5;

private bool isBouncing = false;

// Constructor

public MainPage()

{

InitializeComponent();

}

private void startMoving()

{

//Make speed, direction random

Random r = new Random();

xVelocity = r.Next(3, 10);

yVelocity = r.Next(3, 10);

int coin = r.Next(100);

if (coin > 50)

{

xVelocity *= -1;

}

coin = r.Next(100);

if (coin > 50)

{

yVelocity *= -1;

}

ellipseStoryboard.Begin();

isBouncing = true;

}

private void appbar_button1_Click(object sender, EventArgs e)

{

startMoving();

}

private void appbar_button2_Click(object sender, EventArgs e)

{

ellipseStoryboard.Stop();

isBouncing = false;

}

Step 6 : Press F5 to run the application.

Output

Click the start button to moving the ball on phone screen
Stop the motion of the ball by clicking the stop button

Resources

Animations in Silverlight for Windows Phone 7
Simple Animation in Windows Phone 7
Creating a Bouncing Ball in Windows 8 Metro Style Applications
Magic Eight Ball on the Windows Phone 7