Enlace de datos de Windows y MVVM

Model-View-ViewModel (MVVM) es un patrón de diseño arquitectónico de la interfaz de usuario que desacopla la interfaz de usuario y el código que no es de interfaz de usuario. Obtenga información sobre cómo MVVM permite el acoplamiento flexible mediante el enlace de datos en XAML para sincronizar la interfaz de usuario y los datos, lo que mejora la capacidad de mantenimiento y reduce las dependencias.

Dado que proporciona acoplamiento flexible, el uso del enlace de datos reduce las dependencias duras entre diferentes tipos de código. Este enfoque facilita el cambio de unidades de código individuales (métodos, clases, controles, etc.) sin causar efectos secundarios no deseados en otras unidades. Este desacoplamiento es un ejemplo de la separación de preocupaciones, que es un concepto importante en muchos patrones de diseño.

Ventajas de MVVM

La desacoplación del código tiene muchas ventajas, entre las que se incluyen:

• Habilitación de un estilo de codificación iterativo y exploratorio. El cambio aislado es menos arriesgado y es más fácil de experimentar con.
• Simplificación de las pruebas unitarias. Puede probar unidades de código aisladas entre sí de forma individual y fuera de los entornos de producción.
• Apoyando la colaboración en equipo. Los equipos o individuos independientes pueden desarrollar código desacoplado que se adhiere a interfaces bien diseñadas e integrarlo más adelante.
• Mejora del mantenimiento. Corregir errores en código desacoplado es menos probable que provoque regresiones en otro código.

A diferencia de MVVM, una aplicación con una estructura de "código subyacente" más convencional suele usar el enlace de datos para los datos de solo visualización. Responde a la entrada del usuario controlando directamente los eventos expuestos por los controles. Los controladores de eventos se implementan en archivos de código subyacente (como MainWindow.xaml.cs) y a menudo están estrechamente acoplados a los controles. Normalmente contienen código que manipula la interfaz de usuario directamente. Esta estructura dificulta o imposible reemplazar un control sin tener que actualizar el código de control de eventos. Con esta arquitectura, los archivos de código subyacente suelen acumular código que no está directamente relacionado con la interfaz de usuario, como el código de acceso a la base de datos, que termina duplicando y modificando para su uso con otras ventanas.

Capas de aplicación

Al usar el patrón MVVM, divida la aplicación en las capas siguientes:

• La capa de modelo define los tipos que representan los datos empresariales. Esta capa incluye todo lo necesario para modelar el dominio de la aplicación principal y, a menudo, incluye la lógica de la aplicación principal. Esta capa es completamente independiente de las capas de vista y modelo de vista y, a menudo, reside parcialmente en la nube. Dada una capa de modelo totalmente implementada, puedes crear varias aplicaciones cliente diferentes si eliges, como SDK de Aplicaciones para Windows y aplicaciones web que funcionan con los mismos datos subyacentes.
• La capa de vista define la interfaz de usuario mediante el marcado XAML. El marcado incluye expresiones de enlace de datos (como x:Bind) que definen la conexión entre componentes específicos de la interfaz de usuario y varios miembros de la vista-modelo y del modelo. A veces, puede usar archivos code-behind como parte de la capa de vista para contener el código adicional necesario para personalizar o manipular la interfaz de usuario o extraer datos de los argumentos del controlador de eventos antes de llamar a un método del modelo de vista que ejecuta la tarea.
• La capa de modelo de vista proporciona destinos de enlace de datos para la vista. En muchos casos, el modelo de vista expone el modelo directamente o proporciona miembros que encapsulan miembros específicos del modelo. El modelo de vista también puede definir miembros para realizar un seguimiento de los datos relevantes para la interfaz de usuario, pero no para el modelo, como el orden de visualización de una lista de elementos. El modelo de vista también actúa como punto de integración con otros servicios, como el código de acceso a datos. En el caso de proyectos sencillos, es posible que no necesite una capa de modelo independiente, sino solo un modelo de vista que encapsula todos los datos que necesita.

MVVM básico y avanzado

Al igual que con cualquier patrón de diseño, hay más de una manera de implementar MVVM, y muchas técnicas diferentes se consideran parte de MVVM. Por este motivo, hay varios marcos de MVVM de terceros diferentes que admiten las distintas plataformas basadas en XAML, incluido SDK de Aplicaciones para Windows. Sin embargo, estos marcos suelen incluir varios servicios para implementar la arquitectura desacoplada, lo que hace que la definición exacta de MVVM sea algo ambigua.

Aunque los marcos de MVVM sofisticados pueden ser muy útiles, especialmente para proyectos de escala empresarial, normalmente hay un costo asociado a la adopción de cualquier patrón o técnica concretos, y las ventajas no siempre son claras, en función de la escala y el tamaño del proyecto. Afortunadamente, solo puede adoptar esas técnicas que proporcionan una ventaja clara y tangible, e ignorar a otros hasta que los necesite.

En concreto, puede obtener una gran cantidad de ventajas simplemente mediante la comprensión y aplicación de toda la eficacia del enlace de datos y la separación de la lógica de la aplicación en las capas descritas anteriormente. Esto solo se puede lograr con las funcionalidades proporcionadas por el SDK de aplicaciones de Windows y sin usar ningún marco externo. En concreto, la extensión de marcado {x:Bind} facilita el enlace de datos y mejora el rendimiento en comparación con las plataformas XAML anteriores, eliminando la necesidad de gran parte del código repetitivo que se requería anteriormente.

Para obtener instrucciones adicionales sobre el uso de MVVM, consulte la biblioteca communityToolkit MVVM , que proporciona clases base como ObservableObject y RelayCommand, junto con generadores de origen (a través [ObservableProperty] de y [RelayCommand] atributos) que eliminan el código reutilizable. La Galería de WinUI también muestra el enlace de datos y los patrones de MVVM con WinUI 3.

Consulte también

Temas

Enlace de datos en profundidad
Extensión de marcado {x:Bind}
Sugerencias de rendimiento de MVVM para aplicaciones WinUI

Recursos de WinUI 3 y MVVM

Documentación de CommunityToolkit MVVM
Galería de WinUI: ejemplos de enlace de datos
Template Studio para WinUI