Avalonia系列文章之再试牛刀

通过前一篇文章，已经了解了AvaloniaUI的环境安装以及项目创建，磨刀不误砍柴工，今天继续进行Avalonia基础知识学习，如有不足之处，还请指正。

项目组成

在前一篇文章中，我们创建了第一个Avalonia项目“FirstAvalonia”，通过分析发现，默认创建的解决方案，有两部分组成：

• FirstAvalonia.Desktop，此项目表示我们创建的项目是基于Windows桌面程序的，Program类中的Main方法为程序启动入口。
• FirstAvalonia，此项目为多平台之间共享的主要项目，默认基于MVVM模式进行开发，主要程序结构如下：
  1. Views，存放视图页面，为了与WPF创建的".xaml"进行区分，Avalonia UI 使用了自己的.axaml扩展名——'Avalonia XAML'。
  2. ViewModels，存放视图模型，默认创建的ViewModel根据选择的“Design Pattern”不同，继承不同的基类，实现具备通知功能的属性。
  3. Assets，主要存放一些静态资源，如图片等。
  4. App.axaml，为应用程序的入口，可以定义主题样式等内容。

默认创建的项目示例，如下图所示：

视图文件

默认创建的MainWindow.axaml文件，是一个典型的Avalonia视图文件，主要包含Window标签以及一些属性和一个内容，它表示一个窗口，以及一些窗口设置，和它的内容（MainView是一个用户控件）。

根节点定义了视图页面的类型（如：Window，Page，UserControl等），它有三个重要属性：

• xmlns="https://github.com/avaloniaui" ——这是 Avalonia UI 本身的XAML命名空间声明。这是必需的，否则文件将无法被识别为Avalonia XAML文档；
• xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ——这是XAML语言命名空间的声明；
• x:Class="AvaloniaApplication1.MainWindow" ——这是上面声明的扩展（用于'x'）告诉XAML编译器在文件中找到相关联的类的位置。这个类在代码后台文件中定义，通常用C#编写。

具体如下所示：

<Window xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:vm="using:FirstAvalonia.ViewModels"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:views="clr-namespace:FirstAvalonia.Views"mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"x:Class="FirstAvalonia.Views.MainWindow"Icon="/Assets/avalonia-logo.ico"Title="FirstAvalonia"><views:MainView />
</Window>

与XAML一样，在Avalonia XAML文件中，可以根据需要声明命名空间，并以此来找到XAML文件中使用的元素的定义。可以使用xmlns属性添加命名空间。命名空间声明的格式如下：

xmlns:alias="definition"

通常在根元素中定义您要使用的所有命名空间是标准做法。其中alias是命名控件的别名，别名在文件内始终保持唯一。其中命名空间的引用，通常采用命名空间前缀，格式为“clr-namespace:命名空间”，当代码存在于与XAML相同的程序集中时，您可以使用此语法，如：xmlns:views="clr-namespace:FirstAvalonia.Views"；如果代码在另一个被引用的程序集中（例如一个库中），您必须扩展说明以包含被引用程序集的名称：xmlns:别名="clr-namespace:命名空间;assembly=程序集"。

code-behind文件

与WPF一样，Avalonia视图文件有一个关联的code-behind文件，并以“.axaml.cs”为文件后缀，主要用来处理事件以及其他逻辑等。通常情况下，在Visual Studio 开发工具中， code-behind文件，显示在视图文件的下一级。

code-behind类包含一个与视图文件同名的类，并用“partial”关键字修饰，表示一个部分类，在编译时，视图页面和code-behind类，会编译成一个类。

using Avalonia.Controls;namespace FirstAvalonia.Views;public partial class MainWindow : Window
{public MainWindow(){InitializeComponent();}
}

code-behind类名与XAML文件的名称匹配，并且在Window元素的x:Class属性中也有引用。

<Window xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:vm="using:FirstAvalonia.ViewModels"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:views="clr-namespace:FirstAvalonia.Views"mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"x:Class="FirstAvalonia.Views.MainWindow"Icon="/Assets/avalonia-logo.ico"Title="FirstAvalonia"><views:MainView />
</Window>

注意：如果在代码中对类名或其命名空间进行了任何更改，请确保x:Class属性始终匹配，否则会出现错误。

用户控件

默认创建的项目中，在MainWindow页面的Window根节点下，有一个内容节点MainView，此节点表示一个自定义的用户控件，用于显示内容，这样可以达到控件的有效复用。

1. 首先引入MainView所在的命名空间，并将别名命名为views，因为MainWindow和MainView在同一个程序集内，所以直接通过xmlns:views="clr-namespace:FirstAvalonia.Views"引入即可，不需要添加程序集说明。
2. 其次引入命名空间后，即可访问MainView视图，格式为：<views:MainView />。

MainView和MainWindow不仅根节点不同，在code-behind类中，所继承的父类也不同，表示它们属于不同的控件形式。以MainView视图为例，MainView的根节点为UserControl，表示一个自定义的用户控件，由于Avalonia默认采用MVVM开发模式，与普通控件有以下几点需要注意：

1. 在此页面中，首先引入MainViewModel所在的命名空间，语句为：xmlns:vm="clr-namespace:FirstAvalonia.ViewModels"。
2. 声明x:DataType类型为MainViewModel类型，语句为：x:DataType="vm:MainViewModel"。
3. 将UI页面的DataContext设置为MainViewModel。

另外，我们还可以给UserControl添加UI元素，如TextBlock，Button等，如下所示：

<UserControl xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:vm="clr-namespace:FirstAvalonia.ViewModels"mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"x:Class="FirstAvalonia.Views.MainView"x:DataType="vm:MainViewModel"><Design.DataContext><vm:MainViewModel /></Design.DataContext><TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</UserControl>

在上述示例中，TextBlock控件的Text属性，通过Binding的方式动态的显示ViewModel中的Greeting对应的值。

namespace FirstAvalonia.ViewModels;public class MainViewModel : ViewModelBase
{public string Greeting => "Welcome to Avalonia!";
}

默认创建的MainView.axaml中，只有一个TextBlock控件，它用于显示只读文本，我们还可以添加其他控件，控件的元素标签和类名相同，一个UI可以由多种不同类型的控件组成，不要如果要组织不同的控件显示在UI页面中，则需要布局控件进行排版才行。否则所有的控件都会堆积在一起。如果要添加一个按钮在在页面中，代码如下所示：

<UserControl xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Button>Hello World!</Button>
</UserControl>

还可以通过给元素添加属性来设置空间的呈现方式，如背景色Background等属性，如果要给一个按钮设置蓝色的背景色，则可以如下设置：

<UserControl xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Button Background="Blue">Hello World!</Button>
</UserControl>

在上述示例中Button按钮的包含起始标签，和结束标签，而在两个标签之间则是按钮的内容，也可以通过Content属性来设置内容。

设计预览

在Visual Studio开发工具中，通过预览功能，我们可以实时的查看页面布局效果，方便及时调整。，如下所示：

 

以上就是《Avalonia系列文章之再试牛刀》的全部内容。