Hands-On LabWindows Phone Hello World Application

Lab version: 1.0.0

Last updated: 5/17/2023

Page | 1

CONTENTS

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

EXERCISE 1: CREATE A NEW WINDOWS PHONE APPLICATION........................................................4Task 1 – Creating a New Windows Phone 7 Application Project in Visual Studio 2010.......................4

Task 2 – Adding Controls to the Application........................................................................................7

Task 3 – Adding a New Page to the Application.................................................................................10

Task 4 – Applying Windows Phone Styles in Expression Blend..........................................................11

SUMMARY................................................................................................................................................ 20

APPENDIX................................................................................................................................................ 20Additional Resources 20

Page | 2

Overview

In this lab, you will create, test, deploy and run your first “Hello World” Silverlight application for Windows Phone. You will learn how to use the Windows Phone Developer Tools like Microsoft Visual Studio 2010 and the Windows Phone Emulator.

You will begin by creating a simple Windows Phone Silverlight application and deploy it to the Windows Phone Emulator. You will use controls to add interactions with buttons and text. The lab will also walk through basic Silverlight development concepts required to use XAML, the Silverlight user interface definition language, using Microsoft Expression Blend to apply Windows Phone style resources and behaviors.

Finally, once the code is ready, you learn how to build the application and deploy it to the Windows Phone Emulator to test it. To debug applications running in the emulator, you set up a breakpoint and use the debugger to step through the source code and examine the values of the program variables.

Objectives

In this hands-on lab, you will learn how to to create a basic Windows Phone Application with Visual Studio 2010. You will learn how to create the application, add controls and pages and create event handlers to react to user input. You will learn how to deploy the Windows Phone 7 application to the Windows Phone Emulator and set breakpoints for debugging.

Learn how to create a new Windows Phone 7 application.

See how to add controls to the page.

Learn how to add event handlers to the controls.

Learn how to add application pages to the application.

See how to navigate from page to page.

See how to set breakpoints and debug the application.

Learn how to edit the UI with Expression Blend.

Prerequisites

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

Note: See Setting Up A SharePoint and Windows Phone 7 Development Environment Module for instructions that describe how to set up the SharePoint and Windows Phone 7 developer machine.

Page | 3

Windows 7 x64 installed with all Windows Updates installed, in one of the following scenarios.

◦ Installed on a physical machine

◦ Installed on a bootable VHD

Windows Phone 7 Developer Tools

◦ http://download.microsoft.com/download/1/7/7/177D6AF8-17FA-40E7-AB53- 00B7CED31729/vm_web.exe

Windows Phone 7 Developer Tools - January 2011 Update

◦ http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32- 2DFC41917B11/WindowsPhoneDeveloperResources_en-US_Patch1.msp

Windows Phone Developer Tools Fix

◦ http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32- 2DFC41917B11/VS10-KB2486994-x86.exe

Exercise 1: Create a New Windows Phone Application

In this exercise, you will create, deploy and run a simple Windows Phone 7 application. The application will accept input from a text box. You will add a button to the application and create a button click method to copy the text property from the Text Box to the text property of a Text Block.

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

In this task, you will create a Windows Phone 7 application from the Silverlight for Windows Phone application templates.

1. Start Visual Studio 2010 by clicking Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.

2. On the Visual Studio 2010 Start Page, click New Project…

3. In the New Project dialog in the Visual C# section, select Silverlight for Windows Phone.

4. In the templates list, choose Windows Phone Application.

5. In the Name textbox, enter HelloWindowsPhone and leave the rest of the default values.

Page | 4

Figure 1 New Project Dialog for a Silverlight Windows Phone Application

6. Click OK.

7. Visual Studio opens the project in design mode ready for you to review the basic components of the project. Like other Visual Studio projects, project items are contained in the Project. The Solution HelloWindowsPhone is the container for one or more projects. In this case, you have only one project in the solution.

Page | 5

Figure 2The Solution and Project for this lab contains several related files.

8. The application template you chose is ready to run. First, we will change the Application Name and Page Title.

9. Click the TextBlock control named Page Title in the designer.

10. Right click the Textblock control and choose Properties.

11. In the Properties pane, change the Text property to hello page.

Note: The Metro Design language uses many conventions that you may not be familiar with, like using lower case characters for page names. You can learn more about Metro and design standards for Windows Phone in the UI Design and Interaction Guide: http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx

12. Click the TextBlock Application Title. The properties pane will show the properties for the TextBlock control. Change the Text property to HELLO WORLD.

13. Press enter or move to another control and you will see the text change in the designer.

14. In the HellowWindowsPhone solution, select Windows Phone 7 Emulator in the deployment location dropdown list.

15. Press F5.

16. The Windows Phone application starts in the emulator and displays the page you just edited.

Page | 6

Figure 3Windows Phone 7 Application Page

17. Click the Back button on the emulator to unload the application and return to Visual Studio.

Note: Do not close the emulator. If you do, no harm is done, but it will take longer to redeploy and run the application each time you want to test your work. If you close the emulator, Visual Studio will display an error message about losing connectivity to the emulator.

Task 2 – Adding Controls to the Application

In this task, you will add controls to the application page and write the code necessary to copy the text property from a Text Box control to a Text Block.

Page | 7

1. In Visual Studio, open the controls Toolbox by clicking View | Toolbox.

2. Drag a TextBox from the Toolbox onto the design surface and drop it near the top of the grid just below the page title.

3. Drag a Button from the Toolbox and drop it underneath the TextBox.

4. Drag a TextBlock from the Toolbox and drop it underneath the Button.

Figure 4Visual Studio 2010 adding a button

5. Double click the Button to add an OnClick event handler to the button.

6. Visual Studio adds the button1_Click event handler to the MainPage.xaml.cs file and opens the editor for you to add code. In this scenario, you add code to copy the contents of the TextBox’s Text property to the TextBlock Text property.

7. In the button1_Click method, add the following code:

C#

textBlock1.Text = textBox1.Text;

Page | 8

8. In the MainPage constructor method, add the following code immediately before the closing brace. This will initialize the TextBox and TextBlock.

C#

textBox1.Text = "Hello World";textBlock1.Text = "";

9. Click File | Save All to save your work.

10. Press F5 to run the project.

11. Click the button to copy the text from the TextBox to the TextBlock. You can test the interaction of the emulator by clicking in the TextBox and changing the text with the on screen keyboard.

Figure 5Application with button

12. Without closing the application return to Visual Studio and place the cursor in the button1_Click method on the line of code in the method.

13. Click Debug | Toggle Break Point (or press F9) to add a breakpoint to the button click method. Visual Studio will insert the breakpoint and color the line red.

Page | 9

Figure 6Set a break point

14. Return to the emulator and click the button.

15. Visual Studio breaks at the line of code where you added the breakpoint. Press F10 to step past the line or F5 to continue running your application.

16. Click the Back button on the emulator to unload the application and return to Visual Studio.

Task 3 – Adding a New Page to the Application

Windows Phone 7 applications are composed of pages that contain controls. In this task, you will add a new page to the application and add a button to the main page that will navigate to the new page. You will learn how to use the Navigation Service to transition from page to page. The Navigation Service provides a consistent interaction for the user by maintaining the order of the visited pages so that the hardware back button will return the user to the previous pages in reverse order.

1. In Visual Studio 2010, right click the HellowWindowsPhone project in the Solution Explorer and select Add | New Item…

2. In the Add New Item dialog, choose Windows Phone Portrait Page.

3. In the Name textbox, enter SecondPage.xaml.

4. Select the PageTitle control and change the Text property to page two.

5. Select the ApplicationTitle control and change the Text property to HELLO WORLD.

6. In the Solution Explorer, double click MainPage.xaml.

7. Drag a HyperlinkButton from the Toolbox onto the design surface and drop it below the TextBlock control on the main page.

8. Double click the HyperlinkButton to create a new OnClick event handler.

9. In the hyperlinkButton1_Click method add the following code:

C#

NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.RelativeOrAbsolute));

Page | 10

The code above uses the NavigationService to open the SecondPage.xaml page.

10. Press F5 to deploy and debug your application.

11. Click the HyperlinkButton and you will navigate the user to the SecondPage.xaml.

Figure 7Navigated to second application page

12. Click the emulator Back button to return to the home page.

13. Click the Back button again to unload the application and return to Visual Studio 2010.

Task 4 – Applying Windows Phone Styles in Expression Blend

So far in this lab you have not been concerned with how you application looks. In this task, you will use Microsoft Expression Blend to style your application to conform to the style guidelines for Windows Phone Applications.

1. In the Solution Explorer, right click on MainPage.xaml and choose Open in Expression Blend…

Note: If you are presented with a Security Warning, check Do not warn me again and click Yes.

Page | 11

Figure 8Expression Blend warning

2. Once MainPage.xaml is open in Expression Blend you will notice that the organization of the project is similar to Visual Studio 2010 with a few notable differences.

Figure 9Project in Expression Blend

Page | 12

3. Select the TextBox and drag it gently to the left side near the margin. Drag the Button and TextBlock to the left to organize the page in a pleasing arrangement. Finally drag the HyperlinkButton to the bottom center of the page.

4. With the HyperlinkButton still selected, locate the Content property, under Common Properties in the Properties pane.

5. Change the Content property to Go to Page Two.

6. In the Brushes section of the Properties pane, click Foreground and click Brush resources.

Figure 10Properties pane and Foreground brush picker

7. In the System Brush Resources list, select PhoneAccentBrush. The text of the HyperlinkButton will change color in the designer.

Page | 13

Figure 11Choose the PhoneAccentBrush

8. In the Objects and Timeline pane, right click textblock1 and choose Edit Style | Apply Resource | PhoneTextExtraLargeStyle.

Page | 14

Figure 12Apply the PhoneTextExtraLargeStyle

9. Resize textblock1 as needed to show the text in the box.

10. In the designer, click the Button.

11. Change the Content property to Copy Text.

12. Set the Width property to 420.

13. The finished page should look similar to the figure below.

Page | 15

Figure 13Restyled application page

14. Click the Projects tab.

15. Double click SecondPage.xaml to open it in Expression Blend.

16. In the Zoom control at the bottom of the workspace choose Fit Selection.

Figure 14Workspace zoom control

17. In the Objects and Timeline pane, click ContentPanel.

Page | 16

18. Double click the Button Control button to insert a new Button into the ContentPanel.

Figure 15Insert a button with the Button Control icon

19. Change the Button’s Content property to Return to Main Page.

20. Click the Selection tool in the toolbar and drag the Button to the middle of the page.

Figure 16Switch to selection mode

21. In the Objects and Timeline pane, right click the Button control and choose Navigate to | MainPage.

Figure 17

Page | 17

Set the NavigateTo property to the MainPage

Notice that Expression Blend adds a Navigate to Page Action behavior to the Button. This is another technique for adding navigation from page to page within an application.

Figure 18Navigate to page action behavior

You can see this association by viewing the XAML for the page. Choose XAML view from the workspace view buttons.

Figure 19The view XAML button

In the XAML view, locate the Button control markup and notice the Custom.Interaction node added by Expression Blend.

Page | 18

Figure 20The XAML view of the NavigateToPageAction behavior

22. Choose File | Save All to save your work. The pages in the Windows Phone 7 application now look similar to these.

Figure 21The completed application pages

23. Press F5 to compile and run the project. Notice that Expression Blend is able to compile the application and run the emulator.

Page | 19

24. Click the Go to Page Two link and navigate to page two.

25. Click the Return to Main Page button and you will return to the Main Page.

26. Click the hardware Back button until you return to the Home Screen and unload the application.

Summary

In this hands-on lab, you created a simple Windows Phone 7 application and deployed it to the Windows Phone 7 emulator. You added interactivity to the application with buttons and navigation. You also used Expression Blend to apply a consistent look to your application with Windows Phone style resources. Finally, you used two different techniques to add navigation to your application, one with code and another with behaviors.

Appendix

Additional Resources

If you found this lab challenging you may want to review the resources available on the Microsoft App Hub http://create.msdn.com/education for a broad introduction to Windows Phone development.

Page | 20