LAB 7

Creating XNA Games

This lab contains the following exercises and activities:
 Exercise 7-1:Editng Application Icons
 Exercise 7-2: Investigating Tombstoning

SCENARIO
During these practical sessions you will take the role of a developer creating
applications for the Windows Phone platform.
After completing this lab you will be able to:
 Create custom icons for Silverlight applications
 Understand how an application is tombstoned and the way that
tombstone events are generated and objects constructed
Estimated lesson time: 35 minutes

EXERCISE 7-1: EDITING APPLICATION ICONS

Estimated completion time: 15 minutes
In this exercise you will create and edit the icons and splash screens for a
Windows Phone Silverlight application.

Creating an Initial Application

We are going to start by creating an empty application and then editing the
icons that it uses.
1. Open Visual Studio.
2. Create a new Silverlight Windows Phone Application with the name
Icons.
3. Select the Windows Phone 7 Emulator as the deployment target and
click Debug>Start Debugging to run the program.
4. The program will deploy to the Windows Phone emulator and then
run. Press the Back (left hand) button on the Windows Phone
emulator to stop the program.
5. The emulator will now be at the emulator start page, which just
contains a single tile for Internet Explorer.
6. Click the right arrow in the top right hand corner of the emulator
screen. This will move you onto the Application List for the emulator.
7. The Application List contains the Icon application we have just
created, Internet Explorer and the Settings application for the
emulator.
8. Click the Icons application to start it. It will run within the emulator.
9. Press the back button to stop the application.

Introduction to Windows Phone 1

The Windows Phone emulator will retain these programs in its Application
List until the emulator is stopped. If you deploy any other programs from
Visual Studio these will be added to the Application List on the emulator. It is
perfectly OK to have multiple copies of Visual Studio open at one time, all
using a single copy of the emulator.
If you deploy a program to a Windows Phone device the program will be
added to the Application list on that device.

Pinning an Application to the Start Menu

Now we are going to pin an application to the Start Menu on the application.
1. Open the Application List on the emulator.
2. Click and hold on the Icons application in the Application List. A
menu will appear which allows you to uninstall the application from
the emulator or Pin the application to the Start menu.
3. Click pin to start.
4. The Icon application will now be pinned to the start menu. You will
see it alongside the tile for Internet Explorer on the start menu.
An application can be moved around the start menu or removed by clicking
and holding on its start tile.

Editing an application icon

Next we are going to edit the icon for our application.
1. In Solution Explorer right click on the file ApplicationIcon.png.
2. From the menu that appears select Open With to display a list of
programs that can be used to work on this file.
3. Select the program Paint from the list of programs that are
displayed. This will start the Paint program with this image.
4. Use Paint to make some artistic changes to the image file.
5. When you have completed your changes click the Disk icon in Paint
to save the image.
6. Exit from Paint.
7. In Visual Studio select Build>Rebuild Solution to rebuild the solution.
If you don’t to this the new icon will not be deployed as Visual Studio
normally only rebuilds when there is a change to one of the program
files.
8. In Visual Studio select Debug>Start Debugging to deploy and run the
program with the new icon.
9. Repeat the process with the Background.png image. This will change
the image on the start menu.
10. Repeat the process with the SplashScreenImage.jpg file. This will
change the splash screen that is displayed for a fraction of a second
before the application starts.
You can use other image editing programs, for example Paint.NET or
Photoshop to edit these files if you like.

Introduction to Windows Phone 2

 EXERCISE 7-2: INVESTIGATING TOMBSTONING
Estimated completion time: 20 minutes
In this exercise you will find out through experimentation how an
application is tombstoned.

Creating an Initial Application

We are going to start by creating an empty application and then adding
some instrumentation so that we can see what the application is doing.
11. Open Visual Studio.
12. Create a new Silverlight Windows Phone Application with the name
Tombstone.
13. Open the source file App.xaml.cs.
14. Find the event methods that run when the tombstoning and
launching events fire and add diagnostic output methods as shown
below:
// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
System.Diagnostics.Debug.WriteLine("Launching");
}

// Code to execute when the application is activated (brought to foreground)

// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
System.Diagnostics.Debug.WriteLine("Activated");
}

// Code to execute when the application is deactivated (sent to background)

// This code will not execute when the application is closing
private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
System.Diagnostics.Debug.WriteLine("Deactivated");
}

// Code to execute when the application is closing (eg, user hit Back)
// This code will not execute when the application is deactivated
private void Application_Closing(object sender, ClosingEventArgs e)
{
System.Diagnostics.Debug.WriteLine("Closing");
}
15. Select the Windows Phone 7 Emulator as the deployment target and
click Debug>Start Debugging to run the program.
16. Select Debug>Windows>Output to make sure that the Output
window is visible. This window will show you the output from the
diagnostic messages you added above. The last line in the window
should be the message Launching. This was produced by a call of the
Launching method.
17. Ensure that you can still see the Output window and move the
emulator onto the screen.

Introduction to Windows Phone 3

 18. Click Back on the emulator. The program will now stop. You will see
the message Closing appear in the Output window along with some
other messages about threads that are stopping.
19. If the Output window has now disappeared because the program is
no longer running you can re-open it by selecting
Debug>Windows>Output again. You can also scroll up the window
to see all the previous messages.
You have seen that the program receives Launching and Closing messages
when it is started and stopped normally.

Investigating Tombstoning
Now we are going to “tombstone” our application and resume it in the
emulator.
1. Click Debug>Start Debugging to run the program in the emulator.
2. Move the emulator so that you can see both the emulator and the
Output window in Visual Studio.
3. Click the Start (the middle) button on the Windows Phone emulator.
4. You should see the content of the Output window change, with a
Deactivated message appearing directly below the Launching one,
followed by further messages about threads that are being stopped.
5. The Windows Phone should now be at is Start page. This will just
contain a large tile for the Internet Explorer application.
6. Click the tile in the Windows Phone emulator to start Internet
Explorer. This will open the browser and display a start web page.
7. Click the Back key. This will return you to the Start page on the
Windows Phone emulator.
8. Click the Back key again. This will return to our application. You will
see some messages added the Output window in Visual Studio and
the emulator will display the application page again. If you scroll back
through the messages in the output window you will find an
Activated message.
The application was “tombstoned” when we pressed Start and then
resumed when we pressed Back.

Investigating the Search button

One of the features of every Windows Phone is the Search (right hand)
button on the phone. This allows the user of the phone to start a search
action at any time when they are using the phone. Applications can bind to
the search button if they wish to provide custom search behaviours for their
users; otherwise the button starts the Bing search application whenever the
Search button is pressed. What do you think will happen to our application if
the user presses the Search button.
1. Test your theory by pressing the Search button when the Tombstone
application is running.
2. Award yourself a small prize if you were right.
3. Exit from the search using the back button and prove that you really
were right.

Introduction to Windows Phone 4

 4. Stop the program running.

Investigating object construction

It is important that you understand that when an application is resumed
from being tombstoned that a brand new instance of the application is
created. We can prove that this is the case by adding some diagnostic
messages into the constructors for the App.xaml.cs and Mainpage.xaml.cs
classes. You will add some more diagnostic messages to the Tombstone
program that we have already created.
1. Open the source file App.xaml.cs if it is not already open.
2. Add the following diagnostic statement right at the top of the
constructor for the App class:
public App()
{
System.Diagnostics.Debug.WriteLine("App constructed");
... rest of constructor goes here
}
3. Open the source file MainPage.xaml.cs and find the constructor for
the MainPage class.
4. Add the following diagnostic statement to the constructor.
public MainPage()
{
System.Diagnostics.Debug.WriteLine("MainPage constructed");
InitializeComponent();
}

5. Run the application. You will see messages in the Output window
showing that the App class was constructed, then the Launching
message was produced and finally the MainPage was constructed.
6. This means that the launching message was produced before the
page was constructed.
7. Now press the Start button on the emulator. The program is
tombstoned and the Deactivated message is produced.
8. The emulator should now be at the Start screen.
9. Press the Back button on the emulator to resume the application.
10. The application will restart and Visual Studio will show messages
from the constructors for the classes as brand new instances are
created. In between the construction you should see the Activated
message that indicates that this application has been resumed from a
tombstone.
In this session you have improved your understanding of what happens
when applications are started and stopped on Windows phone. You have
also discovered how to add instrumentation to your application and view
messages in the Output window.

Introduction to Windows Phone 5