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

创作时间:

作者:

@小白创作中心

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

引用

来源

https://learn.microsoft.com/zh-cn/windows/apps/windows-dotnet-maui/walkthrough-first-app

本教程将指导你完成在Windows平台上创建第一个.NET MAUI应用程序的全过程。通过本文，你将学习如何使用MVVM（Model-View-ViewModel）架构模式，以及如何利用CommunityToolkit.MVVM库来简化开发流程。

准备工作

右键单击解决方案资源管理器中的项目，然后从上下文菜单中选择管理 NuGet 包...。
在NuGet 包管理器窗口中，选择“浏览”选项卡并搜索CommunityToolkit.MVVM：
单击安装，将CommunityToolkit.MVVM包（版本 8.0.0 或更高版本）的最新稳定版本添加到项目。
在新包完成安装后，关闭NuGet 包管理器窗口。

创建ViewModel

再次右键单击该项目并从上下文菜单中选择“添加 | 类”。
在显示的“添加新项”窗口中，将类命名为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

打开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;

更新XAML文件

在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" />