MVVM Toolkit

Introduction

Welcome to our newest blog post, where we explore the vibrant realm of MVVM (Model-View-ViewModel) architecture using the cutting-edge MVVM Toolkit in .NET MAUI. In this comprehensive guide, we will unravel the intricacies of MVVM and demonstrate how the MVVM Toolkit in .NET MAUI empowers developers to create robust, responsive, and easily maintainable cross-platform mobile applications. Join us on this enlightening journey as we unravel the secrets of mastering MVVM in the context of .NET MAUI.

Quick Links

Project Setup

Install Plugin

In this steps, we will see the steps to install "MVVM Toolkit" in the .NET MAUI project.

MVVM Community Toolkit

Implementation of View Model

In this step, we create a ViewModel that inherits from the ObservableObject class. This inheritance is pivotal because ObservableObject implements the INotifyPropertyChanged interface. By doing so, we gain the ability to trigger the PropertyChanged event, a vital mechanism enabling the notification of property value changes to subscribers, primarily the UI. This synchronization is fundamental for effective data binding, ensuring seamless coordination between the user interface and the underlying ViewModel.

For example

public partial class ItemEntryPageModel : ObservableObject
{
    [ObservableProperty]
    private int _id;
    [ObservableProperty]
	private string _name;
	[ObservableProperty]
	private string _description;

    [ICommand]
	public async void Save()
	{
        await Application.Current.MainPage.DisplayAlert("MAUI MVVM Sample", "Item Saved Successfully", "OK");
    }
}

When we use the [ObservableProperty] attribute, properties can send automatic alerts when they change. This is important for connecting data and updating the user interface (UI) when properties change. When you apply the [ObservableProperty] attribute to a property, it does a lot of necessary coding work behind the scenes. It sets up the code needed to tell other parts of the program when a property changes. This attribute saves time because you don't have to write all this code manually. For Example: "_description" & "_name" produces "Description" & "Name" respectively.

The [ICommand] implementation is a way to connect methods or actions in the app with what the user sees on the screen. For instance, it can create a command called SaveCommand that's linked to the Save method. This linking is crucial for making sure that when a user does something, like clicking a button, the right action happens in the app.

Implementation of View

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiMVVM.Views.ItemEntryPage"
             Title="Item Entry">
    <StackLayout Margin="20"
                 Spacing="10">
        <VerticalStackLayout>
            <Label Text="Name:"
                   FontSize="16"/>
            <Entry Text="{Binding Name}" 
                   Placeholder="Item Name"/>
        </VerticalStackLayout>

        <VerticalStackLayout>
            <Label Text="Description:"
                   FontSize="16"/>
            <Entry Text="{Binding Description}" 
                   Placeholder="Item Description"/>
        </VerticalStackLayout>


        <Button x:Name="btn_save" 
                Text="Save"
                Command="{Binding SaveCommand}"/>
    </StackLayout>
</ContentPage>

Wire-up View and View Model

Demo

Pop up window in android

Download Code

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

References: To learn more about Data binding and MVVM