Your First WP7 App

Hands-On Lab
Building Your First Windows Phone 7 Application

Lab version: Last updated: 1.0.0 12/8/2010
Building Your First Windows Phone 7 Application Hands-on Lab
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 Task 5 Verification ............................................................................................................................ 57
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 Task 3 Verification ............................................................................................................................ 66
SUMMARY .................................................................................................................................................. 69
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://developer.windowsphone.com
Page | 3
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 | 4
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: Page | 5
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 | 6
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 | 7
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 App.xaml / App.xaml.cs Description Defines the entry point of the application, initializes application-scoped resources, and displays the application user interface Defines a page with the user interface of the application
MainPage.xaml / MainPage.xaml.cs ApplicationIcon.png
An image file with an icon that represents the application icon in the phones application list An image file with an icon that represents the application icon in the start screen
Background.png
Page | 8
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. An application manifest file required to generate the application package Contains the name and version metadata that is embedded into the generated assembly A manifest file that includes specific metadata related to a Windows Phone Silverlight application, including specific features available only for Silverlight for Windows Phone List of libraries (assemblies) that provide services and functionality that the application requires to work
Properties\AppManifest.xml
Properties\AssemblyInfo.cs
Properties\WMAppManifest.xml
References folder
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 applications lifetime. This includes management of the applications idle behavior and management of the applications state when it becomes active or inactive.
Page | 9
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 | 10
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 | 11
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 applications 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 codebehind file to respond to events and manipulate the objects you declared in XAML. An XMLbased declarative language is very intuitive for creating interfaces from prototype to production, especially for people with a background in Web design and technologies.
Page | 12
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 projects 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 | 13
Figure 11 Project properties window
Note: The Windows Phone project properties window allows you to modify some phonespecific 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 | 14
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 | 15
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 | 16
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 | 17
Figure 16 Running the application in the Windows Phone Emulator
Page | 18
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 | 19
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 | 20
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 propertylocated under Common when sorting properties by categoryto the string WINDOWS PHONE PUZZLE.
Figure 20 Configuring UI elements in the Properties window Page | 21
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 | 22
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 | 23
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
...
<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}"/>
Page | 24
</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 | 25
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 objects 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 | 26
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 | 27
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 | 28
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. Visual Studio 2010: Open Visual Studio 2010 from Start | All Programs | Microsoft Visual 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 Ex2CreatingThePuzzleView\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 | 29
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 multipliera Page | 30
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 templatethis 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
<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="0.2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Vertical" VerticalAlignment="Stretch"> </StackPanel> <StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Row="1"> </StackPanel> </Grid>
7. Inside the first StackPanel elementassigned by default to the top row (row 0) of the LayoutRoot gridinsert the following (highlighted) XAML markup. XAML
... <Grid x:Name="LayoutRoot" Background="Transparent"> ... <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"> </StackPanel> </Grid> ...
Page | 31
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
... <Grid x:Name="LayoutRoot" Background="Transparent"> ... <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/> </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
... <Grid x:Name="LayoutRoot" Background="Transparent">
Page | 32
... <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"> <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 puzzles 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 | 33
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 | 34
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 applications resources, and creating handlers for events from the user interface. 1. Add the class that contains the games 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 games 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 | 35
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() { InitializeComponent(); } }
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 partial class PuzzlePage : PhoneApplicationPage { ... public Stream ImageStream { get { return this.imageStream; } set { this.imageStream = value; BitmapImage bitmap = new BitmapImage(); bitmap.SetSource(value); this.PreviewImage.Source = bitmap;
Page | 36
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 phones 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 partial class PuzzlePage : PhoneApplicationPage { ... public PuzzlePage() { InitializeComponent(); SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape; // Puzzle Game
Page | 37
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 logicencapsulated 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 | 38
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; 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; if (nx < totalPieces - 1) { this.GameContainer.Children.Add(this.puzzlePieces[nx]); } } } // Retrieve image
Page | 39
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 | 40
(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 resetto display the original image and solve the puzzleand 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 | 41
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 | 42
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 | 43
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#
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 private private private long lastTapTicks; int movingPieceId = -1; int movingPieceDirection; 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 | 44
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 | 45
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 games logic to determine whether it can be movedfor 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. (Code Snippet YourFirstWP7App Ex 2 Task 3 Step 6 PhoneApplicationPage_ManipulationDelta event handler) 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];
Page | 46
// 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 | 47
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 boundariesa 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. (Code Snippet YourFirstWP7App Ex 2 Task 3 Step 7 PhoneApplicationPage_ManipulationCompleted event handler) 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);
Page | 48
} else { // restore piece 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 | 49
Figure 31 Properties window showing the manipulation event handlers
Page | 50
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 | 51
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 | 52
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 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 pages 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">
Page | 53
<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> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 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"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CongratsBorder" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Childre n)[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>
Page | 54
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
... <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 ( behind file for this page.
) to open the codePage | 55
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(); 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. (Code Snippet YourFirstWP7App Ex 2 Task 4 Step 6 ResetWinTransition animation) 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(); }; ... }
Page | 56
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.
Task 5 Verification 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 | 57
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 | 58
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. Visual Studio 2010: Open Visual Studio 2010 from Start | All Programs | Microsoft Visual 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 | 59
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 | 60
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 | 61
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> ...
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 | 62
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 | 63
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 | 64
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 | 65
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.
Task 3 Verification 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 | 66
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 | 67
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 | 68
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.
Page | 69

Your First WP7 App

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Your First WP7 App

Uploaded by

Copyright:

Available Formats

Hands-On Lab

Building Your First Windows Phone 7 Application

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Using the Code Snippets

Building Your First Windows Phone 7 Application Hands-on Lab

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

Building Your First Windows Phone 7 Application Hands-on Lab

Estimated time to complete this lab: 60 minutes.

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 6 Solution Explorer showing the WindowsPhonePuzzle application

The WindowsPhonePuzzle project contains the following items:

MainPage.xaml / MainPage.xaml.cs ApplicationIcon.png

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 8 Application code-behind file showing global event handlers

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 10 Solution Explorer showing the assemblies referenced by the project

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 11 Project properties window

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 12 Building the application in Visual Studio

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 14 Choosing the target device to deploy the application

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 15 Deploying an application image to the Windows Phone Emulator

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 16 Running the application in the Windows Phone Emulator

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 17 Ending the debugging session

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 18 Solution Explorer showing the new Assets folder

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 19 Image assets embedded as resources in the application package

Figure 20 Configuring UI elements in the Properties window Page | 21

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 21 Adding a new page to the project

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 22 Splash screen for the application running in the emulator

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 23 Unhandled Exception error page

Exercise 2: Creating the Puzzle Board in Visual Studio

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 24 Adding a new page to the project

Figure 25 Configuring the layout of the container grid

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 26 Windows Phone Puzzle application user interface

Building Your First Windows Phone 7 Application Hands-on Lab

Figure 27 Solution Explorer showing the added project file