SlideShare a Scribd company logo
1 of 40
INTERFACES CON MAS INTERACCIÓN
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
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
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
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
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
Que es la vista-modelo?
Toda la lógica de la aplicación
Llamadas a servicios web
Manejo de la información
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
gráficos
• WPF dentro de sus objetivos fundamentales es dotar a las
aplicaciones de una apariencia más atractiva.
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.
•Define los objetos usados para pintar objetos
gráficos. Las clases que derivan
de Brush describen cómo se pinta el área.
Clase brush
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
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.
Propiedad stretch
• Obtiene o establece un valor que describe cómo debería
ajustarse una Image para rellenar el rectángulo de destino.
Efecto gradiente
• Se aplica bajo la propiedad de LinearGradientBrush
Un LinearGradientBrush pinta un degradado a lo largo de
una línea.
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.
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.
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
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.
Grafica
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.
Grafica
Practica:
Creamos tres botones y los inicializamos con
algunas propiedades.
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.
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.
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
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
Los Trigger de datos
• Un disparador de datos realiza algunas acciones cuando los datos
satisface algunas condiciones.
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.

More Related Content

What's hot

What's hot (20)

Poo introduccion al patron mvc - renee morales calhua
Poo  introduccion al patron mvc - renee morales calhuaPoo  introduccion al patron mvc - renee morales calhua
Poo introduccion al patron mvc - renee morales calhua
 
Modelo, vista, controlador
Modelo, vista, controladorModelo, vista, controlador
Modelo, vista, controlador
 
Desarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on RailsDesarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on Rails
 
Modelo vista controlador
Modelo vista controladorModelo vista controlador
Modelo vista controlador
 
Servicios web
Servicios webServicios web
Servicios web
 
El patrón MVC
El patrón MVCEl patrón MVC
El patrón MVC
 
MODELO VISTA CONTROLADOR EN PHP
MODELO VISTA CONTROLADOR EN PHPMODELO VISTA CONTROLADOR EN PHP
MODELO VISTA CONTROLADOR EN PHP
 
Analisis del patron mvc
Analisis del patron mvcAnalisis del patron mvc
Analisis del patron mvc
 
MVC
MVCMVC
MVC
 
Aplicando Uwe - Un ejemplo didactico
Aplicando Uwe - Un ejemplo didacticoAplicando Uwe - Un ejemplo didactico
Aplicando Uwe - Un ejemplo didactico
 
Arquitectura Mvc
Arquitectura MvcArquitectura Mvc
Arquitectura Mvc
 
3-Unidad 1: Arquitectura de Diseño-1.2 Controlador-Introducción
3-Unidad 1: Arquitectura de Diseño-1.2 Controlador-Introducción3-Unidad 1: Arquitectura de Diseño-1.2 Controlador-Introducción
3-Unidad 1: Arquitectura de Diseño-1.2 Controlador-Introducción
 
Patrón MVC
Patrón MVCPatrón MVC
Patrón MVC
 
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
 
UWE
UWEUWE
UWE
 
Java frameworks
Java frameworksJava frameworks
Java frameworks
 
Ingenieria del software
Ingenieria del softwareIngenieria del software
Ingenieria del software
 
Asp
AspAsp
Asp
 
Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)
 
Arquitectura MVC
Arquitectura MVCArquitectura MVC
Arquitectura MVC
 

Similar to Presentacion wpf

Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontroladorRené Pilataxi
 
Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontroladorRené Pilataxi
 
MODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORMODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORRené Pilataxi
 
Modelo de analisis
Modelo de analisisModelo de analisis
Modelo de analisisLuis Fabian
 
Fundamentosbasicosdevisualbasic
FundamentosbasicosdevisualbasicFundamentosbasicosdevisualbasic
Fundamentosbasicosdevisualbasicunachi
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJSOscar Gensollen
 
Programar aplicaciones windows forms
Programar aplicaciones windows formsProgramar aplicaciones windows forms
Programar aplicaciones windows formsmellcv
 
Topicos Selectos de Xamarin
Topicos Selectos de XamarinTopicos Selectos de Xamarin
Topicos Selectos de XamarinLuis Beltran
 
Desarrollo de Software Orienta a Objetos
Desarrollo de Software Orienta a ObjetosDesarrollo de Software Orienta a Objetos
Desarrollo de Software Orienta a ObjetosDat@center S.A
 
Tutorial-StarUML.pdf
Tutorial-StarUML.pdfTutorial-StarUML.pdf
Tutorial-StarUML.pdfNone
 
Patrones de diseño II
Patrones de diseño IIPatrones de diseño II
Patrones de diseño IIkaolong
 
modulo tres capas redes tecnologia inter
modulo tres capas redes tecnologia intermodulo tres capas redes tecnologia inter
modulo tres capas redes tecnologia interssuser948499
 
Modelado de analisis para aplicaciones web
Modelado de analisis para aplicaciones webModelado de analisis para aplicaciones web
Modelado de analisis para aplicaciones webMaritzaD
 

Similar to Presentacion wpf (20)

Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontrolador
 
Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontrolador
 
MODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORMODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADOR
 
Modelo de analisis
Modelo de analisisModelo de analisis
Modelo de analisis
 
Fundamentosbasicosdevisualbasic
FundamentosbasicosdevisualbasicFundamentosbasicosdevisualbasic
Fundamentosbasicosdevisualbasic
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJS
 
Programar aplicaciones windows forms
Programar aplicaciones windows formsProgramar aplicaciones windows forms
Programar aplicaciones windows forms
 
Mis diapositivas uml
Mis diapositivas umlMis diapositivas uml
Mis diapositivas uml
 
Topicos Selectos de Xamarin
Topicos Selectos de XamarinTopicos Selectos de Xamarin
Topicos Selectos de Xamarin
 
Desarrollo de Software Orienta a Objetos
Desarrollo de Software Orienta a ObjetosDesarrollo de Software Orienta a Objetos
Desarrollo de Software Orienta a Objetos
 
S01-s1-MVC.pptx
S01-s1-MVC.pptxS01-s1-MVC.pptx
S01-s1-MVC.pptx
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
 
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0
 
ASP.NET
ASP.NETASP.NET
ASP.NET
 
Arquitectura de Software
Arquitectura de SoftwareArquitectura de Software
Arquitectura de Software
 
Tutorial-StarUML.pdf
Tutorial-StarUML.pdfTutorial-StarUML.pdf
Tutorial-StarUML.pdf
 
UML - Analisis de Sistemas
UML - Analisis de SistemasUML - Analisis de Sistemas
UML - Analisis de Sistemas
 
Patrones de diseño II
Patrones de diseño IIPatrones de diseño II
Patrones de diseño II
 
modulo tres capas redes tecnologia inter
modulo tres capas redes tecnologia intermodulo tres capas redes tecnologia inter
modulo tres capas redes tecnologia inter
 
Modelado de analisis para aplicaciones web
Modelado de analisis para aplicaciones webModelado de analisis para aplicaciones web
Modelado de analisis para aplicaciones web
 

Presentacion wpf

  • 1.
  • 2. INTERFACES CON MAS INTERACCIÓN
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 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
  • 11.
  • 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
  • 14.
  • 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
  • 16.
  • 17. Que es la vista-modelo? Toda la lógica de la aplicación Llamadas a servicios web Manejo de la información
  • 18.
  • 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.
  • 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.
  • 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.