Hands-On Labaz12722.vo.msecnd.net/wp7trainingcourse1-3/Labs/...Building Your First Windows Phone 7 Application Hands-on Lab Page | 3 Overview This hands-on lab introduces you to the

Hands-On Lab

Building Your First Windows Phone 7 Application

Lab version: 1.0.0

Last updated: 12/8/2010

Building Your First Windows Phone 7 Application Hands-on Lab

Page | 2

CONTENTS

OVERVIEW ................................................................................................................................................... 3

EXERCISE 1: CREATING WINDOWS PHONE APPLICATIONS WITH MICROSOFT VISUAL STUDIO

2010 EXPRESS FOR WINDOWS PHONE .................................................................................................. 6 Task 1 – Creating a Windows Phone Application Project in Visual Studio ........................................... 6

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

Task 3 – Creating the UI for the Home Page ....................................................................................... 19

Task 4 – Managing Errors in the Application ...................................................................................... 23

Task 5 – Verification ............................................................................................................................ 26

EXERCISE 2: CREATING THE PUZZLE BOARD IN VISUAL STUDIO ................................................... 28 Task 1 – Creating the User Interface ................................................................................................... 29

Task 2 – Programming the Application Logic ...................................................................................... 35

Task 3 – Adding Support for Multi-Touch ........................................................................................... 43

Task 4 – Creating Animation Effects ................................................................................................... 52


EXERCISE 3: PERSISTING THE STATE OF THE GAME USING ISOLATED STORAGE ..................... 58 Task 1 – Adding Assembly References and Other Assets ................................................................... 59

Task 2 – Updating the Puzzle UI .......................................................................................................... 61


SUMMARY .................................................................................................................................................. 69


Page | 3

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 Phone applications 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 covers several 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 http://silverlight.net/learn/.

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 http://developer.windowsphone.com

http://silverlight.net/learn/

http://developer.windowsphone.com/


Page | 4

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 .vsi installer 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.


Page | 5

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

http://msdn.microsoft.com/en-us/library/ms165392.aspx.

Exercises

This hands-on lab comprises the following exercises:

http://msdn.microsoft.com/en-us/library/ms165392.aspx


Page | 6

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 also run 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.


Page | 7

2. In the File menu, choose New Project.

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

3. In the New Project dialog, 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 and the 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.


Page | 8

4. 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


Page | 9

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

5. 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.


Page | 10

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 Phone application and

provides its entry point.

6. 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 PhoneApplicationPage elements that

present content for the application. It also handles navigation between pages.


Page | 11

Figure 8

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 and Closing events, among others. You can

update these methods to execute custom code when the Windows Phone application launches

and closes.

7. 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


Page | 12

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.


Page | 13

8. 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.

9. 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

10. 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.


Page | 14

Figure 11

Project properties window

Note: The Windows Phone project 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 Output or press CTRL + W, O to 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.


Page | 15

3. 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

4. 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


Page | 16

5. 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.

6. 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.


Page | 17

Figure 15

Deploying an application image to the Windows Phone Emulator

7. Once it is ready, the emulator shows the Start page and shortly thereafter, your application

appears in the emulator window.


Page | 18

Figure 16

Running the application in the Windows Phone Emulator


Page | 19

8. Until you create the user interface and program the application logic, there is very little that you

can do with the application. Press SHIFT + F5 or click the Stop button in the toolbar to detach

the debugger and end the debugging session. Do not close the emulator window.

Figure 17

Ending the debugging session

Tip: When you start a debugging session, it takes a perceptible amount of time to set up the

emulator environment and launch the application. To streamline your debugging experience,

avoid closing the emulator while you work with the source code in Visual Studio. Once the

emulator is running, it takes very little time to stop the current session, edit the source code,

and then build and deploy a new image of your application to start a new debugging session.

Task 3 – Creating the UI for the Home Page

In this task, you create the user interface for the home page of the application. The page displays a

splash screen. It contains an image that represents the application and a button that dismisses the

splash screen and navigates to the game page.

1. First, create a folder in the project to contain the images used by the application. In Solution

Explorer, right-click the WindowsPhonePuzzle project node, point to Add and select New

Folder. Change the name of the folder to Assets.

Note: After you add a new folder, Solution Explorer shows the folder with a placeholder name

that you can replace by typing in a new name. If you accidentally abandon editing mode, you

can press F2 to enter this mode again.


Page | 20

Figure 18

Solution Explorer showing the new Assets folder

2. Now, add the images used by the application to the project. In Solution Explorer, right-click

Assets, point to Add and select Existing Item. In the Add Existing Item dialog, browse to Assets

in the Source folder of the lab, then, while holding down the CTRL key, click SplashImage.jpg

and Puzzle.jpg to select both files and click Add.

Note: In Visual Studio, you can add resource files to your Silverlight for Windows Phone

project and then configure them for deployment by setting their Build Action values. Each

added image is included in the project with a build action set to Resource, which will embed

the file in the project assembly.

3. To view the images, double-click each 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.


Page | 21

Figure 19

Image assets embedded as resources in the application package

4. Open the main page of the application. In Solution Explorer, double-click MainPage.xaml to

load this file in the designer.

5. In the Design view, select the TextBlock named ApplicationTitle and press F4. In the Properties

window, change the value of the Text property—located under Common when sorting

properties by category—to the string ‘WINDOWS PHONE PUZZLE’.

Figure 20

Configuring UI elements in the Properties window


Page | 22

Note: You can sort properties by category or alphabetically by clicking the corresponding icon

on the Properties window toolbar.

6. Next, select the TextBlock named PageTitle and replace its Text property with the string ‘start’.

7. In the XAML markup generated by the default Windows Phone application template, find the

Grid container element named LayoutRoot. Its purpose is to arrange the elements on the page.

Notice that the root Grid element contains other nested elements with each one assigned to a

different row of the outer grid by defining a Grid.Row property. Locate the Grid element named

ContentPanel assigned to row 1, and insert the following XAML markup inside it.

XAML

<Grid x:Name="LayoutRoot" Background="Transparent">

...



<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid.RowDefinitions>

<RowDefinition Height=".8*" />

<RowDefinition Height=".2*" />

</Grid.RowDefinitions>

<Image Source="Assets/SplashImage.jpg" VerticalAlignment="Center"

HorizontalAlignment="Center" Width="471" Height="492" />

<Button Content="START!" Name="StartButton" Grid.Row="1"

VerticalAlignment="Center" HorizontalAlignment="Center" />

</Grid>

</Grid>

Note: The XAML markup above creates a layout with two rows. The first row contains an

image for the splash screen and the second row, contains a button to dismiss the page and

navigate to the main puzzle page.

8. Switch the editor mode to Design view. To change to Design view and maximize the viewing

area, double-click the Design tab ( ) on the right edge of the designer window. If you have

trouble identifying the correct tab, position the mouse cursor over each tab to display a tooltip

that identifies it.

Note: If you configured the designer to show a horizontal split view, the tabs are located on

the bottom edge of the window.


Page | 23

9. Create an event handler for the button. To do this, double-click the button labeled START on the

designer surface. This action creates a subscription to the Click event handler and opens the

code-behind file with the cursor positioned on the StartButton_Click event handler method.

Paste the following (highlighted) code into the body of this method.

(Code Snippet – YourFirstWP7App – Ex 1 Task 3 Step 9 – StartButton_Click event handler)

C#

private void StartButton_Click(object sender, RoutedEventArgs e)

{

// navigate

this.NavigationService.Navigate(new Uri("/PuzzlePage.xaml",

UriKind.Relative));

}

Note: The PhoneApplicationPage class provides methods and properties to navigate to pages

through its NavigationService property. You can call the Navigate method of the

NavigationService and pass the URI for the page as a parameter. You can also use the GoBack

and GoForward methods to navigate backward or forward in the navigation history. The

hardware back button also provides backward navigation within an application.

The event handler shown above uses the NavigationService to go to the PuzzlePage.xaml

page.

Task 4 – Managing Errors in the Application

In this task, you update the application to display an error page whenever an unhandled exception

occurs. To manage unhandled exceptions, you first add a new page to the application to display

information about the error. Then, you create an event handler for the UnhandledException event. This

event is raised whenever an exception in the application is not caught. In the handler, you navigate to

the error page passing it information about the exception.

Note: Regardless of the presence of an unhandled exception handler, your application should include

proper handling for any exceptions that you can deal with.

1. First, add a new page to the project. In Solution Explorer, right-click the WindowsPhonePuzzle

project node, point to Add and select New Item. In the Add New Item dialog, select Windows

Phone Portrait Page from the list of templates, set the name to ErrorPage.xaml and then click

Add.


Page | 24

Figure 21

Adding a new page to the project

2. In ErrorPage.xaml, locate the LayoutRoot Grid element and replace its child controls with the

blue-highlighted XAML markup. This XAML defines an application title and a page title, both

named error. It also defines a TextBlock object designated as x:Name="ErrorText" that will hold

the error text from any future exceptions.

XAML

...



<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>




<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

<TextBlock x:Name="ApplicationTitle" Text="WINDOWS PHONE PUZZLE"

Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="error" Margin="-3,-8,0,0"

Style="{StaticResource PhoneTextTitle1Style}"/>


Page | 25

</StackPanel>



<Grid x:Name="ContentPanel" Grid.Row="1">

<Border BorderBrush="White">

<TextBlock x:Name="ErrorText" Style="{StaticResource

PhoneTextSmallStyle}" TextWrapping="Wrap" />

</Border>

</Grid>

</Grid>

...

3. Now, press F7 to open the code-behind file of the new page or, alternatively, right-click

ErrorPage.xaml in Solution Explorer and select View Code. Insert the following namespace

directive at the top of the file.

C#

using System.Windows.Navigation;

4. Then, insert the following code snippet into the ErrorPage class at the highlighted location. This

sets up an Exception object that is hooked up to the ErrorText.Text upon navigating to the page.

(Code Snippet – YourFirstWP7App – Ex 1 Task 4 Step 3 – ErrorPage OnNavigatedTo)

C#

public partial class ErrorPage : PhoneApplicationPage

{

public ErrorPage()

{

InitializeComponent();

}

public static Exception Exception;

// Executes when the user navigates to this page.

protected override void OnNavigatedTo(NavigationEventArgs e)

{

ErrorText.Text = Exception.ToString();

}

}


Page | 26

5. Once the page is ready, hook up an event handler to navigate to the error page and display an

error message whenever an unhandled exception occurs. In Solution Explorer, right-click

App.xaml and select View Code to open the code-behind class of the Application class.

6. In the App class, locate the Application_UnhandledException event handler and replace the

body of this method with the following (highlighted) code.

(Code Snippet – YourFirstWP7App – Ex 1 Task 4 Step 6 – Application_UnhandledException)

C#

// Code to execute on Unhandled Exceptions

private void Application_UnhandledException(object sender,

ApplicationUnhandledExceptionEventArgs e)

{

if (System.Diagnostics.Debugger.IsAttached)

{

// An unhandled exception has occurred; break in the debugger

System.Diagnostics.Debugger.Break();

}

e.Handled = true;

ErrorPage.Exception = e.ExceptionObject;

(RootVisual as Microsoft.Phone.Controls.PhoneApplicationFrame).Source =

new Uri("/ErrorPage.xaml", UriKind.Relative);

}

Note: The Application_UnhandledException is a safety net where all unhandled exceptions of

your application end up. The event handler above sets the Handled property to true to prevent

additional processing of the exception after the UnhandledException handler completes. It

then saves the information about the unhandled exception in a static member of the

ErrorPage class and sets the Source property of the frame to show the error page. Whenever

you set the Source property to a value that is different from the displayed content, the frame

navigates to the new content. When you navigate to the error page, it retrieves the exception

object’s text value (Exception.ToString()) and displays it on the page. This will be very useful

once you start debugging your application on a real device.

Task 5 – Verification

In this task, you build the application, deploy it to the Windows Phone Emulator, and then execute it to

verify that you performed the previous steps correctly.


Page | 27

1. In Visual Studio, press CTRL + F5 to deploy the application to the Windows Phone Emulator and

run it without debugging. Wait for the application to launch and show its main page. It should

display the splash screen.

Figure 22

Splash screen for the application running in the emulator

2. Click the START button. Notice that the application shows the unhandled exception error page

that you defined earlier. Bear in mind that this is expected because the handler for the button

navigates to the PuzzlePage.xaml page, which is currently undefined. You will define this page

later in the lab.


Page | 28

Figure 23

Unhandled Exception error page

3. Press the Back button twice to navigate back to phone main page. There is very little that you

can do at this time until you add some more functionality to the application. Do not close the

emulator window.

Exercise 2: Creating the Puzzle Board in

Visual Studio


Page | 29

In this task, you will create a page to display the puzzle board and play the game. The page displays an

image that when clicked, is broken down into pieces and then rearranged on the board in random

fashion.

The logic of the game is contained in the PuzzleGame class, which you add to the project from the assets

provided with this lab. During the exercise, you create the layout of the controls on the page and then

add the application logic necessary to initialize the board and respond to user interface events. Next,

you add multi-touch support to allow users to use their fingers to drag the pieces of the puzzle on the

board and rearrange them. As a last step, you create an animation storyboard that creates an attractive

visual effect when you succeed in solving the puzzle.

Task 1 – Creating the User Interface

In this task, you add a new page to the application to display a puzzle board and add the user interface

elements necessary to display the puzzle image as well as a status panel with the total number of moves

performed during a game. In the page, you also include a button that, when pressed, will solve the

puzzle for you.

1. If not already open, launch 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.


Studio 2010.

2. If you completed the steps in the previous exercise, you may continue with the solution that

you created for that exercise; otherwise, open Begin.sln from Ex2-

CreatingThePuzzleView\Begin in the Source folder of the lab.

3. Add a new page to the project. In Solution Explorer, right-click the WindowsPhonePuzzle

project node, point to Add and select New Item. In the Add New Item dialog, select Windows

Phone Portrait page from the list of templates, set the name to PuzzlePage.xaml and then click

Add.


Page | 30

Figure 24

Adding a new page to the project

4. In the XAML view of the new page, locate the RowDefinitions section of the LayoutRoot

element and set the value of the Height property for the first row to 0.2*.

Figure 25

Configuring the layout of the container grid

Note: Specifying the height as star (*) ensures that the row stretches to fill the available space

in the layout grid after all other rows are allocated. When the star-sized height also includes a

multiplier, as is the case for the first row in the definition above, the unused space is

proportionally allocated among all “star-sized” rows based on the value of the multiplier—a


Page | 31

multiplier of 1 is assumed when left unspecified. Thus, in the definition above, the first row

occupies 1/6th of the available space.

5. Inside the LayoutRoot grid, delete the existing TitlePanel and ContentPanel elements that are

included as part of the default page template—this includes their children.

6. Immediately below the RowDefinitions section, insert two StackPanel container elements as

shown (highlighted) below, one for each row in the layout.

XAML



<RowDefinition Height="0.2*"/>

<RowDefinition Height="*"/>


<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">

</StackPanel>

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1">

</StackPanel>

</Grid>

7. Inside the first StackPanel element—assigned by default to the top row (row 0) of the

LayoutRoot grid—insert the following (highlighted) XAML markup.

XAML

...


...

<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">

<Button x:Name="SolveButton" Content="SOLVE" Margin="10"

HorizontalAlignment="Center" Click="SolveButton_Click" />

<StackPanel x:Name="StatusPanel" Orientation="Horizontal"

HorizontalAlignment="Center" Visibility="Collapsed">

<TextBlock HorizontalAlignment="Center" Text="Your Moves: "

TextWrapping="Wrap" Foreground="#FFD0D0D0" FontSize="17.333"/>

<TextBlock x:Name="TotalMovesTextBlock" HorizontalAlignment="Center"

Text="N" TextWrapping="Wrap" Foreground="#FFFFB000" FontSize="17.333"/>

</StackPanel>

</StackPanel>


</StackPanel>

</Grid>

...


Page | 32

Note: The highlighted XAML markup defines a button that you press to solve the puzzle and a

status panel that displays the total number of moves performed during a game.

8. Next, inside the second StackPanel element located in the bottom row of the layout grid, insert

the following (highlighted) XAML markup.

XAML

...


...


<Border x:Name="CongratsBorder" Height="30" Background="#FFF10DA2"

HorizontalAlignment="Center" Width="443" RenderTransformOrigin="0.5,0.5"

UseLayoutRounding="False" Opacity="0">

<Border.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</TransformGroup>

</Border.RenderTransform>

<TextBlock HorizontalAlignment="Center" Text="CONGRATULATIONS!"

TextWrapping="Wrap" Foreground="White" FontSize="17.333"

VerticalAlignment="Center" FontWeight="Bold"/>

</Border>

</StackPanel>

</Grid>

...

Note: This Border element contains a message that is displayed when the puzzle is solved.

Note that the border includes a RenderTransform. This transformation is required by an

animation storyboard that you will create later in the lab to provide a visual effect. The

storyboard cannot animate the element unless the transformation is present.

9. To complete the contents of the lower StackPanel, insert the following (highlighted) XAML

immediately below the markup inserted in the previous step.

XAML

...



Page | 33

...


<Border x:Name="CongratsBorder"...>

</Border>

<Border x:Name="border" BorderThickness="3" Background="#FF262626"

HorizontalAlignment="Center" VerticalAlignment="Center" Padding="1"

RenderTransformOrigin="0.5,0.5">

<Border.RenderTransform>

<TransformGroup>

<ScaleTransform/>

<SkewTransform/>

<RotateTransform/>

<TranslateTransform/>

</TransformGroup>

</Border.RenderTransform>

<Border.BorderBrush>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFF10DA2" Offset="0"/>

<GradientStop Color="#FFEE7923" Offset="1"/>

</LinearGradientBrush>

</Border.BorderBrush>

<Canvas Height="435" Width="435">

<Image x:Name="PreviewImage" Height="435" Width="435" Opacity="0.2" />

<Canvas x:Name="GameContainer" Width="435" Height="435" />

</Canvas>

</Border>

<TextBlock x:Name="TapToContinueTextBlock" HorizontalAlignment="Center"

Text="Tap the picture to start the puzzle" TextWrapping="Wrap"

Foreground="#FFD0D0D0" FontSize="17.333"/>

</StackPanel>

</Grid>

Note: The XAML markup above defines a Border element drawn with a linear gradient brush

that uses multiple colors that blend into each other. This element also specifies a

RenderTransform that will be necessary when you create an animation storyboard to provide

a visual effect.

Inside the Border element is a single Canvas element. This container element is used to

explicitly position other child elements using coordinates relative to its area. Among its

children is an Image element that shows a watermark with a preview of the puzzle’s solution

(PreviewImage) and an inner Canvas that holds the pieces of the puzzle (GameContainer).

The markup also includes a TextBlock element (TapToContinueTextBlock) that displays

instructions on how to start the game. This element is hidden while a game is in progress.


Page | 34

10. Switch to Design view to examine the layout of the page. To select the view and maximize the

viewing area, double-click the Design tab ( ) on the right edge of the designer window. If you

have trouble identifying the correct tab, position the mouse cursor over each tab to display a

tooltip that identifies it. The page should appear as shown in the figure below.

Figure 26

Windows Phone Puzzle application user interface


Page | 35

Task 2 – Programming the Application Logic

During this task, you program the application logic. This includes initializing the puzzle board, reading

the image from the application’s resources, and creating handlers for events from the user interface.

1. Add the class that contains the game’s logic to the project. In Solution Explorer, right-click the

WindowsPhonePuzzle project node, point to Add and select Existing Item. In the Add Existing

Item dialog, browse to Assets in the Source folder of the lab, select PuzzleGame.cs and click

Add.

Figure 27

Solution Explorer showing the added project file

Note: The logic of the game is contained in the PuzzleGame class, which you add to the project

from the assets included with this lab. This class provides methods that include starting a new

game, moving the puzzle pieces, and saving and restoring the game’s state. You are free to

examine the source code for this class but it is beyond the scope of the lab to analyze the code

in detail.

2. Open the code-behind file for the puzzle page that you created in the previous task. To do this,

right-click the PuzzlePage.xaml file in Solution Explorer and select View Code.

3. Insert the following namespace declarations into the PuzzlePage.xaml.cs code-behind file.

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 3 – PuzzlePage namespaces)

C#


Page | 36

using System.IO;

using System.Windows.Media.Imaging;

using System.Windows.Resources;

4. In the PuzzlePage class, insert the following member variable declarations as shown

(highlighted) below.

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 4 – PuzzlePage member variables)

C#

public partial class PuzzlePage : PhoneApplicationPage

{

private const double DoubleTapSpeed = 500;

private const int ImageSize = 435;

private PuzzleGame game;

private Canvas[] puzzlePieces;

private Stream imageStream;

public PuzzlePage()

{


}

}

5. Now, add an ImageStream property, as shown (highlighted) in the following code snippet.

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 5 – ImageStream property)

C#


{

...

public Stream ImageStream

{

get

{

return this.imageStream;

}

set

{

this.imageStream = value;

BitmapImage bitmap = new BitmapImage();

bitmap.SetSource(value);

this.PreviewImage.Source = bitmap;


Page | 37

int i = 0;

int pieceSize = ImageSize / this.game.ColsAndRows;

for (int ix = 0; ix < this.game.ColsAndRows; ix++)

{

for (int iy = 0; iy < this.game.ColsAndRows; iy++)

{

Image pieceImage = this.puzzlePieces[i].Children[0] as Image;

pieceImage.Source = bitmap;

i++;

}

}

}

}

public PuzzlePage()

{


}

}

Note: The ImageStream property returns the stream to use for the puzzle image. It

automatically refreshes the background image and each of the puzzle pieces. You can replace

the puzzle image by setting the property to a new Stream that contains any valid bitmap, for

example, an image originating from the phone’s camera. For this hands-on lab, you use an

image embedded as a resource in the application package.

6. Update the constructor for the PuzzlePage class as shown (highlighted) in the following code

snippet.

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 6 – PuzzlePage constructor)

C#


{

...

public PuzzlePage()

{


SupportedOrientations = SupportedPageOrientation.Portrait |

SupportedPageOrientation.Landscape;

// Puzzle Game


Page | 38

this.game = new PuzzleGame(3);

this.game.GameStarted += delegate

{

this.StatusPanel.Visibility = Visibility.Visible;

this.TapToContinueTextBlock.Opacity = 0;

this.TotalMovesTextBlock.Text = this.game.TotalMoves.ToString();

};

this.game.GameOver += delegate

{




};

this.game.PieceUpdated += delegate(object sender, PieceUpdatedEventArgs

args)

{


this.AnimatePiece(this.puzzlePieces[args.PieceId], Canvas.LeftProperty,

(int)args.NewPosition.X * pieceSize);

this.AnimatePiece(this.puzzlePieces[args.PieceId], Canvas.TopProperty,

(int)args.NewPosition.Y * pieceSize);


};

this.InitBoard();

}

}

Note: The constructor instantiates the game logic—encapsulated by the PuzzleGame class—

and then binds its events. The PuzzleGame class defines the following events:

GameStarted: This event is raised when a new game begins. The handler for this event shows

the panel with the number of pieces moved, hides the legend with instructions on how to start

the game and then resets the number of moved pieces.

GameOver: This event occurs when the puzzle is solved. The handler for the event shows the

legend with instructions on how to start the game and then updates the move count.

PieceUpdated: This event is triggered whenever a piece is moved. The handler for the event

animates the moved piece and then updates the move count.

Finally, after subscribing the event handlers, the constructor calls the InitBoard method to

initialize the game board.


Page | 39

7. Next, in the PuzzlePage class, define the InitBoard method to initialize the game board.

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 7 – InitBoard method)

C#

private void InitBoard()

{

int totalPieces = this.game.ColsAndRows * this.game.ColsAndRows;


this.puzzlePieces = new Canvas[totalPieces];

int nx = 0;

for (int ix = 0; ix < this.game.ColsAndRows; ix++)

{

for (int iy = 0; iy < this.game.ColsAndRows; iy++)

{

nx = (ix * this.game.ColsAndRows) + iy;

Image image = new Image();

image.SetValue(FrameworkElement.NameProperty, "PuzzleImage_" + nx);

image.Height = ImageSize;

image.Width = ImageSize;

image.Stretch = Stretch.UniformToFill;

RectangleGeometry r = new RectangleGeometry();

r.Rect = new Rect((ix * pieceSize), (iy * pieceSize), pieceSize,

pieceSize);

image.Clip = r;

image.SetValue(Canvas.TopProperty, Convert.ToDouble(iy * pieceSize * -

1));

image.SetValue(Canvas.LeftProperty, Convert.ToDouble(ix * pieceSize * -

1));

this.puzzlePieces[nx] = new Canvas();

this.puzzlePieces[nx].SetValue(FrameworkElement.NameProperty,

"PuzzlePiece_" + nx);

this.puzzlePieces[nx].Width = pieceSize;

this.puzzlePieces[nx].Height = pieceSize;

this.puzzlePieces[nx].Children.Add(image);

this.puzzlePieces[nx].MouseLeftButtonDown +=

this.PuzzlePiece_MouseLeftButtonDown;

if (nx < totalPieces - 1)

{

this.GameContainer.Children.Add(this.puzzlePieces[nx]);

}

}

}

// Retrieve image


Page | 40

StreamResourceInfo imageResource = Application.GetResourceStream(new

Uri("WindowsPhonePuzzle;component/Assets/Puzzle.jpg", UriKind.Relative));

this.ImageStream = imageResource.Stream;

this.game.Reset();

}

Note: The InitBoard method creates the Canvas controls that contain the pieces of the puzzle,

one for every piece. Each piece is a clipped portion of the whole image used in the puzzle.

The method also retrieves the puzzle image from the application resources and initializes the

ImageStream property with the resulting stream.

8. Insert the AnimatePiece into the PuzzlePage class.

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 8 – AnimatePiece method)

C#

private void AnimatePiece(DependencyObject piece, DependencyProperty dp,

double newValue)

{

Storyboard storyBoard = new Storyboard();

Storyboard.SetTarget(storyBoard, piece);

Storyboard.SetTargetProperty(storyBoard, new PropertyPath(dp));

storyBoard.Children.Add(new DoubleAnimation

{

Duration = new Duration(TimeSpan.FromMilliseconds(200)),

From = Convert.ToInt32(piece.GetValue(dp)),

To = Convert.ToDouble(newValue),

EasingFunction = new SineEase()

});

storyBoard.Begin();

}

Note: AnimatePiece is a helper method for animating puzzle pieces in the UI. It creates a

storyboard using code and can be used to update any DependencyProperty in a control. For

this application, the method is only used to update the Top and Left properties of a puzzle

piece to control its position.

9. Add a handler for the MouseLeftButtonDown event. To do this, insert the following

(highlighted) code into the PuzzlePage class.


Page | 41

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 9 – PuzzlePiece_MouseLeftButtonDown

event handler)

C#

private void PuzzlePiece_MouseLeftButtonDown(object sender,

MouseButtonEventArgs e)

{

if (!this.game.IsPlaying)

{

this.game.NewGame();

}

}

Note: This event handler is triggered by clicking the board surface and causes the start of a

new game, unless one is already in progress.

10. Now, add the handler for the Click event of the “Solve” button.

(Code Snippet – YourFirstWP7App – Ex 2 Task 2 Step 10 – SolveButton_Click event handler)

C#

private void SolveButton_Click(object sender, RoutedEventArgs e)

{

this.game.Reset();

this.game.CheckWinner();

}

Note: The event handler for the Solve button forces the game to reset—to display the original

image and solve the puzzle—and then calls PuzzleGame.CheckWinner in the PuzzleGame

class. This method validates that every piece is in the correct place and then raises the

GameOver event, which causes the UI to display a congratulatory message.

11. Press F5 to build and deploy the application to the Windows Phone Emulator. Wait for the

splash screen to appear and then click START.


Page | 42

Figure 28

Starting a new game

12. In the emulator window, tap the image to start the puzzle. Notice that the image is broken

down into pieces and then rearranged on the board in random fashion. Moreover, observe that

the pieces do not instantly snap into place but instead smoothly slide into position as the result

of the animation storyboard applied by the AnimatePiece method. This method animates the

left and top coordinates of each puzzle piece to produce the observed transition.


Page | 43

Figure 29

Puzzle pieces randomly rearranged on the board after the game starts

13. Click a piece to select it and then attempt to drag it. Notice that currently this has no effect. In

the next task, you will add support for multi-touch, which will allow you to use your fingers to

drag the pieces on the board to rearrange them.

14. Now, click the SOLVE button and watch as the pieces on the board reassemble to display the

original image.

15. In Visual Studio, press SHIFT + F5 to stop the debugging session. Do not close the emulator

window.

Task 3 – Adding Support for Multi-Touch


Page | 44

Multi-touch input allows users to apply multiple finger gestures simultaneously and have them

interpreted as a unit to provide complex commands to an application and simulate directly manipulating

an element on the page, for example, to pan and zoom at the same time. In this task, you update the

Windows Phone Puzzle game to receive multi-touch input and enable users to move the pieces of the

puzzle on the board by tapping and then dragging them to an empty slot.

1. In Solution Explorer, right-click PuzzlePage.xaml and select View Code to open the code-behind

file for this page in the designer.

2. In the PuzzlePage class, insert the following declarations below the existing member variables,

as shown (highlighted) below.

(Code Snippet – YourFirstWP7App – Ex 2 Task 3 Step 2 – Multi-Touch member variables)

C#


{

private const double DoubleTapSpeed = 500;

private const int ImageSize = 435;

private PuzzleGame game;

private Canvas[] puzzlePieces;

private Stream imageStream;

private long lastTapTicks;

private int movingPieceId = -1;

private int movingPieceDirection;

private double movingPieceStartingPosition;

public PuzzlePage()

{


...

}

3. Now, right-click the editor window and select View Designer ( ) to switch to Design view.

4. On the designer surface, click the blank area that surrounds the emulator image to select the

PhoneApplicationPage element and press F4 to open its Properties window. In the Properties

window, click the Events tab to display a list of available events.

Note: Be careful not to select another UI element on the designer surface, otherwise the

properties window displays events for that element instead.


Page | 45

Figure 30

Creating event handlers in Microsoft Visual Studio 2010 Express for Windows Phone

5. Define an event handler for the ManipulationStarted event. To do this, double-click the

corresponding item in the events list to subscribe to this event. When you do this, Visual Studio

creates an event handler and opens the code-behind file to display the method stub that it

generated. Insert the following (highlighted) code inside the body of the

PhoneApplicationPage_ManipulationStarted method.

(Code Snippet – YourFirstWP7App – Ex 2 Task 3 Step 5 –

PhoneApplicationPage_ManipulationStarted event handler)

C#

private void PhoneApplicationPage_ManipulationStarted(object sender,

ManipulationStartedEventArgs e)

{

if (this.game.IsPlaying && e.ManipulationContainer is Image &&

e.ManipulationContainer.GetValue(FrameworkElement.NameProperty).ToString().Sta

rtsWith("PuzzleImage_"))

{

int pieceIx =

Convert.ToInt32(e.ManipulationContainer.GetValue(FrameworkElement.NameProperty

).ToString().Substring(12));

Canvas piece = this.FindName("PuzzlePiece_" + pieceIx) as Canvas;

if (piece != null)

{

int totalPieces = this.game.ColsAndRows * this.game.ColsAndRows;

for (int i = 0; i < totalPieces; i++)

{

if (piece == this.puzzlePieces[i] && this.game.CanMovePiece(i) > 0)

{


Page | 46

int direction = this.game.CanMovePiece(i);

DependencyProperty axisProperty = (direction % 2 == 0) ?

Canvas.LeftProperty : Canvas.TopProperty;

this.movingPieceDirection = direction;

this.movingPieceStartingPosition =

Convert.ToDouble(piece.GetValue(axisProperty));

this.movingPieceId = i;

break;

}

}

}

}

}

Note: The ManipulationStarted event is raised when the user touches (or clicks with the

mouse) any UIElement to manipulate it and is similar to a MouseDown event. The handler for

the event verifies if a game is currently in progress and that one of the image elements that

represents the puzzle pieces raised the event, otherwise it ignores the event. It locates the

corresponding Canvas element for this piece and then calls the game’s logic to determine

whether it can be moved—for this to happen, there must be an empty slot adjacent to the

piece. It then stores the selected piece and then records the axis / direction where it can

move.

6. Next, create a handler for the ManipulationDelta event. Once again, right-click the code editor

window and select View Designer to switch to Design view. Then, select the

PhoneApplicationPage element on the designer surface, press F4 to open its Properties

window and then select the Events tab. Next, locate the ManipulationDelta event in the list of

events and double-click the corresponding item to subscribe to this event and generate a

method stub. In the code-behind file, insert the following (highlighted) code inside the body of

the PhoneApplicationPage_ManipulationDelta method.


PhoneApplicationPage_ManipulationDelta event handler)

C#

private void PhoneApplicationPage_ManipulationDelta(object sender,

ManipulationDeltaEventArgs e)

{

if (this.movingPieceId > -1)

{


Canvas movingPiece = this.puzzlePieces[this.movingPieceId];


Page | 47

// validate direction

DependencyProperty axisProperty;

double normalizedValue;

if (this.movingPieceDirection % 2 == 0)

{

axisProperty = Canvas.LeftProperty;

normalizedValue = e.CumulativeManipulation.Translation.X;

}

else

{

axisProperty = Canvas.TopProperty;

normalizedValue = e.CumulativeManipulation.Translation.Y;

}

// enforce drag constraints

// (top or left)

if (this.movingPieceDirection == 1 || this.movingPieceDirection == 4)

{

if (normalizedValue < -pieceSize)

{

normalizedValue = -pieceSize;

}

else if (normalizedValue > 0)

{

normalizedValue = 0;

}

}

// (bottom or right)

else if (this.movingPieceDirection == 3 || this.movingPieceDirection == 2)

{

if (normalizedValue > pieceSize)

{

normalizedValue = pieceSize;

}

else if (normalizedValue < 0)

{

normalizedValue = 0;

}

}

// set position

movingPiece.SetValue(axisProperty, normalizedValue +

this.movingPieceStartingPosition);

}

}


Page | 48

Note: The ManipulationDelta event is raised when the user moves the finger (or the mouse

cursor) while manipulating a UIElement. The handler for this event checks if there is a piece

currently being moved. If so, it captures the delta value from the only possible axis / direction.

To do so, the code needs to enforce drag constraints to validate that the movement is within

the available boundaries—a piece cannot overlap other pieces. The handler then updates the

position for the piece by setting the property for the appropriate axis.

7. Finally, repeat the previous step only this time, choose the ManipulationCompleted event

instead. In the code-behind file, insert the following (highlighted) code into the body of the

PhoneApplicationPage_ManipulationCompleted method.


PhoneApplicationPage_ManipulationCompleted event handler)

C#

private void PhoneApplicationPage_ManipulationCompleted(object sender,

ManipulationCompletedEventArgs e)

{

if (this.movingPieceId > -1)

{


Canvas piece = this.puzzlePieces[this.movingPieceId];

// check for double tapping

if (TimeSpan.FromTicks(DateTime.Now.Ticks -

this.lastTapTicks).TotalMilliseconds < DoubleTapSpeed)

{

// force move

this.game.MovePiece(this.movingPieceId);

this.lastTapTicks = int.MinValue;

}

else

{

// calculate moved distance

DependencyProperty axisProperty = (this.movingPieceDirection % 2 == 0) ?

Canvas.LeftProperty : Canvas.TopProperty;

double minRequiredDisplacement = pieceSize / 3;

double diff = Math.Abs(Convert.ToDouble(piece.GetValue(axisProperty)) -


// did it get halfway across?

if (diff > minRequiredDisplacement)

{

// move piece

this.game.MovePiece(this.movingPieceId);


Page | 49

}

else

{

// restore piece

this.AnimatePiece(piece, axisProperty,


}

}

this.movingPieceId = -1;

this.movingPieceStartingPosition = 0;

this.movingPieceDirection = 0;

this.lastTapTicks = DateTime.Now.Ticks;

}

}

Note: The ManipulationCompleted event is raised when the user lifts up the finger from the

screen (or releases the mouse button) after manipulating a UIElement and is similar to a

MouseUp event. The handler for this event checks if there is a puzzle piece currently being

moved. If so, it determines the time when the last ManipulationCompleted was fired and,

provided the time interval is lower than the value specified by the DoubleTapSpeed, it

interprets this event as a Double Tap event (or double-click) and moves the piece to the

adjacent empty slot. Otherwise, it calculates the offset distance of the piece into its target

position and, if the piece has shifted at least one third of its size into the adjacent slot, it

completes the move of the piece into that slot; if not, it pulls the piece back to its original

position.

8. After completing the previous steps, open the Properties window for the page to verify that you

have created the event handlers correctly. If you inspect the XAML markup for the page, you

will see the corresponding attributes defined on the PhoneApplicationPage element.


Page | 50

Figure 31

Properties window showing the manipulation event handlers


Page | 51

Figure 32

XAML markup for the page showing the event subscriptions

9. To test the added support for multi-touch, press F5 to build and deploy the application to the

emulator. Wait for the splash screen to be displayed and then click START to begin a new game.

10. Drag the pieces on the board to solve the puzzle. To move a piece, click to select it and then

drag it to its destination. Alternatively, you may double-click a piece to move it to the next

available slot. Notice that each move increments the counter above the puzzle board.


Page | 52

Figure 33

Solving the puzzle

11. Continue moving pieces until you get a sense of what the experience might be like when the

application is running on a real device with a touch screen. When you are ready, switch back to

Visual Studio and press SHIFT + F5 to end the debugging session.

Task 4 – Creating Animation Effects

In Silverlight, a storyboard is an animation. Each storyboard defines a timeline that contains key frames.

Each key frame can independently redefine controls properties such as position, size, rotation, opacity

and even foreground or background color. Using this approach, users are not required to create

animations by defining every single frame and instead, only need to provide selected points on the

timeline to mark significant property changes. Silverlight interpolates the value of the animated


Page | 53

properties between two consecutive key frames to generate intervening frames and provide a smooth

transition.

Each storyboard is an object with methods and events that you can use from the page's code-behind.

This includes methods to Begin, Stop, and Pause the animation and a single event Completed, which

occurs when the animation has completed playing.

Storyboards can be written as XAML code and are easily created using Expression Blend.

In this task, you create a storyboard to play when the user successfully solves the puzzle. The animation

creates a visual effect that rotates the puzzle image about its middle axis and displays a message that

gradually fades into view.

1. First, insert a new Resources section into the page as shown (highlighted) below.

XAML

<phone:PhoneApplicationPage

x:Class="WindowsPhonePuzzle.PuzzlePage" ...>

<phone:PhoneApplicationPage.Resources>

</phone:PhoneApplicationPage.Resources>

...


</Grid>

</navigation:PhoneApplicationPage>

Note: Resources provide a simple way to reuse commonly defined objects and values. You can

create definitions for common items including control templates, styles, brushes, colors, and

animation storyboards and store them in resource dictionaries. A resource dictionary is a

keyed dictionary of objects that you can use both in XAML and in code. You can create

resource dictionaries at different scopes in your application structure, allowing you to define

resources at the page level or as application resources.

In this task, you use the page’s resources to store the definition of the animation storyboard.

2. Next, inside the Resources section, insert the animation storyboard for the transition that

occurs when the user solves the puzzle. To do this, insert the following (highlighted) XAML

markup that defines the WinTransition storyboard.

XAML

...


<Storyboard x:Name="WinTransition">


Page | 54

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

Storyboard.TargetName="PreviewImage"

Storyboard.TargetProperty="(UIElement.Opacity)">

<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.2"/>

<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>


Storyboard.TargetName="border"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Childre

n)[0].(ScaleTransform.ScaleX)">

<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>

<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="-1">

<EasingDoubleKeyFrame.EasingFunction>

<CubicEase EasingMode="EaseInOut"/>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

<EasingDoubleKeyFrame KeyTime="00:00:01.7000000" Value="1">







Storyboard.TargetName="CongratsBorder"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Childre

n)[0].(ScaleTransform.ScaleX)">


<EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="-1">





<EasingDoubleKeyFrame KeyTime="00:00:01.7000000" Value="1">













</Storyboard>



Page | 55

Note: The WinTransition storyboard plays when the user wins the game. The animation

rotates the image that contains the solution for the puzzle about its middle axis and shows a

frame around the image with a congratulatory message that gradually fades into view.

You can use tools such as Expression Blend to visually animate properties in the designer and

generate the XAML markup required to define a storyboard. For an introduction on how to

create animations using Expression Blend, see the Hello Phone hands-on lab.

3. Finally, insert the storyboard for the transition that occurs whenever the user restarts the game.

XAML

...


<Storyboard x:Name="WinTransition">

...

</Storyboard>

<Storyboard x:Name="ResetWinTransition">



Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>



Storyboard.TargetName="PreviewImage"

Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.20000000298023224"/>



Duration="00:00:00.0010000" Storyboard.TargetName="GameContainer"




</Storyboard>


...

Note: The ResetWinTransition storyboard hides the congratulatory message and restores the

puzzle image opacity to its original value.

4. In Solution Explorer, right-click PuzzlePage.xaml and select View Code ( ) to open the code-

behind file for this page.


Page | 56

5. In the constructor for the PuzzlePage class, locate the anonymous method that handles the

GameOver event and insert the following (highlighted) line of code at the start of the method.

(Code Snippet – YourFirstWP7App – Ex 2 Task 4 Step 5 – WinTransition animation)

C#

public PuzzlePage()

{

...

this.game.GameOver += delegate

{

this.WinTransition.Begin();




};

...

}

Note: When the game is over, the inserted code plays a storyboard to provide a visual effect

for the completed puzzle image and the congratulatory message.

6. While still in the PuzzlePage class constructor, locate the handler for the GameStarted event

and add the following (highlighted) line of code.

(Code Snippet – YourFirstWP7App – Ex 2 Task 4 Step 6 – ResetWinTransition animation)

C#

public PuzzlePage()

{

...

this.game.GameStarted += delegate

{

this.ResetWinTransition.Begin();




};

...

}


Page | 57

Note: The inserted code starts the ResetWinTransition animation storyboard when the game

starts. This storyboard resets the state of the background image and hides the congratulatory

message.


1. To test the latest changes, press F5 to build and deploy the application to the emulator once

again.

2. Once the splash screen is shown, click START to begin a new game.

3. At this point, if you wish, you may attempt to solve the puzzle by dragging the pieces of the

puzzle on the board; otherwise, press the SOLVE button above the game board to solve the

puzzle and end the game. Notice that when the game is over, it triggers the animation and the

board rotates about its middle axis while a legend with the text “CONGRATULATIONS” located

above the board gradually fades into view.


Page | 58

Figure 34

Solved puzzle showing the congratulatory message

4. When you complete your verification, switch back to Visual Studio press SHIFT + F5 to end the

debugging session.

Exercise 3: Persisting the State of the

Game Using Isolated Storage


Page | 59

In this exercise, you update the application to save its state so that you can resume the game the next

time you open it. To implement this, you use Isolated Storage.

Isolated Storage enables managed applications to save and retrieve information from a local store. This

architecture is very similar to the one used in Silverlight 4. All I/O operations are restricted to the scope

of the Isolated Storage; they do not have direct access to the underlying operating system file system.

Some of the benefits of using Isolated Storage are data protection from other applications, quota

management, and blinders that ensure applications deal solely with their own data.

Task 1 – Adding Assembly References and Other Assets

To take advantage of Isolated Storage, you need to add a provided helper file and an assembly reference

to the project.

1. If not already open, launch 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.


Studio 2010.

2. If you completed the steps in the previous exercise, you may continue with the solution that

you created for that exercise; otherwise, open Begin.sln from Ex3-UsingIsolatedStorage\Begin

in the Source folder of the lab.

3. Add a reference to the System.Servicemodel.Web assembly:

◦ Right-click the References folder in Solution Explorer

◦ Select Add Reference

◦ Select the .NET tab

◦ Select the System.Servicemodel.Web assembly from the list of components

◦ Click OK


Page | 60

Figure 35

Adding assembly references to the project

Note: The System.Servicemodel.Web assembly contains the

DataContractJsonSerializer that the application uses to serialize objects using

JavaScript Object Notation (JSON) before persisting them in Isolated Storage.

4. Now, add a helper class to the project to handle Isolated Storage:

◦ Right-click the project in Solution Explorer

◦ Point to Add

◦ Select Existing Item

◦ Browse to Assets in the Source folder of the lab

◦ Select IsolatedStorageHelper.cs

◦ Click Add


Page | 61

Note: The IsolatedStorageHelper class contains methods to handle the serialization of

objects to and from Isolated Storage. The provided class contains several method

stubs that you will implement later in this exercise.

5. After adding the reference and the helper class file, the updated solution should look like the

following:

Figure 36

Solution Explorer showing the newly added components

Task 2 – Updating the Puzzle UI

In this task, you update the game page to provide three buttons that allow users to load, save, and

delete the state of the game. For this purpose, you modify the XAML markup of the user interface to

define the necessary elements and then create event handlers for each button. Finally, you implement


Page | 62

the required methods in the IsolatedStorageHelper class to load, save, and delete serialized objects

from Isolated Storage.

1. Double-click PuzzlePage.xaml in Solution Explorer to open the page that contains the UI of the

game.

2. Switch to the XAML view. To change the view and maximize the viewing area, double-click the

XAML tab on the right edge of the designer window. If you have trouble identifying the correct

tab, position the mouse cursor over each tab to display a tooltip that identifies it.

Note: If you configured the designer to show a horizontal split view, the tabs are located on

the bottom edge of the window.

3. Insert the following (highlighted) XAML markup immediately after the last TextBlock element

named TapToContinueTextBlock.

XAML

...



<Border x:Name="CongratsBorder"...>

...

</Border>

<Border x:Name="border"...>

...

</Border>

<TextBlock x:Name="TapToContinueTextBlock" HorizontalAlignment="Center"

Text="Tap the picture to start the puzzle" TextWrapping="Wrap"

Foreground="#FFD0D0D0" FontSize="17.333"/>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >

<Button x:Name="LoadButton" Content="Load" Margin="10" />

<Button x:Name="SaveButton" Content="Save" Margin="10" />

<Button x:Name="ClearStorageButton" Content="Clear" Margin="10" />

</StackPanel>

</StackPanel>

</Grid>

...

Note: The added XAML markup adds three buttons that will load, save, and clear the data

stored in Isolated Storage.

4. Switch to Design view to see the changes to the user interface after adding the new buttons. To

do this, double-click the Design tab on the right edge of the designer window.


Page | 63

Figure 37

Design view showing the updated user interface

5. Now define an event handler for each button: Click the button labeled “Load” on the designer

surface to select it and then press F4 to open its Properties window.

6. In the Properties window:

◦ Click the Events tab to display a window with a list of available events

◦ Find the Click event in this list and then type LoadButton_Click in the text box

located next to this event


Page | 64

◦ Press ENTER to generate an event handler with this name and open the code-behind

file to display the method stub generated by Visual Studio

7. Insert the following (highlighted) code into the body of the LoadButton_Click event handler:

(Code Snippet – YourFirstWP7App – Ex 3 Task 2 Step 7 – LoadButton_Click event handler)

C#

private void LoadButton_Click(object sender, RoutedEventArgs e)

{

var gameState = IsolatedStorageHelper.GetObject<PuzzleState>("PuzzleState");

if (gameState == null)

{

MessageBox.Show("Sorry, no game state found.", "Oops!",

MessageBoxButton.OK);

}

else

{

// set game state

this.game.SetState(gameState);

}

}

8. Next, right-click the code editor window and select View Designer to switch back to Design

view. Click the button labeled “Save” on the designer surface to select it and then press F4 to

open its Properties window.

9. In the Properties window, click the Events tab, then find the Click event and type

SaveButton_Click in the text box located next to this event. Press ENTER to generate an event

handler with this name and open the code-behind file to display the method stub generated by

Visual Studio.

10. Insert the following (highlighted) code into the body of the SaveButton_Click event handler:

(Code Snippet – YourFirstWP7App – Ex 3 Task 2 Step 10 – SaveButton_Click event handler)

C#

private void SaveButton_Click(object sender, RoutedEventArgs e)

{

// save game state

PuzzleState gameState = this.game.GetState();

IsolatedStorageHelper.SaveObject("PuzzleState", gameState);

}


Page | 65

11. Once again, right-click the code editor window and select View Designer to switch back to

Design view. Click the button labeled “Clear” on the designer surface to select it and then press

F4 to open its Properties window.

12. In the Properties panel, click the Events tab, find the Click event, and then type

ClearStorageButton_Click in the text box located next to this event. Press ENTER to generate an

event handler with this name and open the code-behind file to display the method stub.

13. Insert the following (highlighted) code into the body of the ClearStorageButton_Click event

handler:

(Code Snippet – YourFirstWP7App – Ex 3 Task 2 Step 13 – ClearStorageButton_Click event

handler)

C#

private void ClearStorageButton_Click(object sender, RoutedEventArgs e)

{

// remove state and image

IsolatedStorageHelper.DeleteObject("PuzzleState");

}

14. Now, double-click IsolatedStorageHelper.cs in Solution Explorer to open this file.

15. Find the GetObject<T> method and replace its body with the following (highlighted) code:

(Code Snippet – YourFirstWP7App – Ex 3 Task 2 Step 15 – GetObject method)

C#

public static T GetObject<T>(string key)

{

if (IsolatedStorageSettings.ApplicationSettings.Contains(key))

{

string serializedObject =

IsolatedStorageSettings.ApplicationSettings[key].ToString();

return Deserialize<T>(serializedObject);

}

return default(T);

}

Note: The GetObject<T> method retrieves an object from isolated storage given its key. It

takes advantage of the IsolatedStorageSettings class that stores a dictionary of key-value pairs

in isolated storage. Objects are stored in serialized format using the

DataContractJsonSerializer provided in the System.ServiceModel.Web assembly, which


Page | 66

serializes objects to the JavaScript Object Notation (JSON) and deserializes JSON data to

objects.

16. Next, insert the following (highlighted) code into the body of the SaveObject<T> method:

(Code Snippet – YourFirstWP7App – Ex 3 Task 2 Step 16 – SaveObject method)

C#

public static void SaveObject<T>(string key, T objectToSave)

{

string serializedObject = Serialize(objectToSave);

IsolatedStorageSettings.ApplicationSettings[key] = serializedObject;

}

Note: The SaveObject<T> method stores an object to isolated storage given its key. The key

can then be used to retrieve the object back from storage.

17. Finally, implement the DeleteObject<T> method using the following (highlighted) code:

(Code Snippet – YourFirstWP7App – Ex 3 Task 2 Step 17 – DeleteObject method)

C#

public static void DeleteObject(string key)

{

IsolatedStorageSettings.ApplicationSettings.Remove(key);

}

Note: The DeleteObject method removes an object from isolated storage given its key.


In this task, you will build and run the completed application in the Windows Phone Emulator. To test

the use of Isolated Storage, you start a new game and move some of the pieces in the puzzle. After that,

you save the state of the game and close it. Then, you launch the application one more time and restore

the saved state to restore the game to the same condition that it had before you closed the application.

1. To test the latest changes, press F5 to build and deploy the application to the emulator once

again. Wait for the splash screen to appear and then click START to begin a new game.


Page | 67

2. On the game page, click Load to attempt to restore any saved state. Notice that, predictably,

this results in an error message indicating that no game state was found. Click ok to dismiss the

error message.

Figure 38

Load operation fails when there is no previous state

3. Drag some of the pieces of the puzzle on the board.

It is best if you can arrange one or more of the pieces into a pattern that you can easily

remember. This will make it easier to determine whether you obtain the same pattern after you

reload the game state later on.

4. Click Save to store the current state of the game.

5. Now, continue moving the pieces until you obtain a different arrangement, but do not save it.


Page | 68

6. Once again, click Load to restore the previously saved state. Notice that this time, the position

of the pieces on the board changes, restoring the same pattern that the board had when you

originally saved the game state.

7. Click the Back button ( ) in the emulator window to navigate to the home page that contains

the splash screen. Then, click the Back button again to exit the application and display the Quick

Launch menu.

8. Now, restart the application from the Quick Launch menu. To do this, click the arrow button to

“All Applications.”

Figure 39

Accessing “All Applications” in the Quick Launch menu

9. In the list of installed applications, click the entry for WindowsPhonePuzzle to start the

application once again.

Figure 40

Launching the application from the Quick Launch menu


Page | 69

Note: Visual Studio detaches the debugger whenever you exit the application. The application

image remains loaded in the emulator and you can restart it. Note, however, that when you do

this the application no longer runs under the debugger.

10. Click START to begin a new game and then, in the game page, click Load to restore the

previously saved state. Verify that the board pattern matches the one saved before you exited

the application demonstrating that isolated storage is preserved even after you exit the

application.

11. Click Clear to erase the saved state from Isolated Storage.

12. Now, click Load once again and notice that you receive the same error message that you saw

initially, indicating that you have successfully cleared the saved state.

Summary

This lab took you through the development of a Silverlight for Windows Phone application using

Microsoft Visual Studio 2010 Express for Windows Phone. During the course of the lab, you created a

user interface using Extensible Application Markup Language (XAML) and saw how to program the

application logic and add code to respond to input events. You learned how Windows Phone

applications process multi-touch input to manipulate user interface elements and how to enhance the

user experience by applying animation effects. Finally, you explored the use of isolated storage to

persist the state of your application.