Create your first Windows Phone app in Expression Blend (Part III)

Create your first Windows Phone app in Expression Blend (Part III)

Posted by Pam on September 12th, 2011

You can create Windows Phone applications quickly and easily by using Expression Blend for Windows Phone, the WYSIWYG visual editor for creating Windows Phone 7 OS projects.

In this article, we’ll show you how to build a simple Windows Phone app that will help you become familiar with the Expression Blend for Windows Phone user interface, and the tools available for building Windows Phone apps.

This is part three of a three part series. In part one, we created the visual aspects of the app. In part two, we added the interactivity.

Part three is “extra credit,” where we’ll show you how to modify a control template to customize a button that switches between states.

Our app so far

At the end of part II, we had a fully functioning app with two buttons, one that plays Hello_Storyboard and another that plays Goodbye_Storyboard.

But wouldn’t it be nice to use one button rather than two? A single button that switches between Say hello to the penguins and Goodbye, penguins when it’s clicked?

To modify a control in Expression Blend, we add a system control (in other words, a default control with the default template and styles applied), and then edit a copy of the template to make the control look the way we want it to look.

Visual states

Interactive system controls have default visual states associated with them. A visual state is the appearance of a control based on user interaction. For example, you can modify the appearance of a button, defining different visual states for MouseOver, Pressed, Hover, or Disabled. When you modify a control template, you can also modify the appearance of the control for each of the associated visual states.

When you are in editing mode for a template, you can view the default states of the selected control in the States panel. You can modify the individual states by selecting the state, then making the changes that you want for that state, and then saving those changes by ending the state animation.

We’ll keep the basic Metro appearance (the default appearance as recommended by the User Experience Design Guidelines for Windows Phone guidelines) for our button. However, we’ll modify the Content property for our selected states so that our button switches from displaying Say hello to the penguins and Goodbye, penguins based on user interaction, in other words, the click of the button.

Add a new button

To begin, delete the two existing buttons by right-clicking each button and clicking Delete. When you delete the button, the Button control and all of its children (in this case, the behaviors) are deleted. The storyboards and audio file that were referenced by the behaviors are still a part of the project.

Now we’re ready to add the new button.

If you type “button” in the Search box in the States panel, multiple Button controls appear in the results. These buttons represent the different types of buttons available as part of the Silverlight platform.

Tip: Hover over the button in the Results list to display a description of the control.

Our app switches between two states. We could use a standard Button control. However, the ToggleButton, a button that switches between two states (such as On/Off or Checked/Unchecked), is ideal for our needs.

Note: Although called ToggleButton, the ToggleButton control is not a Button control, but a type of CheckBox control.

Tip: It’s a good idea to choose the right control for the job. You can explore the different controls available and the various states defined for those controls in Control Styles and Templates on MSDN.

To add a ToggleButton control

• With StackPanel selected in the Objects and Timeline panel, double-click ToggleButton in the Assets panel to add it to the project.

  

Modify the ToggleButton template

To customize the ToggleButton control, we need to edit a copy of the control template. After we’ve finished, the customizations will be applied to the control we’ve added to our app.

When you view the default states for ToggleButton in the States panel (step 4 in the following procedure), you’ll see the following state groups: CommonStates, CheckStates, and FocusStates. Each of the state groups have individual states associated with them. For our app, we’re interested in the CheckStates group.

Note: The state groups and associated states will change depending on the type of control you have selected in the Objects and Timeline panel.

Each state group contains a state that represents the default state for that group. For CheckStates, the default state is Unchecked. It is a good practice to set the default properties that you want in Base, so that no changes have to be made in the default state.

To edit a copy of the ToggleButton template

1. In the Objects and Timeline panel, right-click ToggleButton, point to Edit Template, and then click Edit a Copy.
2. In the Create Style Resource dialog box, you can type a new name for the edited template in the Name (Key) text box. We’ll use the default name, ToggleButtonStyle1.
3. Under Define in, select where you want the template to be defined:
   • To make the template available to a button object in any document in your application, select Application.
   • To make the template available only to button objects in the current document, select This document.
   • To make the template available only to this button in this document, select Button from the drop-down box beside This document.

   We’ll use the default selection, This document. Click OK.

   

4. With ToggleButton selected in the Objects and Timeline panel, select the States panel to view the default states.

   If the tab for the States panel isn’t visible, in the Windows menu, make sure a check mark appears next to States.

5. In the Objects and Timeline panel, expand EnabledBackground, and then select EnabledContent.

   

6. With EnabledContent selected in the Objects and Timeline panel, select Base in the States panel. In the Common Properties category in the Properties panel, click Advanced options next to Content, and then click Reset.

   The ToggleButton text disappears from the button.

7. In the Common Properties panel, in the Content text box, type “Say hello to the penguins,” and then press Enter.

   We have just defined the Base for our ToggleButton control. We won’t make any changes to the Unchecked state, letting Unchecked inherit its appearance from Base.

8. In the States panel, click Checked. In the Common Properties panel, in the Content text box, type “Goodbye, penguins” and then press Enter.

   

9. Click Base in the States panel of the record mode indicator to end state recording.

   

Now that we’ve defined the states for our ToggleButton, we need to add the behaviors so that the button behaves in much the same way that our previous two buttons behaved.

Add behaviors to the ToggleButton

We’ll add PlaySoundAction and ControlStoryboardAction behaviors to our ToggleButton control. Because we have two storyboards that we want to play, we’ll add two ControlStoryboardAction behaviors. We’ll change the Trigger properties to control when each of the storyboards are played.

To add the PlaySoundAction behavior

1. In the Assets panel, click Behaviors, locate PlaySoundAction, and then drag it onto ToggleButton.

   The Trigger and the Common Properties categories appears in the Properties panel.

2. The default event for a Button control, Click, appears in the Event drop-down list. You can click on the arrow to view the other common events for a button, but we’ll use Click.
3. In the Common Properties category, in the Source drop-down list, select the audio file (in this case, Penguins.mp3). You can also click Browse to locate the file.
4. In the Common Properties category, in the Volume box, type 1.

To add the ControlStoryboardAction behaviors

1. In the Assets panel, click Behaviors, and then drag ControlStoryBoardAction onto ToggleButton.

   The Trigger and the Common Properties categories appear in the Properties panel.

2. In the Trigger category, in the Event drop-down list, select Unchecked.
3. In the Common Properties category, in the ControlStoryboardOption drop-down list, select Play.
4. In the Storyboard drop-down list, select Hello_Storyboard.
5. To add the second ControlStoryboardAction, in the Assets panel, click Behaviors, and then drag ControlStoryBoardAction onto ToggleButton.
6. In the Trigger category, in the Event drop-down list, select Checked.
7. In the Common Properties category, in the ControlStoryboardOption drop-down list, select Play.
8. In the Storyboard drop-down list, select Goodbye_Storyboard.

Test your app in the Windows Phone Emulator

Press F5 to view your app in the Windows Phone Emulator. Press the Say hello to the penguins button. You’ll not only see the penguins appear, but you’ll also see that the button switches to a Goodbye, penguins button.

Publish your app to the Marketplace

Think our penguins app is something everyone needs? To publish your finished app, begin by submitting your application to the Windows Phone Marketplace.

For more information on how to do this, see Publishing Your Application in the Marketplace.