• Article

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.

    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.

    Figure 2

    The 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 TextBlockcontrol named Page Title in the designer.
  10. Right click the Textblockcontrol 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: https://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx

  12. Click the TextBlockApplication Title. The properties pane will show the properties for the TextBlock control. Change the Textproperty 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.

    Figure 3

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

  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 4

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

  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 5

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

    Figure 6

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

    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 7

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

    Figure 8

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

    Project in Expression Blend

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

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

    Figure 11

    Choose the PhoneAccentBrush

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

    Figure 12

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

    Figure 13

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

    Workspace zoom control

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

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

    Figure 15

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

    Switch to selection mode

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

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

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

    The view XAML button

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

    Figure 20

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

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

< previous | next >

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files

Contents