hello windows phoneaz12722.vo.msecnd.net/.../labs/hellophonewp7lab1-2-0/hellophone.docx · web...

Hands-On LabHello Windows PhoneLab version: 1.1.0

Last updated: 5/15/2023

Page | 1

©2011 Microsoft Corporation. All rights reserved.

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

CONTENTS

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

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

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

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

Task 3 – Designing the User Interface................................................................................................11

Task 4 – Handling Events from the User Interface.............................................................................14

Task 5 – Verifying the Application.....................................................................................................16

EXERCISE 2: USING EXPRESSION BLEND TO DESIGN THE UX OF YOUR WINDOWS PHONE APPLICATION.......................................................................................................................................... 20

Task 1 – Creating a Custom Button in Expression Blend....................................................................20

Task 2 – Adding Visual States to the Custom Control........................................................................33

Task 3 – Creating an Animation for the Banner Text.........................................................................36

Task 4 – Verifying the Application.....................................................................................................46

SUMMARY................................................................................................................................................ 48

Page | 2



Overview

This lab aims to present the classic “Hello World” application, introducing you to the tools and procedures required to build and test Silverlight for Windows Phone applications. The Windows Phone Application Platform enables:

Awesome applications and games. Use Silverlight and XNA frameworks to craft interactive, compelling, high-quality applications and games for the Windows Phone 7.

Fast, high quality, and feature-rich applications. The combination of Visual Studio 2010 and Expression Blend with standardized Windows Phone 7 hardware specifications means more time is available for you to make your vision real on every device.

Bigger opportunities. Better partnerships. Build exciting applications and games with your current skills and tools for Windows Phone 7, and reach customers no matter what device they use. Windows Phone Marketplace takes care of sales and distribution so you don’t have to. Code and collect!

During the course of the lab, you will see how to use Microsoft Visual Studio 2010 Express for Windows Phone and Expression Blend to build and design your Windows Phone applications. Visual Studio provides an environment oriented towards application developers whereas Expression Blend is more suited to user experience (UX) designers. The tools complement each other and enable extensive designer/developer collaboration.

This lab demonstrates a typical development scenario, where you initially create application logic and lay out pages and controls for your Windows Phone application in Visual Studio, and then design the user experience using Expression Blend by applying styles and animations to pages and controls. In this lab, you learn about the structure of a Windows Phone application and find out how to use Extensible Application Markup Language (XAML) to create the user interface (UI) for your application. XAML is a declarative language; it's the primary format for declaring a Silverlight UI and the elements in that UI. Finally, you learn how to deploy and debug your Windows Phone application on the Windows Phone Emulator.

Objectives

The audience for this lab is developers who have some familiarity with Microsoft tools, such as Visual Studio, and is 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

Page | 3



you enrich your Silverlight skills by first reviewing some Silverlight labs that can be found at http:// silverlight.net/learn/ . Furthermore, if you are unfamiliar with Visual Studio as a working environment, we recommend that you start by getting to know this environment with the help of the documentation at http://msdn.microsoft.com/en-us/library/dd831853.aspx.

In this hands-on lab, you will:

Become familiar with the Windows Phone SDK 7.1: 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.

Use Microsoft Expression Blend for Windows Phone to enhance the user experience of your application by applying styles and animations.

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

Microsoft Expression Blend for Windows Phone or Microsoft Expression Blend 4 with Microsoft Expression Blend Add-In for Windows Phone

Windows Phone SDK 7.1

Note: All of these Tools can be downloaded together in a single package from http://go.microsoft.com/?linkid=9772716

Exercises

This hands-on lab includes the following exercises:

1. Creating Windows Phone Applications with Microsoft Visual Studio 2010 Express for Windows Phone

2. Using Expression Blend to Design the UX for your Windows Phone Application

Page | 4



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

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

http://silverlight.net/learn/

Estimated time to complete this lab: 45 minutes.

Page | 5



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 “Hello World” Silverlight for Windows Phone application. You will learn how to use the Windows Phone SDK 7.1 including the free Microsoft Visual Studio 2010 Express for Windows Phone IDE, and the Windows Phone Emulator.

During the exercise, you will create a new Silverlight for Windows Phone project. You start with the very basic elements of any Windows Phone application, adding basic button and text handling to the default Windows Phone project template. Since this is a Silverlight for Windows Phone application, you need to follow the Silverlight programming model and define your user interface using XAML. Although it is possible to develop an XAML-based UI using any code, it is much easier to express yourself and take advantage of good and easy tooling when you work with XAML.

To build user interfaces for Windows Phone using XAML, you edit the XAML of the main page. We will add three elements to the page: a text box, a button, and a text block. These Silverlight controls have been ported to work in the Silverlight for Windows Phone runtime environment. Once completed, the application allows you to enter a text message in the text box and then click the button to display the text you entered in the text block.

Finally, once the code is ready, you 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 value of the program variables.

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 SDK 7.1. 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 Visual Studio and create a new project using the Windows Phone Application template located under the Silverlight for Windows Phone category. Set the project’s name to

Page | 6



HelloPhone and its location to Ex1-CreatingWP7AppsWithVisualStudio in the Source folder of the lab. Change the solution name to Begin.

Figure 1Creating a new Windows Phone application project in Microsoft Visual Studio 2010 Express for Windows Phone

Page | 7



2. In the Solution Explorer, review the structure of the solution generated by the Windows Phone Application template.

Figure 2Solution Explorer showing the HelloPhone application

The HelloPhone project contains the following items:

Item Description

App.xaml / App.xaml.cs Defines the entry point of the application, initializes application-scoped resources, and displays the application user interface

MainPage.xaml / MainPage.xaml.cs

Defines a page with the user interface of the application

ApplicationIcon.png An image file with an icon that represents the application icon in the phone’s application list

Background.png An image file with an icon that represents the application icon in the start screen

SplashScreenImage.jpg This is the image that will first be displayed when the application launches. The splash screen gives the user immediate feedback that the application is launching and will remain displayed until the navigation to the first page has been completed. Your splash screen can look similar to your first page in order to give the appearance that the application is loading quickly.

Properties\AppManifest.xml An application manifest file required to generate the application package

Page | 8



Properties\AssemblyInfo.cs Contains the name and version metadata that is embedded into the generated assembly

Properties\WMAppManifest.xml

A manifest file that includes specific metadata related to a Windows Phone Silverlight application, including specific features available only for Silverlight for Windows Phone

References folder A list of libraries (assemblies) that provide services and functionality that the application requires to work

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.

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

The RootFrame property in the Application class identifies the starting page of the application. All Windows Phone applications have a single top-level container element whose data type is PhoneApplicationFrame. The frame hosts one or more PhoneApplicationPage elements that present content for the application. It also handles navigation between pages.

Note: The Application class, generated by the Silverlight for Windows Phone application template, also 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.

4. Note that a Windows Phone project’s Properties window differs from the common project properties window. The window reflects information contained in the application’s WMAppManifest.xml file, and any changes done through the properties dialog are represented in the file and vice versa.

Page | 9



Figure 3Project Properties window

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. Build the project created in the previous task. The project should compile without error.

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

Page | 10



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

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

4. Once it is ready, the emulator shows the Start page and shortly thereafter, your application appears in the emulator window.

Page | 11



Figure 5Running the application in the Windows Phone Emulator

Frame Rate Counters

Windows Phone Emulator offers frame rate counters to monitor the performance of your application while you are developing it. The frame rate counters are enabled by default in the App constructor when a debugger is attached.

You can enable or disable the frame rate counters in your code. When you create a Windows Phone application project in Visual Studio, the code to enable and disable the frame rate counters is added by default. Check the following link for more information: http://msdn.microsoft.com/en-us/library/gg588380(v=vs.92).aspx

Until you create the user interface and program the application logic, there is very little that you can do with the application at this stage.

Page | 12



http://msdn.microsoft.com/en-us/library/gg588380(v=vs.92).aspx

Task 3 – Designing the User Interface

In this task, you create the UI elements for the HelloPhone application. The application is very simple. When completed, the application UI will contain a caption, a textbox, and a button. To use the application, you enter some text into the textbox and then, when you click the button, the application displays a banner with the text that you typed. It will look something like the following figure.

Figure 6The application’s user interface

1. In Solution Explorer, double-click MainPage.xaml to open this file in the designer.

Note: The designer provides two separate views to edit XAML files, Design and XAML view. In Design mode, you have an interactive canvas where you drag and drop controls from the toolbox, as well as select, resize, move, and set properties for existing controls on the designer surface. In XAML mode, you have a markup editor that lets you edit the XAML in the page.

Page | 13



Tabs on the designer window let you select either mode. You also have a split mode, with the editor window showing both views simultaneously. In split mode, you can use the Expand Pane / Collapse Pane button to maximize the viewing area of the current mode.

2. In the XAML markup generated by the default Windows Phone application template, locate the Grid container element named LayoutRoot. Change its RowDefinition property using the code below:

XAML

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

</Grid></phone:PhoneApplicationPage>

Note: A Grid is a layout element that acts as a container for other controls. Its main purpose is to position and arrange its child controls. Several layout controls exist to provide alternative layout behaviors:

Canvas: Defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area.

Grid: Defines a flexible grid area consisting of columns and rows.

StackPanel: Arranges child elements into a single line that can be oriented horizontally or vertically.

For more information, see Silverlight Layout System.

3. Locate the Grid element named TitlePanel. Set the Text property of the first TextBlock element inside the inner Grid to the string “Windows Phone 7”. Similarly, set the Text property of the second TextBlock element to the string “Hello Phone”.

4. Now, locate the Grid element named ContentPanel, which should currently be empty, and paste the following (blue-highlighted) XAML markup inside this element.

Page | 14



http://msdn.microsoft.com/en-us/library/cc645025(VS.95).aspx

XAML

...<Grid x:Name="LayoutRoot" Background="Transparent"> ...  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBox Grid.Column="0" Name="MessageTextBox" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="20,20,10,20"/> <Button Grid.Column="1" Name="ClickMeButton" Content="Click Me" HorizontalAlignment="Right" Padding="4" Margin="10,20,20,20" /> </Grid>

</Grid>...

5. To complete the design of the page, add a third row to contain the banner with the message entered by the user. To create this row, insert the following (blue-highlighted) XAML markup immediately before the end tag of the outer grid.

XAML

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

<Grid Grid.Row="2"> <TextBlock Name="BannerTextBlock" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="#FFFF9A00" HorizontalAlignment="Stretch" TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" /> </Grid></Grid>...

Task 4 – Handling Events from the User Interface

In this task, you define the event handlers that respond to actions from the user interface, namely the button click event. You define event handlers using code in the code-behind file of the page.

1. Ensure that the mode of the designer is set to Design.

Page | 15

2. Click the button labeled “Click Me” and examine its properties. Click the Events tab to display and locate the Click event in this list and then type ClickMeButton_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.

Figure 7Creating an event handler for the button

Figure 8XAML view showing the new handler bound to the Click event

Page | 16



Note: There is an alternative mechanism to create the event handler. In Visual Studio, you can double-click a control in the designer to create a handler for its default event, which happens to be the Click event for button controls.

3. The method implementation (which is an empty method right now) is in the MainPage.xaml.cs file. Insert the following code inside the body of the ClickMeButton_Click method.

C#

private void ClickMeButton_Click(object sender, RoutedEventArgs e){ BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty;}

Note: The code reads the text entered by the user from the text box and then sets the banner with this text.

Task 5 – Verifying the Application

In this task, you build, deploy, and run the application in the Windows Phone Emulator to test that it works as expected. In addition, you set a breakpoint, use the debugger to step through the source code, and examine the value of variables for a brief glimpse at how you can use Visual Studio to debug applications running in the emulator.

1. If necessary, re-open the code-behind file for MainPage.xaml. To do this, right-click this file in Solution Explorer and then select View Code.

2. Define a breakpoint to stop execution at the event handler for the “Click Me” button.

3. Press F5 to build and deploy the application to the Windows Phone Emulator and start the debugging session. Wait for the application to launch and display its main page.

Note: If you kept the emulator running after you used it earlier in the lab, launching the application should only take a couple of seconds; if you closed the emulator, it might take longer.

4. In the emulator window, tap the text box to give it focus. This will cause the Software Input Panel (SIP) to open automatically. You can type a message using the panel or press the PAGEUP key to use your desktop keyboard instead. After entering some text into the text box, click the button next to it.

Page | 17



Figure 9Typing in the emulator

5. Back in Visual Studio, notice that execution stops at the breakpoint that you set previously and that the next statement to execute appears highlighted in yellow.

Page | 18



Figure 10Stepping through code in the debugger

6. You can now examine any of the objects currently in scope just as in any debugging session. If you examine the MessageTextBox.Text property, it should contain the value you entered in step 4.

7. Press F10 to single-step over the current statement and set the text of the banner to the contents of the text box. Display the datatip for the BannerTextBlock.Text property to confirm that its value now matches that of the text box.

Note: When you use F10, you instruct the debugger to step over the current statement. You can also use F11 to step into the current statement. In that case, if that statement involves a method call, the debugger steps into the target method to allow you debug it.

8. Press F5 to resume execution of the application. Switch back to the Windows Phone Emulator. It should now display the typed in text in the prompt beneath the text box.

Page | 19



Figure 11HelloPhone application running in the Windows Phone Emulator

9. Click the Back button in the emulator to navigate to the previous page. Notice that when you do this, the debugging session ends and the emulator displays its start menu because you are navigating away from the first (and only) page of the application and there are no previous applications currently active.

Note: Tip: To resume debugging after the current session ends, press F5 to launch the application again and re-attach the debugger. Note, however, that this action starts the application again and the previous state will no longer be available.

Closing the emulator stops the application and detaches the debugger. When you do this, the Visual Studio debugger detaches and display a message indicating that it has lost connection to the device

Page | 20



Exercise 2: Using Expression Blend to Design the UX of your Windows Phone Application

In the same way that you use Expression Blend to design Rich Internet Applications for the desktop browser, you can also design creative and unique Silverlight-based applications on a Windows Phone. Expression Blend for Windows Phone allows you to create XAML-based interfaces for Windows Phone applications, whose behaviors can then be implemented by developers in Visual Studio.

Task 1 – Creating a Custom Button in Expression Blend

In general, Silverlight controls separate their logic from their visual appearance using templates. A ControlTemplate specifies the visual structure and visual behavior of a control. You can customize the appearance of most controls by modifying their default ControlTemplate settings. This allows you to change the appearance of the control without changing its functionality. For example, you can make the buttons in your application round rather than the default square shape, but the button will still raise the Click event.

In this task, you open the Visual Studio project that you created in the previous exercise in Expression Blend and replace the ControlTemplate of the button to alter its look and feel. Because you create a ControlTemplate in XAML, you can change a control's appearance without writing any code.

Page | 21



Figure 12Changing the look and feel of controls

1. If not already open, launch Visual Studio.

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 HelloPhone\Ex2-WP7AppUXDesignWithBlend\Begin in the Source folder of the lab.

3. Now, open the current solution in Expression Blend. To do this from Visual Studio, right-click MainPage.xaml in Solution Explorer, and then select Open in Expression Blend.

If a warning from a security risk is displayed, click Yes to dismiss it.

Figure 13Opening the solution with Expression Blend

Page | 22



4. In Expression Blend, make certain that the MainPage.xaml is open in the designer window—if necessary, double-click the file in the Projects panel to open it—and that the current workspace is set to Design. To view the current workspace, select Workspaces in the Window menu and ensure that the Design option is checked.

Figure 14Selecting the current workspace in Expression Blend

Note: The workspace in Expression Blend consists of all the visual interface elements. These include the artboard, panels, tools panel, workspace configurations, authoring views, and menus.

5. In the designer window, right-click the “Click Me” button, point to Edit Template and select Create Empty.

6. In the Create ControlTemplate Resource dialog, set the Name to FancyButton, keep the current value of "This document" in the Define in option, and click OK.

Page | 23



Figure 15Creating an empty control template for the button

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

The dialog shown above gives you the option to define the control template at the global Application scope, in which case it is stored in App.xaml and you can reuse the template in other pages of the application, or store it in This document so that you can use it only within the same page.

7. If the Objects and Timeline panel is not visible, select Window and then Objects and Timeline to show this panel. If necessary, you can reset the workspace to its default state by selecting Window | Reset Current Workspace.

Note: When you create a new template, Expression Blend enters a mode in which you can view and edit the new template. In the Objects and Timeline panel, the word Template at the root of the new element tree indicates the current scope in which you are editing.

Page | 24



8. Change the current root layout container of the template. In the Objects and Timeline panel, right-click the child Grid element inside Template, point to Change Layout Type, and select Border.

Figure 16Changing the root layout container of the template

Note: When you create a ControlTemplate, you combine FrameworkElement objects to build a single control. A ControlTemplate must have only one FrameworkElement as its root element. The root element usually contains other FrameworkElement objects. The combination of objects makes up the control's visual structure.

Page | 25



9. With the Border element still selected in the Objects and Timeline panel, switch to the Properties panel and under Appearance, set the value of the BorderThickness property to 2 for each of the sides and then set the value of the CornerRadius property to 15.

Figure 17Configuring the appearance of the border element

10. Now, in the Brushes section, select the Background property and pick the Gradient brush option. Then, click the left gradient stop to select it and set its value to a light gray color, for example #FFADADAD. Next, select the right gradient stop and set its value to a dark gray color, for example #FF0A0A0A.

Page | 26



Figure 18Configuring a gradient brush for the button background

11. After that, in the Brushes section, select the BorderBrush property, choose a Solid color brush and choose a light gray color, for example #FFC0C0C0.

Page | 27



Figure 19Configuring a solid brush for the button border

12. Once you have created a background for your button, the next step is adding a caption. First, ensure that the Border element remains selected in the Objects and Timeline panel.

13. Next, switch to the Assets panel, select the Controls category, and scroll down the list displayed to the right of the category to locate the TextBlock control. Then, double-click the item in the list to insert an instance of this control nested inside the Border element of the template.

Page | 28



Figure 20Inserting a TextBlock control from the toolbox

Figure 21Objects and Timeline panel showing the new TextBlock nested inside the Border element

14. Now, in the Tools panel, pick the Selection tool or press V to restore selection mode.

Page | 29



Note: After inserting the TextBlock, the designer remains in insertion mode and you can continue adding other TextBlock elements until you exit this mode.

15. In the Objects and Timeline panel, select the newly added TextBlock element. Then, in the Properties panel, expand the Brushes category and set the Foreground brush to a light color, for example #FFFFFFFF.

Figure 22Setting the foreground color of the button

16. Next, expand the Layout category and set the value of the HorizontalAlignment and VerticalAlignment properties to Center. Then, set the value of the Margin property to 10 for the left and right sides, and to 4 for the top and bottom sides.

Page | 30



Figure 23Configuring the margin and alignment properties of the caption

17. Link the Text property of the TextBox control in the template to the Content property of the button templated control. To do this:

◦ Expand the Common Properties category

◦ Click Advanced property options—indicated by a square icon next to the value of the property

◦ Select Template Binding to display a list of properties in the templated control that can be bound to this property

◦ Choose the Content property from this list

Notice that the value of the Text property changes to “Click Me”—the value currently set for the Content property of the button—and that the property is now shown with a yellow outline to indicate that it is template-bound.

Page | 31



Figure 24Binding the Text property of the template

Note: Template binding links the value of a property in a control template to be the value of some other exposed property on the templated control allowing you to design a customized control, but still enable some changes when you include the control in your application.

18. Press CTRL + S to save the updated file.

You are now ready to test the new custom button. Expression Blend for Windows Phone allows you to run your Windows Phone applications either on an actual phone device, or on an emulator. Notice that if you open the Device panel (from Window menu), you can choose where to preview your application. By default, Expression Blend will use the Windows Phone Emulator to deploy and run the applications.

Page | 32



Figure 25Setting the device to preview the application

19. Now press F5 to build and run the application. Enter some text and then click the button.

Figure 26Launching the application from Expression Blend

Notice that even though the click triggers the expected behavior, there is no visual cue to indicate when the button has focus or when it is pressed. In the following task, you will update the template to change the appearance of the button based on its state.

Task 2 – Adding Visual States to the Custom Control

In this task, you will update the control template to add different visual states that allow the button to show an outline when it is focused, and to shift its position on the page to indicate when it is pressed.

1. In the Objects and Timeline panel, select the Border control.

2. Now, switch to the States panel and examine the visual states available for the button control.Page | 33



Figure 27States panel showing the Base state selected

Note: The States panel shows all the available visual states of the control. The Base state defines elements that are common to every state. In this state, you customize the template to define the basic appearance of the control. Then, for each of the other states, you change the template in such a way that it provides a visual cue of the corresponding state, for example, in the Focused state, by displaying a border around the control.

3. Under the FocusStates category, select the Unfocused state to turn on recording for the state triggered when the button does not have the focus.

Any changes to the template while in this mode apply only to that particular state.

Page | 34



Figure 28State recording in Expression Blend

Note: Several changes occur when you select a state other than normal. First, a red circle next to the selected state’s label indicates that it is currently active. Next, a red outline appears around the design area. Finally, a caption in the upper left corner of the design area indicates that state recording is on. In this mode, any changes to the elements of the template are recorded and stored in the XAML document. At runtime, these changes are applied to the base template when that state becomes active.

4. To hide the border around the button when it loses focus:

◦ Select Border in the Objects and Timeline panel

◦ In the Properties panel, expand the Brushes category and select the BorderBrush property

◦ Click the Show advanced properties icon and set the Opacity property of the brush to 0.

Page | 35



Figure 29Making the border transparent for the Unfocused state

5. Go back to the States panel and select the Pressed state in the CommonStates category to turn on recording for the state triggered when the mouse is clicked.

6. In the Properties panel, expand the Transform category and select the Translate transform. Set the X and Y values to 2.

This change produces a slight shift in the position of the button whenever it is clicked, to suggest that it is pressed down.

Page | 36



Figure 30Shifting the position of the button during the Pressed state

7. Finally, in the States panel, select the Base template to turn off recording mode.

8. Press CTRL + S to save the updated file.

9. Now that you have completed adding visual states to the custom control, you are ready to test the updated button:

◦ Press F5 to build and run the application

◦ Enter some text and then press the Tab key to change the input focus to the button

◦ Notice that, when the button has focus, a border appears around the button indicating that it is active

◦ Now, press the space bar or click the button and notice how its position shifts to indicate that it depressed

Task 3 – Creating an Animation for the Banner Text

Page | 37



Animations are based on key frames that define the start and end points of a smooth visual transition. To create an animation in Expression Blend, you create a storyboard, and in the storyboard, you set key frames on a timeline to mark property changes. For example, you could set a key frame at the 0-second mark to record the position of a rectangle on the left side of the artboard, and then set a key frame at the 1-second mark to record the position of the same rectangle on the right side of the artboard. The resulting animation would be based on the transformation that occurs on the X and Y properties of the rectangle over one second. When you run an animation storyboard, Expression Blend interpolates the property changes over the designated time period and displays the results in your application. You can animate any property that belongs to an object on the artboard in this manner, even non-visual properties.

In this task, you will create a storyboard in Expression Blend to animate the text in the banner whenever the button is pressed.

1. Switch the active workspace to the animation workspace. In the Window menu, point to Workspaces and select Animation.

Notice that this rearranges the windows in order to maximize the space available to edit the timeline.

Note: To restore a workspace to its default state, select Window | Reset Current Workspace.

2. If necessary, exit the editing scope of the button control template. To do this, click the Scope Up

button next to the FancyButton (Button Template) element in the Objects and Timeline panel to display the element tree of the page.

Note: When you edit a control template, the Objects and Timeline panel only shows the element tree for that template. To edit other elements on the page, you need to exit the current scope.

3. Now, in the Objects and Timeline panel, click New to create a storyboard. This is the button labeled with a + sign and located in the upper right corner of the panel.

Page | 38



Figure 31Objects and timeline pane in Animation mode

4. In the Create Storyboard Resource dialog, set the Name to AnimateBanner and click OK.

Figure 32Creating a new storyboard to animate the banner text

5. To test animation in the designer, you need to add some text to the banner. First, click the red circle to the left of the AnimateBanner storyboard name in the upper left corner of the panel to turn off recording temporarily—you do not want the added text to become part of the animation.

Page | 39



Figure 33Turning off recording mode

Note: When you turn off recording, any changes to elements in the page are not included in the animation.

6. Now, right-click the BannerTextBlock element on the designer surface and select Edit Text. Enter a suitable text for the banner and press ENTER.

7. Turn recording back on, by clicking the same circle as in step 5.

8. To create the key frames in the animation, first, click the BannerTextBlock element in the element tree of the Objects and Timeline panel to select it. If necessary, expand its grid parent element to display it.

9. Then, click and drag the current position of the timeline playhead to an offset of 1 second.

Page | 40



Figure 34Changing the time offset of the timeline playhead

Note: The playhead is the yellow marker located at the top of the timeline. Any changes to the elements in the page are recorded as key frames at the location of the timeline playhead.

10. Next, switch to the Properties panel, expand the Transform category, and select the Scale transform. Set the value of the X property to -1. This transform mirrors the element along its horizontal axis.

Page | 41



Figure 35Applying a scale transformation to mirror the text

11. Switch back to the timeline panel.

Notice that it contains a new key frame—indicated by a gray circle—at the chosen time offset that is the result of changing elements in the tree while timeline recording is active.

Page | 42



Figure 36Creating a new key frame in the animation storyboard

12. Now, change the timeline playhead to an offset of 2 seconds.

13. Once again, switch to the Properties panel, expand the Transform category, and select the Scale transform. Change the value of the X property back to 1 to restore the element to its original state.

Notice that a second key frame appeared in the storyboard timeline because of this change.

Figure 37Objects and Timeline panel showing the inserted key frames

Page | 43



14. To test the animation, press the Play button above the timeline.

Notice how the text in the banner rotates horizontally about its middle axis and how the movement is uniform throughout the animation cycle. In the following steps, you will apply an easing function to change the interpolation between key frames and produce a more natural animation.

Figure 38Playing the animation in the designer

15. Select the first key frame by clicking inside the gray circle icon in the timeline.

Notice that when you select a frame, the designer view updates to show the state of the UI elements as they appear in that frame, in this case, the banner text appears mirrored.

Now, in the Properties panel, under the Easing category, ensure that EasingFunction is selected, expand the drop down list to display a list of available functions, and then choose the Cubic Out function.

This particular easing function causes the transition to reduce its rate as it approaches the key frame.

Page | 44



Figure 39Applying an easing function to interpolate between key frames

Note: Key frame interpolation describes how property changes are animated in the span of time between two key frames. You can modify key frame interpolation values by applying an easing function to the transition to obtain a more realistic animation.

16. Repeat the procedure in the previous step to configure the easing function for the second key frame. This time choose the Cubic InOut function to make the transition start at a slow rate, gradually accelerate, and finally reduce its speed as it approaches the ending frame.

Page | 45



Figure 40Choosing the CubicInOut easing function

17. To test the effect of the easing functions on the animation, press Play above the timeline.

Notice how the banner starts its rotation at a high rate, then slows down as the text appears mirrored, it then picks up speed again and finally slows down once again to return to its original position.

18. So far, you have created an animation storyboard for the banner text, but it simply exists as an unused resource in the project. To play the animation, you need to trigger the storyboard in response to an event, in this case, whenever the Click Me button is pressed. To open the Click event handler for this button:

◦ Switch the active workspace back to the design workspace. In the Window menu, point to Workspaces and select Design.

◦ In the Projects Window, click the arrow ( ) next to MainPage.xaml, to display its code-behind file.

◦ Double-click MainPage.xaml.cs to open the code-behind view.

19. To update the event handler to play the animation, insert the following code snippet into the highlighted space immediately before the ending brace.

C#

private void ClickMeButton_Click(object sender, RoutedEventArgs e){ BannerTextBlock.Text = MessageTextBox.Text;

Page | 46



MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin();}

Task 4 – Verifying the Application

In this task, you run the application in the Windows Phone Emulator from Expression Blend to see the result of your changes to the user interface.

1. Press F5 to build and deploy the application to the Windows Phone Emulator. Wait for the application to launch and display its main page.

2. Enter some text into the text box.

3. Press the Tab key once and observe the border shown around the button when it receives focus.

4. Click the button to set the text of the banner and notice how it shifts its position to indicate that it is pressed.

Watch the animation of the banner text play when you click the button.

Page | 47



Figure 41Running the updated application in the Windows Phone Emulator

5. When you have completed your testing, click the Close icon in the upper right corner of the emulator window to shut it down and end the debugging session.

Note: Shutting down the emulator is recommended only if you do not intend to run the application again; otherwise, leave the emulator open and redeploy and debug the application whenever you need to test an update.

Page | 48



Summary

This lab introduces how to develop applications for the Windows Phone platform using Silverlight. By completing this hands-on lab, you became familiar with the tools required to create and test a Windows Phone application.

In this lab, you created a new Silverlight for Windows Phone application using Microsoft Visual Studio 2010 Express for Windows Phone, and then used this free tool to create the application logic and the layout of the user interface. You learned how to deploy the application to the Windows Phone emulator and how to use the debugger to set breakpoints, single-step through the program and examine the value of program variables. Finally, you saw how use Expression Blend for Windows Phone to style controls in the user interface and create animation effects.

Page | 49



hello windows phoneaz12722.vo.msecnd.net/.../labs/hellophonewp7lab1-2-0/hellophone.docx · web...

Documents