Understanding Mvvm In .Net Maui Complete Guide

Understanding MVVM in .NET MAUI

MVVM stands for:

• Model: Represents the data and business logic.
• View: Represents the user interface.
• ViewModel: Acts as an intermediary between the Model and View. It manages data presentation and business logic communication.

Step 1: Setting Up Your Project

First, ensure you have .NET MAUI installed. You can create a new project by running the following command in your terminal or command prompt:

dotnet new maui -n MVVMDemo

Navigate to the project directory and open it in Visual Studio:

cd MVVMDemo
dotnet dev-certs maui
dotnet restore
dotnet build
code .

Step 2: Creating the Model

The Model represents the data and business logic of your application. Let’s create a simple model for a Product.

Product.cs

namespace MVVMDemo.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Step 3: Implementing INotifyPropertyChanged

The ViewModel communicates changes in its properties to the View. To do this, the ViewModel must implement the INotifyPropertyChanged interface.

ObservableObject.cs

Create a base class that simplifies implementing INotifyPropertyChanged:

using System.ComponentModel;

namespace MVVMDemo.Helpers
{
    public class ObservableObject : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string name)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        protected bool SetProperty<T>(ref T backingStore, T value, string propertyName = "")
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            OnPropertyChanged(propertyName);
            return true;
        }
    }
}

Step 4: Creating the ViewModel

The ViewModel manages the application's data and exposes commands and properties that the View binds to. Let’s create a MainPageViewModel for our example.

MainPageViewModel.cs

using MVVMDemo.Helpers;
using MVVMDemo.Models;
using System.Collections.ObjectModel;
using System.Windows.Input;
using CommunityToolkit.Mvvm.Input; // For RelayCommand

namespace MVVMDemo.ViewModels
{
    public class MainPageViewModel : ObservableObject
    {
        private string _productName;
        private decimal _productPrice;
        private ObservableCollection<Product> _products;

        public string ProductName
        {
            get => _productName;
            set => SetProperty(ref _productName, value);
        }

        public decimal ProductPrice
        {
            get => _productPrice;
            set => SetProperty(ref _productPrice, value);
        }

        public ObservableCollection<Product> Products
        {
            get => _products;
            set => SetProperty(ref _products, value);
        }

        public ICommand AddProductCommand { get; }

        public MainPageViewModel()
        {
            Products = new ObservableCollection<Product>();
            AddProductCommand = new RelayCommand(AddProduct);
        }

        private void AddProduct()
        {
            var product = new Product
            {
                Id = Products.Count + 1,
                Name = ProductName,
                Price = ProductPrice
            };

            Products.Add(product);
            ProductName = string.Empty;
            ProductPrice = 0m;
        }
    }
}

Ensure you have the following NuGet package installed to use CommunityToolkit.Mvvm.Input:

dotnet add package Microsoft.Toolkit.Mvvm

Step 5: Creating the View

The View is responsible for displaying the data and handling user interactions. It uses data bindings to connect to the ViewModel.

MainPage.xaml

<?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"
             xmlns:viewModels="clr-namespace:MVVMDemo.ViewModels"
             x:Class="MVVMDemo.MainPage">

    <ContentPage.BindingContext>
        <viewModels:MainPageViewModel />
    </ContentPage.BindingContext>

    <ScrollView>
        <StackLayout Padding="20">

            <!-- Product Name Entry -->
            <Entry Placeholder="Product Name"
                   Text="{Binding ProductName}" />

            <!-- Product Price Entry -->
            <Entry Placeholder="Product Price"
                   Keyboard="Numeric"
                   Text="{Binding ProductPrice, StringFormat='{0} €'}" />

            <!-- Add Product Button -->
            <Button Text="Add Product"
                    Command="{Binding AddProductCommand}" />

            <!-- Display Products -->
            <ListView ItemsSource="{Binding Products}"
                      HasUnevenRows="true">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding Name}"
                                  Detail="{Binding Price, StringFormat='{0} €'}" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </StackLayout>
    </ScrollView>

</ContentPage>

Step 6: Connecting Everything Together

Finally, update the MainPage.xaml.cs code-behind file to ensure the View loads the correct ViewModel.

MainPage.xaml.cs

using MVVMDemo.ViewModels;
using MVVMDemo.Views;

namespace MVVMDemo;

public partial class MainPage : ContentPage
{
    private MainPageViewModel viewModel;

    public MainPage()
    {
        InitializeComponent();
        viewModel = (MainPageViewModel)BindingContext;
    }
}

Running the Application

You should be able to run your application now using Visual Studio or by executing the following commands in your project directory:

dotnet build
dotnet run

When you run the application:

1. Enter the product name and price.
2. Click the "Add Product" button.
3. The product will appear in the list below.

Conclusion

In this step-by-step guide, you created a simple .NET MAUI application using the MVVM design pattern. Here’s a quick recap:

• Model: Represents the data (Product).
• View: Displays the data and handles user interactions (MainPage.xaml).
• ViewModel: Manages the data display logic and communications between the Model and View (MainPageViewModel).