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事件。

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：

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++;
}

<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：

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 程式碼：

<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類。

// 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：

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

3. The 效能#

MVVM Toolkit 在開發過程中為了追求卓越的效能做了很多努力，例如提供一個StrongReferenceMessenger類，效能如上圖所示地有了大幅提升。又例如下面這篇文章所介紹的：

MVVM Toolkit Preview 3 & The Journey of an API

有興趣的話可以通過原始碼詳細瞭解一下。

4. 結語#

這篇文章簡單介紹了 MVVM Toolkit 中的主要功能，更多內容可參考原始碼、單元測試或windows-toolkit/MVVM-Samples中提供的示例應用：

5. 參考#

Sample repo for MVVM package

Microsoft.Toolkit.Mvvm at master

[Feature] Basic MVVM primitives (.NET Standard)

NuGet Gallery _ Microsoft.Toolkit.Mvvm

MVVM Light Toolkit

資料繫結和 MVVM

[Feature] Microsoft.Toolkit.Mvvm package (Preview 5)

MVVM Toolkit Preview 3 & The Journey of an API