Avalonia 一个 .net 的跨平台 UI 框架

科技 08-26 来源： GitHub精选

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的Avalonia 是 dotnet 的跨平台 UI 框架，提供灵活的样式系统并支持 Windows、Linux、macOS 等多种操作系统。

支持的平台

以下平台支持 Avalonia：

Windows 8 及更高版本注意：Avalonia 在 Windows 7 上也能正常工作，但不受官方支持
MacOS High Sierra 10.13 及更高版本
对于 Linux：Debian 9 (Stretch) 及更高版本Ubuntu 16.04 及更高版本Fedora 30 及更高版本

支持的开发环境

以下环境支持带有 IntelliSense 的 Avalonia XAML：

Visual Studio 2017 及更高版本（带或不带 Resharper 2020.3）。还支持 Avalonia 视觉设计器。
JetBrains Rider 2020.3 及更高版本。

安装

要开始使用 Avalonia 进行黑客攻击，请为其安装模板

dotnet new -i Avalonia.Templates

然后创建新的应用程序

dotnet new avalonia.app -o MyApp
cd MyApp

现在您可以打开 MyApp 文件夹并继续改进您的应用程序。

JetBrains Rider 设置

下载并安装 .NET 5 SDK下载 .NET（Linux、macOS 和 Windows）（microsoft.com 这是用于构建 Avalonia 应用程序的运行时、开发工具包（编译器等）。
安装 Avalonia 模板从计算机上的命令提示符运行命令。dotnet new -i Avalonia.Templates输出将与此类似。

$ dotnet new -i Avalonia.Templates
  Determining projects to restore...
  Restored /Users/danwalmsley/.templateengine/dotnetcli/v5.0.200/scratch/restore.csproj (in 706 ms).

Templates                                     Short Name            Language    Tags
.....

Avalonia Resource Dictionary                  avalonia.resource                 ui/xaml/avalonia/avaloniaui
Avalonia Styles                               avalonia.styles                   ui/xaml/avalonia/avaloniaui

Examples:
    dotnet new mvc --auth Individual
    dotnet new mstest
    dotnet new --help
    dotnet new avalonia.mvvm --help
$

下载并安装Rider：Rider 将为您提供适用于 Avalonia 的最佳开发体验。它适用于 Windows、Linux 和 macOS。Rider 支持开箱即用的 XAML。但是，如果要使用 XAML 预览器，则需要 Avalonia 插件。

安装 Avalon 插件一旦 Rider 加载，您将看到欢迎屏幕。单击Configure下拉菜单并选择Plugins。

用 Avalonia 编程

标记

XAML 是一种基于 XML 的标记语言，它以声明方式实现应用程序的外观。您通常使用它来创建窗口和用户控件，并用控件、形状和图形填充它们。

以下示例使用 XAML 实现包含单个按钮的窗口的外观：

具体来说，此 XAML 分别使用 Window 和 Button 元素定义了一个窗口和一个按钮。每个元素都配置有属性，例如 Window 元素的 Title 属性来指定窗口的标题栏文本。在运行时，Avalonia 将标记中定义的元素和属性转换为 Avalonia 类的实例。例如，Window 元素被转换为 Window 类的实例，其 Title 属性是 Title 属性的值。

由于 XAML 是基于 XML 的，因此您使用它编写的 UI 组装在称为元素树的嵌套元素层次结构中。元素树提供了一种逻辑和直观的方式来创建和管理 UI。

下图显示了在 Windows 上运行的上一个示例中的 XAML 定义的用户界面：

代码隐藏

应用程序的主要行为是实现响应用户交互的功能，包括处理事件（例如，单击菜单、工具栏或按钮）以及调用业务逻辑和数据访问逻辑作为响应。

在 Avalonia 中，此行为可以在与标记相关联的代码中实现。这种类型的代码称为代码隐藏。

以下示例显示了上一个示例的更新标记和代码隐藏（请注意，有 2 个选项卡）：

在此示例中，代码隐藏实现了一个派生自该类的类。该属性用于将标记与代码隐藏类相关联。从代码隐藏类的构造函数中调用，以将标记中定义的 UI 与代码隐藏类合并。您会注意到类被声明为并且没有可见的实现。这是因为body 是由Avalonia.NameGenerator包在对应的部分类中自动生成的，该包默认包含在 Avalonia 模板中。Windowx:ClassInitializeComponentMainWindowpartialInitializeComponentInitializeComponent

结合x:Class并InitializeComponent确保您的实现在创建时正确初始化。代码隐藏类还实现了按钮事件的事件处理程序Click。单击按钮时，事件处理程序通过在Button控件上设置属性来更改按钮的文本。

Window

Window是Avalonia的顶级控制。

一个窗口由两部分组成：一个XAML 文件（例如MainWindow.axaml）和一个代码隐藏文件（例如MainWindow.axaml.cs）。代码隐藏定义了一个代表窗口的 .NET 类。

默认应用程序模板创建一个Window名为MainWindow. 您也可以从模板创建其他窗口：

visual studio

在解决方案资源管理器中右键单击要添加窗口的文件夹
选择Add -> New Item菜单项
在出现的对话框中，导航到类别树中的“Avalonia”部分
选择“窗口（Avalonia）”
在“名称”下输入您的窗口名称
点击“添加”按钮

.net core cli

运行此命令，替换[namespace]您要在其中创建窗口的命名空间和窗口[name]名称。

dotnet new avalonia.window -na [namespace] -n [name]

用户控件

UserControl表示 Avalonia 中的“视图”，它是预定义布局中可重用的控件集合。

AUserControl通常由两部分组成：一个 XAML 文件（例如MyUserControl.axaml）和一个代码隐藏文件（例如MyUserControl.axaml.cs）。代码隐藏定义了一个代表控件的 .NET 类。

UserControl在使用 MVVM 模式时，s 通常与“视图模型”配对。

布局

元素边界框

在考虑 Avalonia 中的布局时，了解围绕所有元素的边界框非常重要。布局系统消耗的每一个都Control可以被认为是一个插入布局的矩形。该Bounds属性返回元素布局分配的边界。矩形的大小是通过计算可用屏幕空间、任何约束的大小、特定于布局的属性（例如边距和填充）以及父Panel元素的个别行为来确定的。处理这些数据，布局系统能够计算特定Panel. 重要的是要记住，在父元素上定义的尺寸特性（例如 a Border）会影响其子元素。

布局系统

简而言之，布局是一个递归系统，它导致元素被调整大小、定位和绘制。更具体地说，布局描述了测量和排列Panel元素Children集合成员的过程。布局是一个密集的过程。集合越大Children，必须进行的计算次数就越多。也可以根据Panel拥有该集合的元素定义的布局行为来引入复杂性。一个相对简单的Panel，例如Canvas，可以比一个更复杂的Panel，例如具有明显更好的性能Grid。

每次子控件更改其位置时，它都有可能触发布局系统的新传递。因此，了解可以调用布局系统的事件很重要，因为不必要的调用会导致应用程序性能下降。下面描述调用布局系统时发生的过程。