The Power of Microsoft Expression Blend

I have a goal. It's the same goal I've had for about three years. I'll never get there, but the journey is sometimes really fun and other times really frustrating. My goal is to be an expert in Microsoft Expression Blend. Don't get me wrong. There are thousands of experts in Blend. I will just never be one of them. And it is for a variety of small reasons I'll never be an expert; and one big one: I don't have the aptitude to be a good designer.

I have the attitude; I just don't have the aptitude. My "black and white" personality is counterproductive to having talent in design. My inability to notice the things around me and in the user experience is a handicap to designing for others. But, in the last five years I have become fascinated with user interface and user experience design. I think about it all the time. I study it. I speak in front of large audiences about it and demonstrate it to them. The natural user interface (NUI) is my passion. I'll just never be good at design and will always be envious of the people who are.

But, what I do have the aptitude for is to be proficient in Microsoft Expression Blend. It's something I work on in my spare time because it's fun. For those new to Silverlight, Blend is the tool that emits XAML. XAML is the UI technology for Silverlight (and WPF, and Surface, and Windows Phone 7). It is the power of XAML that is manifesting into some of these popular games you see on the Silverlight web properties and on Windows Phone 7. And behind all these games are animations. XAML has an extensive API for animations, and the easiest, most powerful way to do animations is with the XAML Storyboard. A Storyboard is like a movie. It's is sequential step of actions that create an animation.

I had to come up with a compelling demo that highlighted the power of Microsoft Expression Blend for a presentation I did at DevConnections in Orlando last week. So, I set out on a mission to learn Blend well enough to do a Silverlight animation based on Storyboards, which I would create entirely from the Blend Interface without having to go into the editor and type any XAML.

You can download the painstakingly detailed instructions on how to build this simple Silverlight animations app entirely in Blend from my blog, " How to build a simple Silverlight Animation App in Blend." In this article, I'll talk about my experiences using Blend to create the animation.

Animating with Storyboards
Whenever I want to learn anything Silverlight I typically do an Internet search, then get frustrated and go to Victor Gaudioso's website. Victor is a buddy of mine and a Silverlight MVP. His Silverlight Video tutorials are awesome. It was on Victor's site that I learned how to animate with Storyboards by completely staying within the Blend interface and not having to type any code.

The application is built exactly the same way in Native Silverlight for the browser and in Silverlight on the Windows Phone 7, so pick either project type when building this little app.

The steps are too detailed to list in this article—as I mentioned, you can download the painstakingly detailed instructions from my blog. So, let me talk about the more interesting points of building this app.

First, I create the solution in Visual Studio because, in this beginner session, I show the audience how to build a "hello world" Windows Phone 7 application before showing them how to do XAML animations. Now, here is first set of tips that not many developers know:

• Microsoft Expression Blend opens a Visual Studio solution natively.
• You can compile and Run (F5) a Visual Studio solution in Blend.
• Both Blend and Visual Studio behave well together, so that if you change the source code in one of the tools, the other is aware of it and you are allowed to reload. And, of course, both tools work well together in a Visual Studio Team Foundation Server (TFS) scenario.
• If you right-click on your project within your Silverlight Solution in Visual Studio, you'll see the choice Open in Expression Blend.

Now in my instructions I show you how to animate an Ellipse object in Blend. One of the more powerful demos I do in a different session is animating in Windows Presentation Foundation (WPF). In that demo, I open an Adobe Illustrator file directly in Microsoft Expression Designer and output it to a DrawingBrush in XAML. I take that DrawingBrush and animate it in the Blend interface. Unfortunately, Silverlight doesn't have DrawingBrushes... just another thing WPF has that Silverlight doesn't have. So, for this demo I use a simpler, canned object: the Ellipse.

The WP7 version of the Storyboard animation application

Upon dragging an Ellipse onto the design surface, the trick to doing storyboards easily is to use the ControlStoryboardAction control. From the Assets tab do a search on something like "Storyboard", then drag it on top of the Ellipse object. You'll immediate notice a Trigger and a Storyboard event appear in the properties window. That is where you assign the Storyboard you create in the next steps.

Trigger and a Storyboard event properties

The next important steps of building the application are building the storyboard itself. You do this in the Objects and Timeline tab in Blend. And this is where it gets tricky because some of clicks involve buttons that are like 3 pixels big. This is a hugely powerful section of Blend, though, because you are essentially given a timeline and a record mode so that you can color, move, spin, gradient shade, contort, rotate, etc. your object while spreading it over a timeline.

A Storyboard as viewed from the Objects and Timeline tab

Blend captures everything for you and just automatically creates all the XAML. Even if you knew the syntax of the XAML to start with it is like a 50 to 1 timesaving ratio when using Blend to do it.

So, download my detailed instructions to build this little animated application and start learning how to negotiate the Blend interface to create Storyboard apps. I think you'll find in no time at all, you'll be able to build animated applications that keep the Under 5s occupied for hours on end.

For more information on using Expression Blend, see these articles:

Expression Blend's SketchFlow Syncs Up Silverlight Designers and Developers
Silverlight Tools That the Pros Use
Design with Data
Building Great UIs
Expression Blend for WPF: Where's the Training?


Tim Huckaby ( [email protected]) is founder and chairman of InterKnowlogy and chairman and founder of Actus Software. Tim has worked on and with product teams at Microsoft for 25-plus years, has authored books and several publications, and is a frequent conference speaker.