Microsoft Expression Blend

About the Author

Shane Morris

Shane Morris is one of

Australia’s most respected user

experience professionals.

Through consulting, mentoring

and training he has helped

organisations create compelling digital

experiences since 1991. In that time he has

worked on desktop applications, internet

applications, mobile user interfaces, physical

devices and web sites. Shane has taught user

experience topics around the world and is a

key contributor to “101 Things I Learned in

Interaction Design School” at ixd101.com.

View all articles by Shane Morris...

By: Shane Morris

March 26th, 2010

Reader Rating: Not yet rated

In my previous article we looked at SketchFlow, the prototyping tool that's part of Microsoft’s Expression Studio suite.

We saw how to quickly build a wireframe prototype for a (well, my) simple portfolio viewing application, and how to use

the feedback features of SketchFlow to gather stakeholder and user feedback.

If you missed the first article, I highly recommend you check it out: Rapid Prototyping with SketchFlow.

It’ll introduce you to the Blend interface and explain some of the tool's core concepts.

For this article, we’ll dive deeper into Expression Blend, and look at how to take our portfolio prototype

into production using Microsoft Silverlight. We’ll cover navigation, layout, and sample data—all without

writing a line of code!

Pay attention because there’s a quiz at the end to test what you’ve learned!

Silverlight and Expression Blend

By now, you’ve probably encountered Microsoft’s Silverlight technology somewhere on the Web. In a

nutshell, Silverlight is Microsoft’s offering to deliver rich interactive experiences online.

Silverlight provides a rich set of features for visual design, animation, media integration, layout, and data

visualisation. It features a large range of skinnable controls and powerful mechanisms for defining

sophisticated user experiences. Silverlight is also built to interoperate with the web platform. Silverlight

applications can easily interoperate with the underlying browser and HTML page, including manipulating

the DOM and calling (and being called by) JavaScript.

The Silverlight plugin runs to around 4MB, with support for Internet Explorer, Safari, Firefox, Opera, and Google Chrome. Silverlight runs on Windows

and Mac OSX, Linux (through the Mono project), and will soon run on Windows Phone, too.

Silverlight for Developers

For developers, one of the key attractions of Silverlight is that it's a subset of .NET. This means that .NET developers can take advantage of their existing

skills when developing rich applications for the Web, and that all developers can take advantage of the rich environment of tools and platforms for .NET

provided by Microsoft and others. Being based on .NET, Silverlight applications are most often coded in C# or Visual Basic .NET, but they can be developed

in a range of .NET-supported languages, including IronRuby, IronPython, and JavaScript.

Silverlight for Designers

For designers, the key benefits of working with Silverlight are the clean separation of design from development that the platform provides, and the

availability of sophisticated design tools. Silverlight allows designers to work naturally, and be very productive, while requiring little or no coding.

This brings us to Expression Blend.

Expression Blend

Expression Blend is part of Microsoft’s Expression Studio suite of design tools. It is the production tool for designing and building user interfaces for

Silverlight on the Web and Windows Phone, as well as for WPF (Windows Presentation Foundation) on Windows and Microsoft Surface. Expression Blend

also underpins SketchFlow, the rapid prototyping tool we covered in the last article.

The power of Blend is that it allows designers to actually build rich user interface themselves, rather than describing the interface in wireframes, site maps,

and comps for someone else to build (and potentially misinterpret). Blend allows designers to create the production interface themselves if they choose to,

while still working with familiar tools and concepts. This allows designers not only to be more productive, but to actively work on their design for longer,

since there is less need for a formal hand-over to the development team.

Designer-developer Workflow: the Secret Sauce

When I worked at Microsoft, one of our key messages was the improved designer-developer workflow enjoyed by designers using Blend and developers

using Visual Studio. Designers and developers are able to work on the same project simultaneously in Blend and Visual Studio respectively. Designers love

this because it makes them fully fledged members of the project team, enabling them to contribute equally to the project, rather than being seen as

outsiders who must rely on the kindness of developers to see their work realised.

Declarative User Interfaces with XAML

Underpinning Silverlight and WPF, is the XAML user interface definition language. XAML is an XML-based language for defining the contents, layout, and

behaviour of user interfaces. Figure 1, “Underlying your Silverlight experience is the XML-based XAML language” shows a button interface element and the

Designing with Microsoft Expression Blend

Page 1 of 13Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers

25/05/2010http://articles.sitepoint.com/print/microsoft-expression-blend

corresponding XAML code that creates the button. While the language's syntax and mechanics are quite different from HTML, its intention is similar. It's

XAML that makes user interface design tools like Blend possible. As a designer, it’s worth understanding the basics of how XAML works. While it isn't

usually necessary to be able to code in XAML (I haven’t found it necessary yet), it can be helpful to be able to read XAML to help debug any unexplained

behaviour in your project.

Figure 1. Underlying your Silverlight experience is the XML-based XAML language

From Sketchflow to Blend

In the first article, we learned that SketchFlow allows us to create prototypes “on top of” Blend. One of the advantages of this approach is that you can take

your initially sketchy prototype and evolve it to a point where it's very close to the final experience in SketchFlow. You can even connect your prototype to

real back-end code. The prototype we constructed in the previous article is shown in Figure 2, “Our SketchFlow prototype”.

Figure 2. Our SketchFlow prototype

The natural question to ask at this point is whether you can convert your SketchFlow prototype into a production project when you’re ready. The answer is

yes, sort of…

A SketchFlow prototype is a Blend project like any other. In addition to the elements you define yourself, SketchFlow provides behind-the-scenes

mechanisms for wiring everything up, implementing the SketchFlow map, providing the SketchFlow styles, and of course creating the code required for the

SketchFlow player. To convert a SketchFlow prototype into a production project, you basically have two options:

Strip out all the SketchFlow parts of the project. There are instructions to do this in the Blend Help files.1.

Harvest the assets you want to keep and effectively copy and paste them into a new project.2.

For all but the simplest projects, I would recommend option 2. Firstly, it ensures there aren’t any bits of SketchFlow left lying around in your project.

Secondly, being part of a prototype, your screens are probably pretty sloppy by production standards. The whole point of rapid prototyping means you

probably weren’t really thinking about issues like layout, containment, resizing, naming, or good architectural practices. For this reason, you’re probably

better off just going through your prototype and copying out the elements (screens, components, animations, and so on) that you want to use as a starting

point for your production project.

In our case, the prototype is so simple that we can get by just by starting again.

Let’s Get Started

As we learned last time, when we start Expression Blend we’re given the opportunity to start a new project. This time, rather than selecting Silverlight 3

SketchFlow Application, we’ll make a real Silverlight 3 Application + Website, as shown in Figure 3, “Selecting the appropriate project type”.

Figure 3. Selecting the appropriate project type



Your New Project

A quick look at the Projects panel in Blend shows us that our new Silverlight project has one page at the moment: MainPage.xaml. That’s where we’ll

build our user interface.

But We Want Three Pages, Not One!

In our SketchFlow prototype, we built three separate pages that SketchFlow linked together with navigation. For our production application, we approach

things slightly differently. We’ll make three separate pages, which will be displayed inside MainPage.xaml using a Frame, as illustrated by Figure 4,

“A Frame in MainPage.xaml will hold each of our three application pages”. Silverlight’s Frame element allows us to navigate between pages (much like

navigating between pages in a browser) but also gives us an extra bonus. Using a Frame element will integrate our Silverlight application with the browser

navigation. That means that the browser Back and Forward buttons will actually navigate back and forward in our Silverlight application. It also means that

each page in our application will have its own URL, which is really useful for bookmarking.

Figure 4. A Frame in MainPage.xaml will hold each of our three application pages

So, before we insert the Frame in MainPage.xaml, let’s make our three pages.

To make the new pages, we go to the Projects panel, right-click on the Silverlight project (not the Web project), and choose Add New Item…, as shown in

Figure 5, “Add New Item…”. Add a new Page and call it Introduction.xaml. While you’re at it, make another one called Portfolio.xaml.

Figure 5. Add New Item…



Create the Frame element (you’ll find it on the Assets tab under Controls) in MainPage.xaml and set its Source property to point to the XAML page

we want it to load first—Introduction.xaml—as depicted in Figure 6, “The Source property determines which XAML file the Frame will initially

display at run time”.

Figure 6. The Source property determines which XAML file the Frame will initially display at run time

Introduction Page

Our portfolio’s Introduction page is pretty simple. We can build it using the following elements (the final result is shown in Figure 7, “The Introduction

page is fairly simple”):

a TextBlock for the blurb•

a HyperlinkButton for the Portfolio link•

an Image for the teaser•

a Vector Path for the logo in the background•

Figure 7. The Introduction page is fairly simple

To keep the TextBlock and HyperlinkButton together, we wrap them in a StackPanel. StackPanels are one of the many layout controls

available to keep things organized in your user interface. While initially you’ll be inclined to just place interface elements directly on to the artboard, you’ll

quickly learn to use layout controls like Grids, StackPanels, and Borders to keep everything organized as your pages become more complex.



Layout controls are also essential to define how a page resizes. In our case, the StackPanel does what it says—it stacks all its contents on top of (or

beside) each other.

The HyperlinkButton has a NavigateUri property that lets you select one of the available XAML pages, as shown in Figure 8, “Selecting the

destination for the Portfolio HyperlinkButton”. Point it to your Portfolio.xaml page.

Figure 8. Selecting the destination for the Portfolio HyperlinkButton

The easiest way to add the image is simply to drag the image file onto the artboard. An Image element will be added to the page, and the file will be added

to the project. I then rotated it and added a DropShadow effect using the Properties panel.

Finally, Blend is able to natively import Adobe Illustrator and Photoshop files, so bringing the logo in is just as easy.

Portfolio Page

The easy parts of the Portfolio page (shown in Figure 9, “The Portfolio page includes master and detail panels with sample data”) are the background

visuals, which just require some rectangles and a copy of the logo (this time with a stroke and no fill). The two rectangles form the master panel on the left

and the detail panel on the right. To get the project information to fill in the master and detail panels requires a little bit more work, but not too much more

thanks to Blend’s Sample Data features.

Figure 9. The Portfolio page includes master and detail panels with sample data

Sample Data

One of my favourite features of Expression Blend is the support it provides for sample data. Perhaps it’s just because I remember how hard it can be to use

other tools to populate screen mockups with data. As you can see in the screen capture above, we’ve allowed Blend to populate the master/detail view with

sample data (mostly Latin text) while we get the interactivity right.

Apart from allowing us to connect up to live data sources, the Data panel (shown in Figure 10, “The Data panel lets you define the structure and attributes

of your sample data”; click Window and select Data to access it) also allows us to define sample data, edit the data, or import sample data from an external

source. The sample data can be used in Blend as place holders for live data sources which are only available in the running application, or the sample data

can be used both at design-time and run-time, when your data sources aren’t ready yet.

Figure 10. The Data panel lets you define the structure and attributes of your sample data



We've defined a collection of projects for the portfolio application. Each project includes:

a ProjectDescription (a string of up to 25 words)1.

two projectImages (the images—of some nice furniture—are generated by Blend)2.

a ProjectName (a string of up to four words)3.

As well as being able to generate data to match a number of common formats (addresses, URLs, dates, and so on, as shown in Figure 11, “The Sample Data

features allow you to choose from a number of useful data formats”), Blend sample data can be a simple flat (table) structure, or it can be hierarchical.

Figure 11. The Sample Data features allow you to choose from a number of useful data formats

If the generated sample data does not suit you—perhaps you’re at a stage in the project where the Latin is making stakeholders nervous—you can define

your own sample data values. You can either edit the values directly in Blend, or you can create an external XML file for the data and import that into

Blend. The latter method makes it easy to extract some real data from an existing database, for example, before it has been connected to the project.

Data Contexts and the Master and Detail Panels

Now that we’ve got the sample data ready, it’s time to populate the Portfolio page. Check this out—it’s very cool.

Master View

First, we need a list of projects on the left side of the page. So we’ll select ProjectName and ProjectImage1 from the Data panel and simply drag

them onto the page. Blend automatically creates a ListBox for me and fills it with the sample data—project name and image, as Figure 12, “Just drag

data from the Data panel to automatically make a list” shows.

Figure 12. Just drag data from the Data panel to automatically make a list



You’ll notice the ListBox isn’t exactly pretty yet; we’ll style it later. You’ll also notice that we included the project image, even though that doesn’t appear

in our final mockup. We're going to use the image for a nice rollover effect later.

Details View

The details view is just as easy. Once again, we select from the Data panel the items we want to show in the details view (all of them in this case). But this

time, before we drag them onto the artboard, we switch the Data panel to Details mode.

Figure 13. Details mode creates a visualisation of the currently selected data, rather than the whole set

Details mode tells Blend to create a visualisation of the currently selected data item from the data source, rather than the whole set. Dragging these

elements onto the right-hand side of the page produces a default layout. Once again, it's not a pretty one, as Figure 14, “The default data visualisation

includes each item selected and a label” shows.

Figure 14. The default data visualisation includes each item selected and a label

Running the project at this point reveals the coolness. Blend has automatically wired the visualisation up to the currently selected item from the ListBox on the left. So, with hardly any work, and no code at all, you’ve now got a working master and details panel functionality.

A Lick of Paint

Our last task is to tidy up our portfolio page so it looks more presentable.

Details View

We’ll start with the details view, which is mainly a matter of layout and styling.



The first step is to delete the automatically created labels, as we won’t need them. They are just TextBlocks, so we can just select each one on the

artboard (use Ctrl-click to select multiple items) and hit Delete, as shown in Figure 15, “First, delete the labels”.

Figure 15. First, delete the labels

By default, Blend places the items in the Details view into a Grid. To keep things in order, we’ll change the Grid into a StackPanel by right-clicking

on the Grid and selecting Change Layout Type > StackPanel, as depicted in Figure 16, “Change to Grid to a StackPanel”.

Figure 16. Change to Grid to a StackPanel

Once the items are neatly stacked, we can select each of them and set the left Margin to 0. That moves them to the left of the StackPanel. We can now

drag the StackPanel into the desired position.

At this point we need to rearrange the two TextBlocks in the StackPanel, because the description is at the top and the title at the bottom. The

easiest way to do that is to rearrange the items by dragging them in the Objects and Timeline panel as shown in Figure 17, “Drag objects to reorder them”.

You might find it easier to rename the items in the StackPanel first.

Figure 17. Drag objects to reorder them

The next step is to use the Properties panel to format the two TextBlocks that make up the project title and description. For each one:

Select the TextBlock and adjust its text size and foreground colour. The text is now too big for the original TextBlock.1.

Set the TextBlock’s Height to Auto and its TextWrapping to Wrap. This allows the TextBlock to take up as much room as it needs.2.

Set the TextBlock’s HorizontalAlignment to Stretch, so it fills the width of the StackPanel.3.



By now the contents of the StackPanel are actually higher than the StackPanel itself, so we’ll set the StackPanel’s height to Auto as well by

clicking the icon to the right of the field as shown in Figure 18, “Click to the right of the Width and Height fields to set them to Auto”.

Figure 18. Click to the right of the Width and Height fields to set them to Auto

Now we’ve got the copy organized, we just need to sort out the two images. We want them to appear side by side, so the first step is to select them and group

them into their own StackPanel. We can then set that StackPanel’s Orientation to Horizontal and give it top and bottom margins to space it

out a bit, just like in Figure 19, “A horizontal StackPanel inside a vertical StackPanel allows us to fine-tune the layout”.

Figure 19. A horizontal StackPanel inside a vertical StackPanel allows us to fine-tune the layout

Next, we want to give the two images a white border. Image elements don’t have a BorderBrush property, so we'll use another layout container,

appropriately named Border. We can group each Image into a Border, then set the properties of the Borders. We’ll then give the left-hand image a

right Margin so there is a gap between the two.

Figure 20, “The details panel after a makeover” displays the layout for the details panel. That job is done. Phew!

Figure 20. The details panel after a makeover

Master View

Next it’s time to give the master panel on the left its makeover. The first step is to tweak a few properties of the ListBox:

Set the Background to transparent.1.

Set the BorderBrush to transparent.2.

Set the Foreground to white.3.

Set the text size to 12pt.4.

Set HorizontalScrollBarVisibility and VerticalScrollBarVisibility to Hidden.5.

Next, we need to change some properties of the individual items in the list box. That’s where Templates come in.



Templates in XAML

Styles and Templates are powerful features of XAML that allow you to take standard elements and redefine not just their properties, but also their layouts

and behaviours. Templates are reusable, so you can define your own controls and reuse them throughout your project. In our example, we want to change

the presentation of the individual ListItems in our list of projects. To do this, we'll edit the ListBox’s Generated Items template to change its look.

Later, we'll change the Generated Item Container template to define the item’s various visual states.

Generated Items Template

The Object menu allows us to access all the templates for the currently selected element. A ListBox actually has a number of templates for its overall

layout as well as the individual ListItems, their container element, and layouts. The Edit Additional Templates menu in Figure 21, “Selecting a template

to edit” shows the templates for the ListBox.

Figure 21. Selecting a template to edit

A nice feature of Blend is that it allows us to edit templates in the context in which they'll appear, which makes it easy to ensure everything looks right

together. When we look at the Objects and Timeline panel for our ListItem Template, we see it is made up of a StackPanel (love those

StackPanels!) containing an image and a TextBlock. Let’s quickly tidy those up:

Adjust the StackPanel’s width to suit your needs.1.

Give the StackPanel a bottom Margin to increase separation between ListItems.2.

Set the Image’s Visibility to Collapsed for now. We’ll use the Image in the next article.3.

Adjust the TextBlock’s TextWrapping property to Wrap and ensure its Height is set to Auto.4.

Figure 22, “Before …” shows how the list looked before the changes, and Figure 23, “… and after. Our list is looking better already!” shows its appearance

after.

Figure 22. Before …

Figure 23. … and after. Our list is looking better already!



If you’ve been following closely, you might have a question at this point: “How do I get out?” The easiest way to exit the editing of a Template is to click the

Return scope to… arrow at the top of the Objects and Timeline panel as shown in Figure 24, “Click the arrow to exit Template editing”.

Figure 24. Click the arrow to exit Template editing

Generated Item Container Template

To get our list looking just right at run-time, we need to define its different states. We used visual states in the first article, where we defined three different

states for our navigation component by showing and hiding different elements. For this exercise we won't define our own visual states. Instead we’ll adjust

preexisting states.

The various visual states for our ListBox entries are defined in the Generated Item Container template, which we can also access from the Object > Edit

Additional Templates menu. We’ll need to make a copy of the template in which to apply our changes, as shown in Figure 25, “Make your own Generated

Item Container template by making a copy of the default one”.

Figure 25. Make your own Generated Item Container template by making a copy of the default one

Inside the Generated Item Container template, we can open the States panel and review the pre-built visual states for a ListItem. Microsoft thinks of

everything: ListItems already have all the states you’ll need, as you can see in Figure 26, “All the states you’ll need”.

Figure 26. All the states you’ll need



Notice that the visual states are grouped into three state groups: CommonStates, FocusStates, and SelectionStates. This means we can define each state

separately, and combine them at run-time, saving ourselves lots of work. The main visual state we need to adjust is the Selected state.

By default, the Selected state adds a translucent blue overlay to the selected item. It does that by making a blue rectangle (labeled fillColor2 in the Objects

and Timeline panel) that's 75% opaque in the Selected state. For our purposes we’ll change the rectangle to a solid white border. If we activate the Selected

state we can see a red dot appear next to fillColor2. The dot shows us which elements have been changed in the selected state. Expanding the elements

shows us that in the Selected state, fillColor2 has its Opacity set to 75%, as you can see in Figure 27, “The Item Container template adjusts fillColor2’s

Opacity to 75% in the Selected state”. In the Base state, its Opacity is 0%. (It’s a shame Microsoft didn’t get around to giving some of these template

elements more meaningful names.)

Figure 27. The Item Container template adjusts fillColor2’s Opacity to 75% in the Selected state

All we need to do is edit the properties of fillColor2. The easiest way to do that is to activate the Selected state to make the rectangle visible, then turn off

recording of the state so we can work on the rectangle without animating it. If we kept state recording on, we’d be recording the rectangle’s properties for

this state only. That would work in this case, but isn’t very elegant. Turn off recording by clicking the red circle at the top-left of the artboard, as shown in

Figure 28, “Turn off state recording before you change the properties of the rectangle”. We can then remove the rectangle’s fill and set its border. We can

return to editing the state by pressing the (now gray) recording button again. The last thing to do is set the Opacity of the rectangle to 100%, rather than

75%, in the Selected state.

Figure 28. Turn off state recording before you change the properties of the rectangle



While you’re here, you should also adjust the Focussed state to assist users who are navigating with a keyboard rather than mouse. I’ll leave that as an

exercise for you. Oh, and if I'm to be completely honest, I also tweaked the margins of the ListItems to get the spacing to my liking when they’re

selected.

Substance with Style

In this article, we’ve built out the basics of our (well, my) Silverlight portfolio application. We looked at navigation using the Frame element, and we had

an extensive look at the features for formatting and styling elements. Importantly, we touched on layout containers like StackPanel, as well as the use

of templates and visual states to create reusable styles. We also saw how we can use sample data to flesh out our prototype (sample data works in

SketchFlow as well as in normal Blend projects). In additional to all that, we saw how to use the Data panel to create interactive data views with no code at

all.

"What could possibly be left?" you ask.

Well, in the next article, we’ll add the finishing touches to our look and feel by introducing animation. We’ll learn how to use Storyboards to get things

moving and we’ll also return to Behaviors and learn more about how to use them to string actions together, again, all without code! We’ll also replace our

sample data with real data.

Expression Blend Resources

There are plenty of books and websites around these days to help you learn Expression Blend (for WPF and Silverlight). Here are a few sites to get you

started.

Start at the official Microsoft Expression site, where you’ll find product information and other resources: http://www.microsoft.com/expression/1.

For Microsoft learning materials the Expression community site is the place to go, especially the Learn tab: http://expression.microsoft.com/en-us/ (I

know—confusing URLs there!)

2.

My friend Alex Knight has a great site for Silverlight designers at: http://silverzine.com/ 3.

My old Microsoft colleague Arturo Toledo has also compiled a great list of training resources. In particular, check out the downloadable full course:

http://ux.artu.tv/?p=136

4.

And of course the place to go for a trial download of Expression Blend and SketchFlow is: http://www.microsoft.com/Expression/try-it/default.aspx

(You’ll also find a preview of Expression Blend 4 there under Service Packs & Betas.

5.

So how’d you go? Ready to take the quiz and find out? Go for it!



Documents

Microsoft Expression Blend