使用 XAML 的好处

5 分钟

XAML 是除 C# 代码以外可用于生成 UI 的一种标记语言。使用 XAML，可以分离 UI 和行为代码，以便更轻松地进行管理。

在本单元中，你将比较使用 XAML 与使用 C# 代码定义 UI 布局。你还将了解使用 XAML 作为标记语言来定义 UI 的一些好处。

什么是标记语言？

标记语言是一种计算机语言，可用于在文档中引入各种元素。你会使用预定义标签来描述元素。标签在使用文档的域的上下文中具有特定含义。

例如，可以使用超文本标记语言 (HTML) 来创建可在 Web 浏览器中显示的网页。无需理解我们在以下示例中使用的所有标签；需要注意的是，此代码描述了一个以文本“Hello World！”为内容的文档。

<!DOCTYPE html>
<html>
    <body>
        <p>Hello <b>World</b>!</p>
    </body>
</html>

你可能已经使用过标记语言。你可能已使用 HTML 创建过网页，或者在 Visual Studio project.csproj 文件中修改过可扩展标记语言 (XML) 定义。 Microsoft 生成工具可分析和处理此文件。

包含标记语言的文件也经常通过其他软件工具来处理和解释。标记的这种解释性质正是 XAML 的工作原理。但是，对其进行解释的软件工具可帮助生成应用 UI。

什么是 XAML？

XAML 是由 Microsoft 创建的一种声明性标记语言。 XAML 旨在简化在应用程序中创建 UI 的过程。

要创建的 XAML 文档包含以声明方式描述应用程序 UI 元素的元素。请记住，采用 XAML 的这些元素直接表示对象的实例化。使用 XAML 定义元素后，就可以在代码隐藏文件中对其进行访问，并可使用 C# 代码定义行为。

.NET MAUI XAML 与 Microsoft XAML 的差异

XAML 基于 Microsoft 2009 XAML 规范。但该规范仅定义语言的语法。与 Windows Presentation Foundation (WPF)、通用 Windows 平台 (UWP) 和 WinUI 3 的情况一样（均使用 XAML），在 XAML 中声明的元素会发生改变。

XAML 于 2006 年随 WPF 首次推出。如果已经使用了一段时间的 Microsoft XAML，那么 XAML 语法看起来应该很熟悉。

.NET MAUI 风格的 XAML 与其他 UI 工具使用的 XAML 之间存在一些重要差异。结构和概念是相似的，但类和属性的一些名称是不同的。

使用 .NET MAUI XAML 创建 UI

查看 XAML 的最佳方法是查看现有 C# 编码 ContentPage 页面类型的示例。然后，可将其与具有相同 UI 的、使用 XAML 定义的另一个页面进行比较。

假设你在应用中将 ContentPage 编写为以下代码：

namespace MauiCode;

public partial class MainPage : ContentPage
{
    Button loginButton;
    VerticalStackLayout layout;

    public MainPage()
    {
        this.BackgroundColor = Color.FromArgb("512bdf");

        layout = new VerticalStackLayout
        {
            Margin = new Thickness(15, 15, 15, 15),
            Padding = new Thickness(30, 60, 30, 30),
            Children =
            {
                new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
                new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
                new Entry (),
                new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
                new Entry { IsPassword = true }
            }
        };

        loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
        layout.Children.Add(loginButton);

        Content = layout;

        loginButton.Clicked += (sender, e) =>
        {
            Debug.WriteLine("Clicked !");
        };
    }
}

此页面包含一个布局容器、两个标签、两个条目和一个按钮。代码还处理按钮的 Clicked 事件。此外，页面中的元素也只设置了一些设计属性。在运行时，Android 设备上的页面如下所示：

C# 代码生成的登录页面的屏幕截图。它显示一个标题、两个用于用户名和密码的文本框以及一个用于登录的按钮。

虽然页面设计比较简单，但在同一文件中混合了行为和设计。

使用 XAML 定义的同一页面布局如下所示：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiXaml.Page1"
             BackgroundColor="#512bdf">

    <VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
        <Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
        <Label Text="Username" TextColor="White" />
        <Entry />
        <Label Text="Password" TextColor="White" />
        <Entry IsPassword="True" />
        <Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
    </VerticalStackLayout>
</ContentPage>

代码隐藏文件中用于初始化页面并为 LoginButton 控件的 Clicked 事件实现事件处理程序的 C# 代码如下所示：

namespace MauiXaml;

public partial class Page1 : ContentPage, IPage
{
    public Page1()
    {
        InitializeComponent();
    }

    void LoginButton_Clicked(object sender, EventArgs e)
    {
        Debug.WriteLine("Clicked !");
    }
}

注意

页面构造函数中的 InitializeComponent 方法会读取页面的 XAML 描述、加载该页面的各种控件并设置它们的属性。仅当使用 XAML 标记定义页面时，才会调用此方法。上面演示如何使用 C# 代码创建 UI 的示例不会调用 InitializeComponent。

此结构可以实现设计和行为的分离。 UI 的整个声明包含在单个专用源文件中，该文件与 UI 行为是分开的。此外，通过 XAML 标记，开发人员可以更清晰地了解应用程序的外观。