Guía rápida para MVVM Toolkit .NET MAUI

Samuel José Bolaño Mejía — Sat, 14 Jun 2025 22:12:45 +0000

Introducción
En el desarrollo con .NET MAUI, seguir el patrón MVVM (Model-View-ViewModel) es clave para separar la lógica de negocio de la interfaz. Pero muchas veces terminamos escribiendo mucho código repetitivo solo para implementar cosas básicas como INotifyPropertyChanged o comandos.

Por suerte, CommunityToolkit.Mvvm viene al rescate con atributos que hacen el trabajo pesado por ti.

¿Qué es MVVM Toolkit?
Es una librería oficial de Microsoft incluida en el paquete CommunityToolkit.Mvvm, que te permite:

Crear propiedades observables con solo un atributo.
Declarar comandos sin necesidad de crear clases heredadas de ICommand.
Evitar INotifyPropertyChanged manual.
Usar inyección de dependencias.

Instalación
Desde el Administrar paquetes NuGet en Visual Studio, busca:
CommunityToolkit.Mvvm (by dotnetfoundation)

Haz clic en "Instalar".

Sin Toolkit nuestro ViewModel luciría así:

using System.ComponentModel;
using System.Windows.Input;

namespace MVVM_SAMPLE.ViewModels
{
    public class LoginViewModel : INotifyPropertyChanged
    {
        private string _username;

        public string Username
        {
            get => _username;
            set
            {
                _username = value;
                OnPropertyChanged(nameof(Username));
            }
        }

        public ICommand LoginCommand { get; }

        public LoginViewModel()
        {
            LoginCommand = new Command(OnLogin);
        }

        private void OnLogin()
        {
            // Lógica de login
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

Con MVVM Toolkit:

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace MVVM_SAMPLE.ViewModels
{
    public partial class LoginViewModel : ObservableObject
    {
        [ObservableProperty]
        private string username;

        [RelayCommand]
        private void OnLogin()
        {
            // Lógica de login
        }
    }
}

El Toolkit genera automáticamente la propiedad pública UserName con su get, set y la notificación de cambios (INotifyPropertyChanged) en tiempo de compilación.

Internamente, el atributo [ObservableProperty] usa source generators, una funcionalidad de C# que permite generar código durante la compilación. Así, tú escribes menos, y el resultado es el mismo o incluso más limpio.

Ejemplo completo

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;


namespace MVVM_SAMPLE.ViewModels
{
    public partial class LoginViewModel : ObservableObject
    {
        [ObservableProperty]
        private string username;

        [ObservableProperty]
        private string password;

        [RelayCommand]
        private async Task LoginAsync()
        {
            if (Username == "admin" && Password == "1234")
                await Shell.Current.DisplayAlert("Acceso", "Login exitoso", "OK");
            else
                await Shell.Current.DisplayAlert("Error", "Credenciales incorrectas", "OK");
        }
    }

}

Y en tu XAML:

<Entry Text="{Binding Username}" Placeholder="Usuario" />
<Entry Text="{Binding Password}" IsPassword="True" />
<Button Text="Iniciar sesión" Command="{Binding LoginCommand}" />

¿Y tú, ya lo usaste?

¿Ya conocías el MVVM Toolkit?

👇 ¡Te leo en los comentarios!

DEV Community: Samuel José Bolaño Mejía

Guía rápida para MVVM Toolkit .NET MAUI

¿Y tú, ya lo usaste?