Windows Phone 7 and Silverlight – Getting started with a Bouncing Ball

The beta of the developer tools for Windows Phone 7 was released last week. I was curious to see how different/easy it was to develop for this platform so I decided to convert my old SL 3 bouncing ball app, done AGES ago, to Silverlight 4 and Windows Phone 7. The process was pretty painless and even allowed me to add a few features:

1. Install the tools from http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en if you haven’t already

2. Create a new Windows Phone Application (from templaes: Visual C# – Silverlight for Windows Phone – Windows Phone Application)

3. Modify the ContentGrid, change it to a canvas and add an ellipse:

<Canvas x:Name="ContentCanvas" Grid.Row="1">
	<Ellipse Canvas.Left="350" Canvas.Top="150" Width="75" Height="75" Name="ellipseObject" Canvas.ZIndex="1" >
		<Ellipse.Fill>
			<LinearGradientBrush StartPoint='0.1,0.06' EndPoint='0.5,0.6'>
				<GradientStop Color='#FFFFFFFF' Offset='0'/>
				<GradientStop Color='#FF87BF1B' Offset='1'/>
			</LinearGradientBrush>
		</Ellipse.Fill>
	</Ellipse>
</Canvas>

4. Uncomment the sample app bar code and change it to the following, to add a click event and some descriptive text:

<phone:PhoneApplicationPage.ApplicationBar>
	<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
		<shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Start" Click="appbar_button1_Click" ></shell:ApplicationBarIconButton>
	</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

5. In the code behind add the following private instance variables, which are used to determine the initial speed of the ball and the current state of the ball:

private int xVelocity = 5;
private int yVelocity = 5;
private bool isBouncing = false;

6. Add a helper method to start a new bounce, randoming the directions and speed:

private void startNewBounce()
{
	//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;
}

7. Add the storyboard_Completed event. This will move the ellipse and also check for collisions against the layoutroots dimensions. If a collision is found it will reverse the direction. Note that the Y axis is a little funnky here, I had to tweak the upper and lower bounds a bit, partially because of the space the title grid takes up.

protected void ellipseStoryboard_Completed(object sender, EventArgs e)
{
	double ellipseX = (double)ellipseObject.GetValue(Canvas.LeftProperty);
	double ellipseY = (double)ellipseObject.GetValue(Canvas.TopProperty);

	//NOTE: canvas.width - ellipse.width for max, since the left and top properties
	//are based on upper left corner of the object
	//+/- 250 if title is present
	if (ellipseX >= (LayoutRoot.ActualWidth - ellipseObject.ActualWidth) || ellipseX <= 0)
	{
		xVelocity *= -1;
	}
	if (ellipseY >= ((LayoutRoot.ActualHeight - 300) + ellipseObject.ActualHeight) || ellipseY <= -150)
	{
		yVelocity *= -1;
	}

	ellipseX += xVelocity;
	ellipseY += yVelocity;

	ellipseObject.SetValue(Canvas.LeftProperty, ellipseX);
	ellipseObject.SetValue(Canvas.TopProperty, ellipseY);

	ellipseStoryboard.Begin();
}

8. Add an event handler for the app bar button click. All we need to do is start a new bounce (if the ball is already moving this will change the speed/direction of the ball too):

private void appbar_button1_Click(object sender, EventArgs e)
{
	startNewBounce();
}

9. One last piece of functionality, add a start/stop toggle if the user touches the screen. On the emulator this boils down to basically clicking the mouse on the screen. The events used to detect touch inputs are OnManipulationStarted, OnManipulationDelta and OnManipulationComepleted.

protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
{
	base.OnManipulationStarted(e);
	if (isBouncing)
	{
		ellipseStoryboard.Stop();
		isBouncing = false;
	}
	else
	{
		ellipseStoryboard.Begin();
		isBouncing = true;
	}

}

10. Hit f5 and let the emulator load up, it could take a bit but even on my old machine it wasn't too bad. A lot faster than the Android emulator in Eclipse was at least.

The fact that the development language and environment is pretty much the same is compelling. There are some differences though. Debugging in the emulator worked failry well too, clicking on the home button would stop the debugging process but leave the emulator running. Performance on the emulator wasn't fantastic but I guess that's to be expected. Just means I need to get a new computer. As I mentioned I did have to make some adjustments in the collision detection code to account for the title, but there's still a small bar at the top of the emulator that makes it look like the ball isn't hitting the exact top. It might look better on an actual device though, tough to say without having a device to test on.

Download the code here

Comments

• Categories

  • .NET
  • ASP.NET
  • ASP.NET MVC
  • Azure
  • Facebook
  • Silverlight
  • Windows Phone 7
  • XNA

• Archives

  • August 2010
  • July 2010
  • June 2010
  • April 2009
  • March 2009

• Reading now

• Recent Posts

  • Facebook, C# and ASP.NET MVC – Code samples for friends list, activities list and wall posts
  • Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 3
  • Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 2
  • Windows Phone 7 Tutorial – Creating a simple notes app with Silverlight Part 1
  • Windows Phone 7 – List of Tutorials and Resources