Building Your First Windows Phone 7 Application Hands-on Lab /

Hands-On Lab

Building Your First Windows Phone7 Application

Lab version:1.0.0

Last updated:10/5/2018

Contents

Overview

Exercise 1: Creating Windows Phone Applications with Microsoft Visual Studio 2010 Express for Windows Phone

Task 1 – Creating a Windows Phone Application Project in Visual Studio

Task 2 – Building and Testing the Application in the Windows Phone Emulator

Task 3 – Creating the UI for the Home Page

Task 4 – Managing Errors in the Application

Task 5 – Verification

Exercise 2: Creating the Puzzle Board in Visual Studio

Task 1 – Creating the User Interface

Task 2 – Programming the Application Logic

Task 3 – Adding Support for Multi-Touch

Task 4 – Creating Animation Effects

Task 5 – Verification

Exercise 3: Persisting the State of the Game Using Isolated Storage

Task 1 – Adding Assembly References and Other Assets

Task 2 – Updating the Puzzle UI

Task 3 – Verification

Summary

Overview

This hands-on lab introduces you to the tools and procedures required to build and test Silverlight for Windows Phone applications. It shows the fundamentals of developing Windows Phoneapplications by walking you through the development of a simple puzzle game and goes through the different stages of starting a new project, adding controls and code behind, and testing and debugging.

The lab coversseveral key features of the Windows Phone platform including navigation, multi-touch, and isolated storage.

Objectives

The audience for this lab is developers who are less familiar with Microsoft tools, such as Visual Studio, and are relatively new to Silverlight. If you are comfortable with the Silverlight programming model and already work with Visual Studio and the Microsoft Expression suite, you may consider skipping this lab. On the other hand, if you are completely new to Silverlight, we highly recommend that you enrich your Silverlight skills by first reviewing some Silverlight labs that can be found at

In this hands-on lab, you will:

  • Become familiar with the Windows Phone Developer Tools: Microsoft Visual Studio 2010 Express for Windows Phone and Windows Phone Emulator. These tools are all you need to create and test any managed Windows Phone application.
  • Learn the structure underlying a Silverlight for Windows Phone application and the differences between Silverlight and Silverlight for Windows Phone.
  • Write, test, deploy, and debug your Silverlight for Windows Phone application using Microsoft Visual Studio 2010 Express for Windows Phone and the Windows Phone Emulator.

Prerequisites

The following are required to complete this hands-on lab:

  • Microsoft Visual Studio 2010 Express for Windows Phone or Microsoft Visual Studio 2010
  • Windows Phone Developer Tools

Note:You can download these tools from

Setup

For convenience, much of the code used in this hands-on lab is available as Visual Studio code snippets. To install the code snippets:

  1. Run the .vsiinstaller located in the lab's Source\Setup folder.

Note: If you have issues running the code snippets installer you can install the code snippets manually by copying all the .snippet files located in the Source\Setup\CodeSnippets folder of the lab to the following folder:

\My Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets

Using the Code Snippets

With code snippets, you have all the code you need at your fingertips. The lab document will tell you exactly when you can use them. For example,

Figure 1

Using Visual Studio code snippets to insert code into your project

To add this code snippet in Visual Studio, you simply place the cursor where you would like the code to be inserted, start typing the snippet name (without spaces or hyphens), watch as IntelliSense picks up the snippet name, and then press the Tab key twice when the snippet you want is selected. The code will be inserted at the cursor location.

Figure 2

Start typing the snippet name

Figure 3

Press Tab to select the highlighted snippet

Figure 4

Press Tab again to expand the snippet

To insert a code snippet using the mouse rather than the keyboard, right-click where you want to insert the code snippet, select Insert Snippet followed by My Code Snippets and then pick the relevant snippet from the list.

To learn more about Visual Studio IntelliSense Code Snippets, including how to create your own, see

Exercises

This hands-on lab comprises the following exercises:

  1. Creating Windows Phone Applications with Microsoft Visual Studio 2010 Express for Windows Phone
  2. Creating the Puzzle Board in Visual Studio
  3. Persisting the State of the Game Using Isolated Storage

Estimated time to complete this lab: 60 minutes.

Exercise 1: Creating Windows Phone Applications with Microsoft Visual Studio 2010 Express for Windows Phone

In this exercise, you will create, test, deploy and run your first Windows Phone application. You will learn how to use the Windows Phone Developer Tools including the free Microsoft Visual Studio 2010 Express for Windows Phone IDE, and the Windows Phone Emulator.

The tasks include creating a new Silverlight for Windows Phone project, designing the start page of the application, and providing some basic error handling. You will alsorun the application on your workstation using the Windows Phone Emulator.

Note: The steps in this hands-on lab illustrate procedures using Microsoft Visual Studio 2010 Express for Windows Phone, but they are equally applicable to Microsoft Visual Studio 2010 with the Windows Phone Developer Tools. Instructions that refer generically to Visual Studio apply to both products.

Task 1 – Creating a Windows Phone Application Project in Visual Studio

In this task, you use a predefined template in Microsoft Visual Studio 2010 Express for Windows Phone to create a Silverlight for Windows Phone Application project that you can use as the starting point for your first application.

  1. Open Microsoft Visual Studio 2010 Express for Windows Phone from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Studio 2010 Express for Windows Phone.

Visual Studio 2010: Open Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010.

  1. In theFilemenu, chooseNew Project.

Visual Studio 2010: In the File menu, point to New and then select Project.

  1. In theNew Projectdialog, select the Silverlight for Windows Phone category in the list of installed templates, and there the Windows Phone Application template.Set the name to WindowsPhonePuzzle andthe location to Ex1-CreatingWP7Apps in the Source folder of the lab.Change the solution name to Begin, and then click OK.

Figure 5

Creating a new Windows Phone application project in Microsoft Visual Studio 2010 Express for Windows Phone

Note: If you completed the Hello Phone lab in the training kit, you will already be familiar with the following material and may wish to go directly to Task 3 in this exercise after creating the begin solution.

  1. In Solution Explorer, review the structure of the solution generated by the Windows Phone Application template. Any Visual Studio solution is a container for related projects; in this case, it contains a single Silverlight for Windows Phone project named WindowsPhonePuzzle.

Figure 6

Solution Explorer showing the WindowsPhonePuzzle application

Note: Solution Explorer allows you to view items and perform item management tasks in a solution or a project. To show Solution Explorer, press CTRL + W, S or in the View menu, select Other Windows | Solution Explorer.

The WindowsPhonePuzzle project contains the following items:

Item / Description
App.xaml / App.xaml.cs / Defines the entry point of the application, initializes application-scoped resources, and displays the application user interface
MainPage.xaml / MainPage.xaml.cs / Defines a page with the user interface of the application
ApplicationIcon.png / An image file with an icon that represents the application icon in the phone’s application list
Background.png / An image file with an icon that represents the application icon in the start screen
SplashScreenImage.jpg / This is the image that will first be displayed when the application launches. The splash screen gives the user immediate feedback that the application is launching and will remain displayed until the navigation to the first page has been completed. Your splash screen can look similar to your first page in order to give the appearance that the application is loading quickly.
Properties\AppManifest.xml / An application manifest file required to generate the application package
Properties\AssemblyInfo.cs / Contains the name and version metadata that is embedded into the generated assembly
Properties\WMAppManifest.xml / A manifest file that includes specific metadata related to a Windows Phone Silverlight application, including specific features available only for Silverlight for Windows Phone
References folder / List of libraries (assemblies) that provide services and functionality that the application requires to work
  1. First, right-click App.xaml in Solution Explorer and choose View Designer. Notice that the file contains XAML markup with an Application root element and inside it an Application.Resources section. Herein you can define application-level resources such as colors, brushes and style objects used throughout the application.

The XAML code also initializes the ApplicationLifetimeObjects property of the Application to create a PhoneApplicationService object. The PhoneApplicationService class provides access to various aspects of the application’s lifetime. This includes management of the application’s idle behavior and management of the application’s state when it becomes active or inactive.

Figure 7

Default App.xaml file generated by the Windows Phone application template

Note: The App.xaml file, together with its code-behind file App.xaml.cs, defines an instance of the Application class. This class encapsulates a Silverlight for Windows Phoneapplication and provides its entry point.

  1. Now, right-click App.xaml in Solution Explorer and choose View Code to open its code-behind file. Notice that, in its constructor, this Application-derived class already subscribes a handler for the UnhandledException event. Later in the lab, you will update the template-generated handler to navigate to an error page and display information about the exception.

The RootFrame property in the Application class identifies the starting page of the application. All Windows Phone applications have a single top-level container element whose data type is PhoneApplicationFrame. The frame hosts one or more PhoneApplicationPageelements that present content for the application. It also handles navigation between pages.

Figure8

Application code-behind file showing global event handlers

Note: The Application class, generated by the Silverlight for Windows Phone application template, also include handlers for the Launching andClosing events, among others. You can update these methods to execute custom code when the Windows Phone application launches and closes.

  1. The generated project includes a default document that contains XAML markup that defines the main UI of the application. To view this file in the designer, double-click MainPage.xaml in Solution Explorer.

By default, the designer shows the document in split view. One pane displays the XAML markup and the other one shows a design view with a WYSIWYG representation of the user interface elements. Except for those elements included by the template to display an application name and title, which you can remove if you do not require them, the XAML document provides a blank canvas to which you add controls to create your application’s user interface.

Figure 9

XAML designer showing the main user interface of the application

Note: Extensible Application Markup Language (XAML) is a declarative language. You can create visible UI elements in the declarative XAML markup. You can then use a separate code-behind file to respond to events and manipulate the objects you declared in XAML. An XML-based declarative language is very intuitive for creating interfaces from prototype to production, especially for people with a background in Web design and technologies.

  1. The ApplicationIcon.png file contains the icon that identifies the application in the quick launch screen of the phone device. You can double-click the item in Solution Explorer to open the file in a registered image editing application on your machine, for example, Paint.exe.

Note: In Visual Studio 2010, double-clicking the icon file in Solution Explorer opens the built-in image editor.

  1. A Windows Phone application typically takes advantage of services provided by the underlying platform or by other libraries. To use this functionality, the application needs to reference the corresponding assemblies that implement these services. To display the assemblies referenced by the project, expand the References node in Solution Explorer and examine the list. It contains regular Silverlight assemblies as well as assemblies specific to the Windows Phone platform.

Figure 10

Solution Explorer showing the assemblies referenced by the project

  1. The project’s Properties window is the only way to edit the WP manifest file, as shown in the following figure. To open this window, right-click the WindowsPhonePuzzle project in Solution Explorer and select Properties.

Figure 11

Project properties window

Note: The Windows Phoneproject properties window allows you to modify some phone-specific properties. These properties relate to the deployment and appearance of the application on the device. The parameters are stored in the WMAppManifest.xml file. Even if you try to change the XML file manually, your changes will be overwritten each time you change and save your project settings via this dialog.

Task 2 – Building and Testing the Application in the Windows Phone Emulator

At the moment, the application does not do much, but it is ready for its first test run. In this task, you build the application, deploy it to the Windows Phone Emulator, and then execute it to understand the typical development cycle.

  1. In the Debug menu, point to Windows and select Outputor pressCTRL + W, Oto open the Output window.
  2. Select Build Solution in the Debug menu or press the SHIFT + F6 key combination to compile the projects in the solution.

Visual Studio 2010: Select Build Solution in the Build menu or press CTRL + SHIFT + B to compile the projects in the solution.

  1. Observe the Output window and review any trace messages generated during the build process, including the final message with its outcome.

Figure 12

Building the application in Visual Studio

  1. You should not observe any errors at this stage; but, if the project were to contain compilation errors, these would appear in the Output window. To deal with these kinds of errors, you can take advantage of the Error List window. This window displays errors, warnings, and messages produced by the compiler in a list that you can sort and filter based on the severity of the error. Moreover, you can double-click an item in the list to automatically open the relevant source code file and navigate to the source of the error. To open the Error List window, in the View menu, point to Other Windows and select Error List.

Visual Studio 2010: To open the Error List window, in the View menu select Error List.

Figure 13

Error List window shows errors during the build process

  1. Verify that the target of the deployment is the Windows Phone Emulator. To do this, ensure that Windows Phone 7 Emulator is selected in the Select Target drop down next to the Start Debugging button on the toolbar.

Figure 14

Choosing the target device to deploy the application

Note: When you deploy your application from Visual Studio, you have the option to deploy it to a real device or to the Windows Phone Emulator.

  1. Press F5 to launch the application in the Windows Phone Emulator. Notice that a device emulator window appears and there is a pause while Visual Studio sets up the emulator environment and deploys the application image.

Figure 15

Deploying an application image to the Windows Phone Emulator

  1. Once it is ready, the emulator shows the Start page and shortly thereafter, your application appears in the emulator window.