XAML Introduction Part 1

Understanding XAML (eXtensible Application Markup Language) is a key to creating the latest .NET 
user experiences in WPF and Silverlight. We will introduce the basic concepts around XAML and take a 
look at various features such as namespaces, elements, properties, events, attached properties and some 
basic layout. We’ll create a simple WPF application that covers these fundamentals. Although you will 
probably end up doing most of your UI design with a drag-and-drop tool such as Expression Blend, 
knowing the internals gives you a leg up in making the final tweaks to ensure an excellent user 
experience. 
Visual Studio IntelliSense works in XAML files very well. This means that as we type, we get tag 
completion, attribute completion, and even value completion (for values that are Enums). Depending on 
your preferences, you may find yourself doing a majority of your XAML in the Visual Studio editor and 
saving the visual design tools for complex cases.

An Initial Window
When you start a new WPF application, you get the following XAML as a starter (Window1.xaml):


 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Window1" Height="300" Width="300">

XAML is XML
The first thing to note about XAML is that it is XML. If you need an overview of XML, you can go here: 
http://www.w3schools.com/xml/default.asp. Since the XAML is an XML document, it can only have a 
single root element. In this case, the root element is “” (but “” and “” 
are also common).

XAML Elements are .NET Classes
Each element in a XAML document refers to a .NET class. This means that both “” and 
“” are .NET Classes.

XAML Namespaces
In order to reference a .NET class, we also need to reference the namespace. You can think of this as the 
“using” statements in a .cs file. Namespaces are added to XAML by using the xmlns attribute. You can 
see that by default, there are 2 namespaces included:
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
The first refers to the standard WPF namespace. This is also the default namespace, so any elements that 
do not have a prefix are assumed to come from this location. You’ll notice that the namespace is written 
as a URI. This does not refer to a physical location, but rather the unique identifier of the namespace.
The second refers to the XAML namespace. This is identified by xmlns:x, with the “x” being an alias 
you can use as a prefix for elements from that namespace. We’ll look at this a little more closely in just a 
bit.
Obviously, you can also add your own namespaces to this list. We’ll do that later on

XAML Code Behind
The x:Class attribute references the code-behind for this XAML window. You’ll notice the “x:” which 
means that the Class attribute comes from the XAML namespace noted above. The value of the attribute 
references the “Window1” class in the “SimpleStopWatch” namespace. If you go to the 
Window1.xaml.cs file, you’ll see the partial class that is defined here.
The code behind is where we can put C# (or VB) code for things such as implementation of event 
handlers and other application logic. As a note, it is technically possible to create all of the XAML 
elements in code (WinForms apps create all of the UI in code), but that bypasses the advantages of having 
the XAML.

Other Starting Attributes
The other attributes of the Window element (Title="Window1" Height="300" Width="300") are 
simply properties of the Window class (more below). 

The Grid Element
The final element is the element. We’ll be filling this in soon. For now, note that the Window 
element only allows for a single child. This means that if we want to include more than one Control in 
our Window, we will want to wrap them in some sort of layout control that allows multiple children. The 
Grid is just that sort of control.

Properties as Attributes
Properties of elements can be expressed in a couple of different ways. The first is by using an XML 
attribute. The Title, Height, and Width properties of the Window are examples of this. We’ll go ahead 
and adjust a few of the values now. In addition, we’ll add the “TopMost” property and set it to True. This 
will keep the application on top of other active windows. This makes it more useful as a timer for other 
processes. Here’s our Window markup:


 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Simple Stop Watch" Height="150" Width="250" Topmost="True">

Properties as Nested Elements
Properties can also be expressed as nested elements. This is often required when properties are of a 
complex type. Let’s define some rows for our Grid. Here’s what the markup looks like:

You can see here that we have set the “Grid.RowDefinitions” property by creating a nested element. This 
particular element accepts a list of child objects (“RowDefinition”). We won’t go into all of the options 
for the “Height” property of the rows; that’s best left to a discussion on layout controls. For now, just 
know that “Auto” means that the row will only take up as much space as its contained elements; “*” 
means to take up the remaining space. We won’t define any columns for this application, but they are 
defined much the same way

Attached Properties
An attached property is a property that doesn’t belong to the element that specifies it. Let’s take a look at 
an example. We’ll add a TextBlock to the Grid. This will be the output for the time of our Stop Watch:



 HorizontalAlignment="Center" VerticalAlignment="Center"
 Text="00:00" />

First note that our TextBlock is nested inside our Grid markup. Most of the attributes are simply 
properties of the TextBlock class (FontSize, HorizontalAlignment, VerticalAlignment, Text). 

But Grid.Row is not. The Grid.Row property technically belongs to the Grid class. But since it is an 
attached property, we can use this in any element contained in the Grid to let the Grid know how to 
handle the layout. In this case, we are indicating that the TextBlock should be placed in the first row of 
the grid.

 To be Continued.....