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

开发环境准备

原始文档: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 中有一些非完全替代品.