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

You can create Windows Phone applications quickly and easily by using Expression Blend for Windows Phone, the WYSIWYG (what-you-see-is-what-you-get) 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 one of a three part series. In part one, we’ll create 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.

Getting started

Expression Blend for Windows Phone is available as a stand-alone application when you install the Windows Phone 7 developer tools. Windows Phone projects are also available in Expression Blend when you install the Windows Phone 7 developer tools in addition to an existing installation of Expression Blend 4.

Install the Windows Phone Developer Tools to get started with this example.

Create a new Windows Phone project

A Windows Phone project in Expression Blend functions just like other Expression Blend projects. Expression Blend supports the several Windows Phone project types.

For this example, we’ll use the Windows Phone application to create a standard Windows Phone application.

1. On the File menu, click New Project.
2. In the New Project dialog box, under Project types, click Windows Phone.
3. In the list on the right side of the dialog box, select Windows Phone application.
4. In the Name box, type a name for the project. We’ll use HelloPenguins.
5. In the Location box, browse to the folder where you want to store the project.
6. In the Language box, choose the language that you want to use. For this example, we’ll use C#.
7. In the Version box, select the Windows Phone version that you want to target.

   Important: Version 7.1 is only available when you install the Windows Phone Developer Tools 7.1 Beta. This example also works with Windows Phone version 7.0.

8. Click OK.

A new Windows Phone project with the Windows Phone template applied opens on the artboard.

Add a StackPanel

A Panel is a container that is used to group and lay out UI elements. A StackPanel lays out each element one after the other, either vertically or horizontally, depending on the Orientation.

1. With the ControlPanel selected in the Objects and Timeline panel, in the Assets panel, locate the StackPanel control by typing StackPanel in the Search box.
2. Double-click the StackPanel to add it to the artboard.Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Note that the StackPanel is only 100 pixels by 100 pixels. We’ll fix that later.

Add a TextBlock

The next step is to add a TextBlock to the project.

1. With the StackPanel selected in the Objects and Timeline panel, in the Assets panel, locate the TextBlock control by typing TextBlock in the Search box.
2. Double-click the TextBlock to add it to the artboard.Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Add text to the TextBlock

You can add text to the TextBlock by clicking the Selection tool, then double-clicking directly in the text block, and then typing the text that you want, or by clicking the TextBlock and then locating the Common Properties category in the Properties panel and typing the text in the Text field.

For this example, we’ll use the Properties panel, where we’ll also format the text and change the properties of the TextBlock to better suit our template.

1. With the TextBlock selected in the Objects and Timeline panel, locate the Common Properties category in the Properties panel. In the Text field, type Hello, Penguins.
2. In the Text category, in the FontSize drop-down list, select 48 pt.

You’ll notice that the text in the TextBlock is cut off. What we want is for the entire StackPanel and its contents to fill the height and width of the ContentPanel.

Modify the size of the StackPanel

1. In the Objects and Timeline panel, select the StackPanel.
2. In the Layout category of the Properties panel, next to the Width property, click Set to Auto. Do the same for the Height property.

Now the StackPanel fills the space allotted for the ContentPanel, and the TextBlock displays all of the text we just typed.

Add an image

You can either drag a supported image file from outside of Expression Blend, or use the Project menu to add files to your project. Image files are added to the artboard as Image objects.

To add the image, do one of the following:

• On the Project menu, click Add Existing Item. Browse to the location of the image file that you want to add to the current project (for this example, locate Penguins.jpg in the Samples Pictures subfolder of the Pictures folder), and then click Open. Drag the image file from the Projects panel onto the artboard, or right-click the image in the Projects panel in the and then click Insert.
• Drag the file from a folder in Windows Explorer or from your desktop onto the artboard.

The image we’ve chosen is larger than 250 KB, so Expression Blend will prompt you to embed the image in the XAP file. When the message appears, click Yes.

The image we’ve selected is too big to display properly in the window. To modify the size of the image display, do the following:

1. Select the image in the Objects and Timeline panel, and then, in the Properties panel, in the Layout category, click Set to Auto next to the Width box.
2. Click Set to Auto next to the Height box.
3. In the Common Properties category, in the Stretch drop-down list, select Fill.

Add a Button

The next step is to add a Button to the project.

1. With the StackPanel selected in the Objects and Timeline panel, in the Assets panel, locate the Button control by typing Button in the Search box.
2. Double-click the Button to add it to the artboard.

   Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Add text to the Button

You can add text to the Button by clicking the Selection tool, then double-clicking directly in the text block, and then typing the text that you want, or by clicking the Button and then locating the Common Properties category in the Properties panel and typing the text in the Text field.

For this example, do the following:

1. In the Tools panel, click the Selection tool and then double-click the Button on the artboard.
2. Type Say Hello to the Penguins.

Repeat the two previous procedures to add a second button to the artboard, and then type Goodbye, Penguins in the second button.

For the second button, type Goodbye, penguins in the second Button by clicking the Selection tool and then double-clicking the Button on the artboard.

Now we’re ready to make our app interactive! In part two, we’ll add audio, define visual states, and apply behaviors to make the app even more interesting. Stay tuned!

*****

Further reading

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

• Managing solutions, projects, and files
• Arranging objects
• Drawing text
• Inserting images and art
• Working with objects and propertie