avalonia docs

Introduction to XAML

Avalonia uses XAML to define user-interfaces. XAML is an XML-based markup language that is used by many UI framworks.

This section is intended as a basic introduction to using XAML in Avalonia. For more information see the Microsoft XAML documentation for WPF or Microsoft XAML documentation for UWP - many of the concepts are the same between frameworks.

XAML or AXAML file?

The standard extension for XAML files is .xaml, however if you're using the Visual Studio extension then you may notice that from version 0.9.11, XAML files are created with the .axaml extension. This is because Visual Studio has functionality related to files with the .xaml extension that is hard-coded to Microsoft XAML dialects and can't be overridden. For this reason we were forced to use our own file extension in Visual Studio.

For more information see https://github.com/AvaloniaUI/Avalonia/issues/4102.

Both .xaml and .axaml will be supported going foward, so feel free to use the extension you prefer.

Format of an Avalonia XAML File

A basic Avalonia XAML file looks like this:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication1.MainWindow">
</Window>

There are three parts to this file:

Declaring Controls

Controls are added to the XAML by adding an XML element with the control's class name. For example to add a button as the child of the window you would write:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button>Hello World!</Button>
</Window>

See the controls documentation for a list of the controls included with Avalonia.

Setting Properties

You can set a property of a control by adding an XML attribute to an element. For example to create a button with a blue background you could write:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button Background="Blue">Hello World!</Button>
</Window>

You can also use property element syntax for setting properties. For more information see the WPF documentation.

Content Properties

You may notice that the button above has its "Hello World!" content placed directly inside the XML element. This could also be written as a property using:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button Content="Hello World"/>
</Window>

This is because Button.Content is declared as a [Content] Property which means that any content placed inside its XML tag will be assigned to this property.

Binding

You can bind a property using the {Binding} markup extension:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button Content="{Binding Greeting}"/>
</Window>

For more information, see the binding documentation.

Code-behind

Many XAML files also have an associated code-behind file which usually has the extension .xaml.cs. For more information see the codebehind documentation.