There are no specific requirements for the recipes in this chapter. All of them start with a basic .NET MAUI application created by the default Visual Studio template.

You can download all the projects created in this chapter from GitHub: https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02

The .NET MAUI platform includes core features to separate the view and view model:

• Bindings transfer data between the view and view model
• The BindingContext property allows you to specify to what view model your view should be bound
• Commands help you pass actions (such as button clicks) from the view to the view model

Let’s transform the default .NET MAUI project created by Visual Studio into an MVVM project.

Getting ready

To prepare for the first step of this recipe, create a basic .NET MAUI application from the default project template available in Visual Studio. If you are using another IDE (VS Code, Rider) and with non-default project templates, you can download a starting application from this GitHub repository: https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-DecoupleViewAndViewModel. This repository also contains code with the complete steps of this recipe.

How to do it&...

Following the MVVM pattern often involves writing a lot of boilerplate code for properties with INotifyPropertyChanged support and commands. This task can be tedious and prone to errors caused by copy-pasting. Fortunately, there’s a solution to avoid writing this code manually: use the code generator available in CommunityToolkit.Mvvm.

Getting ready

Start with the project you got after executing the previous recipe (Decoupling the UI from the view model). This project is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-DecoupleViewAndViewModel.

The code for this recipe is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-GeneratedViewModels.

How to do it…

Let’s transform the view model from the previous recipe using the code generators from CommunityToolkit.Mvvm and see how much code we will save:

1. Add the CommunityToolkit...

As you may know, .NET MAUI runs all UI-related operations in a single UI thread. However, your application may require executing long-running commands, such as loading data from a remote server, reading a large file, generating a report, etc. By default, commands are executed in the UI thread, meaning that when a command is running, the UI will be frozen. A good practice for user experience is not to block the UI when such a command is executed.

You can create tasks or even separate threads manually, but the Community Toolkit allows you to easily achieve the goal with asynchronous commands. It allows you to automatically track the command execution state or cancel the command.

Getting ready

Start with the project you got after executing the second recipe of this chapter: Implementing auto-generated view model properties. This project is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-GeneratedViewModels...

.NET MAUI allows you to represent collections using the CollectionView element. Typically, applications contain many collections, and often data for these collections is loaded on demand when a view is opened. It’s essential to know how to initialize and update bound collections and avoid performance issues.

Getting ready

Start with the project you got after executing the second recipe of this chapter: Implementing auto-generated view model properties. This project is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-GeneratedViewModels.

The code for this recipe is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-CollectionInitialization.

How to do it…

Let’s create a collection in the view model and bind it to CollectionView. Because data for the collection may be loaded from a remote service, we don’t want...

Commands help you invoke a method in a view model when some action is executed in the UI. However, sometimes you may need to perform the opposite task: call a method in a UI control when some logic is executed in your view model. For example, let’s assume, you need to scroll CollectionView down each time a user adds a new item to the bound collection in the view model. Let’s see how to accomplish this task using WeakReferenceMessenger, available in CommunityToolkit.Mvvm.

Definition

WeakReferenceMessenger enables communication between different parts of an application without creating strong references between objects. Weak references allow you to avoid memory leaks even if you don’t unregister a message handler.

Getting ready

Start with the project you got after executing the fourth recipe of this chapter: Initializing bound collections without freezing the UI. This project is available...

WeakReferenceMessenger allows you to organize communication not only between the view and view model but also between different view models. This helps you create communication between parent/child view models or even between view models in different modules. Additionally, WeakReferenceMessenger allows you to create different messaging channels to handle the same message type differently based on the channel.

Getting ready

Start with a new project and add the CommunityToolkit.MVVM NuGet package.

The code for this recipe is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-ViewModelCommunication.

How to do it…

Let’s create a simple app with three view models: AlertGeneratorViewModel, Security MonitorViewModel, and PerformanceMonitorViewModel. AlertGenerator ViewModel will generate alerts of two types: security and performance. Security MonitorViewModel and...

Dependency injection (DI) is a form of the inversion of control (IoC) pattern. The core idea of DI is that classes don’t create the objects they rely on. Instead, a DI framework resolves the objects centrally and injects them into dependent classes. This technique allows you to easily manage dependencies and achieve loosely coupled architecture, share more code, and create unit tests for separate modules.

In this recipe, we will use DI to inject a data service into a view model:

Figure 2.5 – DI service injection

Getting ready

Start with the project you got after executing the fourth recipe of this chapter: Initializing and updating bound collections. This project is available at https://github.com/PacktPublishing/.NET-MAUI-Cookbook/tree/main/Chapter02/c2-CollectionInitialization.

The code for this recipe is available at https://github.com/PacktPublishing...

As you may have noticed from previous recipes in this chapter, binding is one of the core mechanisms used in the MVVM pattern. Views in real apps include dozens of bindings and it’s important to know how to troubleshoot a binding when something doesn’t work.

One of the techniques that helps you avoid binding errors is assigning the x:DataType attribute, which resolves bindings at compile time. This will not only let you know that you made a typo in a binding but will also improve the performance. However, x:DataType only works when you know exactly what object will be used in BindingContext. Sometimes, your binding source may contain properties with the object type, and in such cases x:DataType can’t be used. Moreover, you may need to create complex bindings with RelativeSource and x:Reference mechanisms, as described in the There’s more… section of the Decoupling the UI from the view model recipe in this chapter...