跨平台WPF框架Avalonia教程二

Avalonia XAML

Avalonia UI 使用XAML来定义用户界面。XAML是一种基于XML的标记语言，被许多用户界面框架使用。

信息

这些页面将为您介绍XAML在 Avalonia UI 中的具体用法。关于XAML在Microsoft技术中的其他用法的背景信息，您可以参考以下资料：

WPF的Microsoft XAML文档，请参阅这里；
UWP的Microsoft XAML文档，请参阅这里。

AXAML文件扩展名

其他地方使用XAML文件的扩展名是.xaml，但由于与Visual Studio的技术问题整合，Avalonia UI 使用了自己的.axaml扩展名------'Avalonia XAML'。

信息

从 Avalonia UI 版本0.9.11开始，所有在Visual Studio中创建的XAML文件都具有.axaml扩展名；从版本0.10开始，所有 Avalonia UI 模板都使用.axaml扩展名创建文件。

文件格式

一个典型的Avalonia XAML文件如下所示：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication1.MainWindow">
</Window>

与所有XML文件一样，有一个根元素。根元素标签<Window></Window>定义了根的类型。这将对应于Avalonia UI控件的一种类型，在上面的例子中是一个窗口。

上面的示例使用了三个有趣的属性：

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#编写。

信息

有关code-behind概念的信息，请参阅这里.

控件元素

您可以通过添加表示 Avalonia UI 控件之一的XML元素来构建应用程序的用户界面。元素标签使用与控件类名相同的名称。

信息

一个UI可以由多种不同类型的控件组成。要了解有关UI组合概念的更多信息，请参阅这里。

例如，下面的XAML将按钮添加到窗口的内容中：

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

信息

要获取 Avalonia UI 内置控件的完整列表，请参阅此处的参考资料。

控件属性

表示控件的XML元素具有与可设置的控件属性对应的属性。您可以通过向元素添加属性来设置控件属性。

例如，要为按钮控件指定蓝色背景，您可以添加Background属性并将值设置为"Blue"。如下所示：

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

控件内容

您可能已经注意到上面示例中的按钮的内容（"Hello World"字符串）放置在其打开和关闭标签之间。或者，您可以使用Content属性来设置内容。

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

这种行为是 Avalonia UI 控件内容特有的。

数据绑定

您经常会使用 Avalonia UI 绑定系统将控件属性链接到底层对象。链接是通过{Binding}标记扩展来声明的。例如：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button Content="{Binding Greeting}"/>
</Window>

信息

有关数据绑定背后的概念的更多信息，请参阅这里。

Code-behind文件

许多XAML文件还有一个关联的code-behind文件，通常用C#编写，并具有.xaml.cs文件扩展名来处理事件和其他逻辑。

信息

有关使用code-behind文件进行编程的指南，请参阅这里.

XML命名空间

与任何XML格式一样，在Avalonia XAML文件中，您可以声明命名空间。这允许XML处理器找到文件中使用的元素的定义。

信息

有关背景信息，请参阅Microsoft的XML命名空间文档。

您可以使用xmlns属性添加命名空间。命名空间声明的格式如下：

xmlns:alias="definition"

通常在根元素中定义您要使用的所有命名空间是标准做法。

只能在文件中定义一个命名空间而不使用别名部分的属性名。别名必须在文件内始终保持唯一。

命名空间声明的定义部分可以是URL或代码定义。这两者都用于定位文件中元素的定义。

信息

有关命名空间声明的详细指导，请参阅这里.

命名空间属性的定义部分有两种有效的语法选项，可以引用代码：

CLR命名空间前缀

有一个clr-namespace:前缀，您可以用于引用当前程序集中的代码和引用程序集中的代码。

例如，当代码存在于与XAML相同的程序集中时，您可以使用此语法：

<Window ...
    xmlns:myAlias1="clr-namespace:MyNamespace.AppNameSpace.UI" 
... >

如果代码在另一个被引用的程序集中（例如一个库中），您必须扩展说明以包含被引用程序集的名称：

<Window ...
    xmlns:myAlias2="clr-namespace:MyNameSpace.OtherAssembly;assembly=OtherAssembly"
 ... >

Using前缀

有一个替代前缀using:，您可以用来引用当前程序集中的代码。例如：

xmlns:myAlias3="using:MyNamespace.AppNameSpace.UI"

Code-behind

除了XAML文件外，大多数Avalonia控件还具有常常用C#编写的 code-behind 文件。代码后台文件通常具有.axaml.cs文件扩展名，并且通常在IDE中显示在XAML文件的下一级。

例如，在Visual Studio的解决方案资源管理器中，您可以看到一个MainWindow.axaml文件以及它的code-behind文件MainWindow.axaml.cs：

code-behind文件包含一个与XAML文件同名的类。例如：

MainWindow.axaml.cs

using Avalonia.Controls;

namespace AvaloniaApplication1.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

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

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication1.Views.MainWindow">
  ...
</Window>

提示

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

当首次添加code-behind文件时，它只有一个构造函数，该构造函数调用InitializeComponent()方法。调用此方法在运行时加载XAML是必需的。

定位控件

在使用code-behind时，您通常需要访问在XAML中定义的控件。

为此，您需要通过在XAML中使用Name（或x:Name）属性为所需的控件指定名称。

下面是一个具有命名按钮的XAML文件示例：

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication5.MainWindow">
  <Button Name="greetingButton">Hello World</Button>
</Window>

现在，您可以通过code-behind中自动生成的greetingButton字段访问该按钮：

MainWindow.axaml.cs

using Avalonia.Controls;

namespace AvaloniaApplication1.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            greetingButton.Content = "Goodbye Cruel World!";
        }
    }
}

设置属性

通过在code-behind中提供控件引用，您可以设置属性。例如，您可以像这样更改背景属性：

greetingButton.Background = Brushes.Blue;

处理事件

任何有用的应用程序都需要您执行一些操作！当使用代码后台模式时，您需要在code-behind文件中编写事件处理程序。

事件处理程序编写为code-behind文件中的方法，然后使用事件属性在XAML中引用它们。例如，要为按钮点击事件添加处理程序：

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AvaloniaApplication4.MainWindow">
  <Button Click="GreetingButtonClickHandler">Hello World</Button>
</Window>

MainWindow.axaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public void GreetingButtonClickHandler(object sender, RoutedEventArgs e)
    {
        // code here.
    }
}

请注意，许多Avalonia事件处理程序传递了一个名为RoutedEventArgs的特殊参数。它包含有关事件的生成和传播方式的信息。

跨平台WPF框架Avalonia教程 二

Avalonia XAML

AXAML文件扩展名​

文件格式​

控件元素​

控件属性​

控件内容​

数据绑定​

Code-behind文件​

XML命名空间​

CLR命名空间前缀 ​

Using前缀 ​

Code-behind

定位控件​

设置属性​

处理事件​

跨平台WPF框架Avalonia教程二

AXAML文件扩展名

文件格式

控件元素

控件属性

控件内容

数据绑定

Code-behind文件

XML命名空间

CLR命名空间前缀

Using前缀

定位控件

设置属性

处理事件