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デスクトップの3つのプラットフォームデモ

这是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相比不敢相信...

キリンV 10オペレーティングシステム

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

2.4小さな欠点。

3つのプラットフォーム機能は同じですが、Linuxのカスタムタイトルバーは有効ではありません、一部のネチズンはタイトルバーを隠すことができます、コントロールボタン（最小化、最大化（復元）、シャットダウン）を実装し、公式はLinuxの下でこの問題を解決する必要があります、研究を続けて、全体!

3. Avalonia UIのその他のサンプル

3.1ネットユーザーのシェア

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

3.1.1サポートプラットフォーム

サポートされているプラットフォームの詳細は以下のとおりです。

モバイルクロスプラットフォーム、すなわちiOSとAndroidをサポートします。

WebサポートはWeb Assemblyとして知られ、国際標準です。

3.1.2 Linuxカーネルの国産オペレーティングシステムの使用状況

公開オプション：

テスト環境（UOS、AMDプロセッサのため、linux-x 64を選択）にリリースします。

実行の効果は次のとおりです

添付します。CPU命令セット路

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

3.2その他の事例

示例来自仓库Avalonia。

Avaloniaで構築されたプロジェクトの一部は以下のとおりです。

3.2.1 Lunacy

これは、AIツールと内蔵グラフィックスでスムーズに動作する無料のデザインソフトウェアです。

プロジェクトのWebサイトhttps//icons8.com/lunacy

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

3.2.2 Plastic

·Create Without Conpromise：妥協のない創造

Unity Plastic SCMは、あらゆるエンジンでのチームコラボレーションとスケーラビリティを向上させるために設計されたバージョン管理およびソースコード管理ツールです。アーティストやプログラマーに最適化されたワークフローと、大きなファイルやバイナリファイルの処理速度を提供します。

プロジェクトのWebサイトhttps//www.plasticscm.com/

3.2.3 WasabiWallet

デスクトップ用のオープンソースの非保管ビットコインウォレット。

プロジェクトのWebサイト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 XAMLの代わりにUIを書くことはできますか？

そうですね。好みの. 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. サポートされる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 Web：github.com/avaloniachina/Documentation