DEV Community

Cover image for Guía rápida para MVVM Toolkit .NET MAUI
Samuel José Bolaño Mejía
Samuel José Bolaño Mejía

Posted on

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

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".
Image description

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));
    }
}

Enter fullscreen mode Exit fullscreen mode

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
        }
    }
}


Enter fullscreen mode Exit fullscreen mode

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");
        }
    }

}
Enter fullscreen mode Exit fullscreen mode

Y en tu XAML:

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

Enter fullscreen mode Exit fullscreen mode

¿Y tú, ya lo usaste?

¿Ya conocías el MVVM Toolkit?

👇 ¡Te leo en los comentarios!

Top comments (0)