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.
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.
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:
fetch the information from a web service, probably as XML
retrieve an XML file and parse it using .NET’s SQL-based “Linq” feature
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)
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.
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 brief description
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”.
Now that I have my real data, I can open up our prototype in Expression Blend and replace the previous sample data.
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”.
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”.
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.
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.
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”.
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.
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
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 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.
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”.
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.
Now we have a portfolio that is functionally complete, with some static visual styling.
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.