WPF Skinning your Websites

UPDATE 2: Now able to create “filmstrip” images from WPF Storyboards; some basic documentation available here.

UPDATE: Now able to create animated GIFs from WPF Storyboards.

I’ve written a cool little utility that lets you skin websites with WPF / XAML.  All you need to do is define a XAML scene and specify the rectangular regions you need snapshots of.  Each is saved to its own file (as PNG, JPEG or GIF).

Once you’ve got the files, just set them as background images for appropriately positioned HTML elements 🙂

Some nice benefits are:

• You can use any WPF content, including 3D.
• You get edge anti-aliasing for free (see comment below).
• You can build scenes with multiple layers; gradient fills, alpha blends etc.  If your graphic assets have transparency (PNG files for example) you can do some very nice compositing.  Your graphic designers may soon be twiddling their thumbs…
• You can design your scene in Blend, Kaxaml, … (insert tool of choice).
• Rounded corners!  A few CornerRadius attributes and you never need cringe at AJAX Control Toolkit’s blocky attempt again.
• Browser independent; you can save images as PNG, JPEG or GIF.  It’s your choice whether you include transparency in them or not (IE6 can’t apply transparency in PNGs but IE7 can).  You can compose your scene using all the transparency you like, but slice the result into JPEGs or GIFs that’ll work everywhere 🙂
• You can include data-binding expressions; a nice example of this is keeping primary site colors in a separate configuration file, giving developers a disturbing amount of control (don’t forget you can manipulate colors with OpacityMasks etc to produce varying shades).
• Simple WPF Storyboards can be recorded as animated GIFs or “filmstrip” images (the animated frames are vertically spaced in a single image).
• It’s a command-line utility and is happy with relative paths.  This makes it great for calling from a post-build step in Visual Studio.
• It’s mainly in its own assembly; you could use it in other applications, or use it as a custom build tool.
• It’s free!  Source code will be available soon 🙂

Now for the bad news:

• 3D content isn’t anti-aliased.  This is simply because WPF 3D expects the graphics hardware to do its 3D anti-aliasing, and it only does that when it’s sent directly to the screen.  One solution is to create the RenderTargetBitmap with a much higher DPI (say 300), then downsample it later.  I’ll probably make the DPI configurable in a future update. 
• I’ve found some properties don’t work with binding expressions (for example the color steps of a LinearGradientFill).  However the same properties work fine in Kaxaml, Blend etc.  This might just be a bug in my code; I’ll post an update if I find a solution.  As usual there are workarounds; instead of a LinearGradientFill you could use several solid fills (with binding) and apply static OpacityMasks with LinearGradientFill.  If that statement made no sense, let me know and I’ll try to describe it better 🙂 (also let me know if you have a solution).
• Although it can create animated GIFs, currently they only play once (no repeat).  However, it’d be quite easy to add a reference to NGif to re-encode the GIF with the relevant metadata (could do it all through streams; no intermediate files needed).

Finally the goodies 🙂  You can download the utility here.  It includes some sample configuration files to play with (and shows binding to values in a separate XML file).  Extract the files to a folder and type this:

SkinBuilder SkinBuilder.xml

It’ll create around 12 image files in the current folder (including one animated GIF and a filmstrip image).  They probably won’t be much use to you directly, but serve as a good example.  Here’s pretty much what the sample page looks like:

But that’s not all!  You can also get the source code right here 🙂

I’ve not created an installer yet; I could say this is so I don’t burden you with anything unnecessary, but clearly it’s just laziness 🙂

Enjoy!