Cider to help the XAML go down!

An Introduction to XAML, Cider and all things WPF: by Andy Sithers

Let me begin with a confession. I’m laughably untalented as an artist – I constantly struggle to out-draw my 6-year old, and my 3-year old’s appreciation of colour and form leaves me standing. In fact, so challenged am I that if you gave me a dinner plate and a crayon, I’d struggle to draw a circle.  Of course, as a Windows developer, I can hide these failings behind judicious use of the System.Windows.Forms namespace, and the Windows Design Guidelines (more info).  My applications can look like your applications, and that probably isn’t a bad thing. Indeed, one of the great things about Windows is also one of its greatest limitations. All the applications look the same.

It’s unlikely that you haven’t heard that this is set to change with the release of Windows Vista ™ with Windows Presentation Foundation (WPF, part of WinFX, the next generation programming model for Windows), we’re going to be able to splash great swathes of colour across the screen with all kinds of funky (Screenshot) user (Blog) interfaces (Microsoft Max).  God have mercy on us, it’ll be like the early days of the web all over again (Bad UI Design). 

The good news is that there are talented people out there – people who can design great user interfaces, you know, the guys in black polo necks.  Between you and me, very few of them can crank code, but boy, do they know how to use their Crayolas.  And here’s the rub, there are very few great designers who can code, nor many great coders who can design – they tend to exist in different worlds, and use different software to do their job.  And the bad news is that these different bits of software really struggle to talk to each other. And then System.Windows.Forms comes along and really messes things up: Windows will look like Windows.

We’ve covered some of Microsoft’s new design tools in earlier editions, so I’ll be brief. The Expression range of tools is aimed at professional designers – be they Windows or web. And the great news is that Expression talks to Visual Studio, and vice versa – this is a new kind of round-trip engineering, call it round-trip design.

The common language between the tools is termed XAML (eXtensible Application Markup Language) – and is simply an XML representation of the object hierarchy that that will build your WinFX UI (in fact it’s more generic than that, but for the moment we’re just interested in WPF).

While the bits of code that allow you to create and run WPF applications have been around for some time, support for WinFX in Visual Studio has been limited to code or mark-up only, which has made UI design reliant on 3rd party tools, or a good imagination.  The good news is that the most recent CTP drop of WinFX now includes Visual Studio extensions that enable you to visually design WinFX applications.  As with all new technologies, you may know them better by their internal project codename – in this case Cider.  And no, I’ve no idea why Cider, but just to confuse you further, it’s now part of another project codename – Orcas (the next generation of Visual Studio). I hope that clears up any confusion.

So what about our design-savvy coders?  More good news – we’ve just announced the first preview of Expression Interactive Designer (aka codename Sparkle – don’t ask). When you see it, this is obviously a tool for designers – fancy colour pickers, little paint cans, the works.  Two really cool features jump out at you – the zoom control, which actually zooms the whole UI – great for huge monitors, and a nice demo of the vector graphics produced by WinFx; and most importantly the ability to open Visual Studio solutions. Once open, the forms and controls in the project are displayed, just as in Visual Studio – except as a designer you can start to do some serious damage to the UI: timeline-based animations, colour gradient fills, textures – the works.  Then you can save the project, and let the developers take care of the coding. 

Sounds like a great arrangement? We think so.  Anything that makes a developers life easier is good, if it makes the User’s life easier too, then we’re on to a winner.

Installation Recipe.
To check out round-trip design, you’ll need Visual Studio 2005, I’m afraid that the express editions just don’t cut it here. You’ll also need to download a bunch of new applications. Here’s the laundry-list:

Microsoft Expression Interactive Designer CTP (https://www.microsoft.com/products/expression/en/interactive_designer/id_free_trial.aspx)
Microsoft WinFX CTP (https://msdn.microsoft.com/windowsvista/getthebeta/default.aspx)
Here you’ll need the Runtime Components and Visual Studio Code Name "Orcas" Community Technology Preview - Development Tools for WinFX
Enjoy – post a comment and let us know how you get on.

Andy Sithers

Comments

• Anonymous
  March 02, 2006
  Dr. Andy Sithers writes a great article on XAML and CIDER.
  The Article!
  From the newest student newsletter...