最近有朋友反馈,能否分享一下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项目运行成功啦!!!