Four Free XAML Editors Reviewed

I like to type XAML.

It’s an extremely flexible and expressive way to work when sketching out the logical structure of a new piece of UI.

A graphical design tool like Blend is best for some things, like creating a non-trivial gradient brush, but at some point it all comes down to the code.

To satisfy my need for speed and create a sense of flow I need a fast editor that can provide instant feedback.

XAML editors exist on a continuum from the fast and lightweight to the more powerful but cumbersome. The professional tools (Visual Studio and Blend) occupy the heavyweight end, but there are also a number of free tools that provide a more basic but responsive experience.

In this post, I’ll look in detail at four free XAML editors all of which are quick to start up and responsive as you type.

The Pro Tools versus the free stuff

The XAML editor in Visual Studio 2008 has excellent IntelliSense support, but it’s way too slow to be really useful, and fails to understand code that other editors can take in their stride. Better things are promised with the designer in VS2010.

Of course, Expression Blend is just a glorified a XAML editor, and you can type XAML straight into Blend’s editor window. Blend 3 also has XAML IntelliSense, but as a straight-out text editor it’s not the most responsive.

The free XAML editors I’m looking at here all have some basics in common. Each has a text area where you can edit your XAML. That XAML is parsed by the editor and the objects created are then hosted in a content control. These are live UI objects that respond to mouse and keyboard events, so you can click buttons, type into text boxes and even test out state transitions.

XAML Cruncher

Created by the legendary Charles Petzold, XAML Cruncher was originally a sample program featured in Petzold’s book ‘Applications = Code + Markup’. The downloadable version 2.0 (available from http://www.charlespetzold.com/wpf/) has some extra features not seen in the book.

XAML Cruncher is the most barebones XAML editor. It’s essentially a Notepad clone, with the addition of a large pane to the right which displays the result of parsing the XAML entered int0 text pane.

XAML Cruncher feels very fast and responsive. It automatically re-parses the XAML as you type. It has a tendency to lock up if you start doing complicated things with triggers, but mostly it works.

One killer feature that keeps this program on my desktop: the ‘Load Assembly’ command. XAML Cruncher allows you to add references to external assemblies – useful for testing out your own controls. Crucially this list is saved, so you don’t have to re-add your assemblies every time you start the program.

XamlPad

XamlPad is a tool produced by Microsoft and distributed (sporadically) as part of the Windows SDK. Unfortunately, it was not included with the SDK version that shipped with VS2008.

You can download it with the February 2008 Windows SDK for Windows Server 2008 and .NET Framework 3.5

XamlPad is pretty basic. It significantly lacks any facility to open or save XAML files - you just type your XAML into the text box. It does, however, remember previous content when closed and restarted.

Notable features include the Visual Tree Explorer which displays the visual tree of your creation. Select an item on this tree and its dependency properties are displayed in the Property Tree Explorer.

XamlPadX

XamlPadX is the editor I use most frequently outside of Visual Studio. It was created by Lester Lobo and can be downloaded from this entry on his blog.

This is another fast and lightweight tool, but this one packs a few more features.

The text editor features XML syntax highlighting, can collapse tags and will automatically create closing tags as you type. If your XAML can’t be parsed, the error message displayed on the status bar includes a hyperlink to jump straight to the offending code.

The Visual Tree Explorer and Property Tree Explorer are similar to XamlPad. I tend not to use these, I prefer to point Snoop at the rendered content.

Toolbar buttons include options to print the rendered content, or to save a snapshot as a jpeg.

There are a number of useful features hidden away on the editor’s context menu. These include the ability to correctly indent selected XAML, or to comment out the selection.

Also available via the context menu is a collection of XAML snippets – handy when you can’t recall the correct syntax for setting up a gradient brush. The collection of snippets is customisable so you can change the supplied snippets or add your own.

XamlPadX supports plugins and comes with 3 of them: a clipboard viewer, a path designer and most usefully a colour picker. The colour picker includes the ability to right-click any point on another program to grab an RGB value, and then paste it into your XAML.

XamlPadX can load and reference external assemblies, but annoyingly it doesn’t remember these references when you close the program and restart it.

Kaxaml

This one is another favourite. Available from http://www.kaxaml.com, Kaxaml is the creation of devsigner guru Robby Ingebretsen. I highly recommend checking out Robby’s blog, and his Design Fundamentals for Developers workshop from last year’s MIX conference.

Kaxaml is the easily best looking XAML editor, with a subtle colour palette, well laid-out UI and animated transitions. For example, if your XAML contains errors, the rendered content fades to grey and the error message slides in smoothly from above.

Kaxaml sports a tab-based interface to handle multiple XAML files at the same time. Both WPF and Silverlight are supported.

Like XamlPadX, the Kaxaml editor includes syntax highlighting and can collapse XML tags (they both use the SharpDevelop editor control). Unlike the other free editors, Kaxaml features IntelliSense code completion.

The left part of the window features a number of expandable panels which expose different functions.

The Snippets panel has a sizeable collection of default snippets, and the collection is easily extendable. Snippets can be dragged onto the editor window, or new snippets can be added by dragging text from the editor onto the snippets panel.

The Colour Picker panel includes a customisable palette, the ability to copy the selected colour onto the clipboard (as an ARGB hex string) or to ‘synchronise with selected text’. This last option allows you to select a colour property in the XAML editor and then drag the mouse cursor around the colour picker to see the colour immediately updated in the editor and the rendered content (no typing required).

The snapshot panel allows you to copy an image of the rendered content to the clipboard or save it as a PNG file.

The XAML Scrubber panel can automatically tidy up your code, with options to move attributes onto separate lines,  re-order attributes by importance, remove common default values and control indentation and numeric precision.

I have one gripe with Kaxaml. By default there is a 2 second delay before the XAML you type is parsed and rendered. This makes the program feel less responsive than the other editors reviewed here. This delay can be reduced to 1 second through the Parser tab on the Settings panel.