Getting started with Avalonia UI

Way back when, as Microsoft struggled to deliver a follow up to Windows XP, its Longhorn vision sat on top of what it called “the three pillars of Longhorn”: a database-powered object file system called WinFS, a new set of communication tools based on web services code-named Indigo, and a new presentation layer based on a graphical description language code-named Avalon. Only Indigo and Avalon survived to be part of Windows Vista, as .NET’s Windows Communication Framework and Windows Presentation Framework (WPF).

WPF is still going strong, nearly 20 years later, powering many .NET Framework applications, but the transition to the cross-platform .NET 6 has left WPF behind. It’s still part of the open source .NET development, but it’s limited to only supporting Windows applications. You can’t use it to build code that runs on Linux or macOS. This makes it hard to bring WPF-based code forward from the .NET Framework to .NET 6 and beyond, even with the work being used to bring together WPF, Universal Windows Platform (UWP), and Windows UI Library (WinUI 3) in the Windows App SDK.

Avalonia: a redesign of WPF for modern applications

This is where Avalonia comes in, providing a way to take what you know about building XAML-based WPF applications to a modern, cross-platform world. Instead of only targeting Windows, Avalonia-based code can run on macOS, Linux, and Windows, with native support for x86 and x64, as well as Arm. Although much of the current build of Avalonia is intended to support desktop applications, mobile application support is in development, and a public preview is available, adding iOS, Android, and WebAssembly to the mix. You can track development and become a contributor in its GitHub repository.

Designed for C# applications, Avalonia isn’t a direct port of WPF, though it does share key concepts. You can’t drop an existing WPF control into an Avalonia-powered application; instead you need to port it before you can use it. That’s because some key Avalonia concepts are more closely related to web development than WPF. For example, Avalonia still builds on the XAML display markup language, whereas styling is handled more like CSS, with Styles using a CSS-like syntax and getting its own collection. Other key differences include how Avalonia works with data, extending DataTemplates to interfaces and derived classes, as well as getting is own collection.

Installing and using Avalonia

Getting started with Avalonia is much like working with any other set of .NET add-ons. If you’re using JetBrains Rider for C# development, Avalonia is baked in. Otherwise, you simply install a Visual Studio extension that includes a XAML designer with live preview. In practice, as a designer for Rider is still under development, you’re likely to need both tools to build and design Avalonia UIs for your applications. The familiar ReSharper includes tools for working with Avalonia, speeding up development with analysis tools and code completion features.

Once installed, you can start using the tools. If you’ve built WPF or UWP code, you should find its XAML implementation very similar, using XAML to design the app layout and code behind to add interactions. Data bindings manage connections between code and controls.

Avalonia provides implementations of common controls, with an event framework to deliver interactions to your code. Controls are extensible, with layouts that use relative positioning for different window and display sizes. Controls provide information about position and space requirements to the layout (itself a set of hierarchical controls) which then provides the information needed to render the control.

The underlying graphics primitive in Avalonia is a device-independent pixel that has a fixed size, allowing all controls and graphical elements to be resolution-independent. As it’s defined as 1/96 of an inch, it automatically maps to the available DPI of a display. You can use its basic shape library to construct your own controls or simply add scalable designs and animations to your layouts. Avalonia’s animation model is like that used by CSS, so you can make controls more dynamic, highlighting interactions or window changes.

Microsoft’s preferred design pattern for modern GUI-based apps is the MVVM (model-view-viewmodel) pattern it’s using in its own MAUI cross-platform UI tool, and Avalonia has adopted the same approach. It’s sensible when you need to keep your UI layer separate from your application, using bindings to link the view and viewmodel layers. Start by building your view using Avalonia controls, with the view model using bindings to link its properties to the controls in the view. There’s a bit of conceptual leap needed here, but the approach should result in code that’s easier to maintain and easier to use with different user interfaces on different classes of devices.

Using Avalonia’s browserlike DevTools

A useful feature is the option to add a browserlike DevTools window to code that’s being tested. It’s built in to the default templates and is activated when a program is compiled in debug mode. Once running, press F12 to open the tools window (you can also choose a gesture or another keystroke that’s passed to the appropriate method). This will access the logical and visual trees of the current view, showing controls and how they’re rendered. You can use this tool to quickly change the properties of a control without recompiling your application, as well as to understand what styles are applied to your layout and why.

Giving .NET applications a browserlike developer experience is a useful way of working, especially if you’ve split C# and XAML development. XAML designers can work with a live app in a way that’s impossible in a standard Visual Studio pane, allowing for a more dynamic and interactive way of designing code that’s much closer to the social coding model that comes from tools like GitHub. A designer can quickly compile a branch and test changes in its XAML before sending a pull request for any new designs. There’s no need for a C# developer to be involved unless new controls are being added to an application.

Developers can use the DevTools to trace events, ensuring that controls are wired correctly. You can link events to the visual tree to show how they affect layouts. There’s even a console with a C# REPL, so you can try out code snippets before adding them to your application.

Like WPF before it, there’s a lot to like in Avalonia. It’s a modern revisiting of the principles behind WPF, catching up with 20 years of development thinking, making it ready for modern applications. Although it’s not a drop-in replacement for WPF, it’s a way to bring your application designs forward from the .NET Framework to .NET 6 and to more than Windows. Support for more platforms in future releases should give Microsoft’s MAUI some worthy competition—and with open source under the platform, a rising tide will lift all .NET’s boats.