.NET MAUI 教程 | 使用 C# 生成第一个多平台应用

简介

目标

设置开发环境并生成第一个 .NET 多平台应用 UI (.NET MAUI)应用。

先决条件

检查 Visual Studio 2022 的系统要求。

完成时间

10分钟 + 下载/安装时间

方案

在 Windows 和 Android 上运行的移动和桌面应用，它显示了一条消息: Hello, World!。

本地预配向导和预配代理。

下载并安装 Visual Studio 2022。

下载 Visual Studio 2022

在安装过程中，应选择“.NET Multi-platform App UI 开发”工作负载。使用上面的链接时应预先正确选择所有先决条件，如下图所示:

已有 Visual Studio 2022?

如果已有 Visual Studio 2022，则可以更新安装以添加 .NET MAUI 支持:

选择 Windows 徽标键，键入 Visual Studio 安装程序，然后按“输入”。
如果出现提示，则请允许安装程序进行自我更新。
如果 Visual Studio 2022 的更新可用，则将显示更新按钮。选择该按钮以在修改安装前进行更新。
找到 Visual Studio 2022 安装并选择修改。
选择“NET Multi-Platform App UI 开发”。
选择修改按钮。

创建应用

新建 .NET MAUI 应用:

打开 Visual Studio 2022。
选择创建新项目按钮。
在“创建新项目”窗口中，从“所有项目类型”下拉列表中选择“MAUI”，选择“.NET MAUI 应用”模板，然后单击“下一步”按钮。
在“配置新项目”窗口中，输入“MyFirstMauiApp”作为项目名称，然后单击“下一步”按钮。
在“其他信息”窗口中，如果尚未选择，则在“框架”下拉列表中选择“.NET 7.0 (标准期限支持)”，然后单击“继续”按钮。

Visual Studio 创建新项目。如果收到 Windows 安全中心警报，警告防火墙阻止了某些功能，请选择“允许访问”按钮。

等待 NuGet 包还原过程

NuGet 是一个包管理器，它将引入新应用的依赖项。

包还原过程将自动启动。请等候，直到 已还原 或就绪消息显示在屏幕左下角的状态栏中。

运行应用

本教程将首先重点介绍如何将 .NET MAUI 应用程序部署到本地 Windows 计算机。然后可以选择设置 Android 设备或仿真器。

在 Visual Studio 工具栏中，应默认将“Windows 计算机”视为调试目标。按“Windows 计算机”按钮生成并运行应用:

如果尚未启用开发人员模式，Visual Studio 将提示你启用它。在“为 Windows 启用开发人员模式”对话框中，单击“面向开发人员的设置”链接以打开“设置”应用:

在“开发人员模式”下打开开关。

显示了使用开发人员功能对话框。选择是确认要启用开发人员模式。

关闭“设置”应用，然后关闭“为 Windows 启用开发人员模式”对话框。应用应开始运行。

在正在运行的应用中，选择“单击这里”按钮几次，并观察按钮单击次数的计数是递增的:

恭喜，你已生成并运行第一个 .NET MAUI 应用! 使应用保持运行并继续学习本教程。

编辑代码

当使用 .NET MAUI 开发应用程序时，在调试应用程序时可使用 XAML 热重载。这意味着可以在应用程序运行时更改 XAML 用户界面(UI)，并且 UI 将自动更新。

返回到 Visual Studio，使应用保持运行状态。在“解决方案资源管理器”中，双击 MyFirstMauiApp 项目下的 MainPage.xaml 文件。如果看不到“解决方案资源管理器”窗格，请从主菜单中选择“视图”>“解决方案资源管理器”(或按 Ctrl+ALT+L)。

目前，第一个 Label 的 Text 设置为 Hello, World!如以下代码所示:

MainPage.xaml

<Label
    Text="Hello, World!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

将文本更新为 Hello, .NET MAUI!:

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

在你进行更改时，应用 UI 会自动更新。

使用 .NET MAUI 开发应用程序时，还可以使用 .NET 热重载重新加载 C# 代码。我们来修改应用程序中的逻辑，以在单击按钮时将计数增加 10 而不是 1。

打开 MainPage.xaml.cs (此文件嵌套在 MainPage.xaml 下，或者可以右键单击并从菜单中选择“查看代码”)。

该文件上的 OnCounterClicked 方法当前具有以下代码:

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

更新 count++;，让它按 10 递增，方法是将其更改为 count += 10;。

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

若要应用代码更改，请在 Visual Studio 中选择热重载按钮，或选择 ALT+F10。