這是一個基于WPF XAML的跨平臺UI框架，并支持多種操作系統(tǒng)（Windows（.NET Core），Linux（GTK），MacOS，Android和iOS），Web（WebAssembly）

本文閱讀目錄

1. Avalonia UI簡介

Avalonia UI文檔教程：https://docs.avaloniaui.net/docs/getting-started

隨著跨平臺越來越流行，.NET支持跨平臺至今也有十幾年的光景了(Mono開始)。

但是目前基于.NET的跨平臺，大多數(shù)還是在使用B/S架構(gòu)的跨平臺上；至于C/S架構(gòu)，大部分人可能會選擇Qt進行開發(fā)，或者很早之前還有一款Mono可以支持.NET開發(fā)者進行開發(fā)跨平臺應(yīng)用，自微軟收購Xamarin后，今年又正式發(fā)布了MAUI跨平臺框架，外加第三方的跨平臺框架Uno[Avalonia UI](https://avaloniaui.net/)選擇，技術(shù)棧多的炸裂呀。

今天介紹的是Avalonia UI，站長也是研究了好幾天，這是一個基于WPF XAML的跨平臺UI框架，并支持多種操作系統(tǒng)（Windows（.NET Core），Linux（GTK），MacOS，Android和iOS），Web（WebAssembly）。

2. Avalonia UI桌面三大平臺演示

這是Avalonia UI官方網(wǎng)站的一個Demo，站長對部分Nuget包進行了升級，網(wǎng)友【小飛機MLA】對Linux版本修復(fù)了字體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即可）開發(fā)，站長一次性直接編譯運行(站長使用的.NET 7），運行調(diào)試過于順暢，與使用MAUI相比不敢相信...

國產(chǎn)麒麟V10操作系統(tǒng)

站長安裝麒麟OS折騰了一會兒，文件傳輸不熟悉（最后使用的百度網(wǎng)盤中轉(zhuǎn)...），運行命令也不熟（需要給運行程序設(shè)置執(zhí)行權(quán)限777），后面是網(wǎng)友【小飛機MLA】解決了Linux字體問題，站長得以開心的運行并錄了視頻分享。

2.4 小缺憾

三個平臺功能相同，只是Linux自定義標題欄未生效，有網(wǎng)友提示可以隱藏標題欄，自己實現(xiàn)控制按鈕（最小化、最大化（還原）、關(guān)閉），后面官方應(yīng)該會解決Linux下這個問題，繼續(xù)研究、整！

3. Avalonia UI其他示例

3.1 網(wǎng)友的分享

以下內(nèi)容摘自博文Avalonia學習實踐(二)--跨平臺支持及發(fā)布。

3.1.1 支持的平臺

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

移動端跨平臺，也就是iOS和Android的支持。

Web支持，即WebAssembly，這是國際標準。

3.1.2 使用Linux內(nèi)核國產(chǎn)操作系統(tǒng)的情況

發(fā)布選項：

發(fā)布至測試環(huán)境（統(tǒng)信UOS、AMD處理器，所以選擇linux-x64）如下：

運行效果如下:

附.國產(chǎn)CPU指令集路線

其中龍芯是完全自主的指令集，前段時間也剛剛更新了對.Net的支持；x86主要是生態(tài)好，傳統(tǒng)桌面處理器intel、AMD都是x86架構(gòu)，做兼容適配也方便些；arm以前移動端較多，現(xiàn)在桌面端也逐漸趕上。

3.2 其他示例

示例來自倉庫Avalonia。

基于Avalonia搭建的項目部分如下：

3.2.1 Lunacy

這是一款免費設(shè)計軟件，通過AI工具和內(nèi)置圖形保持流暢。

項目網(wǎng)站：https://icons8.com/lunacy

以下來源于B站的一個視頻：（搬運/英文）使用 Lunacy 設(shè)計一個網(wǎng)站首頁！

3.2.2 Plastic

宣傳語：Create without compromise：不妥協(xié)地創(chuàng)造

Unity Plastic SCM是一個版本控制和源代碼管理工具，旨在提高團隊協(xié)作和與任何引擎的可擴展性。它為藝術(shù)家和程序員提供了優(yōu)化的工作流程，以及處理大型文件和二進制文件的速度。

項目網(wǎng)站：https://www.plasticscm.com/

3.2.3 WasabiWallet

用于桌面的開源、非托管比特幣錢包。

項目網(wǎng)站：https://www.wasabiwallet.io/

4. Avalonia UI與WPF

Maui的原生控件從命名、屬性列表看和原生Android類似，但Xaml語法和WPF相同，站長使用Maui原生控件不多，只淺顯地發(fā)表這部分看法，不貼相關(guān)代碼，Maui學習請點這里。

而Avalonia UI呢，和WPF就幾乎相同了，下面翻譯原文數(shù)據(jù)綁定部分文檔，熟悉WPF的同學可以對比：

綁定到控件

除了綁定數(shù)據(jù)到一個控件的DataContext，您還可以綁定到其他控件。

請注意，執(zhí)行此操作時，綁定源是*控件本身，*而不是控件的DataContext. 如果你想綁定到控件DataContext，那么你需要在綁定路徑中指定它。

4.1 綁定到命名控件

如果要綁定到另一個命名控件的屬性，可以使用以#字符為前綴的控件名稱(站長注：這里類似前端的css?id選擇器，其實Avalonia UI樣式擴展的借鑒大部分來源于前端，站長猜測的哈)。

這相當于 WPF 和 UWP 用戶熟悉的 long-form(長表單)綁定：

Avalonia 支持這兩種語法，但短格式#語法不那么冗長。

4.2 綁定到祖先

您可以使用以下符號綁定到目標的邏輯父級：$parent

或者通過向$parent符號添加Index(索引)來傳遞給祖先：

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

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

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

如果您需要在祖先類型中包含 XAML 命名空間，您可以使用字符:像往常一樣來做到這一點：

Avalonia 還支持 WPF/UWP 的RelativeSource語法，其功能類似但又不相同。RelativeSource適用于可視樹，而此處給出的語法適用于邏輯樹。

關(guān)于Avalonia UI的更多用法請點擊這里學習。

5. JetBrains Rider支持

JetBrains Rider現(xiàn)在正式支持Avalonia。 對于XAML預(yù)覽器添加，支持代碼完成、檢查和重構(gòu)https://plugins.jetbrains.com/plugins/dev/14839到插件庫并安裝AvaloniaRider插件。

6. 常問問題

翻譯自：?Avalonia UI FAQ

6.1 我可以編寫我的UI而不是使用XAML嗎?

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

6.2 有可視化拖拽設(shè)計器嗎?

不支持。Avalonia IDE擴展支持實時預(yù)覽，在您修改XAML時實時刷新呈現(xiàn)UI的預(yù)覽，從而替換拖放設(shè)計器。

6.3 Avalonia是否支持熱重載?

您可以使用社區(qū)項目來啟用Avalonia 的熱重載。

6.4 Avalonia可以與原生API互操作嗎?

是的。

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

是的。您可以在Windows平臺上，為macOS和Linux平臺編譯目標程序。您可能需要在這些平臺上打包您的應(yīng)用程序以創(chuàng)建您的應(yīng)用程 序的發(fā)布包。

6.6 我可以使用Avalonia構(gòu)建移動應(yīng)用程序嗎?

是的。您現(xiàn)在可以為Android開發(fā)，我們有一個預(yù)覽展示了iOS支持的開始。但是，您應(yīng)該仔細考慮每個平臺, 并確保您的應(yīng)用程序在較小的觸控設(shè)備上表現(xiàn)良好。

6.7 我可以用Avalonia建立網(wǎng)站嗎?

它還處于早期階段, 還沒有準備好投入生產(chǎn)，但是是的，你可以。Avalonia現(xiàn)在支持Web Assembly。 請參考快速演示:?NodeEditor Demo。這意味著您的完整Avalonia應(yīng)用程序可以在所有現(xiàn)代網(wǎng)絡(luò)瀏覽器中運行。

6.8 我怎樣才能參與其中?

查看社區(qū)指南，了解如何參與該項目。

6.9 支持哪些Linux發(fā)行版?

• Debian 9 (Stretch)+

• Ubuntu 16.04+

• Fedora 30+

Skia 是針對glibc構(gòu)建的。如果您的發(fā)行版使用其他東西，您需要使用SkiaSharp構(gòu)建您自己的libSkiaSharp.so。我們僅為Intel x86-64提供預(yù)編譯的二進制文件。計劃支持ARM/ARM64。

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

macOS High Sierra 10.13+

7. 學習資料

• Avalonia UI官方網(wǎng)站：https://avaloniaui.net/

• Avalonia UI倉庫：https://github.com/AvaloniaUI/Avalonia

• 社區(qū)Avalonia UI中文網(wǎng)：https://avaloniachina.gitbook.io

• 社區(qū)Avalonia UI中文網(wǎng)倉庫：https://github.com/avaloniachina/Documentation