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

You can create Windows Phone applications quickly and easily by using Expression Blend for Windows Phone, the WYSIWYG visual editor for 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 two of a three part series. In part one, we created the visual aspects of the app. In part two, we’ll add 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.

Name the controls

To begin, we want to make sure that all of our controls have names associated with them so that we can easily identify them when we add interactivity. The names of the controls can be anything we want them to be. For example, we can name the Image control “Image” or we can name it “Penguins.” This is particularly useful when you have more than one of the same kind of control and want to be able to easily identify which one is which.

To name the controls

• In the Objects and Timeline panel, do the following:
  • Click StackPanel. In the Properties panel, in the Name text box, type StackPanel.

    

  • Click TextBlock. In the Properties panel, in the Name text box, type TextBlock.
  • Click Image. In the Properties panel, in the Name text box, type Image.
  • Click Button_Hello. In the Properties panel, in the Name text box, type Button_Hello.
  • Click Button_Goodbye. In the Properties panel, in the Name text box, type Button_Goodbye.

Add an audio file

The process for adding an audio file is the same process we used to add the image file in part one. To follow along with this example, you can download the Penguins.mp3 file by right-clicking the link and clicking Save target as.

Important: Silverlight, the platform for Windows Phone projects, supports only the MP3 and WMA audio file types.

To add the audio file

• On the Project menu, click Add Existing Item. Browse to the location of the audio file that you want to add (the location where you saved Penguins.mp3, for example), and then click Open.

Add a PlaySoundAction behavior

Behaviors are reusable pieces of packaged code that can be dragged onto any object, and then fine-tuned by changing their properties.

We’re going to use PlaySoundAction, a built-in behavior that plays a specified audio file when an action is performed, in this case, when the buttons are clicked.

To add the PlaySoundAction behavior

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

   

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

   

2. In the Trigger category, notice that the default trigger type (EventTrigger) is selected. In addition, because we dragged the PlaySoundAction onto Button_Hello, the SourceName and SourceObject are Button_Hello.
3. 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 for this example.
4. 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.
5. In the Common Properties category, in the Volume box, type a number between 0 and 1 (0 is no volume, and 1 is full volume). For best results with Penguins.mp3, type 1.
6. Repeat steps 1-5 for Button_Goodbye.

Build and then run the project by pressing F5. You can now listen to the sound by pressing either of the buttons when the app appears in the Windows Phone Emulator.

Add animation

We’re going to add a simple animation. The idea of the app is to have the penguins appear when we click Say hello to the penguins, and disappear when we click Goodbye, penguins. To create the animation, we’ll create a new storyboard, and then define the animation in the animation timeline.

We want the image to not be visible until after we press the Say hello to the penguins button, so we’ll begin by setting the opacity of the image to 0.

In the Objects and Timeline panel, click Image. In the Appearance category, type 0 in the Opacity field.

We’re now ready to begin recording the animation.

To record the animation

1. With Image selected in the Objects and Timeline panel, click New .The Create Storyboard Resource dialog box appears.
2. In the Name box, type Hello_Storyboard, and then click OK.

   

3. In the Objects and Timeline panel, click Record Keyframe . A keyframe appears on the timeline in the row that corresponds to the selected object, in this case, Image.

   Note: Expression Blend enters timeline-recording mode with the playhead at the 0-second mark. When in recording mode, any property that you set will automatically record a keyframe on the timeline.

4. Drag the playhead to the point in time where you want the animation to finish. Because we want the animation to last as long as the audio file, which is about 4.5 seconds long, move the playhead to 0:04.500.

   

5. Because we want the animation to go from invisible to visible, with the playhead at 0:04.500, in the Appearance category, change Opacity to 100. Now, when the animation is triggered, the image will fade in gradually over 4.5 seconds.To test the animation, click Play .
6. Click Record mode indicator to end the timeline recording.

Hello_Storyboard animates the fading in of the penguins. We need another storyboard to animate the fading out of the penguins. We can easily create this animation by duplicating the existing storyboard, and then reversing it.

To duplicate the animation

• With Hello_Storyboard open in the Objects and Timeline panel, click the drop-down button next to New, and then click Duplicate.

A new storyboard (Storyboard_copy1) that is identical to Hello_Storyboard is created.

Now that we’ve created a copy of the original storyboard, we’ll rename it, and then reverse it to create a fade out animation.

To rename the animation

1. With Storyboard_Copy1 open in the Objects and Timeline panel, click the drop-down button next to New, and then click Rename.
2. The storyboard name is highlighted. Type a new name for the storyboard. For this example, type Goodbye_StoryboardTip: You can also type the new name in the Name box in the Properties panel.

To reverse the animation

• With Goodbye_Storyboard open in the Objects and Timeline panel, click the drop-down button next to New, and then click Reverse.

Goodbye_Storyboard is replaced with a reversed version of itself.

You can now close the timeline by clicking the Close Storyboard .

Add a ControlStoryboardAction

Now that we’ve created our animations, we need to be able to control when the animations play. We can do this quickly and easily by adding a ControlStoryboardAction behavior to each button.

As with the PlaySoundAction behavior, we’ll drag ControlStoryBoardAction from the Assets panel onto the button, and then fine-tune the behavior by modifying the properties.

Add a ControlStoryboardAction behavior

1. In the Assets panel, click Behaviors, and then drag ControlStoryBoardAction onto Button_Hello. The Trigger and the Common Properties categories appear in the Properties panel.
2. In the Trigger category, notice that EventTrigger (the default trigger type) is selected. In addition, because we dragged the ControlStoryboardAction onto Button_Hello, the SourceName and SourceObject are Button_Hello.
3. 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 for this example.
4. In the Common Properties category, in the ControlStoryboardOption drop-down list, select Play.
5. In the Storyboard drop-down list, select the storyboard that you want (in this case, Hello_Storyboard).

   

6. Repeat for Button_Goodbye, except in step 5, select Goodbye_Storyboard.

Adding polish

To add polish to our app, we can modify the default text, modify the orientation, and enable scrolling.

Modify the default text

To modify the default text, do the followiing:

1. With the Selection tool selected, double-click MY APPLICATION on the arboard, and then type MY FIRST APPLICATION.
2. With the Selection tool selected, double-click page name, and then type i ♥ penguins. To insert a ♥ into the text box, with the cursor in place, press ALT then press the number 3 on the numbers keypad.

Modify orientation

By default, our app only works in the Portrait orientation mode. To enable our app to work in either Portrait or Landscape mode, do the following:

1. In the Objects and Timeline panel, click PhoneApplicationPage.
2. In the Common Properties category, in the SupportedOrientation drop-down list, select PortraitorLandscape.

   

Press F5 to build and run the app. You can now click to rotate the Windows Phone Emulater and the PhoneApplicationPage will rotate on the screen.

Enable scrolling

When you view our app in the Windows Phone Emulator in Landscape mode, you’ll notice that you’re unable to scroll the screen to see the entire page. To scroll the page, we need to add a ScrollViewer control.

To add a ScrollViewer control

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the ScrollViewer control by typing ScrollViewer in the Search box.The ScrollViewer appears in the Objects and Timeline panel.Tip: If the ScrollViewer is a child of the ContentPanel, the TitlePanel will not move when you scroll through the page. To make the TitlePanel part of the ScrollViewer, select the PhoneApplicationPage rather than the ContentPanel when you insert the ScrollViewer.
2. Drag the StackPanel to the ScrollViewer to make the StackPanel a child of the ScrollViewer.
3. With the ScrollViewer selected in the Objects and Timeline panel, in the Layout category of the Properties panel, next to Width, click Set to Auto.

You can now scroll the page when it is open in the Windows Phone Emulator in Landscape mode.

Our app so far

We now have a fully functional “Hello, Penguins” app for Windows Phone! But wouldn’t it be nice to use one button rather than two? And have that button switch between Say hello to the penguins and Goodbye, penguins when it’s clicked?

Stay tuned for part three, where we’ll show you how to customize a Button control template, and make it do just that!

*****

Further reading

For more information on the concepts and tools introduced in this article, see the following User Guide topics on MSDN:

• Inserting audio and video
• Working with storyboards and timelines
• Working with built-in Windows Phone behaviors
• Modify the device settings