MSDN Documentation

MVVM Concepts in .NET MAUI

The Model-View-ViewModel (MVVM) architectural pattern is a popular choice for building applications with .NET MAUI. It promotes separation of concerns, testability, and maintainability by dividing the application into three distinct components:

Model

The Model represents the data and business logic of your application. It is responsible for:

• Representing data structures.
• Implementing business rules and operations.
• Interacting with data sources (e.g., databases, APIs).

The Model is typically independent of the UI and should not contain any UI-specific code.

View

The View is responsible for the user interface. In .NET MAUI, this usually means XAML files defining the visual elements of the application. The View should:

• Display data provided by the ViewModel.
• Forward user input (commands) to the ViewModel.
• Be as "dumb" as possible, containing minimal logic.

The View observes the ViewModel for changes and updates itself accordingly.

ViewModel

The ViewModel acts as an intermediary between the Model and the View. It exposes data from the Model to the View in a format that the View can easily consume and handles user interactions from the View. Key responsibilities of the ViewModel include:

• Exposing data from the Model as properties.
• Exposing commands that the View can trigger.
• Implementing presentation logic.
• Mediating communication between the Model and the View.

The ViewModel should not have a direct reference to the View. Instead, the View binds to the ViewModel, and the ViewModel raises property change notifications that the View listens for.

How MVVM Works with .NET MAUI

.NET MAUI has excellent built-in support for MVVM, primarily through its powerful data binding system.

Data Binding

Data binding allows you to create a connection between properties of the View and properties of the ViewModel. When a property in the ViewModel changes, the bound property in the View automatically updates, and vice-versa (depending on the binding mode).

Commands

User interactions in the View (like button clicks) are handled by Commands in the ViewModel. .NET MAUI provides the ICommand interface, which is typically implemented by the RelayCommand (often found in community libraries like MVVM Toolkit) or built-in implementations.

// Example ViewModel
public class MyViewModel : INotifyPropertyChanged
{
    private string _message;
    public string Message
    {
        get => _message;
        set
        {
            if (_message != value)
            {
                _message = value;
                OnPropertyChanged(nameof(Message));
            }
        }
    }

    public ICommand SubmitCommand { get; }

    public MyViewModel()
    {
        SubmitCommand = new Command(async () => await ExecuteSubmitCommand());
        Message = "Hello from ViewModel!";
    }

    private async Task ExecuteSubmitCommand()
    {
        // Logic to handle submission
        await Application.Current.MainPage.DisplayAlert("Submitted", "Form submitted successfully!", "OK");
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
            

<!-- Example View (XAML) -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourApp.ViewModels"
             x:Class="YourApp.Views.MyPage">

    <ContentPage.BindingContext>
        <local:MyViewModel />
    </ContentPage.BindingContext>

    <StackLayout Padding="20">
        <Label Text="{Binding Message}" FontSize="Large" />
        <Button Text="Submit" Command="{Binding SubmitCommand}" />
    </StackLayout>
</ContentPage>
            

Benefits of MVVM

• Separation of Concerns: Clearly separates UI logic from business logic.
• Testability: ViewModels can be easily unit tested without the UI.
• Maintainability: Easier to understand, modify, and extend code.
• Designer/Developer Workflow: Designers can focus on the View (XAML) while developers focus on the ViewModel and Model.
• Reusability: ViewModels can potentially be reused with different Views.