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项目运行成功啦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/66602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

10 为什么系统需要引入分布式、微服务架构

java技术的发展 在java开始流行起来之后,主要服务于企业家应用,例如ERP,CRM等等,这些项目是为企业内部员工使用,我们的思维是怎么用设计模式,如何封装代码。让开发人员关注到业务上去,系统也就那么几十几百…

第6章:Python TDD实例变量私有化探索

写在前面 这本书是我们老板推荐过的,我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后,我突然思考,对于测试开发工程师来说,什么才更有价值呢?如何让 AI 工具更好地辅助自己写代码,或许…

JDK 23 和 JDK 21 的区别

JDK 23 和 JDK 21 的区别主要在于支持周期和功能特性: 支持周期: JDK 23:此版本是一个常规发布版本,支持时间较短,通常是六个月。这种版本适合希望使用最新特性和改进的用户。JDK 21:这是一个长期支持&…

springboot自动配置原理(高低版本比较)spring.factories文件的作用

SpringBootApplication public class SpringSecurityApplication {public static void main(String[] args) {SpringApplication.run(SpringSecurityApplication.class, args);}}注解SpringBootApplication Target({ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Doc…

使用Websocket进行前后端实时通信

1、引入jar&#xff0c;spring-websocket-starter <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 2、配置websocket config import org.springframe…

vue2 - Day05 - VueX

Vuex 是 Vue.js 官方的状态管理库。它是一个让你能在应用中集中管理共享状态的工具。当应用的规模逐渐增大&#xff0c;组件之间的数据传递变得越来越复杂时&#xff0c;Vuex 就成为了救星&#xff0c;提供了一个集中式的存储来管理所有的组件状态&#xff0c;并且保证状态以一…

中型项目中 HTTP 的挑战与解决方案

一、引言 在当今数字化时代&#xff0c;HTTP&#xff08;超文本传输协议&#xff09;作为Web应用程序的基础通信协议&#xff0c;在中型项目的开发中扮演着至关重要的角色。它为客户端和服务器之间的数据传输提供了标准规范&#xff0c;使得各种类型的应用&#xff0c;从简单的…

IDEA导入Maven工程不识别pom.xml

0 现象 把阿里 sentinel 项目下载本地后&#xff0c;IDEA 中却没显示 maven 工具栏。 1 右键Maven Projects 点击IDEA右侧边栏的Maven Projects&#xff0c;再点击&#xff1a; 在出现的选择框中选择指定的未被识别的pom.xml即可&#xff1a; 2 Add as maven project 右键p…

VUE学习笔记(入门)5__vue指令v-html

v-html是用来解析字符串标签 示例 <!doctype html> <html lang"en"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document<…

OSPF的LSA的学习研究

OSPF常见1、2、3、4、5、7类LSA的研究 1、拓扑如图&#xff0c;按照地址表配置&#xff0c;激活OSPF划分相关区域并宣告相关网段 2、1类LSA&#xff0c;每台运行了OSPF的路由器都会产生&#xff0c;描述了路由器的直连接口状况和cost 可以看到R1产生了一条router lsa&#xff0…

小结:OSPF协议的工作原理

OSPF&#xff08;开放最短路径优先&#xff09;优点&#xff1a; 快速收敛&#xff1a;OSPF的收敛速度较快&#xff0c;能迅速响应网络拓扑变化&#xff0c;并在发生故障后快速更新路由信息。 支持大规模网络&#xff1a;OSPF适合大型网络&#xff0c;可以通过划分区域来减少网…

TypeScript - 利用GPT辅助学习

TypeScript 一、基础1. 安装 TypeScript2. 创建你的第一个 TypeScript 文件3. 编译 TypeScript 代码4. 变量声明与类型注解5. 函数与类型注解6. 总结 二、进阶常用类型1. 类型别名2. 对象类型3. 类型断言4.typeof 操作符 高级类型1. 类2. 交叉类型3. 泛型与 keyof4. 索引签名类…

Java - WebSocket

一、WebSocket 1.1、WebSocket概念 WebSocket是一种协议&#xff0c;用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接&#xff0c;这使得Web应用程序可以更加实时地传递数据。WebSocket协议最初由W3C开发&#xff0c;并于2…

stm32 no connect target

解决 STM32 报错 “no target connected” 的方法 前言 stm32最小系统在下载程序是一直报错&#xff1a;no target connected&#xff0c;试了很多办法成功不了&#xff0c;最后将芯片擦除了才成功。 一、问题描述 当时是写flash的时候写到ST Link 存储的地方了。 之后就不…

element的el-form-item的prop作用

这个在elemenui中介绍比较简单&#xff0c;一般写的时候照着例子写&#xff0c;会正常运行。没太注意porp到底有啥影响点。这次有点时间整理一下。 这个https://worktile.com/kb/p/3534641链接讲述的要比一般csdn上的文章清晰。 总结&#xff1a; Vue表单验证中的prop属性用于指…

Open3D计算点云粗糙度(方法一)【2025最新版】

目录 一、Roughness二、代码实现三、结果展示博客长期更新,本文最近更新时间为:2025年1月18日。 一、Roughness 通过菜单栏的Tools > Other > Roughness找到该功能。 这个工具可以估计点云的“粗糙度”。 选择一个或几个点云,然后启动这个工具。 CloudCompare只会询问…

窥探QCC518x/308x系列与手机之间的蓝牙HCI记录与分析 - 手机篇

今天要介绍给大家的是, 当我们在开发高通耳机时如果遇到与手机之间相容性问题, 通常会用Frontline或Ellisys的Bluetooth Analyzer来截取资料分析, 如果手边没有这样的仪器, 要如何窥探Bluetooth的HCI log.这次介绍的是手机篇. 这次跟QCC518x/QCC308x测试的手机是Samsung S23 U…

【论文投稿】Python 网络爬虫:探秘网页数据抓取的奇妙世界

目录 前言 一、Python—— 网络爬虫的绝佳拍档 二、网络爬虫基础&#xff1a;揭开神秘面纱 &#xff08;一&#xff09;工作原理&#xff1a;步步为营的数据狩猎 &#xff08;二&#xff09;分类&#xff1a;各显神通的爬虫家族 三、Python 网络爬虫核心库深度剖析 &…

前端炫酷动画--图片(一)

目录 一、四角线框的跟随移动 二、元素倒影(-webkit-box-reflect) 三、模特换装(maskblend) 四、元素平滑上升 五、无限视差滚动 六、判断鼠标进入方向(轮播方向) 七、环形旋转效果 八、黑白小球交替旋转 九、hover时圆形放大 十、画一棵随机树(canvas) 十一、代码雨…

STL--list(双向链表)

目录 一、list 对象创建 1、默认构造函数 2、初始化列表 3、迭代器 4、全0初始化 5、全值初始化 6、拷贝构造函数 二、list 赋值操作 1、赋值 2、assign&#xff08;迭代器1&#xff0c;迭代器2&#xff09; 3、assign&#xff08;初始化列表&#xff09; 4、assig…