Programming Using XAML

XAML Language

This blog discusses the Extensible Application Markup Language (XAML) programming language used to create user interfaces for Windows. XAML was first time introduced as a part of Microsoft .NET Framework 3.5. Officially speaking, XAML is a new descriptive programming language developed by Microsoft to write user interfaces for next-generation managed applications. XAML is used to build user interfaces for Windows and Mobile applications that use Windows Presentation Foundation (WPF) and Windows Runtime. This blog is an introduction to the XAML language. In this blog, we will learn how to define XAML elements, create controls and build screens using XAML Controls. By the end of this chapter, you will be able create user interfaces using XAML.

Purpose of XAML

The purpose of XAML is simple, to create user interfaces using a markup language that looks like XML. Most of the time, you will be using a designer to create your XAML but you’re free to directly manipulate XAML by hand.
A typical user interface developed for Windows has a window or page as a parent container with one or more child containers and other user interface controls. Figure 1 shows a window with file child controls including two Radio Button controls, a Button control, a TextBox control and one TextBlock control.

XAML allows us to represent the parent containers and child controls using markup script elements. Each parent, child containers and child control on the user interface is represented by a XAML element. XAML gives is the flexibility to build user interfaces at both design-time as well as run-time. Design-time usually means using a designer to drag-and-drop, resize and move screen layouts and control positons. Run-time usually means the containers and controls layout positioning is done by the code.

Hello XAML

XAML uses the XML format for elements and attributes. Each element in XAML represents an object which is an instance of a type. The scope of a type (class, enumeration etc.) is defined a namespace that physically resides in an assembly (DLL) of the .NET Framework library. Similar to XML, a XAML element syntax always starts with an open angle bracket (<) and ends with a close angle bracket (>). Each element tag also has a start tag and an end tag. For example, a Button object is represented by the Button object element. The code snippet in Listing 1 represents a Button object element.


The Root Elements

Each XAML document must have a root element. The root element usually works as a container and defines the namespaces and basic properties of the element. Three most common root elements are , , and . The and are other two root elements that can be used in a XAML file.
The Window element represents a Window container. The code snippet in Listing 7 shows a Window element with its Height, Width, Title and x:Name attributes. The x:Name attribute of an element represents the ID of an element used to access the element in the code-behind. The code snippet also sets xmlns and xmlns:x attributes that represent the namespaces used in the code. The x:Class attribute represents the code-behind class name. (<)Window x:Class="HelloXAML.MainWindow" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Title="MainWindow" Height="350" Width="525"> Close the Window tag.


The Page element represents a page container. The code snippet in Listing 8 creates a page container. The code also sets the FlowDirection attribute that represents the flow direct of the contents of the page.
Page xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml x:Class="WPFApp.Page1" x:Name="Page" WindowTitle="Page" FlowDirection="LeftToRight" Width="640" Height="480" WindowWidth="640" WindowHeight="480"> Close the Page Tag.


Creating Controls at Run-time

In the previous sections, we created controls at design-time by defining controls in the XAML code. Each XAML element has a corresponding type in .NET Framework that may be used to create and work with a control. For example, the Button type may be used to create and work with a button control. The code listed in Listing 21 creates a button dynamically and sets its properties.

private void CreateControlsDynamically()
{
Button clickButton = new Button();
clickButton.Width = 200;
clickButton.Height = 50;
clickButton.Background = new SolidColorBrush(Colors.Orange);
clickButton.Foreground = new SolidColorBrush(Colors.Black);
clickButton.FontSize = 20;
clickButton.FontWeight = FontWeights.Bold;
clickButton.Name = "HelloButton";
clickButton.Content = "Click Me";
LayoutRoot.Children.Add(clickButton);
}



XAML Collections:


A collection element usually is a parent control with child collection elements. The child collection elements are ItemCollection that implements IList