.NET XAML Basics

Introduction

XAML (eXtensible Application Markup Language) is a declarative markup language used for initializing structured values and objects in .NET applications. It's primarily used for designing user interfaces in Windows Presentation Foundation (WPF), Universal Windows Platform (UWP), and Xamarin.Forms applications. XAML provides a clean separation between the UI design and the underlying business logic, making it easier to develop and maintain applications.

As a beginner in .NET desktop development, understanding XAML is essential as it forms the foundation of modern Windows application interfaces. In this guide, we'll cover the basics of XAML syntax, its core concepts, and how to use it to create user interfaces for .NET applications.

What is XAML?

XAML is:

A declarative language (you describe what you want, not how to create it)
Based on XML (eXtensible Markup Language)
Used to define and initialize .NET objects
A way to separate UI design from code

When you write XAML code, the XAML parser converts it into C# or VB.NET code at runtime, creating and initializing objects defined in your markup.

XAML Basic Syntax

Elements and Attributes

In XAML, UI elements are represented as XML elements, and properties are set as XML attributes:

xml
<Button Content="Click Me" Width="100" Height="30" Background="Blue" />

This XAML code creates a blue button with text "Click Me" and specific dimensions.

Namespaces

XAML files typically begin with a root element that includes namespace declarations:

xml
<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="MyApp.MainWindow"
    Title="My First XAML App" 
    Height="450" 
    Width="800">
    
    <!-- Window content goes here -->
    
</Window>

The most common namespaces are:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" - Core WPF controls and elements
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" - XAML language features
x:Class - Specifies the code-behind class for this XAML file

Creating a Simple WPF Application with XAML

Let's create a basic "Hello World" application using XAML:

MainWindow.xaml:

xml
<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="HelloWorldApp.MainWindow"
    Title="Hello World App" 
    Height="300" 
    Width="400">
    
    <Grid>
        <TextBlock 
            Text="Hello, XAML World!" 
            FontSize="24" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center" />
    </Grid>
    
</Window>

MainWindow.xaml.cs (Code-behind):

csharp
using System.Windows;

namespace HelloWorldApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

When you run this application, you'll see a window with "Hello, XAML World!" centered in it.

XAML Layout Controls

XAML provides several layout controls to organize UI elements:

Grid

The Grid is one of the most flexible layout panels, allowing you to organize elements in rows and columns:

xml
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Top Left" />
    <TextBlock Grid.Row="0" Grid.Column="1" Text="Top Right" />
    <Button Grid.Row="2" Grid.Column="1" Content="Bottom Right Button" />
</Grid>

The row height and column width can be:

A specific pixel value (e.g., Height="50")
Auto (sized to fit content)
* (takes remaining space)

StackPanel

StackPanel arranges elements in a single line, either horizontally or vertically:

xml
<StackPanel Orientation="Vertical" Margin="10">
    <TextBlock Text="First Item" Margin="5" />
    <TextBlock Text="Second Item" Margin="5" />
    <Button Content="Click Me" Margin="5" />
</StackPanel>

WrapPanel

WrapPanel positions elements in sequence from left to right, wrapping to a new line when there's not enough space:

xml
<WrapPanel>
    <Button Content="Button 1" Width="100" Height="30" Margin="5" />
    <Button Content="Button 2" Width="100" Height="30" Margin="5" />
    <Button Content="Button 3" Width="100" Height="30" Margin="5" />
    <Button Content="Button 4" Width="100" Height="30" Margin="5" />
    <Button Content="Button 5" Width="100" Height="30" Margin="5" />
</WrapPanel>

Property Elements and Complex Properties

Some properties are too complex to be set as attributes. For these, XAML provides property element syntax:

xml
<Button Width="100" Height="30">
    <Button.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="LightBlue" Offset="1" />
        </LinearGradientBrush>
    </Button.Background>
    <Button.Content>Gradient Button</Button.Content>
</Button>

Here, the Background property is set using property element syntax because a gradient is too complex for an attribute.

Content Properties and Child Elements

Many controls have a default content property, allowing you to set content directly as a child element:

xml
<Button Width="100" Height="30">
    Click Me
</Button>

This is equivalent to:

xml
<Button Width="100" Height="30" Content="Click Me" />

For more complex content, you can nest elements:

xml
<Button Width="150" Height="40">
    <StackPanel Orientation="Horizontal">
        <Image Source="/Images/icon.png" Width="16" Height="16" Margin="0,0,5,0" />
        <TextBlock Text="Button with Icon" />
    </StackPanel>
</Button>

Value Converters

XAML can convert strings to appropriate property types, but sometimes you need custom conversion. Value converters allow you to transform data:

xml
<Window xmlns:sys="clr-namespace:System;assembly=mscorlib" ...>
    <StackPanel>
        <TextBlock Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='Current time: {0:HH:mm}'}" />
    </StackPanel>
</Window>

Data Binding Basics

Data binding connects properties of UI elements to data objects:

xml
<StackPanel>
    <TextBox x:Name="inputTextBox" Width="200" Margin="5" />
    <TextBlock Text="{Binding Text, ElementName=inputTextBox}" 
               Margin="5" FontWeight="Bold" />
</StackPanel>

In this example, the TextBlock displays whatever is typed in the TextBox through one-way binding.

Practical Example: A Simple Form

Let's create a simple user registration form:

xml
<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="RegistrationForm.MainWindow"
    Title="User Registration" 
    Height="350" 
    Width="500">
    
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" 
                   Text="User Registration Form" FontSize="20" Margin="0,0,0,20" />
        
        <TextBlock Grid.Row="1" Grid.Column="0" Text="Full Name:" 
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="1" Grid.Column="1" Margin="0,5" 
                 x:Name="nameTextBox" />
        
        <TextBlock Grid.Row="2" Grid.Column="0" Text="Email:" 
                   VerticalAlignment="Center" />
        <TextBox Grid.Row="2" Grid.Column="1" Margin="0,5" 
                 x:Name="emailTextBox" />
        
        <TextBlock Grid.Row="3" Grid.Column="0" Text="Password:" 
                   VerticalAlignment="Center" />
        <PasswordBox Grid.Row="3" Grid.Column="1" Margin="0,5" 
                     x:Name="passwordBox" />
        
        <TextBlock Grid.Row="4" Grid.Column="0" Text="Date of Birth:" 
                   VerticalAlignment="Center" />
        <DatePicker Grid.Row="4" Grid.Column="1" Margin="0,5" 
                    x:Name="birthDatePicker" />
        
        <StackPanel Grid.Row="6" Grid.Column="1" Orientation="Horizontal" 
                    HorizontalAlignment="Right">
            <Button Content="Cancel" Width="80" Margin="5" />
            <Button Content="Register" Width="80" Margin="5" Background="#FF5A8CDB" 
                    Foreground="White" x:Name="registerButton" Click="RegisterButton_Click" />
        </StackPanel>
    </Grid>
</Window>

And the corresponding code-behind:

csharp
using System;
using System.Windows;

namespace RegistrationForm
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void RegisterButton_Click(object sender, RoutedEventArgs e)
        {
            string name = nameTextBox.Text;
            string email = emailTextBox.Text;
            DateTime? birthDate = birthDatePicker.SelectedDate;

            if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(email) || !birthDate.HasValue)
            {
                MessageBox.Show("Please fill in all required fields");
                return;
            }

            MessageBox.Show($"Registration successful!\n\nName: {name}\nEmail: {email}\nDate of Birth: {birthDate.Value.ToShortDateString()}", 
                           "Success", MessageBoxButton.OK, MessageBoxImage.Information);
        }
    }
}

This example demonstrates how to create a form with labels, textboxes, a password box, a date picker, and buttons, all organized using a Grid layout.

Styles and Resources

XAML allows you to define reusable styles and resources:

xml
<Window.Resources>
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="#FF5A8CDB" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="10,5" />
        <Setter Property="Margin" Value="5" />
    </Style>
    
    <Style x:Key="LabelStyle" TargetType="TextBlock">
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="VerticalAlignment" Value="Center" />
    </Style>
</Window.Resources>

<StackPanel>
    <TextBlock Text="Styled Label" Style="{StaticResource LabelStyle}" />
    <Button Content="Styled Button" Style="{StaticResource ButtonStyle}" />
</StackPanel>

Summary

In this guide, we've covered the basics of XAML for .NET desktop development:

XAML syntax and structure
Common layout controls like Grid, StackPanel, and WrapPanel
Setting properties using attributes and property elements
Content properties and nesting elements
Data binding fundamentals
Creating a practical user interface with a registration form
Styling and resources

XAML provides a powerful way to create user interfaces declaratively, separating design from code and enabling a more maintainable application architecture. As you become more familiar with XAML, you'll discover its flexibility for creating rich, interactive user interfaces for .NET desktop applications.

Additional Resources

Exercises

Create a calculator UI with buttons for numbers and basic operations
Design a media player interface with controls for play, pause, stop, and a progress bar
Build a settings page with various input controls (checkboxes, radio buttons, sliders)
Create a custom style for buttons that changes its appearance when the mouse hovers over it
Implement a form that validates user input and displays error messages

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

What is XAML?​

XAML Basic Syntax​

Elements and Attributes​

Namespaces​

Creating a Simple WPF Application with XAML​

MainWindow.xaml:​

MainWindow.xaml.cs (Code-behind):​

XAML Layout Controls​

Grid​

StackPanel​

WrapPanel​

Property Elements and Complex Properties​

Content Properties and Child Elements​

Value Converters​

Data Binding Basics​

Practical Example: A Simple Form​

Styles and Resources​

Summary​

Additional Resources​

Exercises​