Migrating from MVVM Basic

This article explains how to migrate apps built with the MVVM Basic option in Windows Template Studio to use the MVVM Toolkit library instead. It applies to both UWP and WPF apps created with Windows Template Studio.

Platform APIs: ObservableObject, RelayCommand

This article focuses exclusively on migration and does not cover how to use the additional functionality that the library provides.

Installing the MVVM Toolkit

To use the MVVM Toolkit, you must install the NuGet package into your existing application.

Install via .NET CLI

dotnet add package CommunityToolkit.Mvvm --version 8.1.0

Install via PackageReference

<PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />

Updating a project

There are four steps to migrate the code generated by Windows Template Studio.

1. Delete old files.
2. Replace use of Observable.
3. Add new namespace references.
4. Update methods with different names.

1. Delete old files

MVVM Basic is comprised of two files

\Helpers\Observable.cs
\Helpers\RelayCommand.cs

\Helpers\Observable.vb
\Helpers\RelayCommand.vb

Delete both of these files.

If you try and build the project at this point you will see lots of errors. These can be useful for identifying files that require changes.

2. Replace use of Observable

The Observable class was used as a base class for ViewModels. The MVVM Toolkit contains a similar class with additional functionality that is called ObservableObject.

Change all classes that previously inherited from Observable to inherit from ObservableObject.

For example

    public class MainViewModel : Observable

    Public Class MainViewModel
        Inherits Observable

will become

    public class MainViewModel : ObservableObject

    Public Class MainViewModel
        Inherits ObservableObject

3. Add new namespace references

Add a reference to the CommunityToolkit.Mvvm.ComponentModel namespace in all files where there is a reference to ObservableObject.

You can either add the appropriate directive manually, of move the cursor to the ObservableObject and press Ctrl+. to access the Quick Action menu to add this for you.

using CommunityToolkit.Mvvm.ComponentModel;

Imports CommunityToolkit.Mvvm.ComponentModel

Add a reference to the CommunityToolkit.Mvvm.Input namespace in all files where there is a reference to RelayCommand.

You can either add the appropriate directive manually, of move the cursor to the RelayCommand and press Ctrl+. to access the Quick Action menu to add this for you.

using CommunityToolkit.Mvvm.Input;

Imports CommunityToolkit.Mvvm.Input

4. Update methods with different names

There are two methods that must be updated to allow for different names for the same functionality.

All calls to Observable.Set must be replaced with calls to ObservableObject.SetProperty.

So,

    set { Set(ref _elementTheme, value); }

    Set
        [Set](_elementTheme, Value)
    End Set

will become

    set { SetProperty(ref _elementTheme, value); }

    Set
        SetProperty(_elementTheme, Value)
    End Set

All calls to RelayCommand.OnCanExecuteChanged must be replaced with calls to RelayCommand.NotifyCanExecuteChanged.

So,

    (UndoCommand as RelayCommand)?.OnCanExecuteChanged();

    Dim undo = TryCast(UndoCommand, RelayCommand)
    undo?.OnCanExecuteChanged()

will become

    (UndoCommand as RelayCommand)?.NotifyCanExecuteChanged();

    Dim undo = TryCast(UndoCommand, RelayCommand)
    undo?.NotifyCanExecuteChanged()

The app should now work with the same functionality as before.