Silverlight: XAML

Overview

Extensible Application Markup Language (XAML) is an XML based declarative language that is used in the Windows Presentation Foundation (WPF) and Silverlight to define the user interface and animations. Silverlight implements a subset of features that are available in the .NET Framework 3.0. Thus, certain features used with WPF, such as markup extensions using the curly braces ({ and }), are not available in Silverlight.

The goal of this document is to highlight the main differences from other XML formats you may be familiar with and the syntax you will need to understand to read and create XAML files.

Syntax

Namespaces

The following table lists the namespaces used by Silverlight XAML.

Namespace Description
http://schemas.microsoft.com/winfx/2006/xaml The general XAML namespace, usually prefixed with "x".
http://schemas.microsoft.com/client/2007 The Silverlight specific namespace. Note that this is different from WPF even though they share some of the same elements.

Silverlight 1.0 requires that the root node of the document be a <Canvas> element. The following example shows a minimal XAML document.

Property Element Syntax

Standard XML lets you set values of elements using attributes or by using the content of an element. Property element syntax is a way to let you specify complex values for object properties. For example, setting a gradient with multiple color stops as a plain string would require specialized formatting that would not easily map to the underlying gradient object. It would also be extremely difficult to extend this format in the future while maintaining backwards compatibility. Property element syntax gives us an easy way to read values and an extensible mechanism that also maps to the actual objects used when manipulating the object in code.

The basic syntax is demonstrated below.

Thus our gradient example would look similar to the following. Note the use of property element syntax for both Rectangle.Fill and LinearGradientBrush.GradientStops. Rectangle.Fill contains a LinearGradientBrush object and its GradientStops property contains a collection of GradientStop objects.

While the resulting code required tends to be verbose, it is much more readable for humans than attempting to shrink all of the information above into a simple string. It also leaves the content of the <Rectangle> element free to hold the actual visual children that it may contain.

Attached Properties

Attached properties are a way to specify properties on any element, even if element does not natively have that property. Most often you'll see this used to set properties that are related to the parent of the element.

For example, setting Top and Left properties are actually dependent on the container in which the element is placed. In the following example, Top and Left are a feature of the parent <Canvas> where the <Ellipse> resides.

If the <Ellipse> was placed within a different type of layout container, such as a <Grid> (not supported in Silverlight 1.0), the Top and Left properties would have no meaning as the placement of the object would be based on the Column and Row of the parent grid.

Another example is often seen with animations. A <Storyboard> needs to know the target object and property of an <Animation>. Note the use of parentheses to target an attached property.

Events

Events are defined in XAML using attributes in a similar fashion to HTML. The following example attaches the MyCanvas_Loaded() event handler function to the Loaded event of the <Canvas> element.

It is important to note that in Silverlight 1.0 the event handler functions must be in the JavaScript global scope. As this will make it impossible to create object oriented applications, it is usually better to hook up event handlers in code to achieve better encapsulation.

Triggers are also a way to start an animation purely in XAML without the need for event handler code. See Animation Basics for details including limitations.

Further Reading

Related information on the web is listed below.

Yahoo Forum Discussions