BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

XAML

The second part of the Windows Presentation Foundation Fundamentals tutorial looks at the Extensible Application Markup Language (XAML), providing some samples of its use. This is the XML-based language that is used to create WPF user interfaces.

What is XAML?

As mentioned in the first article in this tutorial, a new language was created by Microsoft to permit the creation of Windows Presentation Foundation (WPF) user interfaces. This is known as Extensible Application Markup Language. It's abbreviated as XAML, which is pronounced, "Zamm-ell". XAML allows you to define user interfaces declaratively. It is the primary way to create WPF visual elements, although you can also create such items programmatically using .NET languages, such as C#.

XAML is not limited to creating WPF applications. Variations exist for other types of software. Silverlight uses XAML to create rich, cross-platform applications for execution in a web browser. Windows Phone devices include apps that have user interfaces designed using XAML. If you are a Windows 8 or Windows RT user, the apps that run in the Modern UI (formerly "Metro") can be created with a version of XAML.

XAML is based upon XML so must follow the rules that XML enforces. For example, every XAML document includes a single top-level XML element, which describes the type of XAML document being created. Within this root element there can be attributes, text and many levels of nested child elements. The elements represent items within the document, such as controls, resources and styles. Each can be configured using a mixture of attributes for simple properties and child elements for more complex ones.

Object Trees

The use of XML means that there is a naturally hierarchical structure to XAML. Controls and other elements can be nested within each other but there are no circular references. This tree-like structure starts with the root node of your XAML document and extends through all of the elements you add in the code. It actually continues further than this. Each control is itself made from smaller elements, which are also organised hierarchically.

The hierarchical organisation of XAML can be described by two object trees. They are known as the logical tree and the visual tree. It is important to understand this terminology, as it appears in lots of WPF and XAML documentation and is key to how you navigate through XAML elements.

The logical tree describes the content relationships between the elements of a user interface. This includes the controls that you add to a window and other nested items, such as each option in a list box. The structure is usually very close to that which you create in XAML.

The logical tree is not just a description of the hierarchy. It fundamentally controls the behaviour of the user interface and the way that controls communicate, as we will see later in the tutorial. For example, resources applied at one level of the tree can be used by controls at lower levels in the same branch. Similarly, you can apply a property to a control that is automatically inherited by its children.

The visual tree represents the relationships between the visual elements of your user interface. This includes the elements of control templates as well as the relationships between nested controls. For example, a CheckBox's visual tree includes the text and the small square that may contain a tick.

The visual tree is important when working with events. WPF includes a type of event known as a routed event. A routed event can be raised by one element of a control but be handled by one or more other elements, usually those controls that appear higher in the tree. For example, you might create a window containing a grid. One cell in the grid may contain a button with an image and some text. When you move your mouse pointer over the image, it will raise a routed event that can be handled at the level of the image directly, the button that includes it or the grid that contains the button.

Examples

In the next article in the tutorial we will look at how you can create a WPF application using Visual Studio. Before we do that, in the remainder of this article we'll look at some XAML examples that you can investigate using one of the free tools that you can download from the web.

One such free tool is Kaxaml. It allows you to generate XAML documents by editing the XML code directly. As you add elements and attributes, it renders the XAML automatically. One advantage that it gives over Visual Studio is that you can interact with the user interface without compiling and running a larger program. For example, you can add a TextBox to the XAML and immediately click the rendered textbox and type into it.

The examples below can be copied and pasted directly into Kaxaml. Some other tools will also permit this, whereas others might require some other action before you can interact with the user interface. If you prefer to stick with Visual Studio you can create the examples in a WPF project but interacting with the generated user interfaces will not be so easy.

30 January 2013