Introducing the Expression Gallery Visual Pattern Library

Author: Lars Powers, Principal Developer Evangelist, Developer and Platform Evangelism

I’m a software developer at heart (and my resume backs me up here, honest!), but I confess to being a very visually oriented developer.

A few years ago, I gave a User Experience talk to a room full of software developers from partners around the world. I wanted to communicate Microsoft’s commitment to our UX platforms and our tooling, but I first needed to get any fence sitters down onto the ground by talking about why UX matters – to Microsoft, to our partners, and perhaps more importantly to our customers. So I led my talk with this somewhat odd sounding quote:

John Ruskin was an art critic and a prolific author on the subject of art and architecture. His quote above speaks to the intrinsic value of aesthetics and design in building architecture, but I think it holds up quite nicely in the software world as well.

Our UI platform product groups - Windows Presentation Foundation, Silverlight, Expression Blend, Expression Design, and others - are all working very, very hard to make sure that if you can dream it, you can build it.

But technical capabilities are just one half of the equation. We need something else. We need to be inspired. That’s really the first step towards delivering software that delivers on its promise, and that “first mile” of design isn’t an easy one to travel.

All of this brings us to the real topic here. I would like to formally introduce the Expression Visual Pattern Library.

Get Inspired!

The Expression Pattern Library will provide all of us with a new, community-based home inside of the existing Expression Gallery for visual patterns built with Silverlight or WPF. Eventually we hope to host HTML-based patterns as well.

You can visit and browse the library to get inspired by the unique perspective of others to visual styling, behavior, and new user interface approaches. Or you can share your own designs with the rest of the world.

Improving the aesthetics of software has some very tangible, real-world benefits. And being able to demonstrate a return on investment for WPF and/or Silverlight work depends on exploiting not just the technical and not just the styling capabilities, but both in conjunction. That’s where our platform shines, and where the pattern library can be an invaluable asset.

The pattern library isn’t a repository of graphics and visual snapshots; it is a library of XAML and code produced by your peers. You can not only get inspired by the visuals, within Expression Blend 4 or Visual Studio 2010 you can also examine the XAML, pull apart the mechanics of the visual elements, see what makes them tick, and learn how to implement your own derivatives.

Regardless of whether you consider yourself a developer, a designer, or somewhere in between, whether you work for a large ISV, an established design agency, or a small one-person shop, your UI projects can get a huge boost by learning from and deriving from the great work of your peers. And there are some fantastic designers / developers out there!

So whether you are looking for a new take on menu navigation or a cool visualization for tag clouds, a neat set of button gradients or a 3D flip behavior, the pattern library should be a great friend to turn to for your projects; a friend with a wealth of ideas, great aesthetics, and novel UI approaches.

What’s in the Pattern Library?

The Expression Pattern Library has fifteen different categories, including things like: buttons, lists, navigation, pagination, and more. To get things started, we have published patterns into many of the available categories. Here are just a few examples of what you’ll find already waiting for you in the library today…

Navigation

Floating Menu	Drop-down Menu

Lists

List with Integrated Details	Multi-View ListBox

Forms and Dialogs

Hover Detail	Modal Dialog

Layout

Vertical Accordion	Windmill Selector

Gauges

Volume Indicator	Range Slider

Q & A

By now, you probably have a few questions in your mind. Let’s hit some of the basics here.

Question: Where is the pattern library located?

Answer: The Expression Visual Pattern Library is surfaced as a section, or category, within the current gallery. You can find it at our normal Gallery URL: http://gallery.expression.microsoft.com/. Look to the far right under categories, and select “Pattern Library.”

Question: How is this different from the existing Expression Gallery?

Answer: The pattern library is an extension to the current gallery.

Question: What exactly is a pattern?

Answer: In this context, a pattern is XAML + code that, first and foremost, demonstrates a unique visual styling for a common visual element (for example, a gel skinned button). Most good patterns also demonstrate some sort of compelling behavior (for example, a slick mouse-over animation for that gel skinned button). Each pattern will have some commentary associated with it as well that discusses which scenarios might (or might not) be great candidates for applying a similar pattern.

Question: Isn’t this really a set of custom controls?

Answer: Actually, no. A custom control implies something that can just be dropped into your projects and, after setting a few properties, directly leveraged in your projects. Some of the galley entries might very well be implemented as controls, but the intent is to simply provide a home for XAML and code that can inspire you within your own projects.

Question: Is this meant for designers? Or developers?

Answer: Yes J. Patterns are universal. It doesn’t matter if you are a hard core graphics designer, a corporate developer with a large ISV, or anywhere between. If you want to know how to do some really cool, compelling things with WPF or Silverlight, you should periodically come back and visit the library. And if you have something to share, please do!

Question: Will the gallery items open and compile in Visual Studio? What about Expression Blend?

Answer: Absolutely. All of our “pre-stocked” submissions have been tested with Visual Studio 2010 and Expression Blend 4.

Question: Can I contribute to the gallery?

Answer: Yes! In fact, that is the whole point. As mentioned above, we have taken the liberty of kicking things off with great set of initial patterns spanning many of the pattern categories, but this is a community thing. Browse, partake, and be inspired, but also help others and share your own cool UI patterns.

With that, I will leave you all with one more quote, this time from the Swiss film-maker Jean-Luc Godard:

Now, go make something cool! (And share it with us.)