NET Cross-Platform Client Framework- Avalonia UI

Contents for reading this article

1. Introduction to Avalonia UI

Avalonia UI Documentation Tutorial: docs.avaloniaui.net/docs/getting-started

随着跨平台越来越流行，.NET支持跨平台至今也有十几年的光景了(Mono开始)。

但是目前基于.NET的跨平台，大多数还是在使用B/S架构的跨平台上；至于C/S架构，大部分人可能会选择Qt进行开发，或者很早之前还有一款Mono可以支持.NET开发者进行开发跨平台应用，自微软收购Xamarin后，今年又正式发布了MAUI跨平台框架，外加第三方的跨平台框架Uno[Avalonia UI](https://avaloniaui.net/)选择，技术栈多的炸裂呀。

今天介绍的是Avalonia UI，站长也是研究了好几天，这是一个基于WPF XAML的跨平台UI框架，并支持多种操作系统（Windows（.NET Core），Linux（GTK），MacOS，Android和iOS），Web（WebAssembly）。

2. Avalonia UI desktop three platform demonstrations

这是Avalonia UI官方网站的一个Demo，站长对部分NuGet包进行了升级，网友【小飞机MLA】对Linux版本修复了字体Bug得以正常运行、演示。

2.1 This article case

Mini programs for searching and displaying music albums with the following functions:

• Home: Display purchased music albums;

• Album selection page: Album search and purchase;

2.2 case materials

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

Original source code for the case: github.com/AvaloniaUI/Avalonia.MusicStore

Webmaster upgrade version source code: github.com/dotnet9/AvaloniaTest/tree/main/src/Avalonia.MusicStore

Download the sample experience of this article: dotnet9.com/avalonia.musicstore/publish.html

2.3 stories demos

Windows 11：

macOS 13：

可安装Rider（用EAP即可）开发，站长一次性直接编译运行(站长使用的.NET 7），运行调试过于顺畅，与使用MAUI相比不敢相信...

Domestic Kirin V10 operating system

站长安装麒麟OS折腾了一会儿，文件传输不熟悉（最后使用的百度网盘中转...），运行命令也不熟（需要给运行程序设置执行权限777），后面是网友【小飞机MLA】解决了Linux字体问题，站长得以开心的运行并录了视频分享。

2.4 Small shortcoming

The three platforms have the same functions, except that the Linux custom title bar has not taken effect. Some netizens suggested that you can hide the title bar and implement the control buttons (minimize, maximize (restore), and close) yourself. Later, the official should solve this problem under Linux. Continue to research and rectify!

3. Other examples of Avalonia UI

3.1 Sharing by netizens

以下内容摘自博文Avalonia学习实践(二)--跨平台支持及发布。

3.1.1 Supported platforms

The supported platform information is detailed as follows:

Cross-platform mobile, i.e. iOS and Android support.

Web support, or WebAssembly, is an international standard.

3.1.2 Use of domestic operating systems with Linux kernels

Publishing options:

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

The operating effect is as follows:

Appendix. Domestic CPU instruction set route

其中龙芯是完全自主的指令集，前段时间也刚刚更新了对.Net的支持；x86主要是生态好，传统桌面处理器intel、AMD都是x86架构，做兼容适配也方便些；arm以前移动端较多，现在桌面端也逐渐赶上。

3.2 other examples

示例来自仓库Avalonia。

The parts of the project based on Avalonia are as follows:

3.2.1 Lunacy

This is a free design software that keeps it flowing through AI tools and built-in graphics.

Project website: icons8.com/lunacy

以下来源于B站的一个视频：（搬运/英文）使用 Lunacy 设计一个网站首页！

3.2.2 Plastic

Promotional slogan: Create without compromise: Create without compromise

Unity Plastic SCM is a version control and source code management tool designed to improve team collaboration and extensibility with any engine. It provides artists and programmers with optimized workflows and speed with which to process large files and binary files.

Project website: www.plasticscm.com/

3.2.3 WasabiWallet

An open source, unmanaged Bitcoin wallet for desktops.

Project website: www.wasabiwallet.io/

4. Avalonia UI and WPF

Maui的原生控件从命名、属性列表看和原生Android类似，但Xaml语法和WPF相同，站长使用Maui原生控件不多，只浅显地发表这部分看法，不贴相关代码，Maui学习请点这里。

而Avalonia UI呢，和WPF就几乎相同了，下面翻译原文数据绑定部分文档，熟悉WPF的同学可以对比：

** Binding to control **

除了绑定数据到一个控件的DataContext，您还可以绑定到其他控件。

请注意，执行此操作时，绑定源是*控件本身，*而不是控件的DataContext. 如果你想绑定到控件DataContext，那么你需要在绑定路径中指定它。

4.1 Bind to named controls

如果要绑定到另一个命名控件的属性，可以使用以#字符为前缀的控件名称(站长注：这里类似前端的css id选择器，其实Avalonia UI样式扩展的借鉴大部分来源于前端，站长猜测的哈)。

<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 支持这两种语法，但短格式#语法不那么冗长。

4.2 Bind to ancestors

您可以使用以下符号绑定到目标的逻辑父级：$parent

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

或者通过向$parent符号添加Index(索引)来传递给祖先：

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

索引是从 0 开始的，因此$parent[0]等同于$parent.

You can also bind to ancestors by type:

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

Finally, you can combine indexes and types:

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

如果您需要在祖先类型中包含 XAML 命名空间，您可以使用字符:像往常一样来做到这一点：

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

Avalonia 还支持 WPF/UWP 的RelativeSource语法，其功能类似但又不相同。RelativeSource适用于可视树，而此处给出的语法适用于逻辑树。

关于Avalonia UI的更多用法请点击这里学习。

5. JetBrains Rider support

JetBrains Rider now officially supports Avalonia. For XAML previewer additions, support code completion, inspection and refactoring https://plugins.jetbrains.com/plugins/dev/14839 to the plug-in library and install the AvaloniaRider plug-in.

6. frequently asked questions

翻译自： Avalonia UI FAQ

6.1 Can I write my UI instead of 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 support. The Avalonia IDE extension supports real-time preview, which refreshes the preview of the rendering UI in real time as you modify XAML, replacing the drag-and-drop designer.

6.3 Does Avalonia support hot overload?

You can use community projects to enable Avalonia's hot overload.

6.4 Can Avalonia interoperate with native APIs?

Yes.

6.5 Can I cross-compile for different platforms?

Yes. You can compile target programs on the Windows platform for macOS and Linux platforms. You may need to package your applications on these platforms to create your applications Pre-order release package.

6.6 Can I build mobile apps using Avalonia?

Yes. You can now develop for Android, and we have a preview showing the beginning of iOS support. However, you should think carefully about each platform and make sure your applications perform well on smaller touch devices.

6.7 Can I build a website with Avalonia?

它还处于早期阶段, 还没有准备好投入生产，但是是的，你可以。Avalonia现在支持Web Assembly。 请参考快速演示: NodeEditor Demo。这意味着您的完整Avalonia应用程序可以在所有现代网络浏览器中运行。

6.8 How can I participate?

查看社区指南，了解如何参与该项目。

6.9 What Linux distributions are supported?

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

Skia 是针对glibc构建的。如果您的发行版使用其他东西，您需要使用SkiaSharp构建您自己的libSkiaSharp.so。我们仅为Intel x86-64提供预编译的二进制文件。计划支持ARM/ARM64。

6. 10 What versions of macOS are supported?

macOS High Sierra 10.13+

7. learning materials

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