This article is a short introduction and overview of XamlPad and it's features. With XamlPad you can easily test your XAML code snippets at real time. Unlike the XAML designer in Visual Studio 2008, it's lightweight, very fast and thereby a great way to view the results of your GUI development.

XamlPad is a little application, installed with the Window SDK. You can find it under "[DRIVE]:\Program Files\Microsoft SDKs\Windows\v6.0A\bin\XamlPad.exe".

The first screenshot shows the main GUI of XamlPad. The user interface is divided into six parts: The menu bar (1), the "XamlPad pane" (2), the "Visual Tree Explorer" (3), the "Property Tree Explorer" (4), the input pane (5) and the status bar (6). Below I will describe these parts in detail.

1. The menu bar

The main menu bar contains the options of XamlPad:

You can switch the auto parse mechanism on/off, refresh manually the "XamlPad pane", print the content of the XamlPad pane, set the font and the font size of the text in the input pane and the zoom factor of the "XamlPad pane". At least you can switch the input pane, the Visual Tree Explorer and the Property Tree Explorer on/off.

2. The "XamlPad pane"

The "XamlPad pane" is the part of XamlPad where the parsed result of your XAML code is shown. There are two different possibilities, how the result of your XAML code is presented. First, if you use a page as root element, the content of your page is visible direct in XamlPad. If you use a window element as root element, XamlPad shows only the following message in the pane:

Window content does not run in the XamlPad pane; click Refresh or press F5 to run in a separate window.

If you follow these instructions and hit "F5" or press the "Refresh" button, a new WPF window is coming up. This window contains now the result of your previously parsed XAML code.

3. The "Visual Tree Explorer"

In the tree view you get the complete overview of visual elements of your XAML code. This tree contains all elements that derived from the classes "Visual" and "Visual3D". Please have a look hat WPF Part 5 for more informations about the visual element tree and the differences between it and the logical element tree.

4. The "Property Tree Explorer"

In this tree view you can see the properties of the current selected element of the Visual Tree Explorer. The tree view refreshes it's content dynamically. If there's a Button element in your code e.g. and you press this button, the property "IsPressed" changes it's value from false to true (the property "IsPressed" is shown under the tree view item "base").

5. The input pane

There's nothing in particular at the input pane. You can write your XAML code as in a normal RichTextBox element. After you stop editing for a while, the content is parsed automatically (if the auto parse option is activated). If there's no error during this process, the "XamlPad pane" updates it's content. If an error has occurred, the complete content is highlighted in red color. The status of the parse process is displayed in the status bar.

6. The status bar

After the code is parsed successfully, the status bar gets an update. If there was no error, the status bar shows e.g. the following text (<Path> is a placeholder for the current location of XamlPad):

Done. Markup saved to "<Path>".

If an error has occurred, the status bar displays the error message, the line and position of the XAML code where the error is located and a direct link to this position.

Conclusion

As mentioned above, XamlPad is a good way to view your XAML code. But there are some disadvantages. Sometimes a better code highlighting, multiple tabs and an IntelliSense like input assistance would be very nice features. But I think, there will be tools available in the future (or are they already available?).

---

Oh, something at the end of the article: Did you see the little images around the numbers in the main XamlPad screenshot? I used them to number serially the different parts of the GUI. I created the image through a little XAML definition, you can view below.

The screenshot of the example application is visible on the screenshot. You can download the Visual Studio 2008 solution here. It contains the custom control "RisingBorder" (don't ask me why I selected this name... maybe minor creativity on my part) and a test project. I added the numbers through the test project (TextBox element).

RisingBorder example (Loose XAML) (36 lines, approx. 1,39 KBytes)