生成适用于 Windows 的第一个 .NET MAUI 应用

2025-01-30

在 Windows 上构建您的第一个跨平台应用程序，以亲身体验 .NET MAUI。

介绍

本教程介绍如何在 Visual Studio 2022（17.3 或更高版本）中创建和运行适用于 Windows 的第一个 .NET MAUI 应用。我们将从 .NET Community Toolkit 中添加一些 MVVM 工具包功能，以改进默认项目的设计。

设置环境

如果你尚未设置 .NET MAUI 开发环境，请按照在 Windows 上开始使用 .NET MAUI 的步骤进行操作。

创建 .NET MAUI 项目

启动 Visual Studio，在开始窗口中单击 创建新项目 创建新项目：
在创建新项目窗口中，在“所有项目类型”下拉列表中选择 MAUI，选择 .NET MAUI 应用模板，然后单击“下一步”按钮：
在配置新项目窗口中，为项目指定名称，为其选择位置，然后单击“下一步”按钮：
在“其他信息”窗口中，单击“创建”按钮：
等待项目创建和依赖项恢复：
在 Visual Studio 工具栏中，按 Windows 计算机按钮生成并运行应用。
在正在运行的应用中，多次按下“单击”按钮，并观察按钮单击次数的计数递增：

你刚刚在 Windows 上运行了第一个 .NET MAUI 应用。在下一部分中，你将了解如何将 MVVM 工具包中的数据绑定和消息传送功能 添加到应用。

故障排除

如果您的应用程序无法编译，请查看已知问题故障排除，其中可能有您的问题的解决方案。

添加 MVVM 工具包

现在，你的第一个 .NET MAUI 应用在 Windows 上运行，接下来让我们向项目添加一些 MVVM 工具包功能，以改进应用的设计。

右键单击 解决方案资源管理器 中的项目，然后从上下文菜单中选择 管理 NuGet 包...。
在 NuGet 包管理器 窗口中，选择 “浏览”选项卡并搜索 CommunityToolkit.MVVM：
单击安装，将 CommunityToolkit.MVVM 包（版本 8.0.0 或更高版本）的最新稳定版本添加到项目。
在新包完成安装后，关闭 NuGet 包管理器 窗口。
再次右键单击该项目并从上下文菜单中选择“添加 | 类”。
在显示的“添加新项”窗口中，将类命名为 MainViewModel，然后单击“添加”：
MainViewModel 类将是 MainPage的数据绑定目标。将其更新为从 CommunityToolkit.Mvvm.ComponentModel 命名空间中的 ObservableObject 继承。这还需要将类更新为 public 和 partial。

MainViewModel 类将包含以下代码。 CountChangedMessage 记录定义了一条在每次单击“单击我”按钮时发送的消息，用于通知界面更新。添加到 message 和 IncrementCounter 成员的 ObservableProperty 和 RelayCommand 属性是 MVVM 工具包提供的源生成器，用于为 INotifyPropertyChanged 和 IRelayCommand 实现创建 MVVM 样板代码。 IncrementCounter 方法的实现包含了 MainPage.xaml.cs 中 OnCounterClicked 的逻辑，并做出更改以发送带有新计数信息的消息。稍后我们将删除代码隐藏机制所涉及的这些代码。

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

namespace MauiOnWindows
{
    public sealed record CountChangedMessage(string Text);

    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        private string message = "Click me";

        private int count;

        [RelayCommand]
        private void IncrementCounter()
        {
            count++;

            // Pluralize the message if the count is greater than 1
            message = count == 1 ? $"Clicked {count} time" : $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}

注意

需要更新上一个代码中的命名空间，以匹配项目中的命名空间。

打开 MainPage.xaml.cs 文件进行编辑，并删除 OnCounterClicked 方法和 count 字段。
调用 InitializeComponent()后，将以下代码添加到 MainPage 构造函数。此代码将接收 MainViewModel 中 IncrementCounter() 发送的消息，并将使用新消息更新 CounterBtn.Text 属性，并使用 SemanticScreenReader报新文本：
```
WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
{
    CounterBtn.Text = m.Text;
    SemanticScreenReader.Announce(m.Text);
});
```
还需要向类添加 using 语句：
```
using CommunityToolkit.Mvvm.Messaging;
```
在 MainPage.xaml中，将命名空间声明添加到 ContentPage，以便找到 MainViewModel 类：
```
xmlns:local="clr-namespace:MauiOnWindows"
```

将 MainViewModel 添加为 ContentPage 的 BindingContext：

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>

将 MainPage 上的 Button 更新为使用 Command，而不是处理 Clicked 事件。此命令将绑定到由 MVVM 工具包的源生成器生成的 IncrementCounterCommand 公共属性。

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Command="{Binding Path=IncrementCounterCommand}"
    HorizontalOptions="Center" />

再次运行项目，并观察在单击按钮时计数器仍然递增：
当项目正在运行时，请尝试更新第一个标签控件中的“Hello, World!”消息，使其在 MainPage.xaml中显示“Hello, Windows!”。保存文件，注意在应用仍在运行时，XAML 热重载会更新 UI：

后续步骤

了解如何在适用于 Windows 的 .NET MAUI 教程中利用 Graph SDK，生成显示用户 Microsoft Graph 数据的应用。

用于学习 .NET MAUI 的资源

在 Windows 上将 Microsoft 图形 API 与 .NET MAUI 配合使用

通过

生成适用于 Windows 的第一个 .NET MAUI 应用

介绍

设置环境

创建 .NET MAUI 项目

故障 排除

添加 MVVM 工具包

后续步骤

相关内容

其他资源

故障排除