Expression Blend Behaviors

In my last article Designing with Microsoft Expression Blend, we learned the basics of designing a Microsoft Silverlight application using Expression Blend. We took the prototype built in SketchFlow in my first article (Rapid Prototyping with SketchFlow) and we created a Silverlight 3 application that integrates with the browser history. We then went on to look at Blend’s support for sample data. Finally we looked at the styling of interface elements and the use of templates in XAML.

In my final article, we’ll be taking our sample portfolio application even further. We’ll learn about storyboards and how to create animations. We’ll then return to behaviors and learn how to use them to set up interactivity in our application without writing any code. After this article I’ll be handing over to Tatham Oddie, who will take you through the features of Expression Blend’s sister product: Expression Web.

Once you’re done reading, be sure to check out our Article Quiz to test yourself.

Breaking News: Silverlight 4, Expression Blend 4, and Windows Phone

Before we jump in, we should recap what has happened in Microsoft-land since the last article. Microsoft recently held its annual MIX conference in Las Vegas, where there were a lot of announcements around Expression and Silverlight.

Firstly, Silverlight 4 was released. Silverlight 4 introduces a bunch of new features—too many to list here, but some of my favorites are:

  • Out-of-browser and multi-touch support introduce some interesting opportunities for dedicated experience, such as kiosks and tablet-based applications

  • Webcam and microphone support will allow for lots of new applications such as augmented reality

  • Mouse wheel, right-click, and drag and drop support are especially good news for business application designers like me

  • “Toast” notifications using the native operating system

  • Google Chrome support is now official

With Silverlight 4 comes a release candidate of Expression Blend 4. Blend 4 has some interesting new features as well, including:

  • Silverlight 4 and Windows Presentation Foundation (WPF) 4 support

  • Some long-awaited basic shapes like polygon, arrow, and arc

  • Better management of sketch styles in SketchFlow

  • More control over SketchFlow Animations

  • A number of new behaviors, including ones for managing touch UIs

  • A data store for storing global variables and other states that affect a SketchFlow prototype

For this article I’ve switched to using Expression Blend 4.

Finally, the other big announcement from MIX10 was that Silverlight will be the main platform for designing user experiences for Windows Phone. This effectively means that anyone who is currently a WPF or Silverlight designer is now also a Windows Phone designer.

Meanwhile, our immediate concern is to complete our portfolio application. First stop: real data.

Adding Data to Our Application

In the last article, we used Blend’s Sample Data feature to generate some placeholder data for us to represent the list of projects for our portfolio. That’s how we created our list of Latin text and pictures of chairs. Now it’s time to add some real project data.

There are a number of ways we can source the project information. We could:

  1. fetch the information from a web service, probably as XML

  2. retrieve an XML file and parse it using .NET’s SQL-based “Linq” feature

  3. grab the information from the underlying HTML page (this option has some appeal, because it allows us to have an HTML fallback version of the page for browsers without Silverlight, and also allows search engines to index our Silverlight application’s key content)

  4. just embed the data in our project (can include the text and images, or just the text, with the images referred to by URLs)

While the third option is probably recommended, since this article focuses on design rather than development, we’re going to use the simpler fourth option.

Building an XML Data File

The first step is to build an XML file that will contain our sample project data for the portfolio.

For each project we need:

  • a title

  • a brief description

  • two images

Tatham is going to take you through Expression Web in detail in the next two articles, but for now, Expression Web makes a perfectly good XML editor for me to use to enter my project information, as shown in Figure 1, “An XML file viewed in Expression Web”.

Figure 1. An XML file viewed in Expression Web

An XML file viewed in Expression Web


Now that I have my real data, I can open up our prototype in Expression Blend and replace the previous sample data.

Creating a Data Source from XML

The Data panel in Blend allows us to add various data sources, including importing one from XML. The panel is shown in Figure 2, “Use the Data panel to import an XML data source”.

Figure 2. Use the Data panel to import an XML data source

Use the Data panel to import an XML data source


Note that Blend still calls this kind of data “sample data,” but it works fine for the modest amount of information we need for our application. If we had more data we might want to be smarter about retrieving it after the main application has loaded, for example.

Choose Enable sample data when application is running to use your sample data at run-time, as illustrated in Figure 3, “Importing sample data”.

Figure 3. Importing sample data

Importing sample data


Once the new sample data is loaded, the next step is to change the data bindings of the master and detail panels of our portfolio.

Adjusting the Data Types for Imported Data

If we expand the schema for our imported data in the Data panel, we can see that Blend has assumed that each data element is a string. That’s fine for all elements except one, the Image element, which actually contains the filename of an image—so we need to change that.

Blend provides a drop-down list in the Data panel, shown in Figure 4, “Data types are set in the Data panel”, that lets us adjust the data type to Image and point to the directory containing the images. Blend will then import the images into the project.

Figure 4. Data types are set in the Data panel

Data types are set in the Data panel


Binding New Data to the Master List

As we saw in the previous article, you can bind elements like ListBoxes to sample (or live) data by dragging the data definition from the Data panel. This is shown in Figure 5, “Drag data from the Data panel to bind it to the target element”.

Figure 5. Drag data from the Data panel to bind it to the target element

Drag data from the Data panel to bind it to the target element


Dragging a new data source onto a list does have the side effect of resetting the templates used by the list. In the last article, we defined templates for individual ListItems and their containers, so we now need to re-assign the ListBox’s templates back to those values.

Figure 6. Assigning Templates to the ListItems

Assigning Templates to the ListItems


By using the same tag names in the new XML data source as I used in the original sample data (for example, <ProjectName>), the templates previously applied to the ListBox’s ListItems still work with the new data source (since the Template looks for the ProjectName property in its current data context).

With the new project list bound to the master list, we can move onto the details panel.

Binding New Data to the Details Panel

Binding the new project data to the details panel is even easier. In the last article we created a StackPanel to contain all the items in our detail view. If we select the StackPanel and look at the Data panel, we can see that the StackPanel has its DataContext set to the sample collection we made. We need to change this DataContext to point to our new XML data source.

Figure 7. The Data panel shows us the DataContext of the currently selected element

The Data panel shows us the DataContext of the currently selected element


We just need to change the DataContext for the details StackPanel to point to our new data source. Blend lets us simply drag the new data context off the Data panel and drop it on the StackPanel. We just need to remember to switch the Data panel to details mode first, so we bind to the current selection from the collection, not the whole list.

As your page fills up its often easier to work with the object in the Objects and Timeline panel, rather than the object on the artboard, as shown in Figure 8, “Working with the Objects and Timeline panel”.

Figure 8. Working with the Objects and Timeline panel

Working with the Objects and Timeline panel


Adjusting the Background of the Detail Panel

At this point, for my portfolio I want to adjust the background of the detail panel so that the logo behind is partially covered when the description text is long enough to overlap it. I’ll simply select the StackPanel that contains the detail panel, set its background to match the background of the interface, and then adjust the alpha channel so that the logo shows through just a little.

Figure 9. Adjusting the alpha channel

Adjusting the alpha channel


Now we have a portfolio that is functionally complete, with some static visual styling.

Figure 10. The functional portfolio

The functional portfolio


The next step is to add animation and transitions to make the application flow better and to help visitors understand the mechanics of the application.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.