{ End Bracket }

Deliver Beautiful Apps

Kevin Moore

I remember my first rich client application. I was a senior in high school and I wrote a "virtual lens lab" for a project in my physics class. My tool was Visual Basic® 6.0. I think it was the first time I ever stayed up all night on a coding binge, writing the infamously requisite logic to make sure the controls looked right when the window was resized. I remember feeling restricted by my tool set: using the few features I was given to change the appearance of my application made it look silly—you can’t do very much with only font styles and background colors to play with. Leaving things as-is left the application looking boring—a sea of battleship gray.

This was certainly a problem in the early days of the Web: too many blink tags, too many image maps, not enough elegance and style. The Web evolved, though. We got CSS and Flash, XHTML and AJAX. Look at the CSS Zen Garden. Look at Live.com. As any number of sites show, the available tools can enable beautiful Web experiences.

Unfortunately, most Windows®-based developers are stuck with the same limited features of Visual Basic 6.0. Going beyond the simple tweaks involves crossing the "Owner Draw Cliff," requiring code to make seemingly trivial tweaks to controls. You have to be quite experienced and quite patient to create a compelling and seamless application in Windows that doesn’t look like every other app in Windows. Thankfully, this is about to change. We’ve designed Windows Presentation Foundation to enable the kinds of new, breakthrough user experiences you’ve only seen in designer-fabricated demos.

Everything in the Windows Presentation Foundation supports XML markup. We call it Extensible Application Markup Language (XAML). It’s easy to tweak and easy to tool. Everything supports reusable styles. What CSS did for the Web, Windows Presentation Foundation will do for applications. Using a consistent XML-based format, styles can be defined to tweak a single control or all of the controls in an application.

It’s simple. Everything is usable in a consistent way. No more using ActiveX® controls, COM, and HWNDs to bring in 3D objects, video, and flowing text. It’s baked in. Everything is designed to work together. 3D objects in a text flow. Text flows on 3D objects. Videos in a button. Images in a listbox. It’s all supported.

A button can look like it’s made from chrome, plastic, or a blob of jelly. All without losing any of the functionality of the standard button. All without writing a single line of code. A listbox can scroll left-to-right. It can have rounded edges. It can show pictures that pop up when you drag your mouse over and fade when you unselect. Again, all with the functionality and familiarity of the out-of-the box control. Yep, still no code. Do you want white borders around your pictures? Just add another tag.

As a developer, I now have the tools to tweak controls in an iterative way. Increase the margin. Maybe a bit more on the left and right. Change the background color. Change the background to a gradient. Add another gradient stop. Make the border thicker. Change the border brush. Make it rounded. This can be done in a tool like XamlPad (which is part of the SDK) without the change-compile-run-debug dance. Make a change, see the result, repeat. It’s faster than editing HTML, with far more flexibility.

My first a-ha moment with this design method was last August. My coworker Robby and I were at the office working on our PDC presentations. I was building up a color picker control sample and I wanted to make it look pretty. Robby threw over the fence some canned styles he’d created for a slider. You have to understand that the slider, like all of the controls in Windows Presentation Foundation, is not simply a set of mouse-down handlers and drawing commands. It’s built out of smaller elements, such as panels and buttons. Each of these slider subelements is also designed to be customized with different visualizations and different behaviors—in most cases without a single line of code.

I started by rounding all of the edges. I next replaced solid colors with subtle gradients. I added some simple triggers for mouse over and mouse down. I then wrote a simple converter in C# to generate the background gradients for my sliders. There was a learning curve. I had to understand styles, templates, binding, and converters. But once I’d worked through these concepts, I was amazed. After a few minutes of tweaking I had a color picker that looked beautiful. And it was easy.

Our hope is that Windows Presentation Foundation will allow developers to cross the line from dreaming about beautiful applications to delivering them.

Kevin Moore is a Program Manager on the Windows Presentation Foundation team at Microsoft. He works on data binding, controls, and automation. Visit his blog at blogs.msdn.com/okoboji.