Introduction to XAML

Search…
Avalonia uses XAML to define user-interfaces. XAML is an XML-based markup language that is used by many UI frameworks.
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 traditional extension for XAML files is .xaml but due to problems with Visual Studio we have been forced to move to our own .axaml extension for Avalonia XAML files. From version 0.9.11 Avalonia XAML files created in Visual Studio use the .axaml extension and from version 0.10 all of our templates will be standardized on using the .axaml extension.
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:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
        x:Class="AvaloniaApplication1.MainWindow">
4
</Window>
Copied!
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.
x:Class="AvaloniaApplication1.MainWindow" - this tells the XAML compiler where to find the associated class for this file, defined in code-behind​
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:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3
    <Button>Hello World!</Button>
4
</Window>
Copied!
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:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3
    <Button Background="Blue">Hello World!</Button>
4
</Window>
Copied!
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:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3
    <Button Content="Hello World"/>
4
</Window>
Copied!
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:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3
    <Button Content="{Binding Greeting}"/>
4
</Window>
Copied!
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.
Guides - Previous
Basics
Code-behind
Last modified 6mo ago
Export as PDF
Copy link
Edit on GitHub
Contents
XAML or AXAML file?
Format of an Avalonia XAML File