Syntax of XAML

XAML is a markup language derived from XML. The graphic components are defined by open or closed tags, with attributes.

Reserved words are capitalized.

Example of tag with contents:

<Button>
  Click 
</Button> 

And without contents:

<Button/>

The attributes, as variables, are assigned by a value. In XML these values are put between quotes, contrary to the contents which is either a plain text, or one or more other tags.
For example we define a 100 pixels width button, with the Width attribute:

<Button Width="100" />

<Button Width="100">
  Click
</Button>

We will see that the tags can contain other tags, and even as the attributes can become tags.

Syntax of properties

Properties of an object, saying what characterizes it, can be written in the form of attributes. For example the property of the background color of a rectangle is given with the Fill attribute:

<Rectangle Fill="Red"/>  

In order to describe complex properties, XAML has an alternative format called "Property element syntax", which extends the syntax of XML and gives to the dot a special meaning.
In XML, the value of an attribute must be a string of characters. In XAML, it can be another object of the language.
But object is not directly assigned with the attribute by the equal sign, it is associated with a point according to syntax specific to XAML with the form:

ElementName.PropertyName

Let us take again the example of the Rectangle object and the Fill property, for the filling color, the attribute becomes a tag:

<Rectangle> 
  <Rectangle.Fill>
  </Rectangle.Fill>
</Button>

That makes it possible to add tags and attributes to the Fill property, such as for example a texture made with a picture, which one will see later in this manual.

Another example is provided by the specification of the language, that of the button to which is associated a menu list:

<Button>
  <Button.ContextMenu>
    <ContextMenu>
      <MenuItem>
          Open
      </MenuItem>
      <MenuItem>
          Close
      </MenuItem>
    </ContextMenu>
  </Button.ContextMenu>
</Button>

ContextMenu, which is a list of menus, becomes property of button thanks to Button.ContextMenu, and is declared inside the definition of the button.

Contents of a tag can be expressed as a property. Thus the text of the button is a property which is written in contents or as value of the content attribute:

<Button>
  Click
</Button

<Button Content="Click"/>

Namespaces

Namespaces are denoted as attributes of the main global container of the XAML file, Canvas or Window, or Page. They are URL preset which will be given in the examples and which correspond to the type of XAML definition.
Example:

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  

For namespaces other than the default space (the first line), the prefix (as x above) must precede each element of this namespace. For example:

x: elementName

For each element of the x namespace.

Attached properties

It is a concept specific to XAML. Syntax is the same one as for the elements of property seen higher, a name of property is connected to a name of a type (rather than to a name of element such as Button).

typeName.propertyName

The goal is to add properties to a type. The elements of this type will be able to then have the properties thus defined.

Attached events

In XAML, an event can be defined by a type, while the event handlers will be attached to the objects represented by tags (such as Button).
The sSyntax is still the same:

TypeName.EventName

Extending the language

It is possible to extend the XAML language thanks to a particular syntax: the extension is inserted between { } , made up of the name of a class followed by the instance.
Example taken in the specification of the language:

<Button Style="{StaticResource MyStyle}">
  Click
</Button>

The StaticResource class contains the definitions added, and the MyStyle instance becomes a property of Button.
We will be able to use Button.MyStyle in the definition of the button and to benefit of the new implemented features in the class.

Characteristics and root tags: Canvas, Page, Application

Case-sensitivity

XAML is case-sensitive. Capital first letters must be preserved.
That does not apply necessarily to values of attributes, thus true and True are acceptable, if the parser support them.

White spaces

Extra spaces are ignored, as well as special characters as the tab code, that are equivalent to spaces.

Root tag

Like any XML document, a XAML definition must be included into a single tag, the root element.
For a WPF page, the container is the Page or Window tag.
For Silverlight, it is Canvas.
For an application it is Application.