C H A P T E R 9

■ ■ ■

213


Introduction to Expression Blend
So far in this book, the primary focus has been on using Visual Studio 2008 to create Silverlight
applications. Visual Studio provides developers with a strong IDE for developing RIAs. However, you
may want your Silverlight applications to contain some complicated design elements, and in these
cases, it’s not much fun to edit the XAML manually. To address this problem, Microsoft has created
Expression Blend, a product built to edit XAML documents visually.
Whereas Visual Studio has been designed to cater to the developer, Expression Blend has been
built for the designer. As you’ve seen, Silverlight does a fantastic job of separating the appearance and
logic of an application, so developers and designers can work side by side. ASP.NET took a few strides
to achieve this separation, but still fell short in many ways. I think you will find that Silverlight has
reached a new layer in this separation, making it much more practical for designers and developers to
truly work in parallel in designing applications.
The first reaction most ASP.NET software developers will have when opening Expression Blend is
shock. “Wow, this looks like no Microsoft development product I have ever seen!” And it is true that
Expression Blend is quite different from the standard Visual Studio IDE type of product. The Microsoft
developers have finally provided a product for the graphic designer audience, and they have attempted
to make it very similar to the tools designers are accustomed to using. As software developers, we may
need to play around a bit in Expression Blend to get the feel of it. Personally, I have found it quite cool
to learn and use, and I think you will, too.
This chapter will get you started with Expression Blend. You’ll learn about its key features and its
workspace. Finally, I’ll walk you through creating a grid layout with Expression Blend.
Key Features in Expression Blend
In this section, you will look at some of the notable features in Expression Blend, including the
following:

• Visual XAML editor
• Visual Studio 2008 integration
• Split-view mode
• Visual State Manager and template editing support
• Timeline
CHAPTER 9 ■ INTRODUCTION TO EXPRESSION BLEND

214

■ Note One of the things that Microsoft has done better and better over the past few years is documentation.
Expression Blend’s documentation is quite comprehensive. For additional information about any of the items
discussed in this chapter, refer to the User Guide provided with Expression Blend.
Visual XAML Editor
Clearly, the biggest feature of Expression Blend is that it provides a WYSIWYG editor for XAML. XAML
is a very clean language, but it can also get quite complex quickly when you are working with your
applications. This is especially true when you start to add animations and transformations, which are
covered in Chapter 11.
Although it is possible to edit your XAML files completely in Visual Studio using IntelliSense, there
is no substitute for a visual editor. In addition, the XAML that Expression Blend creates is very clean
and developer-friendly. This should make developers happy, considering the terrible memories of
earlier versions of FrontPage, where every change you made would result in your code being mangled
beyond recognition.
In addition, when you start working with styles (covered in Chapter 10), IntelliSense support in
Visual Studio becomes limited, so the XML is very difficult to edit manually. Expression Blend provides
an extremely quick and easy way to edit and create styles, which is another reason it is an invaluable
tool for editing your Silverlight applications.
Visual Studio 2008 Integration
Due to the strong push for developers and designers to work in parallel, and given the fact that
XAML files are included directly within Visual Studio 2008 projects, a valid concern would be how
well Expression Blend and Visual Studio work together. If there were conflicts between the two IDEs,

there could be con flicts between the developers and designers, resulting in resistance to wor king in
parallel.
The good news is that Expression Blend integrates with Visual Studio. Visual Studio 2008 projects
can be opened directly in Expression Blend and vice versa. In addition, while Expression Blend creates
Visual Studio 2008 projects by default, it is also capable of opening Visual Studio 2005 projects.
Split-View Mode
As is shown in Figure 9-1, Expression Blend allows you to work in design and source (XAML) mode
simultaneously. For example, you can draw an object at the top in design mode, and the XAML in the
sour ce window will be updated automatically. In addition, you can just as easily edit the XAML, and the
change will be reflected automatically in the design window.
CHAPTER 9 ■ INTRODUCTION TO EXPRESSION BLEND

215


Figure 9-1. Expression Blend’s split-view mode
Visual State Manager and Template Editing Support
One of the cool features of Silverlight is the fact that all controls released with it support the new Parts
and State model, which requires strict separation between a control’s logic and appearance. Microsoft
recommends that all custom controls also support this model.
By separating the logic from the appearance of a control, a developer or designer can completely
change the appearance of a control without affecting its behavior. This process is known as creating a
template, or skinning, and is regulated by Visual State Manager (VSM). Expression Blend provides a
very clean way to create and edit these parts and states, which makes skinning your applications a
relatively simple task. You’ll learn more about VSM and skinning in Pro Silverlight 3 in C# 2008 by
Matthew MacDonald (Apress, 2009).
World-Class Timeline
In Silverlight, animations are based on keyframes within a storyboard. These keyframes are set on a
timeline, and they define the start and end points of a smooth visual transition. Figure 9-2 shows the
Expression Blend timeline, which is located in the Objects and Timeline panel.

CHAPTER 9 ■ INTRODUCTION TO EXPRESSION BLEND

216


Figure 9-2. The Expression Blend timeline
The timeline provides you with structure for all of the animation sequences in your Silverlight
application. Instead of the timeline being based on abstract frames, it is based on time, which makes it
very straightforward and easy to understand. Also, as you develop your animations, you can quickly
navigate to any given time on the timeline to check the appearance of your application at that point.
Try It Out: Working with Projects in Expression Blend
As you’ve learned, one of the key features of Expression Blend is that it integrates directly with Visual
Studio 2008 projects. This exercise demonstrates how you can use the two products side by side while
creating and editing projects.
1. Open Expression Blend. By default, when you open Expression Blend, you
will see the splash screen shown in Figure 9-3. If you do not want this screen
to appear when you start Expression Blend, you can simply uncheck the Run
at startup check box at the bottom left. For now, if this screen appears, click
Close to continue with the example.
CHAPTER 9 ■ INTRODUCTION TO EXPRESSION BLEND

217


Figure 9-3. Startup screen for Expression Blend
2. You should now have an empty Expression Blend workspace. From the main
menu, click File  New Project. This will display the New Project dialog box.
3. In the New Project dialog box, select Silverlight 3 Application + Website for
the project type, and then enter Ch9_BlendProjects for the project name, as
shown in Figure 9-4. Click OK to create the new project.

CHAPTER 9 ■ INTRODUCTION TO EXPRESSION BLEND

218


Figure 9-4. Creating a new project in Expression Blend
4. By default, Expression Blend will open the MainPage.xaml file for editing. In
the upper- right portion of the artboard (which contains the XML) are options
to switch between design, XAML, and split-mode view. Click Split to see both
the XAML and the design view at the same time, as shown in Figure 9-5.
CHAPTER 9 ■ INTRODUCTION TO EXPRESSION BLEND

219


Figure 9-5. Split-view mode in Expression Blend
Now edit this project in Visual Studio. In the Project panel, right-click the
Ch9_BlendProjects project and select Edit in Visual Studio, as shown in Figure
9-6. This will automatically start Visual Studio 2008 and open your project.
■ Note Step 5 assumes that you have already installed Visual Studio 2008. If not, you will need to install that
to continue.
CHAPTER 9 ■ INTRODUCTION TO EXPRESSION BLEND

220


Figure 9-6. Editing a Expression Blend project in Visual Studio
5. In Visual Studio 2008, double-click MainPage.xaml in Solution Explorer. Let’s
make a simple change to the application in Visual Studio.
6. Modify the root Grid to add the following code shown in bold, to define a

StackPanel with a TextBlock, TextBox, and Button.
<UserControl
xmlns="
xmlns:x="
x:Class="Ch9_BlendProjects.MainPage"
Width="640" Height="480">

<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="20" Orientation="Vertical">
<TextBlock Margin="5" Text="Enter Your Name:" />
<TextBox Margin="5" x:Name="txtName" />
<Button Margin="5" Content="Click Me!" />
</StackPanel>
</Grid>
</UserControl>
7. From the main menu, click File  Save All, just to make sure everything is
saved.
8. Switch back to Expression Blend. It will prompt you with the File Modified
dialog box, as shown in Figure 9-7. Click Yes. You will see Expression Blend
refresh the project so that it reflects the changes you made in Visual Studio
2008.