Syntax of XAML in Silverlight

XML Syntax

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

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.

The syntax of properties

Properties of an object, saying what characterizes it, can be written in the form of attributes. For example the property of 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 one directly does not assign the object with the attribute by the equal sign, one associates it 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 tags:

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

What 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 which one associates a menu list:

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

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

The 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 Content="Click"/>

Namespaces

Namespaces are denoted as attributes of the main globall 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, one connects a name of property 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, one can define an event by a type, while the event handlers will be attached to the objects represented by tags (such as Button). Syntax is still the same:

typeName.eventName

Extensions

It is possible to extend the XAML language thanks to a particular syntax: one places between { } the extension, 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 added definitions, and the MyStyle instance becomes a property of Button. One 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

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 tag.
For Silverlight, it is Canvas.
For a local application it is Windows.

More information

• Introduction to the XML Language.