What is XAML

XAML is a descriptive programming language used in UWP, WPF, and Xamarin Forms to build user interfaces. What is XAML? Why do we need XAML? How to learn XAML?

XAML is a new descriptive programming language developed by Microsoft to write user interfaces for next-generation managed applications. XAML is the language to build user interfaces for Windows and Mobile applications that use Windows Presentation Foundation (WPF), UWP, and Xamarin Forms.

 

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.

 

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 as 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 following code snippet represents a Button object element.

 

<Button></Button>

 

Alternatively, you can use a self-closing format to close the bracket.

 

<Button />

 

An object element in XAML represents a type. A type can be a control, a class or other objects defined in the framework library.

 

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 <Windows />, <Page />, and <UserControl >. The <ResourceDirectory /> and <Application /> are other two root elements that can be used in a XAML file.

 

The Window element represents a Window container. The following code snippet 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">
</Window>

The Page element represents a page container. The following code snippet 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">
</Page>

The UserControl element represents a user control container. The following code snippet represents a user control container. 

<UserControl x:Class="HelloXAML.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
</UserControl>

XAML Namespaces

 

The part of the root element of each XAML are two or more attributes pre-fixed with xmlns and xmlns:x.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
…… >
</Window>

The xmlns attribute indicates the default XAML namespace so the object elements in used in XAML can be specified without a prefix. Additionally, the x: prefix is used with more than just the namespace. Here are some common x:prefix syntaxes that are used in XAML. 

1. x:Key: Sets a unique key for each resource in a ResourceDictionary.
2. x:Class: Class name provides code-behind for a XAML page.
3. x:Name: Unique run-time object name for the instance that exists in run-time code after an object element is processed.
4. x:Static: Enables a reference that returns a static value that is not otherwise a XAML-compatible property.
5. x:Type: Constructs a Type reference based on a type name. 

Elements and Attributes

 

A type in WPF or Windows RT is represented by an XAML element. The <Page> and <Button> elements represent a page and a button control respectively. The XAML Button element listed in the following code represents a button control.

 

<Button />

 

Each of the elements such as <Page> or <Button> have attributes that can be set within the element itself. An attribute of an element represents a property of the type. For example, a Button has Height, Width, Background and Foreground properties that represent the height, width, foreground color and background color of the button respectively. The Content property of the Button represents the text of a button control. The x:Name property represents the unique ID of a control that may be used to access a control in the code behind.

 

The following code snippet sets the ID, height, width, background color, foreground color, font name and size and content of a button control. 

<Button Content="Click Me" Width="200" Height="50"
Background="Orange" Foreground="Blue"
FontSize="20" FontFamily="Georgia" FontWeight="Bold"
x:Name="ClickButton">
</Button>

Content Property

 

Each XAML object element is capable of displaying different content types. XAML provides a special property called Content that works to display the content of the element depending on the element capabilities. For example, a Content property of a Button can be a set to a string, an object, a UIElement, or even and container. However, the Content property of a ListBox is set using the Items property.

 

Note: Some XAML object elements may not have the Content property available directly. It must be set through a property.

 

The code snippet in the following code creates a Button control and sets its Content property to a string “Hello XAML”.

<Button Height="50" Margin="10,10,350,310" Content="Hello XAML" />
Here is an alternative way to set the Content property of a Button.
<Button Height="50" Margin="10,10,350,310">Hello XAML</Button>

The output of the above code looks like the following.

 

 

A Button element can display other child elements as its content. The following code listed sets a Rectangle element as the content of the Button.

<Button Height="80" Margin="10,80,300,170">
<Rectangle Height="60" Width="120" Fill="Green"/>
</Button>

The output looks like the following.

 

 

 

Content property can also be a container or a parent element hosting child elements. The code listed below sets a StackPanel container with 5 child elements as the content of the Button.

<Button Margin="10,201,100,40">
<StackPanel Orientation="Horizontal">
<Ellipse Height="60" Width="60" Fill="Red"/>
<TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
<TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
<Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
<TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
</StackPanel>
</Button>

Here is the new output.

 

 

 

Here is the complete XAML code.

<Window x:Class="ContentPropertySample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="500" >
<Grid x:Name="ParentGrid">
<Button Height="50" Margin="10,10,350,310" Content="Hello XAML" />
<Button Height="80" Margin="10,80,300,170">
<Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
</Button>
<Button Margin="10,201,100,40">
<StackPanel Orientation="Horizontal">
<Ellipse Height="60" Width="60" Fill="Red"/>
<TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
<TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
<Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
<TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
</StackPanel>
</Button>
</Grid>
</Window>

There is the final output.

 

 

 

As you can imagine from the preceding examples, you can pretty much host any user interface as the content of a XAML element.

 

The following code creates the preceding Button controls dynamically in the code and sets their Content properties to a string, a Rectangle and a StackPanel respectively.

// Button with string content
Button helloButton = new Button();
helloButton.Margin = new Thickness(10,10,350,310);
helloButton.Content = "Hello XAML";
// Button with a UIElement
Button buttonWithRectangle = new Button();
buttonWithRectangle.Height = 80;
buttonWithRectangle.Margin = new Thickness(10, 80, 300, 170);
// Create a Rectangle
Rectangle greenRectangle = new Rectangle();
greenRectangle.Height = 60;
greenRectangle.Width = 120;
greenRectangle.Fill = Brushes.Green;
// Set Rectangle as Button.Content
buttonWithRectangle.Content = greenRectangle;
// Button with a Container, StackPanel
Button buttonWithStackPanel = new Button();
buttonWithStackPanel.Margin = new Thickness(10, 10, 350, 310);
// Create a StackPanel and set its orinetation to horizontal
StackPanel stackPanel = new StackPanel();
stackPanel.Orientation = Orientation.Horizontal;
// Create an Ellipse
Ellipse redEllipse = new Ellipse();
redEllipse.Width = 60;
redEllipse.Height = 60;
redEllipse.Fill = Brushes.Red;
// Add to StackPanel
stackPanel.Children.Add(redEllipse);
// Create a TextBlock
TextBlock textBlock1 = new TextBlock();
textBlock1.TextAlignment = TextAlignment.Left;
textBlock1.Text = "Red Circle";
// Add to StackPanel
stackPanel.Children.Add(textBlock1);
// Create a TextBlock
TextBlock space = new TextBlock();
space.TextAlignment = TextAlignment.Center;
space.Text = " ";
// Add to StackPanel
stackPanel.Children.Add(space);
// Create a Rectangle
Rectangle greenRectangle2 = new Rectangle();
greenRectangle2.Height = 60;
greenRectangle2.Width = 120;
greenRectangle2.Fill = Brushes.Green;
// Add to StackPanel
stackPanel.Children.Add(greenRectangle2);
// Create a TextBlock
TextBlock textBlock2 = new TextBlock();
textBlock2.TextAlignment = TextAlignment.Left;
textBlock2.Text = "Green Rectangle";
// Add to StackPanel
stackPanel.Children.Add(textBlock2);
// Set StackPaenl as Button.Content
buttonWithStackPanel.Content = stackPanel;
// Add dynamic button controls to the Window
ParentGrid.Children.Add(helloButton);
ParentGrid.Children.Add(buttonWithRectangle);
ParentGrid.Children.Add(buttonWithStackPanel);

XAML Events

 

Windows controls have most of the common events such as Click, GotFocus, LostFocus, KeyUp, KeyDown, MouseEnter, MouseLeave, MouseLeftButtonDown, MouseRightButtonDown and MouseMove. An event in XAML has an event handler that is defined in the code-behind and the code is executed when the event is raised.

 

Let’s see this by an example.

 

Create a new WPF Application and add a Button and a TextBlock control to the Window. Position and format the control the way you like. My final code is listed below.

<Grid >
<Button x:Name="HelloButton" Content="Click Me"
Width="150" Height="40" Margin="11,10,357.667,280.667"
FontSize="16" />
<TextBlock x:Name="HelloTextBlock" Width="400" Height="100"
Margin="10,57,208.667,163.667" Background="LightGray"
FontSize="30" Foreground="Orange"/>
</Grid>

We will now add the Button click event handler and write the code that will add some text to the TextBlock on the button click. As shown in the following code, add the click event hander called HelloButton_Click. 

<Button x:Name="HelloButton" Content="Click Me"
Width="150" Height="40" Margin="11,10,357.667,280.667"
FontSize="16" Click="HelloButton_Click" />

Now go to the code-behind and add the following code listing. This code is the HelloButton’s click event handler where we update the Text of the TextBlock. 

void HelloButton_Click(object sender, RoutedEventArgs e)
{
HelloTextBlock.Text = "HelloButton is clicked.";
}

Build and run the application and click on the button, the output will change to the following.

 

 

Recommended

 

Here is a free Ebook download on XAML: Programming XAML 

Here are some XAML Frequenty Asked Questions:

 

What is XAML?

XAML is a new descriptive programming language developed by Microsoft to write user interfaces for next generation managed applications. 

Will XAML Replace C# and VB.NET Languages?

No. XAML complements procedural languages. You can think of XAML as ASP.NET. To write ASP.NET applications, you need both ASP.NET and C# (or VB.NET). Similar to ASP.NET, XAML provides user interfaces and C# (or VB.NET) is used as code-behind language. 

What is the Relationship between XAML and WPF? 

WPF is code behind XAML. WPF is a name of .NET API (a set of classes) provided to write user interfaces for XAML under the hood. 

What is the Relationship between WPF and C# or VB.NET? 

WPF is the API similar to Windows Forms or ASP.NET. When you use Windows Forms, you need a language such as C# or VB.NET. Similarly, to write WPF applications, you will have to use a language C# or VB.NET. 

Will XAML and WPF Replace Windows Forms? 

Yes and No. Today, programmers can choose from WPF and Windows Forms. Now Windows Forms will be the older way to write Windows user interfaces and WPF is the new way ;-). It's hard to say how long  it will take XAML + WPF models to replace Windows Forms. 

Will XAML Replace ASP.NET? 

No. ASP.NET is to build Web applications and XAML is to build Windows. They are two different programming frameworks.