net跨平台客戶端框架 - avalonia ui

本文閱讀目錄

1. avalonia ui簡介

avalonia ui文檔教程：https://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桌面三大平台演示

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

2.1本文案例

一個音樂專輯搜索、展示小程式，功能如下：

首頁：展示已購買的音樂專輯;
專輯選擇頁：專輯搜索、購買;

2.2案例資料

案例教程：https://docs.avaloniaui.net/tutorials/music-store-app

案例原源碼：https://github.com/AvaloniaUI/Avalonia.MusicStore

站長升級版源碼：https://github.com/dotnet9/AvaloniaTest/tree/main/src/Avalonia.MusicStore

本文示例體驗下載地址：https://dotnet9.com/avalonia.musicstore/publish.html

2.3案例演示

Windows 11：

macOS 13：

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

國產麒麟v10作業系統

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

2.4小缺憾

三個平台功能相同，只是linux自定義標題欄未生效，有網友提示可以隱藏標題欄，自己實現控制按鈕（最小化、最大化（還原）、關閉），後面官方應該會解決linux下這個問題，繼續研究、整!

3. avalonia ui其他示例

3.1網友的分享

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

3.1.1 支持的平台

支持的平台信息詳細如下：

運行平台	版本
Windows	windows8及其以上版本（window7也能用，但不保證沒問題）
MacOS	macos high serra 10.13及其以上版本
Linux	debian 9、ubuntu 16.5、fedora 30及其以上（主要是各種發行版）

移動端跨平台，也就是ios和android的支持。

web支持，即webassembly，這是國際標準。

3.1.2 使用linux內核國產作業系統的情況

作業系統	研製單位	備註
銀河麒麟	天津麒麟信息技術有限公司
中標麒麟	中標軟體科技有限公司	原中標普華
統信uos	統信軟體科技有限公司
中科方德	中科方德軟體有限公司
優麒麟	中國ccn聯合實驗室	基於ubuntu發行版
深度(deepin)	武漢深之度科技有限公司	23版之後從kernel構建

發布選項：

發布至測試環境（統信uos、amd處理器，所以選擇linux-x64）如下：

運行效果如下:

附.國產cpu指令集路線

國產cpu	指令集
龍芯	loongarch(站長註：網友指正是 loongarch，原文是~~mips~~)
海光	x86
兆芯	x86
飛騰	arm
鯤鵬	arm
申威	Alpha

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

3.2其他示例

示例来自仓库Avalonia。

基於avalonia搭建的項目部分如下：

3.2.1 Lunacy

這是一款免費設計軟體，通過ai工具和內置圖形保持流暢。

項目網站：https://icons8.com/lunacy

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

3.2.2 Plastic

宣傳語：create without compromise：不妥協地創造

unity plastic scm是一個版本控制和原始碼管理工具，旨在提高團隊協作和與任何引擎的可擴展性。它為藝術家和程式設計師提供了優化的工作流程，以及處理大型文件和二進位文件的速度。

項目網站：https://www.plasticscm.com/

3.2.3 WasabiWallet

用於桌面的開源、非託管比特幣錢包。

項目網站：https://www.wasabiwallet.io/

4. avalonia ui與wpf

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

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

綁定到控制項

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

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

4.1綁定到命名控制項

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

<TextBox Name="other">

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

這相當於 wpf 和 uwp 用戶熟悉的 long-form(長表單)綁定：

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

Avalonia 支持这两种语法，但短格式#语法不那么冗长。

4.2綁定到祖先

您可以使用以下符号绑定到目标的逻辑父级：$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.

您還可以按類型綁定到祖先：

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

最後，您可以組合索引和類型：

<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支持

jetbrains rider現在正式支持avalonia。對於xaml預覽器添加，支持代碼完成、檢查和重構https://plugins.jetbrains.com/plugins/dev/14839到插件庫並安裝avaloniarider插件。

6. 常問問題

翻译自： Avalonia UI FAQ

6.1我可以編寫我的ui而不是使用xaml嗎?

是的。您可以使用首選的.net語言對整個ui進行編碼。

6.2有可視化拖拽設計器嗎?

不支持。avalonia ide擴展支持實時預覽，在您修改xaml時實時刷新呈現ui的預覽，從而替換拖放設計器。

6.3 avalonia是否支持熱重載?

您可以使用社區項目來啟用avalonia 的熱重載。

6.4 avalonia可以與原生api互操作嗎?

是的。

6.5我可以針對不同平台進行交叉編譯嗎?

是的。您可以在windows平台上，為macos和linux平台編譯目標程式。您可能需要在這些平台上打包您的應用程式以創建您的應用程序的發布包。

6.6我可以使用avalonia構建移動應用程式嗎?

是的。您現在可以為android開發，我們有一個預覽展示了ios支持的開始。但是，您應該仔細考慮每個平台, 並確保您的應用程式在較小的觸控設備上表現良好。

6.7我可以用avalonia建立網站嗎?

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

6.8我怎樣才能參與其中?

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

6.9支持哪些linux發行版?

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

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

6. 10支持哪些版本的macos?

macOS High Sierra 10.13+

7. 學習資料

avalonia ui官方網站：https://avaloniaui.net/
avalonia ui倉庫：https://github.com/AvaloniaUI/Avalonia
社區avalonia ui中文網：https://avaloniachina.gitbook.io
社區avalonia ui中文網倉庫：https://github.com/avaloniachina/Documentation