Build MVVM applications with the Windows Community Toolkit

Microsoft has always been good at working with developers, right from its earliest days as a language vendor. Its program has evolved over the years, from a top-down, Redmond-driven approach that peaked with the regular MSDN DVDs of documentation, to today’s community-based program wrapped around Microsoft Docs, Microsoft Learn, a global team of Azure Developer Advocates, and an ever-growing set of tools and frameworks developed on GitHub.

The Windows Community Toolkit: a .NET starter kit

Working with the community has produced interesting results with more accurate and timely documentation using GitHub to manage content and a series of community-led open source projects. One of the more important projects is the Windows Community Toolkit, a series of functions, controls, and services for .NET and UWP applications. It’s a project that’s only going to get more important with the transition from the older .NET Framework to the .NET Core-based .NET 5 and rollout of both Project Reunion and the cross-platform Multiplatform App UI (MAUI) framework.

The Windows Community Toolkit isn’t a monolithic entity that needs to be shipped with your applications. It’s a set of NuGet packages, so you can pick and choose what you need, keeping any code and library overhead to a minimum. If you’re building modern Windows .NET applications it’s well worth a look, as it contains many important XAML controls that can help deliver a good looking and user-friendly application. Other useful tools include a set of helpers to improve application performance, a set of parsers for common data formats including Markdown, and the core code needed to support Windows 10’s notification framework.

Adding MVVM to the Toolkit

One of the more recent additions to the toolkit is a new library for building applications using the MVVM design pattern. Model-view-viewmodel is at the heart of the upcoming MAUI framework, and .NET needs a good, fast implementation if it’s to be successful. The result is a relatively lightweight set of MVVM tools as well as a set of sample code.

There’s a lot to like in the new MVVM Windows Community Toolkit implementation. Perhaps the most useful is that it’s an order of magnitude performance improvement over comparable .NET MVVM tooling, as its co-author Michael Hawker, the lead on the Windows Community Toolkit project at Microsoft, pointed out in a presentation at UnoConf last week. That improvement will be critical for MAUI applications, especially when targeting mobile platforms such as Android and iOS. It might not have all the features of heavyweight alternatives, but for most purposes it’s an ideal choice, and with some of the alternative .NET MVVM tools no longer being developed, it’s worth a look.

Make your UI event-driven

The MVVM design pattern is intended to support event-driven user interfaces. At its heart is a model, which acts as the interface between your application and any back-end business logic or data. Your user interface is implemented by the view, much like the familiar MVC (model view controller) pattern. MVVM differs from other similar design patterns in its viewmodel, which links data bindings in the view to the data in the model, providing a way of representing the state of one to the other.

Your viewmodel code handles processing inputs and outputs to and from the view, using standard XAML data bindings to controls. The aim here is to keep code in the view to a minimum so that designers can concentrate on producing user experiences while developers work on the back-end code and on the viewmodel’s event-driven processing of view state. By enforcing a separation between the view and the model you can focus development on the application logic, using prototype controls before switching in a final design without affecting the code that’s been written during application development.

Start with Microsoft.MVVM.Toolkit

The code for the new MVVM toolkit is very new, but it’s mature enough to support prototype application development. Perhaps the biggest issue is that there isn’t any documentation for Microsoft.Toolkit.MVVM on the Microsoft Docs site yet, though a little searching will find the initial tranche of documentation on GitHub.

Like the rest of the Windows Community Toolkit, the MVVM Toolkit installs from a Nuget repository. As it was inspired by the now deprecated MVVMLight, transitioning from the older toolkit to the Windows Community Toolkit shouldn’t be too difficult.

Start by downloading the preview release of the MVVM Toolkit from Nuget and installing it in your application in Visual Studio. This will bring in any dependencies and set up a framework that you can use to start building an MVVM application.

Under the hood: a notification system in action

At heart, MVVM is a messaging-based architecture that monitors for events from both the model and the view, sending asynchronous notifications between the two using the viewmodel. You’ll need to familiarize yourself with the core base classes which control how the viewmodel responds to changed properties in the underlying model. When an observable object in the model changes state, the viewmodel raises an appropriate notification and uses that to deliver an event message across a binding to a UI control in the view.

Key to operation of the MVVM Toolkit, and the reason for its significant performance improvements over other .NET MVVM implementations, is its Messenger Class. This is how you link the different elements of a MVVM application, implementing and registering message handlers. You can think of it as a simplified publish and subscribe system, only offering services to the model and the view. Recipients and senders need to be registered and unregistered if no longer needed. For example, if you’re using MVVM Toolkit to power a chat app, and a specific user logs off, you need to unregister them from the application to prevent memory leaks.

Designing for MVVM

Having a publish and subscribe model at the heart of the model view makes a lot of sense. It allows you to ensure all your control bindings are associated with message end points, giving you a way to build out programmatically the mappings necessary to link view and model in a way that should scale between multiple views and multiple models.

Separating view and model in this way simplifies the overall structure of your application, especially when you consider that you’re going between a declarative programming model in your XAML view and an object-oriented approach in your model. Using a messaging-based viewmodel as a translation layer between these two very different ways of programming reduces risk and keeps the amount of code-behind needed in your views to a minimum. Before you write any code, make sure your application design includes those mappings and bindings in detail, along with the messages they’re carrying, as these are your internal APIs for all your integration between front end and back end.

The .NET community’s work on the Windows Community Toolkit is important for the future of the platform. With significant changes underway (the transition to .NET 5, the separation of SDK and Windows in Project Reunion, and the cross-platform UI model in MAUI) having a set of reference controls and features is becoming increasingly important. You can pick and choose the elements you want to get a boost on your own .NET journey. The MVVM Toolkit may be one of the newest parts of the kit, but it’s likely to become one of the most important.