Creating applications in Expression Blend

What we’ve done so far falls short of some of the things you may have already seen and done in Silverlight. Hand editing XAML, assisted by Intellisense, works just fine to a point, but to create anything complex requires another tool to assist with turning our vision into code.

Intellisense is a feature of Visual Studio and Blend that auto-completes text when you start typing a keyword, method, or variable name.

Expression Blend may scare off developers at first with its radically different interface, but if you look more closely, you’ll see that Blend has a lot in common with Visual Studio. For starters, both tools use the same Solution and Project file format. That means it’s 100% compatible and enables tighter integration between developers and designers. You could even have the same project open in both Visual Studio and in Blend at the same time. Just be prepared to see the File Modified dialog box like the one below when switching between the two applications:

If you’ve worked with designers on a project before, they typically mock up an interface in a graphics program and ship it off to the development team. Many times, a simple graphic embellishment can cause us developers to develop heartburn. Anyone who’s ever had to implement a rounded corner in HTML knows the special kind of frustration that it brings along. Here’s the good news: those days are over with Silverlight.

A crash course in Expression Blend

In the following screenshot, our CakeNavigationButton project is loaded into Expression Blend. Blend can be a bit daunting at first for developers that are used to Visual Studio as Blend’s interface is dense with a lot of subtle cues. Solutions and projects are opened in Blend in the same manner as you would in Visual Studio.

Just like in Visual Studio, you can customize Expression Blend’s interface to suit your preference. You can move tabs around, dock, and undock them to create a workspace that works best for you as the following screenshot demonstrates:

If you look at the CakeNavigationButton project, on the left hand side of the application window, you have the toolbar, which is substantially different from the toolbox in Visual Studio.

The toolbar in Blend more closely resembles the toolbar in graphics editing software such as Adobe Photoshop or Adobe Illustrator. If you move the mouse over each button, you will see a tooltip that tells you what that button does, as well as the button’s keyboard shortcut. In the upper-left corner, you’ll notice a tab labeled Projects. This is functionally equivalent to the Solution Explorer in Visual Studio. The asterisk next to MainPage.XAML indicates that the file has not been saved. Examine the next screenshot to see Blend’s equivalent to Visual Studio’s Solution Explorer:

If we look at the following screenshot, we find the Document tab control and the design surface, which Blend calls the art board. On the upper-right of the art board, there are three small buttons to control the switch between Design view, XAML view, or Split view.

On the lower edge of the art board, there are controls to modify the view of the design surface. You can zoom in to take a closer look, turn on snap grid visibility, and turn on or off the snapping to snap lines.

If we then move to the upper-right corner of the next screen, we will see the Properties tab, which is a much more evolved version of the Properties tab in Visual Studio. As you can see in this screenshot, the color picker has a lot more to offer. There’s also a search feature that narrows down the items in the tab based on the property name you type in.

At the lower left side of the next screen, there is the Objects and Timeline view, which shows the object hierarchy of the open document. Since we have the MainPage.XAML of our CakeNavigationButtons project, the view has StackPanel with six Buttons all inside a grid named LayoutRoot inside of a UserControl. Clicking on an item in this view selects the item on the art board and vice versa.

Expression Blend is an intricate and rich application.

Time for action – styles revisited

Earlier in this chapter, we created and referenced a style directly in the XAML in Visual Studio. Let’s modify the style we made in Blend to see how to do it graphically. To do this, we will need to:

1. Open up the CakeNavigationButtons solution in Expression Blend.
2. In the upper right corner, there are three tabs (Properties, Resources, and Data).
3. On the Resources tab, expand the tree node marked [UserControl] and click on the button highlighted below to edit the [Button default] resource.
4. Your art board should look something like this: