.NET Cross-Platform Client Framework - Avalonia UI

Table of Contents

1. Introduction to Avalonia UI

Avalonia UI documentation tutorial: https://docs.avaloniaui.net/docs/getting-started

With the increasing popularity of cross-platform, .NET has supported cross-platform for over a decade (starting with Mono).

However, most cross-platform solutions based on .NET still focus on B/S architecture cross-platform. For C/S architecture, most people might choose Qt for development, or there was an earlier Mono that allowed .NET developers to develop cross-platform applications. Since Microsoft acquired Xamarin, it officially released the MAUI cross-platform framework this year, along with third-party cross-platform frameworks like Uno and Avalonia UI—the tech stack is overwhelming.

Today we introduce Avalonia UI. The webmaster has been researching it for several days. It is a cross-platform UI framework based on WPF XAML and supports multiple operating systems (Windows (.NET Core), Linux (GTK), macOS, Android, iOS) and Web (WebAssembly).

2. Avalonia UI Desktop Demonstration on Three Platforms

This is a demo from the Avalonia UI official website. The webmaster upgraded some NuGet packages, and user [Xiao Fei Ji MLA] fixed the font bug on the Linux version to ensure it runs and demonstrates correctly.

2.1 Case Study in This Article

A music album search and display mini-program with the following features:

• Homepage: Display purchased music albums;
• Album selection page: Album search and purchase;

2.2 Case Materials

Case tutorial: https://docs.avaloniaui.net/tutorials/music-store-app

Original source code: https://github.com/AvaloniaUI/Avalonia.MusicStore

Webmaster's upgraded source code: https://github.com/dotnet9/AvaloniaTest/tree/main/src/Avalonia.MusicStore

Download link for this article's demo: https://dotnet9.com/avalonia.musicstore/publish.html

2.3 Case Demonstration

Windows 11:

macOS 13:

You can develop with Rider (EAP is fine). The webmaster compiled and ran it in one go (using .NET 7). The debugging was so smooth that it was hard to believe compared to using MAUI...

Domestic Kylin V10 Operating System

The webmaster had some trouble installing Kylin OS, unfamiliar with file transfers (ended up using Baidu Netdisk as relay...) and running commands (needed to set execution permission 777). Later, user [Xiao Fei Ji MLA] solved the Linux font issue, allowing the webmaster to run it smoothly and record the video.

2.4 Minor Flaw

The functionality is the same across three platforms, but the custom title bar on Linux did not take effect. Some users suggested hiding the title bar and implementing control buttons (minimize, maximize/restore, close) manually. The official team is expected to fix this Linux issue later. We'll continue researching and working on it!

3. Other Avalonia UI Examples

3.1 User Shared Content

The following content is excerpted from the blog post Avalonia Learning Practice (2) - Cross-platform Support and Publishing.

3.1.1 Supported Platforms

Detailed supported platform information:

Mobile cross-platform support: iOS and Android.

Web support: WebAssembly, which is an international standard.

3.1.2 Domestic Operating Systems Using Linux Kernel

Publishing options:

Published to test environment (Unified UOS, AMD processor, so choose linux-x64) as follows:

Running result:

Appendix: Domestic CPU Instruction Set Roadmap

Loongson has a fully independent instruction set, and recently updated support for .Net. x86 has good ecosystem support; traditional desktop processors like Intel and AMD are x86 architecture, making compatibility easier. ARM was previously more common in mobile, but desktop is catching up.

3.2 Other Examples

Examples from the repository Avalonia.

Projects built on Avalonia include:

3.2.1 Lunacy

A free design software that stays smooth with AI tools and built-in graphics.

Project website: https://icons8.com/lunacy

The following is from a Bilibili video: (Repost/English) Using Lunacy to Design a Website Homepage!

3.2.2 Plastic

Slogan: Create without compromise

Unity Plastic SCM is a version control and source code management tool designed to improve team collaboration and scalability with any engine. It provides optimized workflows for artists and programmers, as well as speed for handling large files and binary files.

Project website: https://www.plasticscm.com/

3.2.3 WasabiWallet

Open-source, non-custodial Bitcoin wallet for desktop.

Project website: https://www.wasabiwallet.io/

4. Avalonia UI vs WPF

Maui's native controls look similar to native Android in naming and property lists, but the XAML syntax is the same as WPF. The webmaster hasn't used Maui native controls extensively and will only briefly share this opinion without posting code. For Maui learning, click here.

Avalonia UI, on the other hand, is almost identical to WPF. Below is a translation of the original data binding documentation. Students familiar with WPF can compare:

Binding to Controls

In addition to binding data to a control's DataContext, you can also bind to other controls.

Note that when doing this, the binding source is the control itself, not the control's DataContext. If you want to bind to the control's DataContext, you need to specify it in the binding path.

4.1 Binding to Named Controls

To bind to a property of another named control, you can use the control name prefixed with the # character (webmaster note: similar to the CSS id selector in frontend; Avalonia UI's style extensions likely draw inspiration from frontend, just a guess).

<TextBox Name="other">

<!-- Binds to the Text property of the "other" control -->
<TextBlock Text="{Binding #other.Text}"/>

This is equivalent to the long-form binding familiar to WPF and UWP users:

<TextBox Name="other">
<TextBlock Text="{Binding Text, ElementName=other}"/>

Avalonia supports both syntaxes, but the short form # syntax is less verbose.

4.2 Binding to Ancestors

You can bind to the logical parent of the target using the $parent notation:

<Border Tag="Hello World!">
  <TextBlock Text="{Binding $parent.Tag}"/>
</Border>

Or pass to an ancestor by adding an Index to the $parent notation:

<Border Tag="Hello World!">
  <Border>
    <TextBlock Text="{Binding $parent[1].Tag}"/>
  </Border>
</Border>

Index is 0-based, so $parent[0] is equivalent to $parent.

You can also bind to an ancestor by type:

<Border Tag="Hello World!">
  <Decorator>
    <TextBlock Text="{Binding $parent[Border].Tag}"/>
  </Decorator>
</Border>

Finally, you can combine index and type:

<Border Tag="Hello World!">
  <Border>
    <Decorator>
    	<TextBlock Text="{Binding $parent[Border;1].Tag}"/>
    </Decorator>
  </Border>
</Border>

If you need to include XAML namespaces in the ancestor type, you can use the : character as usual:

<local:MyControl Tag="Hello World!">
  <Decorator>
    <TextBlock Text="{Binding $parent[local:MyControl].Tag}"/>
  </Decorator>
</local:MyControl>

Avalonia also supports the WPF/UWP RelativeSource syntax, which functions similarly but is different. RelativeSource works on the visual tree, while the syntax given here works on the logical tree.

For more usage of Avalonia UI, click here to learn.

5. JetBrains Rider Support

JetBrains Rider now officially supports Avalonia. For XAML previewer addition, support code completion, inspections, and refactoring. Add plugin https://plugins.jetbrains.com/plugins/dev/14839 to the plugin repository and install the AvaloniaRider plugin.

6. Frequently Asked Questions

Translated from: Avalonia UI FAQ

6.1 Can I write my UI without using XAML?

Yes. You can code the entire UI using your preferred .NET language.

6.2 Is there a visual drag-and-drop designer?

No. The Avalonia IDE extension supports a live preview that refreshes the rendered UI preview as you modify XAML, replacing the drag-and-drop designer.

6.3 Does Avalonia support hot reload?

You can use community projects to enable hot reload for Avalonia.

6.4 Can Avalonia interoperate with native APIs?

Yes.

6.5 Can I cross-compile for different platforms?

Yes. You can compile target programs for macOS and Linux platforms on Windows. You may need to package your application on those platforms to create release bundles.

6.6 Can I build mobile applications with Avalonia?

Yes. You can currently develop for Android, and we have a preview showing the beginning of iOS support. However, you should carefully consider each platform and ensure your application performs well on smaller touch devices.

6.7 Can I build websites with Avalonia?

It is still in early stages and not yet production-ready, but yes, you can. Avalonia now supports Web Assembly. See the quick demo: NodeEditor Demo. This means your full Avalonia application can run in all modern web browsers.

6.8 How can I get involved?

Check the Community Guide for how to participate in the project.

6.9 Which Linux distributions are supported?

• Debian 9 (Stretch)+
• Ubuntu 16.04+
• Fedora 30+

Skia is built against glibc. If your distribution uses something else, you need to build your own libSkiaSharp.so using SkiaSharp. We only provide precompiled binaries for Intel x86-64. ARM/ARM64 support is planned.

6.10 Which versions of macOS are supported?

macOS High Sierra 10.13+

7. Learning Resources

• Avalonia UI official website: https://avaloniaui.net/
• Avalonia UI repository: https://github.com/AvaloniaUI/Avalonia
• Community Avalonia UI Chinese website: https://avaloniachina.gitbook.io
• Community Avalonia UI Chinese website repository: https://github.com/avaloniachina/Documentation