Este documento describe los conceptos clave del patrón de diseño MVVM. Explica que MVVM separa la interfaz de usuario, la lógica de negocios y los datos de una aplicación en tres componentes: la Vista, el Modelo y la Vista-Modelo. También describe cómo cada componente interactúa y cómo esto permite mayor reutilización de código y separación de roles entre diseñadores y desarrolladores.

2. INTERFACES CON MAS INTERACCIÓN

9. Que es MVVM?
Patrón de diseño orientado a tecnologías XAML
Permite una amplia reutilización de código
Pruebas unitarias
Separación de roles entre un diseñador y un desarrollador

10. Los tres elementos principales
Vista
Modelo - vista
Modelo
Separación de capas
Roles individuales
Reutilización del código
En diferentes vistas
Acceso inmediato desde
Cualquier parte de la App

12. Que es la vista?
La capa de interacción con el usuario
La interfaz y elementos visuales de la aplicación
El flujo de navegación

13. Enlace de datos
La mas importante característica en XAML para MVVM
Permite la independencia entre los elementos
lógicos y visuales
Acceso a métodos y propiedades

15. Que es un modelo?
Contiene la información y estructura de todas
las entidades necesarias
No incluye ningún tipo de métodos o
funcionalidad lógica

17. Que es la vista-modelo?
Toda la lógica de la aplicación
Llamadas a servicios web
Manejo de la información

19. Unificación final de las capas
La vista ya tiene controles enlazados
La vista modelo ya cuenta con la
lógica de la aplicación
El modelo cuenta con todas las
entidades necesarias
Vista (XAML)
Modelo
Vista modelo
comandosEnlace
de datos

20. gráficos
• WPF dentro de sus objetivos fundamentales es dotar a las
aplicaciones de una apariencia más atractiva.

21. Figuras básicas
• En WPF se maneja el trazado y planillas de figuras de alta precisión.
• Poder aplicar a las figuras color, bordes y tamaño según la necesidad.

22. •Define los objetos usados para pintar objetos
gráficos. Las clases que derivan
de Brush describen cómo se pinta el área.
Clase brush

23. decoradores
• Funcionan de forma similar al de las figuras y a su vez de modo
parecido a los paneles.
• Los decoradores se aplican para elemento que los contiene, así que
cada decorador aplica una forma de decorar al elemento que lo
contiene.
• El mas utilizado es el Border

24. Propiedades
• El ajuste de las dimensiones de la ventana ocurre gracias a la
combinación de las propiedades de alineación.
- HorizontalAlignment
- VerticalAlignment
VIEWBOX toma las dimensiones de la ventana.

25. Propiedad stretch
• Obtiene o establece un valor que describe cómo debería
ajustarse una Image para rellenar el rectángulo de destino.

26. Efecto gradiente
• Se aplica bajo la propiedad de LinearGradientBrush
Un LinearGradientBrush pinta un degradado a lo largo de
una línea.

27. Estilos y plantillas
• Los estilos nos permite personalizar la apariencia de nuestra interfaz
de usuario
• Las plantillas nos permite facilitar la expresión de patrones de código
con mayor flexibilidad para el usuario.

28. Estilos
Los controles, figuras, imágenes, y el texto que
se muestran en una interfaz deben presentarse
con un estilo agradable, que facilite y estimule la
interacción de los usuarios con la aplicación.

29. Función
Los estilos se utilizan para dar un aspecto
uniforme o la apariencia de un conjunto de
controles. estilos implícitos se utilizan para
aplicar una apariencia a todos los controles de
un tipo dado y simplificar la aplicación

30. Ejemplo:
Imaginémonos tres botones, todos ellos tienen
el mismo aspecto, la misma anchura y altura,
mismo tamaño de fuente, el mismo color de
primer plano, etc.

31. Grafica

32. Por lo general tendrá mucho más de estos que
Son exactamente lo mismo. Y no sólo
los botones de curso, normalmente sus
bloques de texto y cuadros de texto etc.

33. Grafica

34. Practica:
Creamos tres botones y los inicializamos con
algunas propiedades.

35. La ventaja de hacerlo así es que podemos volver
a utilizar ese estilo en cualquier parte de su
ámbito de aplicación; y si hay que cambiarlo,
simplemente cambiamos una vez en la
definición de estilo en lugar de en cada
elemento.

36. Trigger
Permite cambiar los valores de propiedad o
tomar acciones en función del valor de una
propiedad. Por lo tanto, le permite cambiar
dinámicamente la apariencia o comportamiento
de su control, sin tener que crear una nueva.

37. Función
Los disparadores se utilizan para cambiar el valor de cualquier
propiedad dada, cuando se cumplan ciertas condiciones. Hay tres
tipos de disparadores:
• Los Trigger de propiedad
• Los Trigger de datos
• Activaciones de eventos

38. Los Trigger de propiedad
• Los trigger de la propiedad se dispara, cuando se produce un cambio
en una propiedad, ya sea que traerá un cambio inmediato o un
animado en otra propiedad

39. Los Trigger de datos
• Un disparador de datos realiza algunas acciones cuando los datos
satisface algunas condiciones.

40. Activaciones de eventos
Un disparador de evento realiza algunas
acciones cuando se dispara un evento
específico. Por lo general se utiliza para llevar a
cabo un poco de animación en el control de
tales DoubleAnimation, ColorAnimation, etc.