Avalonia系列文章之小试牛刀

最近有朋友反馈，能否分享一下Avalonia相关的文章，于是就抽空学习了一下，发现Avalonia真的是一款非常不错的UI框架，值得花时间认真学习一下，于是边学习边记录，整理成文，分享给大家，希望可以一起学习，共同进步。

什么是Avalonia?

Avalonia是一款开源的跨平台UI框架，它是.NET基金会的一部分，专为创建灵活且美观的用户界面而设计。Avalonia 支持多种应用程序开发平台，包括 Windows、Linux、macOS、iOS、Android 和 WebAssembly。同时Avalonia基于现代.NET技术栈，后台允许采用C#或其他.NET语言编写代码，UI页面采用XAML语言，同样兼容WPF的样式系统，布局系统和绑定基础设施模型，之前学习WPF的同学可以无缝衔接，几乎是零成本学习。

Avalonia的特点

通过与其他UI框架进行对比，Avalonia具有如下特点：

• 跨平台设计：与 WPF 专为 Windows 开发不同，Avalonia 是从一开始就被设计为跨平台框架。它支持 Windows、Linux、macOS、iOS、Android、WebAssembly 等多个平台，能够在所有这些平台上提供一致的外观和体验。
• 独立渲染：Xamarin.Forms 依赖目标平台的原生控件进行渲染，而 Avalonia 拥有自己的渲染引擎。这意味着它不使用操作系统的原生 UI 控件，而是自己绘制整个用户界面。这提供了高度的灵活性和自定义能力。
• 灵活的样式系统：Avalonia 使用类似于 WPF 的强大样式系统。它使用样式来定义控件的外观，与 Xamarin.Forms 不同，这些样式可以根据控件状态动态调整，并且可以在继承层次结构中继承。
• XAML 和 code-behind: 与 WPF 和 Xamarin.Forms 一样，Avalonia 允许您使用 XAML 定义用户界面，这是许多 .NET 开发人员熟悉的标记语言。您还可以直接在代码中操作用户界面，使您能够选择适合您的应用程序的正确方法。
• 开源和社区驱动：Avalonia 是一个开源项目，拥有活跃的社区为其开发做出贡献。这意味着它会根据社区的反馈和需求不断发展和改进。

环境安装

正所谓“工欲善其事，必先利其器”使用Avalonia之前需要先安装UI模板和插件，才能够创建Avalonia项目。

1. 安装模板

AvaloniaUI模板，可以通过运行如下命令进行安装：

dotnet new install Avalonia.Templates

打开命令行窗口，然后输入安装UI模板命令，进行安装，如下所示：

2.安装Avalonia扩展

在Visual Studio 2022中，安装基于Avalonia的扩展，首先打开Visual Studio 2022，然后点击“扩展(X)”菜单，再点击“管理扩展(M)”子菜单，打开管理扩展窗口，在“管理扩展”窗口搜索关键字“Avalonia”，在扩展列表中选择“Avalonia for Visual Studio 2022”进行下载即可，如下所示：

然后在弹出的安装向导中，点击"Modify"，同意协议并进行安装，如下所示：

等待安装扩展

安装完成

创建Avalon项目

环境配置好以后，就可以创建项目啦，首先打开Visual Studio，创建项目，在项目模板页面的搜索框输入“Avalonia”就可以看到已经安装的Avalonia模板，然后选择“Avalonia C# Project”，点击“下一步”，如下所示：

在项目配置页面，输入项目名，此处为“FirstAvalonia”，然后点击“创建”按钮，如下所示：

在弹出的New App页面选择目标平台，和设计模式，然后点击“创建”，如下所示：

创建成功后，解决方案中包含两个项目，其中“FirstAvalonia”是在每个平台之间共享的主要项目，“FirstAvalonia.Desktop”是针对桌面平台的特定项目，如下所示：

项目运行

在创建项目后，将“FirstAvalonia.Desktop”设置为启动项目，然后点击Visual Studio 工具栏中的运行按钮或者F5快捷键，进行启动程序。

若是报“当前 .NET SDK 不支持将 .NET 8.0 设置为目标。请将 .NET 7.0 或更低版本设置为目标，或使用支持 .NET 8.0 的 .NET SDK 版本。 ”错误，表示Visual Studio 2022未安装.NET 8.0，如下所示：

可以选择项目，然后点击右键，在属性配置页面修改程序的目标框架，如下所示：

重新运行项目，如下所示：

当看到Welcome to Avalonia，恭喜你，第一Avalonia项目运行成功啦！！！