Windows Phone Tutorial: Why Windows Phone Developers Should Must and Are Learning and Using Expression Blend

Back in June, I wrote this to Silverlight developers:

Okay, tough love: if you are serious about Silverlight development, the days of using one Integrated Development Environment for all your work are…. over.  The benefits of adding Expression Blend to your toolkit, and getting serious about learning how to use it well are so overwhelming that you can no longer afford to ignore them.

So, get over it, it was nice, but the fat lady has sung.

Guess What?

This Means You Too Windows Phone Developer!

But this is good news… really.  I’ll prove it…let’s return to the Navigation tutorial and rebuild from scratch using Expression Blend.

As  you may remember, this tutorial recreates one of the excellent labs available in the Windows Phone 7 Developer Training Kit and begins by creating a new application named Wazup.

This time, however, we’ll create that application in Expression Blend 4 (available free for creating Windows Phone 7 applications!)

For now, let’s choose the simplest of the application templates.  Once you click OK you’ll be brought into Expression Blend’s frighteningly dark design space, in the center of which will be a live image of the emulator.  As we did last time, we need to add a few resources from the lab:

• WazupAppIcon.png
• WazupStartIcon.png
• Styles.xaml

All three are added via the menu: Project->Add Existing Item (or by the short-cut, Ctrl-I).

Click on App.xaml and notice, in the Resource window, that it is automagically linked to Styles.xaml.  Easy.

You do need to wire up the two icons, which you do by clicking on the Projects Pane, then on Properties and then on WMAppManifest.xaml.  The Xaml file opens and you can plug in the names, just as you did previously:

<IconPath IsRelative="true" IsResource="false">
         WazupIcon.png</IconPath>

<BackgroundImageURI IsRelative="true" IsResource="false">
     WazupStartIcon.png</BackgroundImageURI>

Save all (control-shift-s) and close all but MainPage.xaml.

For our final bit of housekeeping, create a new folder (Project->Add New Folder) and name it Resources.  You can then add the content of the lab’s resource folder using Control-I (and then moving them into the folder) or you can right-click on the folder and choose Add Existing Items to load the existing items right into the folder.

Fixing Up MainPage.xaml

Now comes the fun part. Return to MainPage.xaml and click on My Application. Hey! Presto! the properties window opens and about 2/3 down, in the Common Properties windows you’ll find the text, which you can adjust from My Application to Wazzup.  Click on Page Name and do the same thing, naming the page Main Page (and noting that it is instantly updated in the view).

We now want to add three buttons and an image inside a StackPanel inside of the ContentPanel Grid.  This time, instead of typing in or dragging in the HTML we’ll stay in the designer.  On the far left you’ll find the toolbar. Each tool shown represents a set of tools, accessible by the little white triangle on the lower right.  Click on that triangle next to the grid and a menu opens allowing you to select,  a StackPanel. With that selected, click into the grid and drag out the StackPanel.

To cause the StackPanel to occupy the entire grid area, set the amrgins to zero, and set the Horizontal and VerticalAlignment to stretch in the Layout panel of the Properties window. You can now add the three buttons and image inside that StackPanel. Start by dragging the first button from the toolbox onto the StackPanel.

Again, click on the button and then use mouse-down-drag to size it onto the StackPanel. For now, don’t adjust the size, just add two more buttons. Note they appear one below the other (thank you StackPanel).  To make them look right, go ahead and clear their margins and set their width and height to the same size, aligning them to the center horizontally, and the top vertically. (You can do all three at once by clicking on the arrow in the upper left of the toolbox and then shift-clicking the three buttons before setting the properties).  I set the width to 200 to make them look reasonable.

You now want to add your image. And this is where things begin to get really sweet.  Click on the chevron, and from within the chevron choose the media tab.  Find the logo.jpg image, and just drag it onto the form. Set the margins to 0 and the alignments to stretch, and set the height and width to auto, and yowza! it just works.

Take a moment to look over at the Objectws and Timeline tab where you’ll see that you have in fact added an image named Logos.  If you really want to close the loops, save all and then click on the small Xaml button on the upper right of the design surface.  The result will be very familiar,

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <Button Content="Button" Width="200"/>
        <Button Content="Button" Width="200"/>
        <Button Content="Button" Width="200"/>
        <Image Source="Resources/Logos.png" Stretch="Fill"/>
    </StackPanel>
</Grid>

This is identical to what you wrote by hand in Visual Studio.  And this is key: you get the benefit of drag and drop, What You See Is What You Get, without paying any overhead in bloated code!

Quick! Click on the design button and close that Xaml.  No need to look at that for now (and I mean that quite honestly, there is no need to deal with the Xaml while doing this. You are free to, but there is little advantage).

Creating the Digg Page

This application has a second page, Digg, that we’ll create now.  Save all your current work and choose Project->Add New Item (Control-N).  Choose Windows Phone Page and name it Digg.xaml.

Once again, click on the application name and change it to wazzup? and click on the page name and change it to Digg. On this page we want two rows with a height of auto and one to take up the remaining space, and we want two columns, the firsst with a relative height of 1* and the second with Auto.  To do this, click in the grid’s left margin and add two reasonable sized rows near the top and then click on the top margin and divide the area roughly into two equal areas.

Next, let’s add the TextBox for searching to the upper left hand corner.  Drag a TextBox into place. When you use the positioning arrow (upper left) and click in the TextBox the properties will show for the box.  Set its vertical and HorizontalAlignment to center, and its width to 200 (leave its height at auto).  Clear the margins.

Next to the text property is a very small and very important, very little (10×10) square, officially known as the Advanced Options Menu.   The color of this square is significant:

• Gray = default value
• White = user value
• Yellow = databound
• Green = set to resource

Click on the square and select reset. The click on it again and select Data Binding…. In the Databinding box, enter the text SearchText (a property that will be defined later) and use the double arrow to expand the data binding dialog box to reveal the extra properties. Click on TwoWay binding.

In column 1 (the second column) in row zero, place a button. Use the properties to set its name to ButtonSearch and clear its contents (it will hold the image of the magnifying glass).

Under Miscellaneous click on the Advanced Options Menu and choose Resource, and from that ButtonGoStyle; the magnifying glass appears in the button. Nice.

Finally, in the second row, set a TextBlock named, creatively, TextBlock and set its ColumnSpan to 2 and its margins to 18,0,0,5.  Set the HorizontalAlignment to Left and the FontSize to 24 and Height to 45.  Finally, bind its text to LastSearchText.

We’re now going to cheat and put a path into the same row, also with ColumnSpan2.  Previously we did this by writing in the Path element. This time we’ll choose Line from the toolbox and hold down the shift key (to constrain the line to be straight) and simply draw it into place.

Finally, drag a listbox (found in the chevron) into the bottom row, set its column span to 2, its alignments to stretch, its margin to 5 and then we’ll set its ItemsSource and Item Template.

To set the ItemsSource open the Common Properties, click on the Advanced Options Menu and choose Data Binding…  Set the property to DiggSearchResults.

We now need a template for the results. Right click on ListBox and select Edit Additional Templates –> Edit Generated Items –> Create Empty.  The Create DataTemplateResource dialog opens. Name the DataTemplte DiggSearchResultTemplate and use the default of defining it in the current document.

This will put you in the DataTemplate editor, with a small grid. Click in the grid and set its proprties.

Click in the margins to create three rows and two columns.  In the first cell, place a StackPanel, setting the StackPanel’s height to 35, its alignment to left and top and its margins to 0,7,0,0. Also set its orientation to Horizontal and its Background to the color #FF27580A. (Temporarily, to see the stackpanel, set its HorizontalAlignment to stretch).

Drag two TextBlocks into the StackPanel. Set the first one to have a margin of 5,2,5,3 (left, top, right, bottom respectively) and alignments of Left and Bottom. It’s text will be bound to the value Diggs.  The second acts as a label.  Set its Text to diggs and its alignment to Left and Bottom, with a fontsize of 16 and margins of 0,2,5,3.

In the second row place a HyperLinkButton, with alignments of Left and Bottom.  Set its Foreground color to #FFFFC425 and its content and NavigateUri properties will bind to Title and Link respectively.  Finallly, set the style to the resource WrappedHyperlinkButtonStyle.

After this; the rest is code, so save all your files and open the project in Visual Studio.  At this point the directions are identical to the earlier tutorial, so we can stop here and admire how much easier placement, property setting and binding is in Expression Blend.