Creating applications with Avalonia UI
A Microsoft-independent variant for making .NET applications available on different platforms
In a world where software is no longer tied to a single operating system, there is a growing need for tools that enable developers to create applications efficiently across platforms. Writing separate code for each platform is time-consuming, error-prone and, in many cases, no longer appropriate.
Various solutions have emerged over time to counteract this problem. One of the best-known examples of this is Electron. Cross-platform desktop apps can be created using web technologies (HTML, CSS, JavaScript). Numerous popular applications – including Visual Studio Code and Discord – are already based on Electron [1]. However, one disadvantage of Electron is its comparatively low resource efficiency. Since each application integrates a complete Chromium and Node.js runtime environment, Electron apps generally consume significantly more memory than native applications [2].
In addition to Electron, there are numerous other frameworks that enable cross-platform development in their own way. One of these in the .NET ecosystem is Avalonia UI, which we will take a closer look at below.
Alternatives for cross-platform development
When talking about cross-platform frameworks, it is also worth taking a quick look at the Windows-only variants:
First, there is Windows Presentation Foundation (WPF), which has been available since .NET 3.0. Although it is now somewhat outdated, it still offers a very powerful foundation for desktop applications. With the associated declarative language XAML (based on XML), WPF enables flexible interface design and impresses with concepts such as MVVM, data binding and templates to separate UI and business logic.
WinUI is considered the modern successor to the Universal Windows Platform (UWP). It provides the latest UI stack for Windows 10 and 11, offering a way to create modern Windows applications. The community has mixed feelings about it.
There are various options available for cross-platform development:
- .NET MAUI,
- Uno Platform,
- Blazor Hybrid Apps or
- classic web applications with a separate front end.
.NET MAUI is the successor to ‘Xamarin.Forms’ and follows a mobile-first approach. In addition to support for Android, iOS and Windows, it now also offers support for macOS. However, support for Linux systems is lacking, but can be implemented via community projects. MAUI is more modern, more flexible and significantly better integrated into the .NET ecosystem than its predecessor. XAML is also used here for the development of the user interface. What makes it special, however, is that the UI components are translated into native UI elements during the compilation process.
Uno Platform is based on WinUI and XAML and takes a cross-platform approach to modern Microsoft technologies. It supports Windows, Linux, macOS, Android, iOS and WebAssembly in the browser. This is in line with its philosophy: ‘Bring WinUI everywhere.’ [3]. The target audience for Uno Platform is primarily WinUI developers and developers who want to use modern Microsoft APIs on other platforms.
Blazor Hybrid Apps enable the development of native applications with Blazor. There are various approaches to choose from. On the one hand, there is integration with .NET MAUI, whereby Blazor runs in a native WebView [4]. On the other hand, there is interaction with Electron, which integrates Chromium together with Node.js into the application [5].
Cross-platform support differs depending on the approach:
- MAUI: Windows, macOS, iOS, Android
- Electron: Windows, macOS, Linux
What is Avalonia UI and what are its advantages and disadvantages?
This is exactly where Avalonia UI comes in, attempting to combine the positive aspects of others. It is a modern, open-source UI framework for .NET that is strongly based on the well-known principles of WPF. With Avalonia UI, applications for Windows, Linux and macOS can be developed based on a single code base. In addition, there is experimental support for Android, iOS and WebAssembly, so that mobile scenarios are also covered [6].
Those who have already worked with C# and XAML will find it easy to get started and can benefit from the flexibility to create modern, high-performance and attractive user interfaces across platforms. Styles can also be customised using a simpler, CSS-like approach. Technically, Avalonia UI relies on the Skia rendering engine, which is also used in Google Chrome [7]. This keeps applications independent of native UI toolkits, enables high performance and provides consistent rendering across all supported platforms.
Avalonia UI is a framework that is inspired by WPF but developed independently of Microsoft. So if you want to work without Microsoft technologies, this is a good alternative. In addition, Avalonia UI can be extended with additional components. Here is a short list of existing options:
- Eremex Avalonia UI Controls – a comprehensive collection of high-quality UI components [8]
- Awesome-Avalonia – a community-curated GitHub repository with a list of many third-party libraries and tools [9]
- teeChart – a professional chart library [10]
- ActiViz – enables 3D visualisation and data processing using the ‘Visualisation Toolkit’ (VTK) [11] [12]
For companies that do not want to start development from scratch, Avalonia also offers Avalonia XPF, a commercial option for migrating existing WPF applications to a platform-independent environment [13]. Some well-known companies that already use Avalonia UI include JetBrains, GitHub and Unity [14].
Finally, here is a more compact comparison of the advantages and disadvantages.
Advantages
- Cross-platform development with a single code base
- XAML-based UI development (AXAML) makes it easy for WPF veterans
- Possible use of concepts such as MVVM, data binding or dependency injection
- Skia rendering engine enables consistent UI across all platforms
- Themes enable easy and consistent customisation of the UI
- IDE integration for Visual Studio, Visual Studio Code, and JetBrains Rider available
Disadvantages
- XAML, MVVM – steep learning curve if unfamiliar
- Experimental mobile support
- Skia rendering engine enables a consistent UI, but accordingly no native platform look
- Small number of third-party components
- Has a rather small community so far
- iOS development not possible without a connected macOS device and Xcode [15]
Setting up a cross-platform Avalonia UI project
To develop a cross-platform Avalonia UI application, you can use one of the development environments Visual Studio, Visual Studio Code or JetBrains Rider with the corresponding Avalonia UI extension. In the following, I will use Visual Studio 2022.
First, you need to download and install the extension ‘Avalonia for Visual Studio 2022’. In addition to project and control templates, this also includes a XAML editor with IntelliSense support and a Live XAML previewer.
If you also want to target Android as a target platform, you must also install the Android SDK for multi-platform development via the ‘Visual Studio Installer’.
Figure 1: Setup versus Installer
Once everything is installed, Visual Studio can be launched and a new Avalonia UI project created. For cross-platform applications, the previously installed extension offers the ‘Avalonia Cross Platform Application’ template. This includes the use of the MVVM pattern by default.
Figure 2: Create a new Avalonia UI project
After successful creation, there is now a solution that contains several projects. One for the general code base and the others as a starting point for the other platforms.
Figure 3: Avalonia Solution Explorer
- dotnet workload install wasm-tools
- dotnet workload restore
Once installation is complete, it should now be possible to test the project for the various platforms.
Figure 4: Started project: Welcome to Avalonia!
Depending on the platform, the application is initialised accordingly in window mode or in single-view display.
public partial class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
public override void OnFrameworkInitializationCompleted()
{
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
{
DisableAvaloniaDataAnnotationValidation();
desktop.MainWindow = new MainWindow
{
DataContext = new MainViewModel()
};
}
else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
{
singleViewPlatform.MainView = new MainView
{
DataContext = new MainViewModel()
};
}
base.OnFrameworkInitializationCompleted();
}
...
}
The XAML code used for desktop systems generates the application window in which the MainView control is integrated:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:AvaloniaCrossPlatform.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-namespace:AvaloniaCrossPlatform.Views"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaCrossPlatform.Views.MainWindow"
Icon="/Assets/avalonia-logo.ico"
Title="AvaloniaCrossPlatform">
<views:MainView />
</Window>
The MainView Control contains the actual UI components and is integrated directly on mobile platforms:
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:AvaloniaCrossPlatform.ViewModels"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaCrossPlatform.Views.MainView"
x:DataType="vm:MainViewModel">
<Design.DataContext>
<vm:MainViewModel />
</Design.DataContext>
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</UserControl>
A small cross-platform application demonstrates Avalonia UI basic elements. The code can be found on GitHub. The app offers two switchable pages, on each of which you can answer mathematical questions.
Figure 5: Avalonia UI sample application
Conclusion
Avalonia UI is a modern, powerful and versatile alternative to WPF and other cross-platform solutions. It is aimed at developers who want to create cross-platform desktop applications with .NET and XAML. Experienced XAML users will find it particularly easy to get started, while beginners can expect a slightly steeper learning curve. Thanks to an active community and continuous development, the open-source framework offers a solid basis for apps on Windows, macOS and Linux, as well as for mobile devices and the web in the future. If you are looking for a promising UI framework, you should take a look at Avalonia UI.
Notes:
[1] Electron Apps
[2] What is Electron?
[3] WinUI on Windows 7 – Yes, it’s possible with Uno Platform
[4] Microsoft Ignite: ASP.NET Core Blazor Hybrid
[5] GitHub: Electron.NET
[6] Nuget: Avalonia
[7] Skia: The 2D Graphics Library
[8] EMX Controls Documentaiton: Eremex Avalonia UI Controls Library
[9] GitHub: Avalonia Community
[10] steema: Chart Component for Avalonia
[11] Kitware: ActiViz release: Native rendering controls for various UI frameworks
[12] VTK: Leverage the power of VTK by partnering with Kitware
[13] Avaonlia: Cross-Platform WPF
[14] GitHub: Avalonia
[15] Avalonia Docs: How To Develop For Mobile iOS
Here you will find an article about Avalonia UI and the development of a cross-platform WPF application with .NET Core.
Would you like to discuss the topic as an opinion leader? Then feel free to share the article in your network.
Marco Menzel has published another article on the t2informatik Blog:
Generating unit tests with AI
Marco Menzel
Marco Menzel is a junior software developer at t2informatik. He discovered his enthusiasm for computers and software development at an early age. He wrote his first small programmes while still at school, and it quickly became clear that he wanted to pursue his hobby professionally later on. Consequently, he studied computer science at the BTU Cottbus-Senftenberg, where he systematically deepened his knowledge and gained practical experience in various projects. Today, he applies this knowledge in his daily work, combining his passion with his profession.
In the t2informatik Blog, we publish articles for people in organisations. For these people, we develop and modernise software. Pragmatic. ✔️ Personal. ✔️ Professional. ✔️ Click here to find out more.