Table of Contents

• Open Visual Studio and create a new WPF project
• Install NuGet Packages
• Create Folders and MainWindowViewModel
• Create ViewModel Locator Class
• Bind ViewModel to View

1. Open Visual Studio and create a new WPF project

※. This screenshot is based on Visual Studio 2022.

Search for WPF and select the WPF Application project template.

Specify the project path, solution name, and project name.

Since this explanation is based on .Net 6.0 or higher, select 6.0.

Once the project is created, check the solution and files in the project in Solution Explorer as shown below.

2. Install NuGet Packages

Install the following packages from the NuGet Package Manager or open the project file by double-clicking the project (MyTestApp) in Solution Explorer and add the following PackageReference tags directly and save.

  <ItemGroup>
    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
    <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="7.0.0" />
    </ItemGroup>

※. I personally do not use the Nullable option, so I removed it.

3. Create Folders and MainWindowViewModel

Create two folders named Views and ViewModels in the project, then move the MainWindow.xaml file to the Views folder. The folder names are personal preferences, so you can name them as you like.

Since the MainWindow.xaml file has been moved to the Views folder, modify the StartupUri in App.xaml as follows.

Create a new class file named MainWindowViewModel.cs in the ViewModels folder.

To use the code generation feature of the MVVM toolkit, add the partial keyword and define the class as inheriting from ObservableObject as follows.

using CommunityToolkit.Mvvm.ComponentModel;

namespace MyTestApp.ViewModels
{
        public partial class MainWindowViewModel : ObservableObject
        {
        }
}

Since C# does not support multiple inheritance, if the ViewModel needs to inherit from a specific class, declare the INotifyPropertyChanged attribute instead of inheriting from ObservableObject as follows.

using CommunityToolkit.Mvvm.ComponentModel;

namespace MyTestApp.ViewModels
{
        public class MyBaseClass
        {
        }

        [INotifyPropertyChanged]
        public partial class MainWindowViewModel : MyBaseClass
        {
                public MainWindowViewModel()
                {
                }
        }
}

4. Create ViewModel Locator Class

Create a VmLocator.cs file in the project.

To use Dependency Injection in the ViewModel, define the dependencies in this file as follows.

using Microsoft.Extensions.DependencyInjection;
using MyTestApp.ViewModels;
using System;

namespace MyTestApp
{
        public class VmLocator
        {
                public IServiceProvider Services { get; }

                public VmLocator()
                {
                        var services = new ServiceCollection();

                        services.AddTransient<MainWindowViewModel>();

                        Services = services.BuildServiceProvider();
                }

                public MainWindowViewModel MainWindowVM => Services.GetService<MainWindowViewModel>();
        }
}

 

Now, add a tag in App.xaml to create an instance of VmLocator when the app runs.

<Application x:Class="MyTestApp.App"
                         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                         xmlns:local="clr-namespace:MyTestApp"
                         StartupUri="Views/MainWindow.xaml">
        <Application.Resources>
                <ResourceDictionary>
                        <local:VmLocator x:Key="VmLocator" />
                </ResourceDictionary>
        </Application.Resources>
</Application>

5. Bind ViewModel to View

Bind the DataContext in the MainWindow.xaml file to MainWindowVM as follows.

<Window x:Class="MyTestApp.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:local="clr-namespace:MyTestApp"
                mc:Ignorable="d"
                Title="MainWindow" Height="450" Width="800"
                DataContext="{Binding Source={StaticResource VmLocator}, Path=MainWindowVM}">
        <Grid>

        </Grid>
</Window>

This is the boilerplate code for developing a WPF app using the MVVM pattern. Add new Views to the Views folder and the corresponding ViewModels to the ViewModels folder. Then, declare the ViewModel instance in the VmLocator to be created by the Dependency Injection service and bind it to the View's DataContext in the same way as MainWindowVM.