RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Building Polished UIs with Expression Blend—Part 1

With a few simple tricks, even people with little artistic talent can create good-looking, professional, polished applications that leapfrog their competitors' efforts.

ith WPF and Silverlight, Microsoft provides both Windows and Web developers with powerful technologies to create rich, professional, and exciting user experiences.

However, in general, developers aren't graphical designers, leaving most developers wondering how to cope with this new world of designed interfaces and polished user experiences. But fear not! With Expression Blend, Microsoft provides a great tool to create such UIs, and even developers with no graphical talents whatsoever can learn a few techniques that will help them build better looking applications.

One amazing thing about WPF and Silverlight is the polarity in quality between applications. One demo at a keynote of a major event such as PDC will show some of the most amazing user interfaces ever conceived. But another session at the same event will show a technically sound presentation that looks like a three year old just slapped it together (no offense to any three year olds reading this article). You can see the same thing in production applications: You can find some polished applications while others come across as complete messes with awful artwork and intrusive animations that make you want to reach for sea-sickness medications.

The root problem is not unique to WPF and Silverlight, but it is shared by many powerful technologies: They enable an extremely wide range of possibilities, both positive and negative. It takes expert knowledge to fall on the desirable end of that range. WPF and Silverlight exacerbate the problem because they require both development and graphic skills—a combination of talents that's hard to come by. The result is that people working with WPF/SL are developers who are now tasked with creating a beautiful and "exciting experience." In the past, the typical developer skill set called for only functional things, and the term "experience" was called upon only when after users started to pound tables in frustration over a bug or missing feature.

So how can developers cope with this situation? One approach is to take art and design lessons—and that certainly wouldn't hurt if you have interest and motivation. However, in this article I'll show you a simpler way: I'll teach you a few graphical tricks that require no real artistic talents. Almost like "paint by numbers," really. Just as following recipes can make you a decent home chef, following some basic guidelines can help you create decent WPF/SL experiences. Over time you'll create a collection of such tricks—a sort of cookbook for graphical WPF/SL home cooking. And for the more unusual things, you can always call in the designers.

An Example Application

To demonstrate a few of these points, the small (but realistic) example application for this article is a WPF interface for a real-life middle-tier application. You can apply these techniques to Silverlight as well.

Author's Note: I picked WPF because I had to pick one of the two technologies to keep the example at a reasonable size. Note that the downloadable code sample for this article includes a scaled-down version of the middle tier to eliminate dependencies on real-life databases and frameworks. However, the example as described here was explicitly based on a real application to make sure it is representative.

The application uses the middle tier of team-management software that my company used on our upcoming JockTock product and web site, which assists with organizing hobby sports teams. This particular example revolves around ice hockey. The middle tier serves up lists of teams and player rosters for each team. The goal of this example application is to pick up that data in the WPF UI and display it in a professional manner that takes advantage of WPF features.

To start out, I created a WPF solution in Visual Studio (VS) 2008 using the .NET Framework, version 3.5. The solution includes only a simple main window that displays a list of teams. When a user clicks on one of the teams, the window displays all the players for that team. The existing middle tier provides all the logic, so I didn't have to write much code; most of the work involves building the UI and its design using Microsoft Expression Blend. However, I generally like to start out setting up my WPF/SL projects and solutions from within Visual Studio as that seems to create better starting points for sophisticated applications. (Solutions created by Blend seem to be more geared towards graphical designs, rather than complete applications.)

So why even use Blend? Because it provides many graphical design features, from easy access to color palettes and gradients, to sophisticated features like animations and resources. These are features developers don't necessarily have to worry about right away, but one can gradually explore and adopt more and more of these hidden treasures.

Also, Blend conveniently uses the identical project structure used by Visual Studio, so you can switch back and forth between Visual Studio and Blend seamlessly. That allowed me to write code in VS but do all the design work in Blend. Microsoft originally created Blend for designers, while VS had a minimal XAML editor for developers. However, I personally favor Blend for all WPF/SL UI editing, even though I am not even close to calling myself a designer. I simply find the Blend UI more productive for any UI editing task. (Your personal preference may vary.) For this reason I will use Blend for all UI editing tasks in this article. You can make some (but not all) of the required edits in the Visual Studio XAML designer. The techniques shown for the WPF application also apply for Silverlight.

At first sight, Blend looks quite a bit different from Visual Studio. The color scheme is completely different, and most developers aren't accustomed to Blend's black look, which is clearly geared more towards the designer audience.

Author's Note: Some people say they have a hard time reading the black stuff. In that case, I recommend switching to the light skin that you'll find in the Options.

However, Blend and Visual Studio aren't that different after all. Most developers will use Blend's solution explorer, which is quite similar to the one in Visual Studio. In addition, the property grid is available in both apps, with Blend's version arguably being much more comfortable and easy to use. Blend also provides simple access to all objects in the hierarchy, a feature Visual Studio lacks (at least in a fashion that is as powerful and intuitive as Blend's).

Editor's Note: This article was first published in the March/April 2009 issue of CoDe Magazine, and is reprinted here by permission.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date