Code-behind

Search…
Code-behind
​Window and UserControl files also have an associated code-behind file which usually has the extension .xaml.cs or .axaml.cs and may be displayed collapsed under the XAML file in your editor. Below you can see a MainWindow.xaml file along with its markdown file MainWindow.xaml.cs in Visual Studio:
Code-behind in Visual Studio
The code-behind file by default defines a .NET class with the same name as your XAML file, e.g.
1
using Avalonia;
2
using Avalonia.Controls;
3
using Avalonia.Markup.Xaml;
4
​
5
namespace AvaloniaApplication1
6
{
7
    public class MainWindow : Window
8
    {
9
        public MainWindow()
10
        {
11
            InitializeComponent();
12
#if DEBUG
13
            AttachDevTools();
14
#endif
15
        }
16
​
17
        private void InitializeComponent()
18
        {
19
            AvaloniaXamlLoader.Load(this);
20
        }
21
    }
22
}
Copied!
Note that this class definition corresponds closely to the XAML file:
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!
The base class, Window is the root element of the XAML file
The x:Class attribute references the fully-qualified name of the class defined in code-behind
If you make any changes to the base class, namespace, or name of the class, make sure to update both the code-behind and the XAML to ensure they match.
In addition, the class contains two more things of interest:
It enables DevTools in debug mode
It defines an InitializeComponent method which is used to load the XAML at runtime
Locating Controls
One of the main uses of the code-behind file is to manipulate controls using C# code. To do this you'll usually first want to get a reference to a named control. This can be done using the FindControl<T> method:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
        x:Class="AvaloniaApplication4.MainWindow">
4
  <Button Name="myButton">Hello World</Button>
5
</Window>
Copied!
1
public class MainWindow : Window
2
{
3
    private Button myButton;
4
​
5
    public MainWindow()
6
    {
7
        InitializeComponent();
8
#if DEBUG
9
        AttachDevTools();
10
#endif
11
    }
12
​
13
    private void InitializeComponent()
14
    {
15
        AvaloniaXamlLoader.Load(this);
16
        myButton = this.FindControl<Button>("myButton");
17
    }
18
}
Copied!
FindControl must be called after AvaloniaXamlLoader.Load has run because it's not until this point that the control will have been created.
The good news this step is not necessary if you're using Avalonia.NameGenerator package (added to the Avalonia templates by default), because it provides a code-generation step which creates this code for you.
In such case the code-behind class can be simplified to:
1
public partial class MainWindow : Window
2
{
3
    public MainWindow()
4
    {
5
        InitializeComponent();
6
    }
7
}
Copied!
Note the class is now declared as partial. That's because all the boilerplate code is now auto-generated by the Avalonia.NameGenerator at the second partial class which is not visible in the project.
For the given XAML, it will look like follows:
1
// <auto-generated />
2
​
3
using Avalonia;
4
using Avalonia.Controls;
5
using Avalonia.Markup.Xaml;
6
​
7
namespace AvaloniaApplication1
8
{
9
    partial class MainWindow
10
    {
11
        internal global::Avalonia.Controls.Button myButton;
12
​
13
        /// <summary>
14
        /// Wires up the controls and optionally loads XAML markup and attaches dev tools (if Avalonia.Diagnostics package is referenced).
15
        /// </summary>
16
        /// <param name="loadXaml">Should the XAML be loaded into the component.</param>
17
        /// <param name="attachDevTools">Should the dev tools be attached.</param>
18
        public void InitializeComponent(bool loadXaml = true, bool attachDevTools = true)
19
        {
20
            if (loadXaml)
21
            {
22
                AvaloniaXamlLoader.Load(this);
23
            }
24
​
25
#if DEBUG
26
            if (attachDevTools)
27
            {
28
                this.AttachDevTools();
29
            }
30
#endif
31
​
32
            myButton = this.FindControl<global::Avalonia.Controls.Button>("myButton");
33
        }
34
    }
35
}
Copied!
The auto-generated InitializeComponent has arguments to optionally call the AvaloniaXamlLoader.Load(this) and AttachDevTools, so you don't need to call them yourself from your code-behind class anymore.
Never keep a method named InitializeComponent in your code-behind view class if you are using the generator with default settings. Read more at the Avalonia.NameGenerator documentation.
For the rest of the documentation, we'll assume you're either using Avalonia templates or added the Avalonia.NameGenerator package to your project manually.
Handling Events
Another common use for the code-behind file is to define event handlers. Event handlers are defined as methods in the code-behind and referenced from XAML. For example to add a handler for a button click:
1
<Window xmlns="https://github.com/avaloniaui"
2
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3
        x:Class="AvaloniaApplication4.MainWindow">
4
  <Button Click="MyButton_Click">Hello World</Button>
5
</Window>
Copied!
1
public partial class MainWindow : Window
2
{
3
    public MainWindow()
4
    {
5
        InitializeComponent();
6
    }
7
​
8
    public void MyButton_Click(object sender, RoutedEventArgs e)
9
    {
10
        // Handle click here.
11
    }
12
}
Copied!
Introduction to XAML
MVVM Architecture
Last modified 1mo ago
Export as PDF
Copy link
Edit on GitHub
Contents
Locating Controls
Handling Events