Avalonia：一个开源的跨平台UI选项

摘要：译自Avalonia: An Open Source Option for Cross-Platform UI Work，作者 David Eastman。

Avalonia 是一个用于跨平台 UI 开发的开源框架。它通常用于构建可在各种设备上运行的 .NET 应用程序。

译自Avalonia: An Open Source Option for Cross-Platform UI Work，作者 David Eastman。

.NET 的问题一直是微软对非 Windows 系统的支持有些迟缓。要找到一个使用 C# 但可以在 MacBook 上运行的 UI 库比预想的要难。一个解决方案是Avalonia，它可以帮助你“使用 .NET 为每个设备构建应用程序”——它确实填补了开源跨平台框架的空白。此外，研究它还可以磨练你的框架设计技能。

开始

让我们开始使用 Avalonia来编写一些简单的代码，同时了解一下它的架构。我假设你已经安装了 Visual Studio Code 和 .NET。我在之前的文章中介绍过如何使用 VS Code；它的灵活性使其非常适合用于不同的项目（Avalonia 本身实际上推荐使用 JetBrains 的 .NET IDE，Rider）。

我们将在命令行中使用 dotnet，这将加快创建简单项目的效率。首先，我们安装 Avalonia 模板：

在一个新的项目目录中，我们使用 MVVM 模板，该模板也适用于 MacOS：

然后像往常一样，我们在文件夹中打开 Visual Studio Code：

搜索 Avalonia 扩展。你肯定想要第一个：

如果我们选择 Program.cs 文件并点击箭头“运行与此文件关联的程序”，Avalonia 将立即构建一个窗口：

很好。现在让我们看看基础知识，然后做一些更有趣的事情。

如果你熟悉Windows Presentation Foundation(或 WPF，我乐意假设你对此一无所知)，那么你一定见过可扩展应用程序标记语言(XAML)，而 Avalonia 使用它自己的品牌“axaml”文件扩展名。你还会注意到它附加了 C# 扩展名来标记“代码隐藏”文件。所有这些都有效，即使有点混乱。是的，它是 XML。

值得庆幸的是，有一些有趣的文件。窗口在“MainWindow.axaml”中定义，你可以看到定义的标题：

唯一其他有趣的是 TextBlock 定义：

除了像我们看到的那样将自身定位在屏幕中央之外，它还向我们介绍了数据绑定，这可能比它应该的要棘手一些。显然，我们将发现术语 Greeting 与一个变量绑定，但在哪里？

如果我们查看一个样板文件“App.axaml.cs”，我们会看到一个名为DataContext的东西，它在启动时被设置：

...desktop.MainWindow=newMainWindow{DataContext=newMainWindowViewModel,};...

这表明当框架开始绑定时，它将使用这个新的模型类。如果我们查看“MainWindowViewModel.cs”，我们会发现大致是我们所期望的：

namespaceavaloniaui.ViewModels; publicpartialclassMainWindowViewModel:ViewModelBase{ publicstringGreeting{get;}="Welcome to Avalonia!"; }

因此，TextBlock 已绑定到类变量。IDE 主要在构建后帮助协商这一点。

所以让我们来看一些困难的部分，并了解一些 UI。我将构建一个列表框，允许你选择一个简单的类别项并用示例填充另一个列表。因此，我们将看到一些 UI 设计并处理一些事件。

回到 MainWindow.axaml 文件，我们将单独的 TextBlock 替换为此：

Choose a category

Examples

就是这样。仅查看标签，你可以看到我们使用StackPanel作为整体容器，内部有两个 StackPanel——因为我们将外部 StackPanel 定义为水平方向，所以内部 StackPanel 将并排放置。我们在两个堆栈中定义一个 ListBox。一个行为差异是第一个的 SelectionMode 强制始终选择某些内容。

从数据角度来看，我们把第一个列表框命名为“category”，第二个命名为“resultlist”，这在后面会用到。你可以看到每个堆栈中的TextBlock都有一个绑定。所以我们会把我们自己的字符串放在里面。当然，现在我们还没有数据。

事件方面，我们在第一个堆栈中检测“SelectionChanged”。我们需要对此做出响应。事实上，如果我们尝试运行它，Avalonia 会提示我们“无法为 SelectionChanged 属性找到合适的 setter 或 adder”。

所以让我们尝试修复事件。在MainWindow类中，我们添加以下方法：

usingSystem; ... public void CategoryChanged(objectsource,SelectionChangedEventArgsargs){ if(sourceisListBoxlistBox){ Console.WriteLine($"Category changed to {listBox.SelectedItem}"); } }

现在我们可以再次运行框架，甚至可以看到 Stack 列的文本标题。

让我们尝试添加一些数据。我们实际上可以直接在MainWindow类中操作。我们将添加一些数据，并用它来填充第一个ListBox，并将其作为ItemSource用于category ListBox：

usingSystem.Collections.Generic; ... private Dictionary

>catgeoryDict=newDictionary

>{ {"Trees",newList

{"Larch","Oak","Pine","Willow"}}, {"Birds",newList

{"Eagle","Hawk","Owl","Raven"}}, {"Mammals",newList

{"Bear","Deer","Fox","Wolf"}}, {"Snakes",newList

{"Cobra","Python","Rattlesnake","Viper"}}, {"Insects",newList

{"Ant","Bee","Fly","Wasp"}} }; publicMainWindow{ InitializeComponent; category.ItemsSource=newList

(catgeoryDict.Keys); }

这给了我们一个不错的 category ListBox。所以我们完成了一半。

现在，我们只需要在用户点击选择时响应类别更改，通过从我们的数据中填充正确的列表来显示示例。我们只需在事件响应方法中添加一行：

publicvoidCategoryChanged(objectsource,SelectionChangedEventArgsargs){ if(sourceisListBoxlistBox){ Console.WriteLine($"Category changed to {listBox.SelectedItem}"); resultlist.ItemsSource=catgeoryDict[(string)listBox.SelectedItem].ToList; } }

由于 SelectedItem 在我们的例子中是一个字符串，我们可以直接将其用作 category 字典的索引来查找示例。现在我们完成了。我们可以选择任何类别并将结果放入下一个列表框：