SEMINARIO DE PROFUNDIZACION.

INFORME 4 “WPF MVVM”

JUAN DIEGO PORTELA LOZANO

084802042018
DANIEL RICARDO FORERO CALLEJAS
084800702017
ARIS JERSON LOZANO TIMOTE
084801852018
KEVIN STING FERNANDEZ CORTEZ
084801312018

TECNOLOGÍA EN GESTIÓN DE BASES DE DATOS

UNIVERSIDAD DEL TOLIMA
IBAGUE - TOLIMA
2020
 INTRODUCCIÓN

WPF es Windows Presentation Foundation, una nueva tecnología para la construcción

de la interfaz de usuario en windows que se ha agregado como pilar fundamental en la

liberación del .NET Framework 3.0 y que se ha mejorado y extendido en el .NET Framework

3.5. WPF dentro del desarrollo de aplicaciones utiliza un lenguaje de marcado basado en

XML al que se le denomina XAML (eXtensible Application Markup Language), este

lenguaje de marcado es utilizado también por WF (Workflow Foundation) y por WCF

(Windows Communication Foundation), y tiene las mismas reglas que XML, tales como el

contenido único de un elemento raíz, la utilización de Etiquetas de apertura y cierre, el uso de

parámetros, y también el uso de Namespaces, básicamente es XML, y la diferencia es que en

XAML se tienen espacios de nombres con la definición específica de los elementos de la

aplicación, en nuestro caso nos ocupa WPF, por lo que encontraremos que la definición de la

ventana, y los controles de una aplicación WPF para Windows estará definida completamente

en XAML con etiquetas propias para esta tarea.

Adicional, es necesario que tengamos en cuenta el Modelo Vista Modelo de Vista (MVVM)
el cual es un patrón de arquitectura de software, el cual se caracteriza por tratar de desacoplar
lo máximo posible la interfaz de usuario de la lógica de la aplicación.
 Objetivos

OBJETIVOS GENERALES

❖ Reconocer y entender todo el manejo de la arquitectura MVVM y el manejo del

funcionamiento de WPF para lograr aprender a programar todo tipo de aplicación que se

requieran con este tipo de tecnologías.

❖ WPF permite crear interfaces de usuario utilizando un lenguaje de marcado llamado

XAML. Si has trabajado alguna vez con HTML, te resultará muy familiar los conceptos

de este lenguaje. XAML es un lenguaje más potente que el propio HTML.

Objetivos Específicos

❖ Desarrollar aplicaciones con la arquitectura MVVM.

❖ Construcción de interfaces de usuarios.

❖ Aprendizaje en cuanto a la gestion de documentación y flujo de documentación.

❖ Visual Studio, así como los miembros de la familia de entornos de desarrollo de

Microsoft como Blend, están preparados para generar código XAML de forma nativa.
 DESARROLLO TEMÁTICO

¿Qué es WPF?

Lo primero es aclarar el concepto de WPF. Una respuesta corta sería una API para

crear interfaces de usuario (UI) para aplicaciones de escritorio con el framework .NET.

Si profundizamos más, ¿qué es WPF?, WPF es la abreviación de Windows

Presentation Foundation. En términos de programación, es una serie de ensamblados y

herramientas del framework .NET. Está destinado a proporcionar una API (Interfaz de

programación de aplicaciones del inglés Application Programming Interface) para crear

interfaces de usuario enriquecidas y sofisticadas para Windows. Está soportado desde

Windows XP hasta la última versión de Windows, la versión 10.

Del desarrollo web hereda la utilización de un lenguaje de meta etiquetas para el desarrollo

de la interfaz gráfica UI y los estilos. De las aplicaciones RIA hereda los gráficos vectoriales,

animaciones y el soporte para multimedia.

<Window x:Class=”UsoWPF.Window1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
 Title=”Window1″ Height=”100″ Width=”300″>

<Grid>

<TextBlock Margin=”10,10,10,0″ Text=”Espere un momento…”

Height=”25″ VerticalAlignment=”Top”/>

</Grid>

</Window>

Como se puede observar, el TextBlock tiene definidas algunas propiedades; Margin,

Text, Height y VerticalAlignment. La propiedad Text pues no tiene mucho que decir, pues es

la que se encarga de mostrar el texto. Las otras propiedades tienen sus particularidades.

En general la propiedad Height está presente en la mayoría de los controles, y es para

indicar la altura del mismo, si no se define, o en algunos casos se define el valor Auto, el

control tomará la altura del contenedor, en este caso del Grid, lo mismo pasa con la propiedad

Width qué no he definido en el ejemplo, con lo que el control se ajustará al ancho del Grid,

pero… sí, hay un pero, estoy definiendo la propiedad Margin, que define el margen del

control, esto es, la distancia que guarda un control con los límites de su contenedor.

La propiedad Margin, se escribe con cuatro valores separados por comas que definen la

distancia entre los límites de su contenedor en el siguiente orden: margen izquierdo, margen

superior, margen derecho, margen inferior.

En este caso, aunque el TextBlock no define el ancho, se ajustará al Grid manteniendo la

distancia de 10 píxeles entre el extremo derecho e izquierdo, además, mantendrá una

distancia de 10 píxeles con la parte superior, y podríamos suponer que tendría una distancia al
inferior, sin embargo, al declararse el valor de la propiedad Height se descarta el valor

inferior del margen quedando el control con la altura definida en Height.

Características Principales

Interfaz gráfica declarativa

WPF permite crear interfaces de usuario utilizando un lenguaje de marcado llamado XAML.

Si has trabajado alguna vez con HTML, te resultará muy familiar los conceptos de este

lenguaje. XAML es un lenguaje más potente que el propio HTML.

Visual Studio, así como los miembros de la familia de entornos de desarrollo de Microsoft

como Blend, están preparados para generar código XAML de forma nativa.

Una de las características más importantes que aporta este lenguaje de programación es que,

XAML proporciona un medio para que los diseñadores puedan colaborar estrechamente en la

creación de aplicaciones de este tipo.

Diseño dinámico

La organización de los diferentes componentes de una aplicación, puede ser muy complicado.

Si ha esto le añadimos las diferentes resoluciones y características de una pantalla de un

usuario, la cosa se complica más.

WPF aporta «inteligencia» cuando se producen cambios de tamaño de pantalla y ajustes de

los componentes.
Gráficos basados en vectores

Los gráficos en WPF están basados en vectores. Al contrario que los gráficos basados

en imágenes rasterizadas, los gráficos basados en vectores pueden ser escalados sin

deformaciones.

Otra ventaja es que este tipo de gráficos ocupan menos espacio al ser almacenados,

optimizando así el espacio. Esto no quiere decir que WPF no utilice imágenes rasterizadas,

tienes la posibilidad de trabajar de las dos formas.

Para la interfaz gráfica, utilizar imágenes vectoriales te dará ciertas ventajas. Las

aplicaciones creadas con WPF que utilicen gráficos vectoriales podrán ser escaladas sin

perder calidad.

Plantillas

Las plantillas de control (control templates en inglés) permiten redefinir el aspecto

visual de un control. Un ejemplo sería poder cambiar desde un único sitio, la apariencia de

todos los botones de la aplicación. Esto da también mucha ventaja a los diseñadores ya que se

separa en todo momento la parte gráfica de la parte de programación.

Las plantillas de datos (data templates en inglés) son similares. Estas plantillas

definen la manera en que los datos son mostrados. Podemos asociar una plantilla a una

entidad o clase de nuestra aplicación. Siempre que se muestre ese tipo de dato en la

aplicación, utilizará la misma plantilla.

Binding

Quizás una de las facetas o funcionalidades más interesantes que nos aporta WPF sea

el binding. No es una novedad que incorpore WPF, con Windows Forms ya podíamos utilizar

el databinding, pero si que es una tecnología que lo engloba todo en la misma API. No

depende de terceros para su implementación.

Gracias a la integración que nos ofrece WPF con el binding, es muy sencillo utilizar el

patrón de diseño MVC (Modelo Vista Controlador). Más concreto se utiliza una variante que

se llama MVVM (ModelView-ViewModel) también utilizado por el más que conocido

framework de JavaScript AngularJS.

Estilos

Donde realmente vemos grandes diferencias es cuando intentamos hacer una aplicación

enfocada en el diseño.

En este caso los estilos son más potentes que el CSS. Podemos manejar cualquier

característica gráfica que te imagines, márgenes, espacios, colores, dimensiones y muchos

más.

Esto nos permitirá reutilizar los estilos en los diferentes controles y plantillas de la aplicación.

La mayor ventaja será el tiempo que nos ahorramos a la hora de cambiar el aspecto visual.

Windows Forms

Windows Forms es el predecesor de WPF. Esto le otorga cierta ventaja ya que se trata

de una librería madura, gracias al tiempo que lleva en desarrollo. Además, encontramos

multitud de librerías externas. WPF está creciendo mucho en la actualidad y prácticamente

encontramos las mismas librerías externas y muchas más nuevas que otorgan nuevas

funcionalidades a WPF, tanto en diseño como en prestaciones.

Aplicaciones web

Cada vez más, encontramos aplicaciones web como sustituto de aplicaciones de

escritorio, incluso aplicaciones embebidas. Esto otorga cierta ventaja con respecto a WPF,

son aplicaciones multiplataforma. La gran desventaja es la integración con el sistema

operativo. WPF tiene total compatibilidad en este aspecto.

Otra desventaja de las aplicaciones web es la necesidad de software externo como

puede ser un servidor web. Esto implica algo más de complejidad para los desarrolladores.

Patrón MVVM

Model-View-ViewModel (MVVM) es un patrón de diseño de aplicación para desacoplar

código UI y no UI. Con MVVM, usted define su UI de manera declarativa (por ejemplo,

usando XAML) y usa el marcado de enlace de datos para vincularlo a otras capas que

contienen datos y comandos de usuario. La infraestructura de enlace de datos proporciona un

acoplamiento flexible que mantiene la IU y los datos vinculados sincronizados y enruta todas

las entradas del usuario a los comandos apropiados.

El patrón MVVM organiza su código para que pueda cambiar partes individuales sin afectar

otras partes. Esto tiene muchos beneficios, que incluyen:

· Habilitación de un estilo de codificación iterativo y exploratorio.

· Simplificación de pruebas unitarias.

· Aprovechando mejor las herramientas de diseño como Expression Blend.

 · Colaboración del equipo de colaboración.

Por el contrario, una aplicación con una estructura más convencional utiliza el enlace

de datos solo para los controles de lista y texto, y responde a la entrada del usuario

manejando los eventos expuestos por los controles. Los controladores de eventos están

estrechamente acoplados a los controles y, por lo general, contienen código que manipula la

interfaz de usuario directamente. Esto hace que sea difícil o imposible reemplazar un control

sin tener que actualizar el código de manejo de eventos.

Capas de aplicaciones

Cuando se usa el patrón MVVM, una aplicación se divide en las siguientes capas:

· La capa de modelo incluye todo el código que implementa la lógica central de la

aplicación y define los tipos necesarios para modelar el dominio de la aplicación. Esta

capa es completamente independiente de las capas de vista y modelo de vista.

· La capa de vista define la IU mediante el marcado declarativo. El marcado de

enlace de datos define la conexión entre componentes específicos de la interfaz de usuario

y varios miembros del modelo de vista (y, a veces, modelo).

· La capa del modelo de vista proporciona objetivos de enlace de datos para la vista.

En muchos casos, el modelo de vista expone el modelo directamente o proporciona

miembros que envuelven miembros específicos del modelo. El modelo de vista también

puede definir miembros para realizar un seguimiento de los datos que son relevantes para

la IU pero no para el modelo, como el orden de visualización de una lista de elementos.

Creación de Proyecto WpfEntityDB

Primero crearemos las carpetas controles, models, vistas, viewmodel, las cuales nos van a

servir para la creación de nuestro proyecto wpf.

Carpeta Models: crearemos varias clases llamadas en nuestro caso Animal, Raza y Color las

cuales son necesarias en este caso

Clase Animal.cs

Clase Color.cs
Raza.cs
Carpeta Viewmodel:

AnimalViewmodel.cs
ColorVm.cs
RazaVm.cs
Mygration
Ejecucion de la Aplicacion
 Bibliografía

https://programarfacil.com/blog/programacion-net-blog/que-es-wpf/

https://docs.microsoft.com/en-us/previous-versions/windows/apps/jj883732(v=win.10)?
redirectedfrom=MSDN

https://blogs.msmvps.com/otelis/2009/02/25/introducci-243-n-al-uso-de-xaml-en-wpf/

https://docs.microsoft.com/es-es/dotnet/framework/wpf/getting-started/
 Recomendaciones

Principalmente vemos la respectiva necesidad de conocer cada día más el entorno.

Aprender de manera muy didáctica y autodidacta con una mayor dedicación, También es

necesario tener en cuenta que toda la implementación del código debe de estar bien

estructurado para así evitar redundancias innecesarias, conocer también las especificaciones

que nos presenta para realizar UI amigables y con más utilidad.

El Modelo debe de contener sólo la lógica de negocio, esto quiere decir que está

formado por las clases o entidades del sistema, como vamos a utilizar WPF debemos crear las

propiedades como Dependency Properties en los modelos, esto para realizar nuestros Binding

en las vistas.

Normalmente una DependencyProperty, además se pueden agregar métodos

OnPropertyChanged específicos para cada propiedad, sin embargo, generalmente sólo se

necesita que se notifique a la vista cualquier cambio en las propiedades, es por esto que se

puede realizar una clase padre que pase por parámetro el nombre de la propiedad, con esta

implementación los modelos heredan de esta clase y llaman el método OnPropertyChanged

en cada set.
 Conclusiones

● Como una respuesta corta WPF es una API para crear interfaces de usuario (UI) para

aplicaciones de escritorio con el framework .NET.

● Está destinado a proporcionar una API para crear interfaces de usuario enriquecidas y

sofisticadas para Windows.

● WPF permite crear interfaces de usuario utilizando un lenguaje de marcado llamado

XAML.

● Diseño dinámico

● Gráficos basados en vectores

● Gracias a la integración que nos ofrece WPF con el binding, es muy sencillo utilizar el

patrón de diseño MVC (Modelo Vista Controlador). Más concreto se utiliza una

variante que se llama MVVM (Model View-ViewModel) también utilizado por el más

que conocido framework de JavaScript AngularJS.

● Es una biblioteca más madura en cuanto a windows forms gracias al tiempo que lleva

en desarrollo

● Tiene poca integración con el sistema operativo pero tiene total compatibilidad.

● Así como Java tiene la API Swing en WPF tenemos las mismas ventajas e

inconvenientes que en windows forms pero añadiendo que tiene poca compatibilidad

con el sistema operativo.

● Es una de las mejores opciones para hacer aplicaciones de escritorio para windows.