building your first windows phone 7 applicationaz12722.vo.msecnd.net/.../yourfirstwp7app.docx ·...

Hands-On LabBuilding Your First Windows Phone 7 ApplicationLab version: 1.0.0

Last updated: 5/20/2023

Page | 1

©2011 Microsoft Corporation. All rights reserved.

http://www.microsoft.com/info/cpyright.mspx

CONTENTS

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

EXERCISE 1: CREATING WINDOWS PHONE APPLICATIONS WITH MICROSOFT VISUAL STUDIO 2010 EXPRESS FOR WINDOWS PHONE.................................................................................................5

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

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

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

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

Task 5 – Verifying...............................................................................................................................18

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

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

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

Task 4 – Creating Animation Effects..................................................................................................41

Task 5 – Verifying...............................................................................................................................45

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

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

Task 3 – Verifying...............................................................................................................................51

SUMMARY................................................................................................................................................ 55

Page | 2



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://go.microsoft.com/?linkid=9772716

Page | 3



http://go.microsoft.com/?linkid=9772716

http://silverlight.net/learn/

Exercises

This hands-on lab comprises of 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.

Page | 4



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. Alternatively, if you are using Visual Studio 2010, open Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.

2. In the File menu, choose New 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.

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



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 1Solution Explorer showing the WindowsPhonePuzzle application

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

Page | 6



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.

Figure 2Default 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.

Page | 7



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.

Note: The Application class, generated by the Silverlight for Windows Phone application template, also includes handlers for the Launching and Closing events, among others.

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.

Figure 3XAML designer showing the main user interface of the application

Page | 8



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.

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

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

Page | 9



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.

Visual Studio 2010 Express for Windows Phone: Press the SHIFT + F6 key combination to compile the projects in the solution.

Visual Studio 2010: Press CTRL + SHIFT + B to compile the projects in the solution.

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

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

Page | 10



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 6Choosing 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 | 11



Figure 7Deploying 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 | 12



Figure 8Running the application in the Windows Phone Emulator

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.

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

Page | 13



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.

Figure 9Solution 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. Open in Solution Explorer, the file MainPage.xaml, this is the main page of the application.

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

Page | 14



Figure 10Configuring UI elements in the Properties window

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

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

Page | 15

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

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

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.

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.

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

Page | 16



<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>

 <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}"/> </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.

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

}}

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

C#

// Code to execute on Unhandled Exceptionsprivate 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 – Verifying

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



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 11Splash 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 | 19



Figure 12Unhandled 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.

Page | 20



Exercise 2: Creating the Puzzle Board in Visual Studio

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

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

3. 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 13Configuring the layout of the container grid

Page | 21



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 multiplier of 1 is assumed when left unspecified. Thus, in the definition above, the first row occupies 1/6th of the available space.

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

5. Immediately below the RowDefinitions section, insert two StackPanel (and its relevant children) container elements as shown (highlighted) below, one for each row in the layout.

XAML

<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="0.2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>

<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 Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1"> <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/>

Page | 22



</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 (inside the second StackPanel) 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.

6. To complete the contents of the lower StackPanel, insert the following (highlighted) XAML immediately below the markup inserted in the previous step.

XAML

...<Grid x:Name="LayoutRoot" Background="Transparent"> ... <StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1"> <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">

Page | 23



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

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

Page | 24



Figure 14Windows Phone Puzzle application user interface

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

Page | 25



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

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.

C#

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.

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() { InitializeComponent(); }}

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

C#

public partial class PuzzlePage : PhoneApplicationPage{ ... public Stream ImageStream

Page | 26



{ get { return this.imageStream; }

set { this.imageStream = value;

BitmapImage bitmap = new BitmapImage(); bitmap.SetSource(value); this.PreviewImage.Source = bitmap;

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() { InitializeComponent(); }}

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.

C#

public partial class PuzzlePage : PhoneApplicationPage

Page | 27



{ ... public PuzzlePage() { InitializeComponent();

SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

// Puzzle Game 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.TapToContinueTextBlock.Opacity = 1; this.StatusPanel.Visibility = Visibility.Visible; this.TotalMovesTextBlock.Text = this.game.TotalMoves.ToString(); };

this.game.PieceUpdated += delegate(object sender, PieceUpdatedEventArgs args) { int pieceSize = ImageSize / this.game.ColsAndRows; 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.TotalMovesTextBlock.Text = this.game.TotalMoves.ToString(); };

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.

Page | 28



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.

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

C#

private void InitBoard(){ int totalPieces = this.game.ColsAndRows * this.game.ColsAndRows; int pieceSize = ImageSize / 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;

Page | 29



if (nx < totalPieces - 1) { this.GameContainer.Children.Add(this.puzzlePieces[nx]); } } }

// Retrieve image 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.

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

Page | 30



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.

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.

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.

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

Page | 31



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.

Figure 15Puzzle 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 | 32



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.

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;

private long lastTapTicks; private int movingPieceId = -1; private int movingPieceDirection; private double movingPieceStartingPosition;

public PuzzlePage() { InitializeComponent(); ...}

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



Figure 16Creating 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.

C#

private void PhoneApplicationPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e){ if (this.game.IsPlaying && e.ManipulationContainer is Image && e.ManipulationContainer.GetValue(FrameworkElement.NameProperty).ToString().StartsWith("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) { int direction = this.game.CanMovePiece(i);

Page | 34



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.

C#

private void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e){ if (this.movingPieceId > -1) { int pieceSize = ImageSize / this.game.ColsAndRows; Canvas movingPiece = this.puzzlePieces[this.movingPieceId];

// validate direction DependencyProperty axisProperty; double normalizedValue;

Page | 35



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); }}

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

Page | 36



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.

C#

private void PhoneApplicationPage_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e){ if (this.movingPieceId > -1) { int pieceSize = ImageSize / this.game.ColsAndRows; 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)) - this.movingPieceStartingPosition);

// did it get halfway across? if (diff > minRequiredDisplacement) { // move piece this.game.MovePiece(this.movingPieceId); } else { // restore piece

Page | 37



this.AnimatePiece(piece, axisProperty, this.movingPieceStartingPosition); } }

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



Figure 17Properties window showing the manipulation event handlers

Page | 39



Figure 18XAML 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 | 40



Figure 19Solving 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 properties between two consecutive key frames to generate intervening frames and provide a smooth transition.

Page | 41



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 x:Name="LayoutRoot" Background="Transparent"> </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

...<phone:PhoneApplicationPage.Resources> <Storyboard x:Name="WinTransition"> <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"/>

Page | 42



</DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[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"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CongratsBorder" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="-1"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="00:00:01.7000000" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CongratsBorder" Storyboard.TargetProperty="(UIElement.Opacity)"> <EasingDoubleKeyFrame KeyTime="00:00:01.2000000" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:01.3000000" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:01.4000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard>

</phone:PhoneApplicationPage.Resources>

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.

Page | 43



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

...<phone:PhoneApplicationPage.Resources> <Storyboard x:Name="WinTransition"> ... </Storyboard> <Storyboard x:Name="ResetWinTransition"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CongratsBorder" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviewImage" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.20000000298023224"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="GameContainer" Storyboard.TargetProperty="(UIElement.Opacity)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard></phone:PhoneApplicationPage.Resources>...

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.

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.

Page | 44



C#

public PuzzlePage(){ ... this.game.GameOver += delegate { this.WinTransition.Begin(); this.TapToContinueTextBlock.Opacity = 1; this.StatusPanel.Visibility = Visibility.Visible; this.TotalMovesTextBlock.Text = this.game.TotalMoves.ToString(); }; ...}

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.

C#

public PuzzlePage(){ ... this.game.GameStarted += delegate { this.ResetWinTransition.Begin(); this.StatusPanel.Visibility = Visibility.Visible; this.TapToContinueTextBlock.Opacity = 0; this.TotalMovesTextBlock.Text = this.game.TotalMoves.ToString(); }; ...}

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.


Page | 45



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 and then tap the screen 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.

Figure 20Solved puzzle showing the congratulatory message

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

Page | 46



Page | 47



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

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

2. 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 and click OK

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.

3. 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 and then click Add

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.

Page | 48



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

...<Grid x:Name="LayoutRoot" Background="Transparent"> <StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1"> <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>...

Page | 49



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.

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 and then find the Click event in this list and type LoadButton_Click in the text box located next to this event. After that, 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:

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:

C#

Page | 50



private void SaveButton_Click(object sender, RoutedEventArgs e){ // save game state PuzzleState gameState = this.game.GetState(); IsolatedStorageHelper.SaveObject("PuzzleState", gameState);}

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:

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:

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

Page | 51



in isolated storage. Objects are stored in serialized format using the DataContractJsonSerializer provided in the System.ServiceModel.Web assembly, which 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:

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:

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, then click START, and tap the screen to begin a new game.

Page | 52



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 21Load 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 | 53



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 22Accessing “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 23Launching the application from the Quick Launch menu

Page | 54



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.

Page | 55



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.

Page | 56



building your first windows phone 7 applicationaz12722.vo.msecnd.net/.../yourfirstwp7app.docx ·...

Documents