首页 > 其他分享 >Avalonia UI 开发环境准备 & 必须要知道的一些事情.

Avalonia UI 开发环境准备 & 必须要知道的一些事情.

时间:2023-04-09 20:57:56浏览次数:37  
标签:元素 开发 UI 使用 wpf axaml Avalonia

 


 

开发环境准备

原始文档:https://docs.avaloniaui.net/docs

本文仅摘要关键部分

安装 VS2022

安装 VS插件 Avalonia for Visual Studio 2022 用于设计时的预览

安装 Avalonia 项目模版

  打开 Developer PowerShell for VS 2022 运行命令 dotnet new install Avalonia.Templates

启动 VS 后即可创建新的 Avalonia 项目.

创建新项目后执行生成操作, 即可对编辑的 axaml 文件进行设计时预览.

 


Avalonia 使用 XAML 语言描述 UI 界面,早期其 UI 文件与 WPF 一样以 .xaml 后缀名保存,但后来为了更好的区分,改为使用 .axaml 作为后缀名(好像是因为 VS 总是将 .xaml 在 WPF 编辑器中打开导致报错).


有时候编译会出现错误,显示文件被占用,有可能是 Avalonia 提供的 .axaml 预览器正在使用之前生成的 exe 文件,导致新一轮的生成无法完成,此时只要关闭 vs 中所有打开的 .axaml 文件的标签页,然后再重新生成即可.

这个 bug 已经存在很长时间了,不知道为什么一直没有修复.

 


 

有时候 axaml 中会莫名出现大量错误,此时可以尝试关掉该文件再重新打开或重新生成项目.

  


 

如果运行时预览无法正常显示,请重新生成项目,并且确认预览窗口右上角的下拉选择框中,选中的是一个可执行项目.


 

Avalonia 主仓库中的 \samples\ControlCatalog 程序演示了 Avalonia 的默认控件的使用方式,目前有 Windows iOS Android Browser Blazor Mac.

在使用 Avalonia 前最好起码粗略浏览一下.

 


 

在 WPF / UWP 程序开发中,VS 提供了实时可视化树 & 实时属性面板以便调试,但它们无法在 Avalonia 程序开发中使用,所以 Avalonia 另行提供了一套类似的功能叫做 Avalonia DevTools. 在调试模式下运行程序,在任意 Avalonia 窗口上按下键盘的 F12 即可开启.

 

 


 

Command

WPF 中如果需要在 V 中的 UI 元素上触发 VM 中的功能,通常需要在 VM 中创建一个 Command 对象并指定其要执行的功能,然后在 V 上将通过绑定功能将 UI 元素和 Command 对象进行绑定.比较典型的有 Prism 库中的 DelegateCommand.

而在 Avalonia 的 MVVM 中可以对这种操作进行简化,省去创建 Command 对象的步骤:

例如下图中的 VM 中并不存在一个名为 ButtonClicked 的 Command 对象,只有一个同名的方法, 即可在 V 中直接进行绑定操作.

 

   当然使用不使用这种简化也是可以的,此处以 ReactiveUI.ReactiveCommand 为例:

 

 

 


wpf 中可以使用 d:DataContext 指定设计时 DataContext.

Avalonia 中对应的操作是 Design.DataContext

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:dd="clr-namespace:My.Namespace;assembly=MyAssembly"
        x:Class="AvaloniaApplication1.MainWindow"
        Design.Width="100">
    <Design.DataContext>
        <dd:MyViewModel />
    </Design.DataContext>
    Welcome to Avalonia!
</Window>

  


 wpf 中元素的可见性通过属性 Visibility 设置,它有三种值,此处不详述.

Avalonia 中元素的可见性通过属性 IsVisible 设置,它是个 bool 值,只有显示和不显示.

 


 Avalonia 中有一些内置的转换器,比如 BoolConverters , ObjectConverters , StringConverters 等

Avalonia.Data.Converters - Avalonia UI

 


 

wpf 中的路由事件有冒泡和隧道两种,并且都可以在 xaml 中使用.

Avalonia 中的路由事件也有冒泡和隧道两种, 但隧道事件在 xaml 中不可用,只能通过 cs 代码使用.

Tunnelling Events - Avalonia UI

 


 
wpf 中可以使用 Microsoft.Xaml.Behaviors + InvokeCommandAction 将事件的触发转化为激活vm中的命令,Avalonia 中有对应的功能吗?

wpf 中可以使用 DataTrigger 实现当数据变为特定值时设置ui元素属性. Avalonia 没有 Trigger 机制怎么办?

第三方库 Avalonia.Xaml.Behaviors  中有一些非完全替代品.

 


wpf 中 UIElement 元素可以通过设置 Effect/DropShadowEffect 添加阴影效果

Avalonia 只能为 Border 设置 BoxShadow 添加阴影效果.其它元素没这个属性,无法设置阴影.

Border - Avalonia UI

 


 

wpf 中将图片文件的编译类型设为资源, 即可在View中直接使用该图片.

Avalonia 中,需要将图片的文件生成操作设为 "AvaloniaResource" 即可在 View 中调用. 

请确认安装了  Avalonia for Visual Studio 2022 - Visual Studio Marketplace ,否则没这个选项.


 

如何对元素进行裁剪,比如将方形的图片元素,裁剪为圆型或圆角矩形

与 WPF 几乎一致:

 

标签:元素,开发,UI,使用,wpf,axaml,Avalonia
From: https://www.cnblogs.com/8u7tgyjire7890/p/17090763.html

相关文章

  • 【 2023 】近期一些编译调试开发 Android7&9 系统的笔记( h616 / imx8m / rk3399 )
    主要就记录一下自己食用过程中遇到的一些问题吧,板子有新有旧,但都差不多。待整理呢。https://stackoverflow.com/questions/67363030/rebuild-android-code-with-error-ssl-error-when-connecting-to-the-jack-server-thttps://note.qidong.name/2017/07/disable-jack-server/......
  • js开发规范
    ####################### 1.缩进[强制] 使用4个空格做为一个缩进层级,不允许使用2个空格或tab字符。[强制] switch中缩进2个空格[强制] 要求分号前面不可以有空格,后面可以有空格[强制] 要求语句块之前保留一个空格[强制] 关键字和类似关键字前后保留一个空格[......
  • Web开发|XML Schema (XSD) 学习
    采用XSD建立教师、学生之间的关系。假设有两个实体“学生”和“教师”,一个学生可以有多个老师,一个老师也可以有多个学生,二者为多对多的关系。在XSD中描述多对多的关系可以使用XML元素的引用和复杂类型的组合,使用中间表(或连接表)来表示多对多关系。首先,我们定义“学生”和“教师”......
  • Web开发|AJAX学习
    IE|FireFox|Chrome,AJAX引擎运行方式的对比AJAX引擎的核心是XMLHttpRequest对象。而不同的浏览器创建XMLHttpRequest对象的方法是有差异的。IE浏览器使用ActiveXObject,而其他的浏览器使用名为XMLHttpRequest的JavaScript内建对象。XMLHttpRequest得到了所有现代浏览器较好的......
  • [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构
    这是一篇系列博文。请关注我,学习更多.NETMAUI开发知识![MAUI项目实战]手势控制音乐播放器(一):概述与架构[MAUI项目实战]手势控制音乐播放器(二):手势交互[MAUI项目实战]手势控制音乐播放器(三):动画[MAUI项目实战]手势控制音乐播放器(四):圆形进度条在之前的博文中提到这个......
  • Python+Selenium.webdriver实现WEB端UI自动化测试
    本篇记录基于Python+Selenium.webdriver实现WEB端UI自动化测试,其中测试用例使用excel维护。 1.项目选取(登录页无验证码校验的项目)该示例选取的是登录页不需要输入验证码校验的基础页面(考虑到现在大部分项目都是需要进行验证码校验的,后面研究后再出一篇相关的分享。) 2.环境......
  • 【小程序】微信小程序开发流程
    目录一、概述二、整体开发架构三、注册账号和安装开发工具1)注册账号1、注册方法2、选择注册的帐号类型3、填写邮箱和密码4、激活邮箱5、填写主体信息6、登录后台补充信息2)安装开发工具3)快速开始1、云开发和传统开发的区别2、云开发API分类3、AppID获取4、快速开始四、小程序登......
  • Vue开发规范
    ###############################单文件组件内容:<!--componentA.vue--><script>/*...*/</script><template>...</template><style>/*...*/</style>   组件相关:尽可能的减少watcher的数量尽量减少组件嵌套,递归渲染影响性能大量数据渲染导致卡顿,可以先渲染用户可见......
  • IDE 开发语言
    EmbarcaderoDelphi11的编译器IDE(IntegratedDevelopmentEnvironment)是使用ObjectPascal语言和DelphiVCL(VisualComponentLibrary)框架开发的。DelphiVCL是一个可视化组件库,它是Delphi的核心部分之一,用于构建Windows、macOS、iOS和Android应用程序的用户界面......
  • abp(net core)+easyui+efcore实现仓储管理系统——模块管理升级(六十)
    Abp(netcore)+easyui+efcore实现仓储管理系统目录abp(netcore)+easyui+efcore实现仓储管理系统——ABP总体介绍(一)abp(netcore)+easyui+efcore实现仓储管理系统——解决方案介绍(二)abp(netcore)+easyui+efcore实现仓储管理系统——领域层创建实体(三) abp(netcore)+eas......