XAML is like HTML – don’t always rely on auto-generated markup

Although WPF development made some really big steps in the last years and was made easier and more comfortable, especially with the release of Microsoft Expression Blend, the core of the entire concept of WPF – the XAML markup, is often neglected. And this pretty much copies the story of HTML and HTML editors like Dreamweaver, although not in a such brutal manner.

Both Visual Studio and Blend build auto-generated markup based on what the developer drags on the working canvas in the visual designer. For simple UI layouts this shouldn’t make much problems. However, when it comes to more complex layouts, I would highly recommend writing the XAML markup by yourself to ensure that the UI will be properly built. When there is work with multiple panels, moving grids and dynamically positioned elements, auto-generated markup might create a lot of confusion, since not all controls will be properly placed in their containers or regions. But you will probably see this once you start cross-porting the XAML contents between various tools, for example, between Blend and Visual Studio.

Not everything will look the same if you didn’t check the XAML for proper layout formatting.

For these situations  I would recommend the simplest possible solution - using XamlPad. It is a tool bundled with Microsoft SDK (installed automatically with Visual Studio, in case you have it). You can find it in C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin (path might be different depending on the system) – it is called XamlPad.exe. Its purpose is to help build a XAML-based UI by providing a very basic set of editing tools – a text editor and a viewer for the entered markup.

The UI looks pretty basic (something very close to Notepad):

However, don’t underestimate the potential of this tool – it gives developers the opportunity to learn XAML, since it actually requires writing all XAML markup code by hand and not relying on auto-generated code. XamlPad is a great tool to try your hand at designing pages and windows from scratch – you can easily plug controls and check the validity of the XAML code you are using.

NOTE: You will also need to make sure that you are referencing proper XML namespaces – without them, you won’t be able to render the contents. The two you would like to remember are:

http://schemas.microsoft.com/winfx/2006/xaml/presentation (for WPF elements)
http://schemas.microsoft.com/winfx/2006/xaml (for XAML elements)

XamlPad doesn’t indent your code, so be ready to manually format it for easier reading. The visual representation of the entered XAML markup is shown in the upper part for pages only. If you are working on a window, then a new window will be rendered every time you click the Refresh button, therefore losing the real-time edit-and-see capability.

Another useful feature is the possibility to take a look at visual and property trees:

And although you cannot modify the properties here, you can easily see their type and base classes. This makes the property assignment easier in XAML, as well as the work in the code-behind (which is not available in XamlPad).

XamlPad is definitely not the tool to work with animations, so you would probably want to use at least Visual Studio for that.

Now you should also understand that writing the entire XAML markup code for a WPF project can be a very daunting experience when it comes to complex animations and 3D graphics, therefore that’s where you can rely on tools like Blend. For simpler tasks, try writing XAML on your own – not that simple UIs become messy because of auto-generated markup, but because that’s one of the best ways to actually learn XAML and apply the knowledge later on in more complex WPF UI layouts.