A Deep Dive into .NET MAUI with MVVM Toolkit

A Deep Dive into .NET MAUI with 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:

  • Launch Visual Studio 2022, and in the start window click Create a new
    project to create a new project.

  • In the Create a new project window, select MAUI in the All project types
    drop-down, select the .NET MAUI App template, and click the Next button:

  • In the configure your new project window, name your project, choose a
    suitable location for it, and click the Next button:

  • In the Additional information window, click the Create button:

  • Once the project is created, we can able to see the Android, iOS, Windows
    and other running options in the toolbar. Press the emulator or run button
    to build and run the app

Install Plugin:

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

  • Access NuGet Package Manager: In Visual Studio, right-click on your
    .NET MAUI project in the Solution Explorer. From the context menu, select
    “Manage NuGet Packages.”
  • Search for “CommunityToolkit.Mvvm”: In the NuGet Package Manager,
    click on the “Browse” tab. In the search bar, type “CommunityToolkit.Mvvm”
    and hit Enter. The package should appear in the search results.
  • Select and Install the Package: Once you find “CommunityToolkit.Mvvm”
    in the search results, click on it to select it. Ensure you choose the
    appropriate version compatible with your .NET MAUI project. Click on the
    “Install” button to begin the installation process.
  • Accept License Agreement: During the installation, you may be
    prompted to accept the license agreement. Review the terms and conditions
    and click on the “Accept” button to proceed.
  • Wait for Installation to Complete: Visual Studio will download and
    install the package along with its dependencies. This process may take a few
    moments, depending on your internet connection speed.
  • Verify Installation: After the installation is complete, verify that
    there are no error messages in the Output window. This indicates a
    successful installation of the package.

Implementation

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.

View

  • Finally, we will design the View, where we create the user interface using
    XAML. Here, we connect the UI elements to the ViewModel properties using
    data binding expressions.
  • This connection enables the View to show and modify task data in real-time,
    ensuring a dynamic and responsive user experience.
<?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>
  • In .NET MAUI, data binding makes sure that data stays in sync between the
    ViewModel and the View without manual intervention.
  • For instance, we can link a task’s title in the ViewModel to a label in the
    View. When the title changes, it instantly updates in the UI.
  • This automatic synchronization simplifies UI updates and eliminates the need
    for handling events manually.
  • Wire-up View and View Model

    • The created view and view model should be added in MauiProgram.cs like below.

      var builder = MauiApp.CreateBuilder();
      		builder
      			.UseMauiApp<App>()
      			.ConfigureFonts(fonts =>
      			
      				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
      				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
      			);
      
      #if DEBUG
      		builder.Logging.AddDebug();
      #endif
              builder.Services.AddTransient<ItemEntryPage>();
              builder.Services.AddTransient<ItemEntryPageModel>();
      
              return builder.Build();

    Full Code:

    Demo

    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

    Next Post

    Why 75% of Consumers Value Insurance Direct Mail – A Game-Changer for Agents

    The 2023 State of Direct Mail study showed that 75% of consumers read insurance direct mail and/or save it to read later. Agents who want to spend their marketing dollars wisely need to remember that statistic. In the world of marketing, direct mail provides the highest ROI of any channel. […]
    Why 75% of Consumers Value Insurance Direct Mail – A Game-Changer for Agents
    clicktech.my.id WordPress Theme: Seek by ThemeInWP