Microsoft Expression Blend

Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
Page 1 of 13
Designing with Microsoft Expression Blend

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 Microsofts 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.
Itll introduce you to the Blend interface and explain some of the tool's core concepts.
For this article, well dive deeper into Expression Blend, and look at how to take our portfolio prototype
into production using Microsoft Silverlight. Well cover navigation, layout, and sample dataall without
writing a line of code!
Pay attention because theres a quiz at the end to test what youve learned!
Silverlight and Expression Blend

By now, youve probably encountered Microsofts Silverlight technology somewhere on the Web. In a
nutshell, Silverlight is Microsofts 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
About the Author

Shane Morris
Shane Morris is one of
Australias 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...
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 Microsofts 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
http://articles.sitepoint.com/print/microsoft-expression-blend
25/05/2010
Page 2 of 13
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, its worth understanding the basics of how XAML works. While it isn't
usually necessary to be able to code in XAML (I havent 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 youre 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:
1. Strip out all the SketchFlow parts of the project. There are instructions to do this in the Blend Help files.
2. Harvest the assets you want to keep and effectively copy and paste them into a new project.
For all but the simplest projects, I would recommend option 2. Firstly, it ensures there arent 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 werent really thinking about issues like layout, containment, resizing, naming, or good architectural practices. For this reason, youre 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.
Lets Get Started

As we learned last time, when we start Expression Blend were given the opportunity to start a new project. This time, rather than selecting Silverlight 3
SketchFlow Application, well make a real Silverlight 3 Application + Website, as shown in Figure 3, Selecting the appropriate project type.
Figure 3. Selecting the appropriate project type
25/05/2010
Page 3 of 13
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. Thats where well
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. Well 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. Silverlights 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, lets 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 youre at it, make another one called Portfolio.xaml.
Figure 5. Add New Item
25/05/2010
Page 4 of 13
Create the Frame element (youll 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 firstIntroduction.xamlas 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 portfolios 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 youll be inclined to just place interface elements directly on to the artboard, youll
quickly learn to use layout controls like Grids, StackPanels, and Borders to keep everything organized as your pages become more complex.
25/05/2010
Page 5 of 13
Layout controls are also essential to define how a page resizes. In our case, the StackPanel does what it saysit 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 Blends 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 its 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, weve 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 arent ready yet.
Figure 10. The Data panel lets you define the structure and attributes of your sample data
25/05/2010
Page 6 of 13
We've defined a collection of projects for the portfolio application. Each project includes:
1. a ProjectDescription (a string of up to 25 words)
2. two projectImages (the imagesof some nice furnitureare generated by Blend)
3. a ProjectName (a string of up to four words)
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 youperhaps youre at a stage in the project where the Latin is making stakeholders nervousyou 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 weve got the sample data ready, its time to populate the Portfolio page. Check this outits very cool.
Master View
First, we need a list of projects on the left side of the page. So well 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 dataproject 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
25/05/2010
Page 7 of 13
Youll notice the ListBox isnt exactly pretty yet; well style it later. Youll also notice that we included the project image, even though that doesnt 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, youve 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
Well start with the details view, which is mainly a matter of layout and styling.
25/05/2010
Page 8 of 13
The first step is to delete the automatically created labels, as we wont 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, well 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:
1. Select the TextBlock and adjust its text size and foreground colour. The text is now too big for the original TextBlock.
2. Set the TextBlocks Height to Auto and its TextWrapping to Wrap. This allows the TextBlock to take up as much room as it needs.
3. Set the TextBlocks HorizontalAlignment to Stretch, so it fills the width of the StackPanel.
25/05/2010
Page 9 of 13
By now the contents of the StackPanel are actually higher than the StackPanel itself, so well set the StackPanels 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 weve 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 StackPanels 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 dont 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. Well 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 its time to give the master panel on the left its makeover. The first step is to tweak a few properties of the ListBox:
1. Set the Background to transparent.
2. Set the BorderBrush to transparent.
3. Set the Foreground to white.
4. Set the text size to 12pt.
5. Set HorizontalScrollBarVisibility and VerticalScrollBarVisibility to Hidden.
Next, we need to change some properties of the individual items in the list box. Thats where Templates come in.
25/05/2010
Page 10 of 13
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 ListBoxs Generated Items template to change its look.
Later, we'll change the Generated Item Container template to define the items 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. Lets quickly tidy those up:
1. Adjust the StackPanels width to suit your needs.
2. Give the StackPanel a bottom Margin to increase separation between ListItems.
3. Set the Images Visibility to Collapsed for now. Well use the Image in the next article.
4. Adjust the TextBlocks TextWrapping property to Wrap and ensure its Height is set to Auto.
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!
25/05/2010
Page 11 of 13
If youve 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 well 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. Well 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 youll need, as you can see in Figure 26, All the states youll need.
Figure 26. All the states youll need
25/05/2010
Page 12 of 13
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 well 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 fillColor2s
Opacity to 75% in the Selected state. In the Base state, its Opacity is 0%. (Its a shame Microsoft didnt get around to giving some of these template
elements more meaningful names.)
Figure 27. The Item Container template adjusts fillColor2s 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, wed be recording the rectangles properties for
this state only. That would work in this case, but isnt 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 rectangles 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
25/05/2010
Page 13 of 13
While youre here, you should also adjust the Focussed state to assist users who are navigating with a keyboard rather than mouse. Ill 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 theyre
selected.
Substance with Style

In this article, weve 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, well add the finishing touches to our look and feel by introducing animation. Well learn how to use Storyboards to get things
moving and well also return to Behaviors and learn more about how to use them to string actions together, again, all without code! Well 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.
1. Start at the official Microsoft Expression site, where youll find product information and other resources: http://www.microsoft.com/expression/
2. For Microsoft learning materials the Expression community site is the place to go, especially the Learn tab: http://expression.microsoft.com/en-us/ (I
knowconfusing URLs there!)
3. My friend Alex Knight has a great site for Silverlight designers at: http://silverzine.com/
4. 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
5. 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
(Youll also find a preview of Expression Blend 4 there under Service Packs & Betas.
So howd you go? Ready to take the quiz and find out? Go for it!
25/05/2010

Microsoft Expression Blend

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Microsoft Expression Blend

Uploaded by

Copyright:

Available Formats

Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers

Designing with Microsoft Expression Blend

Silverlight and Expression Blend

About the Author

Silverlight for Developers

Silverlight for Designers

Designer-developer Workflow: the Secret Sauce

Declarative User Interfaces with XAML

From Sketchflow to Blend

Lets Get Started

Your New Project

But We Want Three Pages, Not One!

Data Contexts and the Master and Detail Panels

Generated Items Template

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

Generated Item Container Template

75%, in the Selected state.

Substance with Style

Expression Blend Resources

You might also like