[WPF] 使用 MVVM Toolkit 构建 MVVM 程序

1. 什么是 MVVM Toolkit

模型-视图-视图模型 (MVVM) 是用于解耦 UI 代码和非 UI 代码的 UI 体系结构设计模式。借助 MVVM，可以在 XAML 中以声明方式定义 UI，并使用数据绑定标记将 UI 链接到包含数据和命令的其他层。

微软虽然提出了 MVVM，但又没有提供一个官方的 MVVM 库（多年前有过 Prism，但已经离家出走了）。每次有人提起 MVVM 库，有些人会推荐 Prism（例如我），有些人会推荐 MVVMLight。可是现在 Prism 已经决定不再支持 UWP ，而 MVVMLight 又不再更新，在这左右为难的时候 Windows Community Toolkit 挺身而出发布了 MVVM Toolkit。 MVVM Toolkit 延续了 MVVMLight 的风格，是一个轻量级的组件，而且它基于 .NET Standard 2.0，可用于UWP, WinForms, WPF, Xamarin, Uno 等多个平台。相比它的前身 MVVMLight，它有以下特点：

更高：版本号更高，一出手就是 7.0。
更快：速度更快，MVVM Toolkit 从一开始就以高性能为实现目标。
更强：后台更强，MVVM Toolkit 的全称是 'Microsoft.Toolkit.Mvvm'，根正苗红。

目前，MVVM Toolkit 已经更新到 '7.0.2'，它的详细资料可以参考下面链接：

Nuget：https://www.nuget.org/packages/Microsoft.Toolkit.Mvvm 文档：https://docs.microsoft.com/en-us/windows/communitytoolkit/mvvm/introduction 源码：https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Mvvm

虽然是 Windows Community Toolkit 项目的一部分，但它有独立的 Sample 和文档，可以在这里找到：

https://github.com/CommunityToolkit/MVVM-Samples

这篇文章将简单介绍 MVVM Toolkit 的几个基本组件。

2. 各个组件

2.1 ObservableObject

ObservableObject 实现了 INotifyPropertyChanged 和INotifyPropertyChanging，并触发 PropertyChanged 和 PropertyChanging 事件。

代码语言：javascript复制

public class User : ObservableObject
{
    private string name;

    public string Name
    {
        get => name;
        set => SetProperty(ref name, value);
    }
}

在这段示例代码中，如果 name 和 value 的值不同，首先触发 PropertyChanging 事件，然后触发 PropertyChanged。

2.2 RelayCommand

RelayCommand 和 RelayCommand<T> 实现了 ICommand 接口，INotifyPropertyChanged 和 ICommand 是 MVVM 模式的基础。下面的代码使用 ObservableObject 和 RelayCommand 展示一个基本的 ViewModel：

代码语言：javascript复制

public class MyViewModel : ObservableObject
{
    public MyViewModel()
    {
        IncrementCounterCommand = new RelayCommand(IncrementCounter);
    }

    private int counter;

    public int Counter
    {
        get => counter;
        private set => SetProperty(ref counter, value);
    }

    public ICommand IncrementCounterCommand { get; }

    private void IncrementCounter() => Counter  ;
}

代码语言：javascript复制

<Page
    x:Class="MyApp.Views.MyPage"
    xmlns:viewModels="using:MyApp.ViewModels">
    <Page.DataContext>
        <viewModels:MyViewModel x:Name="ViewModel"/>
    </Page.DataContext>

    <StackPanel Spacing="8">
        <TextBlock Text="{x:Bind ViewModel.Counter, Mode=OneWay}"/>
        <Button
            Content="Click me!"
            Command="{x:Bind ViewModel.IncrementCounterCommand}"/>
    </StackPanel>
</Page>

在这段示例里 IncrementCounterCommand 包装了 IncrementCounter 函数提供给 Button 绑定。IncrementCounter 函数更改 Counter 的值并通过 PropertyChanged 事件通知绑定的 TextBlock。

2.3 AsyncRelayCommand

AsyncRelayCommand 和 AsyncRelayCommand<T> 也实现了 ICommand，不过它们支持异步操作，提供的 ExecutionTask 和 IsRunning 两个属性对监视任务运行状态十分有用。

例如这个 ViewModel：

代码语言：javascript复制

public MyViewModel()
{
    DownloadTextCommand = new AsyncRelayCommand(DownloadTextAsync);
}

public IAsyncRelayCommand DownloadTextCommand { get; }

private async Task<string> DownloadTextAsync()
{
    await Task.Delay(3000); // Simulate a web request

    return "Hello world!";
}

使用相关的 UI 代码：

代码语言：javascript复制

<Page.Resources>
    <converters:TaskResultConverter x:Key="TaskResultConverter"/>
</Page.Resources>
<StackPanel Spacing="8">
    <TextBlock>
        <Run Text="Task status:"/>
        <Run Text="{x:Bind ViewModel.DownloadTextCommand.ExecutionTask.Status, Mode=OneWay}"/>
        <LineBreak/>
        <Run Text="Result:"/>
        <Run Text="{x:Bind ViewModel.DownloadTextCommand.ExecutionTask, Converter={StaticResource TaskResultConverter}, Mode=OneWay}"/>
    </TextBlock>
    <Button
        Content="Click me!"
        Command="{x:Bind ViewModel.DownloadTextCommand}"/>
    <muxc:ProgressRing
        HorizontalAlignment="Left"
        IsActive="{x:Bind ViewModel.DownloadTextCommand.IsRunning, Mode=OneWay}"/>
</StackPanel>

点击 Button 后 DownloadTextAsync 开始运行，在 UI 上 TextBlock 和 ProgressRing 绑定到 ExecutionTask 和 IsRunning 并显示任务运行状态，最后通过 TaskResultConverter 显示任务结果。

2.4 Messenger

对于主要目的是松耦合的 MVVM 框架，提供一个用于消息交换的系统十分有必要。MVVM Toolkit 中用于消息交换的核心是 WeakReferenceMessenger 类。

代码语言：javascript复制

// Create a message
public class LoggedInUserChangedMessage : ValueChangedMessage<User>
{
    public LoggedInUserChangedMessage(User user) : base(user)
    {        
    }
}

// Register a message in some module
WeakReferenceMessenger.Default.Register<LoggedInUserChangedMessage>(this, (r, m) =>
{
    // Handle the message here, with r being the recipient and m being the
    // input messenger. Using the recipient passed as input makes it so that
    // the lambda expression doesn't capture "this", improving performance.
});

// Send a message from some other module
WeakReferenceMessenger.Default.Send(new LoggedInUserChangedMessage(user));

正如这段代码所示，WeakReferenceMessenger 主要通过 Register 和 Send 进行信息交换，它的使用方式类似于 MVVMLight 的 messenger 类。MVVM Toolkit 另外还提供了一个 StrongReferenceMessenger 类，更多使用方法可以参考这篇文档。Messenger 功能强大且简单易用，但也由于误用会带来风险而引发了一些争议，有必要更详细地理解它的原理和用法以避免它带来的其它风险，这篇文章只是简单地介绍一下它的用法。

2.5 ObservableRecipient

ObservableRecipient 继承了 ObservableObject 并支持从 Messenger 接收信息，可通过 IsActive 属性激活或停用。它可以用作 ViewModel 的基类，事实上它的作用基本上相遇于 MVVMLight 中的 ViewModelBase ：

代码语言：javascript复制

public class MyViewModel : ObservableRecipient, IRecipient<LoggedInUserRequestMessage>
{
    public void Receive(LoggedInUserRequestMessage message)
    {
        // Handle the message here
    }
}