Patrón MVVM en C#: Guía Completa

Introducción: Binding y ViewModel

MVVM separa Vista, ViewModel y Modelo. El ViewModel expone datos listos para la UI y permite binding declarativo.

Esto mejora la testabilidad y reduce la lógica en la Vista.

En frameworks como WPF o MAUI, el binding evita código repetitivo de actualización. Cambias el estado en el ViewModel y la Vista se refresca automáticamente.

El ViewModel también concentra comandos y validaciones de interacción, lo que reduce el acoplamiento con controles específicos.

MVVM
Prompt: MVVM blocks with binding arrows, clean minimal style.

1. Naturaleza: Reflejos

Un espejo refleja el estado real sin intervenir, como la Vista refleja el ViewModel.

El ViewModel transforma el Modelo en una forma lista para presentar.

El espejo no conoce cómo se construye el objeto, solo lo muestra. En MVVM, la Vista no conoce detalles del dominio: solo “refleja” propiedades y comandos expuestos.

Reflejo
Prompt: Mirror reflecting an object, soft minimal style.

2. Mundo Real: Panel de control

Un panel muestra métricas en tiempo real sin conocer la lógica interna de los sensores.

El ViewModel actúa como adaptador de datos para la Vista.

Si el formato de una métrica cambia, el panel no se rompe: el ViewModel la transforma y la UI sigue intacta. Esa capa de adaptación es clave en apps con múltiples fuentes de datos.

Panel
Prompt: Dashboard UI with charts, clean modern style.

3. Implementación en C#: Código Paso a Paso

public class ProductoVM : INotifyPropertyChanged
{
    public string Nombre { get; set; }
    public event PropertyChangedEventHandler PropertyChanged;
}

public class ProductosView
{
    public void Bind(ProductoVM vm) => Console.WriteLine(vm.Nombre);
}

En una implementación real, el ViewModel notifica cambios mediante INotifyPropertyChanged y expone ICommand para acciones de la UI.

Así puedes probar reglas de presentación sin crear controles visuales, y detectar errores antes de llegar a la interfaz.

4. MVVM vs MVP

MVVM usa binding y una Vista más declarativa; MVP es más manual.

Si trabajas con frameworks que soportan binding, MVVM es ideal.

En MVP el Presenter “empuja” datos a la Vista. En MVVM, la Vista se “suscribe” a propiedades y comandos, lo que reduce código repetitivo.

5. Diagrama UML

UML MVVM
Prompt: UML diagram of MVVM, clean vector layout.
Flujo MVVM
Prompt: MVVM data binding flow diagram, minimal infographic style.

⚠️ Cuándo NO Usar MVVM

  • Si no hay soporte de binding en el framework.
  • Si la UI es muy simple y directa.
  • Si el equipo no está cómodo con el enfoque declarativo y la disciplina del ViewModel.

💪 Ejercicio

Implementa un ViewModel para un contador con incremento y decremento.

Conclusión

MVVM es excelente para aplicaciones con UI rica y binding, separando claramente presentación y lógica.

Cuando el ViewModel se mantiene libre de detalles de la Vista, la aplicación gana testabilidad y escalabilidad en la interfaz.