MVVM, for a successful application

In this chapter, we will discover a major design pattern for mobile application development, the Model-View-ViewModel! (usually referred as “MVVM”)

Model-View-ViewModel

MVVM is a design pattern which provides the developer with a logical separation of the code into 3 layers:

• The View, which refers to the user interface, i.e. everything that will be displayed on the screen (e.g. the HomeView page),

• The Model, which refers to the kind of data to be displayed in this View,

• And finally, the ViewModel which is the link between the View and the Model. For example, to retrieve data from the Cloud or react to user interactions.

One of the main advantages of MVVM is isolating the view (i.e. the user interface) from the business logic. In the context of our first page, we finally obtain two files:

1. HomeView.cs which defines exactly how our page will be displayed (i.e. a background colour, an image at the top, a bottom button),

2. And HomeViewModel.cs which contains all the logic to run our page (in this case, the behaviour of the button when the user presses it).

By following this principle, the breakdown of your code is clear and you reduce the number of lines of code per file. You wouldn’t want a file with more than 10,000 lines! 😄 Besides, there is no risk of affecting the logic of your app if you only change the colour of a button.

Good catch! Indeed, some pages are so simple that they do not require a Model. In such cases, only the View and ViewModel are required.

Data Binding

We now understand how to split our code into several layers. For example, defining a button in a View and declaring its action in a ViewModel. But can you tell how they will work together?

Indeed, that’s almost it! It takes place in two steps:

1. First, a ViewModel is associated to its View (usually with the View’s BindingContext),

2. Then we define the behaviour of each element of the View into the ViewModel, using the principle of Data Binding.

Data Binding is a technique for linking two objects so that when one is changed, the other is also changed. It may sound a bit vague, but you’ll understand its role better in the next section. For now, let’s move on!

Apply MVVM

Now that you know the basics of MVVM, I can show you how to apply it concretely in the application.

Let’s start by creating a file to be the ViewModel for our HomeView. To do this, first create a new folder called ViewModels in the project, then add a new file to it.

This will be an empty class named HomeViewModel.cs :

Then, replace its content with the following one:

Filename:HomeViewModel.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

using System;

namespace NightClub.ViewModels;

public class HomeViewModel
{
	public HomeViewModel()
	{
	}

	async Task Enter()
	{
		await Application.Current.MainPage.DisplayAlert(
			"Well Done !",
			"You have successfully reached the end of this chapter.",
			"Next !");
	}
}

Well, there’s nothing special here. It’s just a C# object class with an *Enter() *method that prints some text on the screen right after the user clicks the “ENTER” button.

And you’re right, but as it is, it remains unusable! Remember, there’s absolutely no link between the HomeView and the HomeViewModel.

Fortunately, there is a library provided by Microsoft that will greatly simplify our lives: the MVVM Toolkit.

This library has already been added to the project and you can easily verify this by opening the NuGet packages management window. Just right click on the project’s dependencies:

And here is the library! It is called CommunityToolkit.Mvvm:

Now let’s see how to prepare our class HomeViewModel to act as a real ViewModel:

1. First, make it inherit from the class ObservableObject,

2. then, define it as a partial class.

You should have the following:

Filename:HomeViewModel.cs

1
2
3
4
5
6
7

using System;
using CommunityToolkit.Mvvm.ComponentModel;

namespace NightClub.ViewModels;

public partial class HomeViewModel : ObservableObject
...

These two steps are necessary for MVVM Toolkit to generate source code with just specific keywords. In short, you write a single word and it automatically generates dozens of lines of code, isn’t that great? 🤘

For example, we will define our Enter() method as a command by adding a simple [RelayCommand] attribute. Here’s how:

Filename:HomeViewModel.cs

1
2
3
4
5
6
7
8

[RelayCommand]
async Task Enter()
{
    await Application.Current.MainPage.DisplayAlert(
        "Well Done !",
        "You have successfully reached the end of this chapter.",
        "Next !");
}

With just one word, we now have an Enter() command which supports the Data Binding technique! And this is only possible thanks to the MVVM Toolkit library that takes care of generating all the necessary source code.

Demo is coming soon!

Almost there! Only remaining is to activate the Enter() command when the “ENTER” button is clicked.

Let’s first reopen the file HomeView.cs to link the view to the HomeViewModel via the BindingContext:

Filename:HomeView.cs

1
2
3
4
5
6
7
8

public HomeView()
{
	BindingContext = new HomeViewModel();
	
	BackgroundColor = Colors.Black;
	
	Content = ...
}

Then define the action for EnterButton with BindCommand to trigger the Enter() command that is specified in the HomeViewModel:

Filename:HomeView.cs

1
2
3
4
5
6
7
8

Button EnterButton => new Button
{
	Text = "ENTER",
	TextColor = Colors.White,
	BackgroundColor = Colors.Magenta,
	CornerRadius = 10
} .Bold() .Paddings(50, 2, 50, 2) .CenterHorizontal()
	.BindCommand("EnterCommand"); // Note: we need to add "Command" after "Enter"

And there you have it!

Well, yes in theory! But our app still lacks several key features: an authentication system, a database, etc…

For example, once we will have created the main page of the application, we’ll need to configure its access from the home page! And this is what we will see in the next chapter.

More articles in the series:

My very first app with .NET MAUI
Setup the project .NET MAUI
First run of the app .NET MAUI
MVVM, for a successful application
Navigate to a new page in .NET MAUI
Arrange elements on a .NET MAUI page
Music player display - Time tracker
Music player display - Media playback
Music player display - Volume
Play music in .NET MAUI with MediaElement
Control the playback position with MediaElement
Control the volume with MediaElement
Download an audio file in .NET MAUI
Listen to a playlist with MediaElement
Create animations in .NET MAUI for a disco atmosphere