Introduction to XAML

Updated on September 24, 2015     Kisan Patel

One of the key features in WPF is its XAML base. The XAML in WPF allows you to declaratively specify the UI or appearance of WPF applications.

With XAML integration in WPF, it is easier and more convenient to draw a line between the desing or UI and the logic or functinality of WPF applications. This is because you can use XAML to define the UI of WPF applications, while you can add the logic for the UI in the code-behind file of the application.

XAML also eases the sharing of XAML content with the code-behind file as it allows the elements defined in the XAML file to be used in the code-behind file.

When you start a new WPF application, you get the following XAML as a starter (MainWindow.xaml):

<Window x:Class="SimpleStopWatch.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Main Window" Height="300" Width="300">
      <Grid>

      </Grid>
</Window>

Let’s take a look at a few of these elements.

XAML is XML

XAML, based on XML, makes use of markup tags, elements, and attrbutes to define the UI of WPF applications. Since the XAML is an XML document, it can only have a single root element. In this case, the root element is <Window> (while in XBAPs the root element is the <page> element).

Each element in a XAML document refers to a .NET class. This means that both <Window> and <Grid> 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.

XAML Properties as attributes

You can set the properties of WPF classes by setting the appropriate XAML attributes. For every attribute, the name of the attribute is followed by the equal to operator, which is then followed by the value to be assigned to the attribute. Note that wheather or not the value is a string or number, it is enclosed within double quotes.

The Title, Height, and Width properties of the Window are examples of this.

<Window x:Class="SimpleStopWatch.Window1"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Title="Main Window" Height="150" Width="250">

You can also specify properties as nested elements. For Example,

<Button>
   <Button:Height>30</Button:Height>
   <Button:Name>Button1</Button:Name>
   <Button:Content>Submit</Button:Content>
</Button>

In the above XAML code, the Height, Name and Content properties are set by using the property element syntax.