Introduction to XAML

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

Note: 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.

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">
<Window>

There are three parts to this file:

  • The root element Window - this descibes the type of the root control in the XAML file; in this case Window
  • xmlns="https://github.com/avaloniaui" - this is the XAML namespace for Avalonia. Without this, the file will not be recognised as an Avalonia XAML document.
  • xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" - this is the XAML-language XAML namespace. This isn't strictly necessary, but you will probably need it for accessing certain features of the XAML language.

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.