在 Easy Samples 中使用 AvaloniaUI 进行多平台 UI 编码。第 1 部分 - AvaloniaUI 构建块

介绍

在 Microsoft 停止使用 Silverlight 后，唯一可用于所有主要平台的 UI 编程的多平台解决方案是 Web 解决方案 (JavaScript/TypeScript) 和 Xamarin。两者都是不足的，并且代表了从 WPF 富 UI 客户端解决方案的巨大倒退，如下面将详细解释的那样。

然而，有一个相对较新的开源 .NET 解决方案，Avalonia与 WPF 非常相似，在许多方面都比 WPF 更强大，并且（与 WPF 或 UWP 不同）适用于任何平台 - Windows、Linux 和 MAC（我自己在每个平台上都对其进行了测试）那些平台）。Avalonia 也适用于移动平台 - iOS 和 Android（我还没有在移动平台上测试过 Avalonia，所以我依赖 Avalonia 文档）。

为什么 Avalonia 会大受欢迎

• Avalonia 是完全开源的 - 您可以在Avalonia Source Code上找到在限制最少 - MIT 许可下发布的源代码。
• Avalonia 是用 .NET Standard 编写的，它 100% 兼容所有版本的 .NET Core 和 .NET Framework。
• Avalonia 正在由全球各地非常聪明的人快速开发，他们面对客户并了解客户的需求。
• Avalonia 有一些类似于 WPF 的 snoop 的工具，目前比 snoop 更差，但具有足以调试和修改 Avalonia 应用程序的基本功能。此外，考虑到 Avalonia 项目积极变化的速度，此类工具将快速改进。
• Avalonia 为创建 XAML 文件和 XAML intellisense 提供了 Visual Studio 和 Rider 支持，尽管 Avalonia XAML intellisense 仍然落后于 WPF XAML intellisense 所能提供的功能。
• WPF 和 Silverlight 框架提出了许多超出通常 OOP 编程范式的编程范式，这使得那些了解这些范式的人可以更清晰、更快地创建代码。在这些范例中，我列出了以下内容：
  • 视觉和逻辑树
  • 可以在使用它们的对象之外定义的附加或依赖属性，并且不会占用任何额外的内存，除非它们被分配了非默认值并且当它们的值发生变化时会触发一个特殊事件。
  • 附加路由事件，可以在触发它们的对象之外定义，并且可以在树上传播和上下处理。
  • 绑定和相关的 MVVM 模式
  • 控制模板
  • 数据模板
  • 风格
  • 行为 - 在不使用事件修改类本身的情况下修改 C# 类的行为的方法。
  所有这些范例都已在 Avalonia 中以至少与 WPF 中一样强大的方式实现。
• Avalonia 允许创建在不同平台上外观和行为相同的应用程序，但也支持特定于平台的定制。
• 几个非常流行的 .NET 开源项目从 WPF 切换到 Avalonia，以使他们的产品具有多平台性——其中包括我使用的项目——
  • AvalonEdit - 该端口可用作AvalonEdit
  • 罗斯林帕德
  • 阿瓦洛尼亚码头
• Avalonia 在 Gitter 上有不错的免费公共支持： Gitter上的 Avalonia以及在Avalonia Support购买商业支持的一些选项
• Avalonia 有一些关于Avalonia Documentation的文档，尽管需要更多文档，尤其是对于那些没有 WPF 背景的人，并且本文的目的是填补一些文档空白。

Avalonia的一些缺点

一旦我们谈到优势，我们还应该提到 Avalonia 的一些镜头 - 请注意，由于 Avalonia 是一个快速发展的项目，它们中的大多数将很快得到修复。

• 文档非常小，主要针对 WPF 开发人员。为了使项目更受欢迎和更广泛接受，需要更多的文档，本文的目的就是解决这个问题。
• 有一些怪癖和一些行为与 WPF 略有不同，因此我不得不在 Avalonia UI 讨论中询问有关 gitter 的问题，或者只是进入 Avalonia 代码以找出如何解决它们。
• Avalonia UI 的控件带有两个主题（默认和流畅），这两个主题各有明暗模式 - 对于其他任何内容和一些更复杂的控件，Telerik 或 DevExpress 等 3 rd方商业控件尚不可用。我希望自己能帮助解决这个问题，因为我计划为 Avalonia UI 创建一些灵活的开源控件。我已经创建了一个可以在NP.Avalonia.VisualsCustomWindow上完全定制的标题。
• 似乎 Avalonia 与Skia相关联- 一个 2D 图形库，这意味着不能轻松地将 3-D 图形添加到 Avalonia（尽管几乎没有人使用 WPF 3-D 功能）。

Web 和 Xamarin 框架在多平台开发中的缺点

与 WPF/Avalonia 编程相比，Web（JavaScript/TypeScript）开发有以下缺点：

• Web 开发不是组合式的。您不能创建一个包含多个原语并在 Web 浏览器的不同部分以完全相同的方式显示的自定义控件。例如，您不能将 HTML5 画布矩形打包成一个可重用的按钮控件，该按钮控件将以类似的方式显示在 Web 页面的中心和底部（没有一些额外的自定义）。取而代之的是，这些控件是随浏览器预定义的，具有一百万种自定义方式（其中一些自定义特定于每个浏览器）。经验丰富的 WPF/Avalonia 开发人员可以使用设计人员要求的精确 UI 行为极快地创建所需的 UI 控件，并且此类控件将像控件开发人员希望的那样可重用和可定制。
• 上面提到的 WPF 范式（例如，绑定和模板）中很少有被著名的 Web 框架（如 Angular 和 React）实现，但没有一个像在 WPF 和 Avalonia 中那样以如此强大的方式实现。例如，在 Angular 或 React 中都没有附加属性、自定义路由事件或与树祖先的绑定。
• 如果您使用的是网络 - 将应用程序拆分为多个窗口时会遇到问题。甚至 Visual Studio Code（它是最先进的 typescript UI 应用程序）也不允许将选项卡拖出主窗口。顺便说一句——如果你使用 JavaSript 或 TypeScript 开始一个桌面项目，不要期望编写任何接近 Visual Studio Code 的东西——我看到几个项目的这种期望都失败了。但是使用 Avalonia 创建像 VSCode 这样复杂的应用程序是完全可以实现的。

现在关于 Xamarin 及其继任者 MAUI 的缺点。

• Xamarin（可能还有 MAUI）是为构建移动应用程序而明确创建的，而没有过多考虑桌面应用程序。相应地，所有商业 Xamarin 框架，例如 Telerik 或 DevExpress 都面向移动开发，很少考虑桌面开发。
• Xamarin Forms（它是一个多平台产品）通常需要针对 Xamarin Forms 未涵盖的功能进行一些本机编程。
• Xamarin 表单不是组合式的 - 基本范式来自本机控件 - 按钮、菜单等。它们在每个平台上的显示方式也不同 - 这有时是可取的，有时不是。
• Xamarin 没有实现上面列出的许多 WPF 范例。

你可以在这篇文章中找到什么

本文及其计划后续文章的目的是填补不熟悉 WPF 或 Silverlight 的人在编程 Avalonia UI 时可能存在的空白。更复杂的问题将在以后的文章中描述。

本文中的所有样本都经过了以下测试：

• 窗口 10
• Ubuntu 20.4
• 麦克卡特琳娜

本文仅涵盖 Avalonia UI 的基础知识 - 将成为任何应用程序一部分的构建块：

• 使用背后的代码创建简单的 Avalonia 应用程序。注意 - Code Behind 是构建大型应用程序的最简单但最糟糕的方法。不要过度使用它！其他连接 XAML 代码和 C# 代码的方法将在以后的文章中介绍。
• 最有用的内置控件
• 基元（用作合成的基元构建块的控件）
• 面板
• 刷子
• 变换

下一部分（第 2 部分）将涵盖以下主题：

• 视觉树
• 逻辑树
• Avalonia 开发工具
• 附加、样式和直接属性
• 绑定

之后，我还计划涵盖：

• DataTemplates,ItemsPresenter和ContentPresenter
• 从 XAML 调用 C# 代码（Commands和CallAction行为）
• XAML（通过标记扩展重用 XAML）
• 风格
• 动画

之后的文章将涵盖更复杂的主题，例如：

• 自定义（无外观）控件
• ControlTemplates
• 行为
• IoC 与 Avalonia
• 为原型驱动开发安排 Avalonia 项目。

如何阅读这篇文章

本文旨在成为 Avalonia 的动手教程，同时重点介绍 Avalonia 的基本功能。它充满了我建议在您的计算机上构建和运行的编码示例。如果您想很好地学习 Avalonia 功能，您还应该尝试创建自己的项目和示例，类似于本文中给出的那些。

阅读本文和复习练习不需要以前的 WPF 背景知识。

本文中的所有示例都是使用 Visual Studio 2019、.NET 5.0 和相应的 C# 9.0 创建的，尽管它们可以轻松降级到以前版本的 .NET 和 C#。

使用 Visual Studio 2019 创建和运行简单的 Avalon 项目

首先，为了使用 Avalonia，您需要使用位于“工具”下的 VS 扩展管理器或（对于 VS2019）“扩展”菜单下的 VS 扩展管理器安装“Avalonia for Visual Studio”扩展。在网上找到这个扩展并安装它。该扩展包含各种 Avalonia 相关 Visual Studio 项目的模板、Avalonia 特定文件类型和 Avalonia XAML 文件的智能感知（与 WPF XAML 文件略有不同）。

安装“Avalonia for Visual Studio”扩展后，启动 Visual Studio 并选择“Avalonia Application”项目类型：

按“下一步”按钮，选择项目的位置和项目名称，然后按“创建”按钮：

创建的项目将依赖于三个 Avalonia 包-Avalonia和：Avalonia.DesktopAvalonia.Diagnostics

还创建了五个包含代码的文件 - App.axaml、App.axaml.cs、MainWindow.axaml、MainWindow.axaml.cs和Program.cs。

带有“ .axaml ”扩展名的文件是重命名为“ .axaml ”的XAML文件，显然是为了将它们与WPF/UWP“ .xaml ”文件区分开来。Avalonia XAML 语法与 WPF XAML 语法非常相似，在所谓的样式选择器方面有一些特殊性（将在以后的文章中解释）。

在上述五个文件中，您可能需要修改MainWindow.axaml和MainWindow.axaml.cs文件最多，然后可能稍微更改App.axaml和App.axaml.cs文件，您可能不必更改Program.cs文件。

您可以按原样运行空窗口，但在MainWindow.

打开MainWindow.xaml文件并将其内容（默认由 " Welcome to Avalonia!" 文本组成）替换为以下代码：

XML

<span style="color:#000000"><span style="background-color:#fbedbb"><span style="color:#0000ff"><</span><span style="color:#800000">Button</span> <span style="color:#ff0000">x:Name</span><span style="color:#0000ff">="</span><span style="color:#0000ff">CloseWindowButton"</span>
        <span style="color:#ff0000">Content</span><span style="color:#0000ff">="</span><span style="color:#0000ff">Close Window"</span>
        <span style="color:#ff0000">HorizontalAlignment</span><span style="color:#0000ff">="</span><span style="color:#0000ff">Center"</span>
        <span style="color:#ff0000">VerticalAlignment</span><span style="color:#0000ff">="</span><span style="color:#0000ff">Center"</span>
        <span style="color:#ff0000">Padding</span><span style="color:#0000ff">="</span><span style="color:#0000ff">10,5"</span><span style="color:#0000ff">/</span><span style="color:#0000ff">></span></span></span>

如果您现在运行应用程序，窗口中间会有一个 Button（由水平和垂直对齐确保 - 单词“关闭窗口”将写在按钮中间（Button的内容）和从“关闭按钮”文本到按钮两侧的边距将在左右为 10 个通用像素，在顶部和底部为 5 个通用像素（由Padding属性指定）：

到目前为止一切顺利，但如果你按下按钮，什么都不会发生。我们需要尝试将按钮单击事件连接到关闭窗口的操作。在第一个示例中，我们将使用最简单但也是最糟糕的方式来实现此目的 - 背后的代码。文件MainWindow.xaml.cs包含所谓的“代码隐藏” - MainWindow.xaml文件的 C# 代码：

C＃

我们将按钮命名为“ CloseWindowButton”。在 WPF 中，会生成相应的类成员。Avalonia, 仍然不包含这个功能，但是我们可以通过添加以下行轻松找到该按钮：

C＃

<span style="color:#000000"><span style="background-color:#fbedbb"><span style="color:#0000ff">var</span> button = <span style="color:#0000ff">this</span>.FindControl<Button>(<span style="color:#800080">"</span><span style="color:#800080">CloseWindowButton"</span>)</span></span>

afterInitializeComponent();在构造函数中被调用。

然后我们可以为按钮的Click事件添加一个处理程序button.Click += Button_Click;：

最后，在处理程序中，我们可以调用Close()窗口上的方法：

C＃

您必须using Avalonia.Interactivity;在文件顶部有一个声明才能引用RoutedEventArgs.

构造函数和处理程序的完整代码MainWindow如下所示：

C＃

现在，如果您运行应用程序并按“关闭”按钮，窗口将关闭。

此应用程序的代码位于NP.Demos.SimpleAvaloniaProject.sln下，但如果您是 Avalonia 新手，则必须复习上面的练习。

一些 Avalonia 内置控件

Avalonia 控件简介

在本节中，我将描述一些对构建应用程序最有帮助的内置 Avalonia 控件。请注意，为简洁起见，我不会描述每个内置控件，只描述最常用的控件。

如果您想了解其余的内置控件，您可以：

• 从Github 上的 Avalonia Source Code下载或克隆 AvaliniaUI 源代码。
• 使用 Visual Studio从顶级文件夹打开Avalonia.sln解决方案。
• 在解决方案资源管理器中导航到Samples Visual Studio 文件夹ControlCatalog.Desktop下的项目。
• 制作ControlCatalog.Desktop您的启动项目，然后构建并运行它。

包含大部分（如果不是全部）内置控件的 Windows 应用程序将弹出，您将能够看到各种控件的功能。通过在Samples/Pages/ Visual Studio 文件夹下的 XAML 代码中跟踪它们，您还可以了解如何创建和更改这些控件的属性。

新控件的创建和自定义将在以后的文章中讨论，以及最有用的控件ContentPresenter，ItemsPresenter它们可以相应地为非可视对象或非可视对象集合提供可视表示。

本节的目的是概述内置 Avalonia 控件，而不是对其功能的详细描述。

请注意，ControlAvalonia 中的类比 WPF 中的同名类更原始——AvaloniaControl没有模板。具有模板的控件继承自TemplatedControl实现ITemplatedControl接口的类。因为那个 AvaloniaImage和类是从 派生的，Shape而不是从类派生的（因为它们在 WPF 中）。PanelControlVisual

未来文章中将提供哪些模板的说明。

内置控件项目

在本小节中，我们将描述 WPF 意义上的一些最有用的控件，即模板化控件，而不是更原始的图像、形状和面板。

这些小节的代码位于NP.Demos.BuiltInControls.sln解决方案下。