When you first create a .NET MAUI project you have a single ContentPage for your project. That content page consists of a XAML file which defines the various Controls that the user will see when viewing the page. The ContentPage also consists of a code behind file that has the same name as the XAML file but ends in .cs. If you had Controls like a button the XAML file and create a click event handler for it the event handler will get added to the .cs code behind file. This is the not the best approach. Code like the event handler is what is considered business logic. The XAML and .cs file are in a sense married and almost considered the same file. These are the front end configurations. The business logic should be separated from the front end configurations.

To follow separation of concerns, you should put your business logic in a separate .cs file called a ViewModel

A ViewModel is where you should put your business logic that corresponds to the ContentPage. This is done to follow separation of concerns software engineering principle. This makes organizing your code and executing unit tests a lot easier and is the recommended approach when setting up your .NET MAUI project.

Create a new folder called ViewModel in your project. Let’s say your ContentPage is called HomePage. Right click on the new ViewModel folder and then click “Add” and “New Class” then in the popup click “General” and choose “Empty Class”. Name it HomeViewModel and click the “Create” button. The new ViewModel will be added to the “ViewModels” folder.

Bind the New ViewModel to the Code Behind of Your ContentPage

Go to your CodeBehind of your HomePage. Create a new instance of your ViewModel and set the binding context to your ViewModel as shown above.

Now when you set your bindings for your Controls in your front end XAML file the bindings will look for resolution in your ViewModel rather than the code behind file.

Use Dependency Injection to Inject your ViewModel for best implementation of Separation of Concerns

The above image is using dependency injection to have the .NET MAUI framework inject the ViewModel into the constructor of the ContentPage’s code behind. This is the optimal approach as any dependencies the ViewModel has will also be injected automatically.

See our tutorial on how to use dependency injection using the .NET MAUI framework!

Control event handling can’t be registered in the ViewModel!

Normal Control Event’s (like a button’s click event handling) can only be registered in the code behind. If you want to use a ViewModel then instead of using a Control you will have to use Commands for your controls. To simplify your code check out this CodeShadowHand tutorial on using the CommunityToolkit.Mvvm library to replace your Commands and Observable Object boilerplate code with annotations!