Benefits of using XAML

5 minutes

XAML is a markup language that you can use to build your UI instead of C# code. Using XAML, you can split up your UI and behavior code to make both easier to manage.

In this unit, you'll compare using XAML with defining the UI layout using C# code. You'll also learn about some of the benefits of using XAML as a markup language to define your UI.

What is a markup language?

A markup language is a computer language that you can use to introduce various elements in a document. You describe elements using predefined tags. The tags have specific meanings in the context of the domain where the document is used.

For example, you can use Hypertext Markup Language (HTML) to create a webpage that you can display in a web browser. You don't need to understand all the tags we use in the following example; what's important to see is that this code describes a document that has the text "Hello World!" as its content.

<!DOCTYPE html>
<html>
    <body>
        <p>Hello <b>World</b>!</p>
    </body>
</html>

You've likely already worked with a markup language. You might have created a webpage using HTML, or you might have modified the Extensible Markup Language (XML) definitions in a Visual Studio project.csproj file. The Microsoft build tools parse and process this file.

It's common for files that contain markup language to be processed and interpreted by other software tools. This interpretative nature of markup is exactly how XAML is intended to work. However, the software tools that interpret it help to generate the app UI.

What is XAML?

XAML is a declarative markup language created by Microsoft. XAML was designed to simplify the process of creating the UI in applications.

The XAML documents you create contain elements that declaratively describe the application's UI elements. Keep in mind that these elements in XAML directly represent the instantiation of objects. Once you've defined an element in XAML, you can access it in code-behind files and define behavior using C# code.

Difference between .NET MAUI XAML and Microsoft XAML

XAML is based on the Microsoft 2009 XAML specification. However, that specification defines only the language syntax. As with Windows Presentation Foundation (WPF), Universal Windows Platform (UWP), and WinUI 3, all of which use XAML, the elements you declare in the XAML will change.

XAML first appeared in 2006 with WPF. If you've been working with Microsoft XAML for a while, the XAML syntax should look familiar.

There are some key differences between the .NET MAUI flavor of XAML and XAML used by other UI tools. The structure and concepts are similar, but some of the names of the classes and properties are different.

Create a UI by using .NET MAUI XAML

The best way to see XAML in action is to look at an example of an existing C#-coded ContentPage page type. You can then compare it to another page that has the same UI defined using XAML.

Suppose you have the following coded ContentPage in your app:

namespace MauiCode;

public partial class MainPage : ContentPage
{
    Button loginButton;
    VerticalStackLayout layout;

    public MainPage()
    {
        this.BackgroundColor = Color.FromArgb("512bdf");

        layout = new VerticalStackLayout
        {
            Margin = new Thickness(15, 15, 15, 15),
            Padding = new Thickness(30, 60, 30, 30),
            Children =
            {
                new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
                new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
                new Entry (),
                new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
                new Entry { IsPassword = true }
            }
        };

        loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
        layout.Children.Add(loginButton);

        Content = layout;

        loginButton.Clicked += (sender, e) =>
        {
            Debug.WriteLine("Clicked !");
        };
    }
}

The page contains a layout container, two labels, two entries, and a button. The code also handles the Clicked event for the button. There are also only a few design properties set on the elements in the page. At runtime, on an Android device, the page looks like this:

Screenshot of the sign-in page generated by the C# code. It shows a title, two text boxes for username and password, and a button with which to sign in.

Although the page has a simple design, it's a mix of behavior and design in the same file.

The same page layout defined using XAML looks like this:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiXaml.Page1"
             BackgroundColor="#512bdf">

    <VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
        <Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
        <Label Text="Username" TextColor="White" />
        <Entry />
        <Label Text="Password" TextColor="White" />
        <Entry IsPassword="True" />
        <Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
    </VerticalStackLayout>
</ContentPage>

The C# code that initializes the page and implements the event handler for the Clicked event of the LoginButton control in the code-behind file looks like this:

namespace MauiXaml;

public partial class Page1 : ContentPage, IPage
{
    public Page1()
    {
        InitializeComponent();
    }

    void LoginButton_Clicked(object sender, EventArgs e)
    {
        Debug.WriteLine("Clicked !");
    }
}

Note

The InitializeComponent method in the page constructor reads the page's XAML description, loads that page's various controls, and sets their properties. You only call this method if you define a page using XAML markup. The previous example showing how to create the UI using C# code doesn't invoke InitializeComponent.

This structure allows for the separation of design and behavior. The UI's entire declaration is contained in a single dedicated source file, which is separate from the UI behavior. Additionally, the XAML markup provides greater clarity for a developer trying to understand the application's look and feel.