XAMLPad
XamlPad (xamlpad.exe) is a basic visual editor for Extensible Application Markup Language (XAML).
This topic contains the following sections.
- XAMLPad Features
- Using XamlPad to Test XAML Content
- Viewing the Visual Tree with XamlPad
- Related Topics
XAMLPad Features
XamlPad is a Windows SDK tool that provides the following features:
Real-time editing and display of XAML content.
XAML markup is automatically saved to the file
XamlPad_save.xaml.Auto parse and refresh modes provide XAML syntax validation and redisplay of content.
Basic text editing commands, including copy, paste, and undo. Also provides find support for simple strings. Invalid XAML displayed in red.
XAML errors are reported in the status bar on bottom left of the main window.
Expansion of XAML content into a visual tree allows you to view property values of content.
You can load an existing XAML file into XamlPad by passing the file name as a command-line argument (there is no File Open available in the menu).
.gif) Note: |
|---|
Occasionally, incorrect markup may cause XamlPad to not load the markup if the invalid markup gets saved; XamlPad may then fail to load on subsequent attempts to run it. To fix this issue, open the |
Using XamlPad to Test XAML Content
XamlPad provides a simple way to experiment with creating XAML content, since you see the results of the content displayed immediately. For example, XamlPad is useful for testing WPF features, such as OpenType fonts.
Testing OpenType fonts with XamlPad
.png)
The auto parse mode allows you to see syntax errors immediately as you enter XAML. Otherwise, if auto parse is not enabled, you will not see errors until you click the Refresh button. You can enable and disable the auto parse mode by clicking on the Auto Parse button at the top of XamlPad.
When an error is encountered, the entire XAML content is displayed in a red color, and the status information at the bottom of XamlPad displays the specific syntax error. A hyperlink to the right of the displayed error allows you to quickly jump to the area of XAML content that contains the error. In the following sample, the Label definition is not properly terminated by a closing '>'.
XamlPad with syntax error
.png)
Viewing the Visual Tree with XamlPad
Analyzing the visual tree[Glossary Lookup Failure: visual_tree#484ef710-6484-400c-832c-768cb3a33aa5] hierarchy using XAMLPad may give you insight into how control template expansion works. This knowledge may help you understand the performance costs and tradeoffs of the design of your user interface. To view the visual tree that corresponds to your XAML content, click the Show Visual Tree button on the menu bar. The following screenshot shows the expansion of XAML content into visual tree nodes in the Visual Tree Explorer panel of XamlPad:
Visual Tree Explorer panel in XamlPad
.png)
Click on a node to expand its hierarchy. Notice how the Label, TextBox, and Button controls each display a separate visual object hierarchy in the Visual Tree Explorer panel of XamlPad. This is because WPF controls have a ControlTemplate that contains the visual tree of that control. When you explicitly reference a control, you implicitly reference its visual hierarchy. For more information on visual objects and the visual tree, see Windows Presentation Foundation Graphics Rendering Overview.
Viewing Properties of a Visual Object
You can view the property settings of an item in the Visual Tree Explorer by selecting the item. The Property Tree Explorer panel, below the Visual Tree Explorer panel, displays the current property settings for the selected visual object. In this case, two of the derived classes of the Label control are expanded: ContentControl and Control. You could continue expanding other derived classes, such as FrameworkElement, to view even more properties.
Property Tree Explorer panel in XamlPad
.png)
It is useful to understand how your application is represented in terms of the underlying visual tree. The WPF Visual Profiler, for example, presents performance issues in the context of a visual tree. In this screenshot, the CPU Usage section of the Visual Profiler gives you a precise breakdown of a visual object's use of WPF services, such as rendering and layout.
Visual Profiler display output
.png)
For more information on WPF performance tools, see Performance Profiling Tools for WPF.