Creating a Windows Phone Application in Expression Blend

All my applications, so far, I’ve created in Visual Studio. Earlier this week I attended a Windows Phone Event in the Netherlands, where I learned something about Expression Blend.

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

In this blog post, I’ll show you how to build a simple Windows Phone application in Expression Blend. First I am going to create the visual aspects of the app and then I am going to add the interactivity.

Expression Blend for Windows Phone comes with the Windows Phone 7 developer tools.

Expression Blend supports the several Windows Phone project types.

For this example, I am going to use the Windows Phone application to create a standard Windows Phone application.

I am going to open Expression Blend. On the ‘File’ menu I click ‘New Project’. In the opening dialog box I select ‘Windows Phone application’. In the ‘Name’ box I type in my project’s name. In the ‘Location’ box I browse to the folder where I want to store my project. In the ‘Language’ box I select the language that I want to use, in this case that is C#. In the ‘Version’ box I select the Windows Phone version that I want to target, in this case that is Version 7.1. Now I click ‘OK’.

A new Windows Phone project with the Windows Phone template opens on the art board.

Next step is to select the ‘ControlPanel’ in the ‘Objects and Timeline’ panel, and then choose the ‘StackPanel’ in the ‘Assets’ panel. Double-click on the ‘StackPanel’ to add it to my project.

Then I am selecting ‘StackPanel’ in the visual tree and on the right side I locate ‘Layout’, where I set both the ‘Height’ property and the ‘Width’ property to “Auto”.

The next step is to add a TextBlock. Therefore I select StackPanel in the Objects and Timeline panel (or visual tree), and then add the TextBlock by double-clicking on it.

To add text I simply use the ‘Properties’ panel, where I can format the text and change the properties of the TextBlock. Again I select in the visual tree, this time the TextBlock. On the right side I locate the ‘Common Properties’ in the ‘Properties’ panel, and type my text in the ‘Text’ field. In the ‘FontSize’ drop-down list I select 24 pt.

Now I want to add an image. I can either drag a supported image from outside Expression Blend, or I can use the ‘Project’ menu to add files by clicking Project – Add Existing Item, then browse to the image of my choice. Once it is added I can right-click on the image in the ‘Projects’ panel and select ‘Insert’.

To have that image in the right proportions I again set the Height and the Width properties to “Auto” and in the ‘Common Properties’ I set the ‘Stretch’ property to “Fill”.

Now I am going to add a button to my project. I double-click on the Button control in the ‘Assets’ panel with the StackPanel in the visual tree selected. On the right side I can add or change the properties. I give my button a name and change the content.

Now it is time to add some function to this little application.

First I am going to add an audio file to my project. That is the same procedure like adding that image before.

One thing to keep in mind, though: Silverlight only supports MP3 and WMA audio file types.

Now that I have the audio file in my project, I want to 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.

PlaySoundAction is a built-in behavior that plays a specified audio file when an action is performed, like when a button is clicked.

To add the PlaySoundAction behavior I am going to the ‘Assets’ panel, click ‘Behaviors’, select ‘PlaySoundAction”and drag it onto my BtnHello button in my visual tree.

Because I dragged and dropped the PlaySoundAction onto my button, the default trigger type (Event) in the ‘Trigger’ panel  is selected, the ‘SourceName’ and the ‘SourceObject’ are “BtnHello”.

I make sure that in the Event drop-down list “Click” is selected. Next thing I have to do now, is to select the audio file in the ‘Source’ drop-down list in the ‘CommonProperties’ panel. In the ‘Volume’ box I need to set a value of the volume. “0” is no volume, “1” is full volume.

Now I can build and run the project. When I click my button I can hear the elephant’s sound. How cool is that? I just built an application without writing a single line of code.


To be continued…

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: