Embed Size (px)
Citation preview
UNIVERSIDAD TECNOLÓGICA NACIONAL
INGENIERÍA EN SISTEMAS DE INFORMACIÓN
TECNOLOGÍA DE DESARROLLO DE SOFTWARE IDE
Microsoft Visual C#
Windows Presentation
Fundation
Autores:
Legajo Nombre y Apellido35138 Eric Bouvier34996 Lucas Alejandro Mast35087 Federico Tesone
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
ÍNDICE Windows Presentation Fundation................................................................................................3
Breve Introducción...................................................................................................................3Arquitectura WPF.....................................................................................................................4Código de lenguaje de marcado y código subyacente.............................................................5Controles WPF por función......................................................................................................5Diseño......................................................................................................................................6Enlace de datos (DataBinding).................................................................................................6Gráficos..................................................................................................................................10Animaciones...........................................................................................................................12Patrón de Diseño Model View ViewModel (MVVM)..............................................................15
Laboratorio Nº1 – Introducción a WPF.......................................................................................17Laboratorio Nº2 – Enlace de Datos (DataBinding)......................................................................22Laboratorio Nº3 – Gráficos y Animaciones.................................................................................27
Gráficos 3D.............................................................................................................................27Animaciones...........................................................................................................................30
Bibliografía.................................................................................................................................33
Bouvier - Mast - TesonePágina 2/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Windows Presentation Fundation
Breve Introducción
Windows Presentation Foundation (WPF) es un sistema de presentación para crear aplicaciones cliente de Windows que proporcionen una buena experiencia para el usuario desde el punto de vista visual.El núcleo de WPF es un motor de representación basado en vectores e independiente de la resolución que se crea para sacar partido del hardware de gráficos moderno. WPF extiende el núcleo con un conjunto completo de características de desarrollo de aplicaciones que incluye:
Extensible Application Markup Language (XAML). Controles. Enlace de datos (Laboratorio 2). Diseño. Gráficos 2-D y 3-D (Laboratorio 3). Animaciones (Laboratorio 3). Estilos. Plantillas. Documentos. Multimedia. Texto y tipografía.
WPF se incluye en Microsoft .NET Framework (desde la versión 3.5 en adelante), de modo que es posible compilar aplicaciones que incorporen otros elementos de la biblioteca de clases de .NET Framework.Se implementa con todas sus características con .NET Framework 4 en Visual Studio 2010, los cuales serán requisitos para desarrollar los laboratorios siguientes.
Bouvier - Mast - TesonePágina 3/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Arquitectura WPF
El modelo de programación primario de WPF se expone a través de código administrado, esto significa que el código de la aplicación no corre directamente sobre el sistema operativo del dispositivo, sino que en vez de ello, se apoya de un ambiente de ejecución para ser ejecutado. CLR (Common Languaje Runtime) proporciona varias características que pueden hacer el proceso más sólido y productivo (como son la administración de memoria, el control de errores, el sistema de tipos común, etc.).Los componentes principales de WPF se muestran en la ilustración siguiente. Las secciones rojas del diagrama (PresentationFramework, PresentationCore y milcore) son los componentes principales del código de WPF. De éstos, sólo uno es un componente no administrado, milcore. Milcore se ha escrito en código no administrado para conseguir una estrecha integración con DirectX. La visualización en WPF se realiza a través del motor de DirectX, lo que permite una presentación eficaz mediante hardware y software.WPF también requirió un control preciso sobre la memoria y la ejecución. El motor de composición de milcore es sumamente sensible al rendimiento, y requirió renunciar a muchas de las ventajas de CLR para obtener mejoras en el rendimiento.
Bouvier - Mast - TesonePágina 4/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Código de lenguaje de marcado y código subyacente
WPF proporciona mejoras de programación adicionales para el desarrollo de aplicaciones cliente de Windows. Una mejora evidente es la capacidad para programar una aplicación mediante código de lenguaje marcado y subyacente, una experiencia con la que resultará familiar a los programadores de ASP.NET. En general, se utiliza el lenguaje marcado Extensible Application Markup Language (XAML) para implementar la apariencia de una aplicación, y los lenguajes de programación administrados (subyacentes) para implementar su comportamiento. Esta separación entre la apariencia y el comportamiento aporta las ventajas siguientes:
Se reducen los costos de programación y mantenimiento, al no estar el marcado específico de la apariencia estrechamente relacionado con el código específico del comportamiento.
La programación es más eficaz porque los diseñadores pueden implementar la apariencia de una aplicación al mismo tiempo que los programadores implementan su comportamiento.
Se pueden usar varias herramientas de diseño para implementar y compartir el marcado XAML, a fin de responder a los requisitos de quienes colaboran en la programación de aplicaciones; Microsoft Expression Blend proporciona una experiencia apropiada para los diseñadores, mientras que Visual Studio está dirigido a los programadores.
La globalización y localización de las aplicaciones WPF se ha simplificado en gran medida.
Controles WPF por funciónA continuación se muestra la lista de controles WPF integrados.
Botones: Button y RepeatButton. Pantalla de los Datos: DataGrid (Nuevo), ListView y TreeView. Pantalla de la fecha y Selección: Calendar (Nuevo) y DatePicker (Nuevo). Cuadros de diálogo: OpenFileDialog, PrintDialog y SaveFileDialog. Entradas de lápiz digitales: InkCanvas y InkPresenter. Documentos: DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, Fl
owDocumentScrollViewer y StickyNoteControl. Entrada: TextBox, RichTextBox y PasswordBox. Diseño: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSpl
itter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel,Thumb, Viewbox, VirtualizingStackPanel, Window y WrapPanel.
Multimedia: Image, MediaElement y SoundPlayerAction. Menús: ContextMenu, Menu y ToolBar. Navegación: Frame, Hyperlink, Page, NavigationWindow y TabControl. Selección: CheckBox, ComboBox, ListBox, RadioButtony Slider. Información para el
usuario: AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock y ToolTip.
Bouvier - Mast - TesonePágina 5/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Diseño
Al crear una UI, se organizan los controles según su ubicación y tamaño para crear un diseño. Un requisito fundamental de cualquier diseño es adaptarse a los cambios de tamaño de la ventana y de configuración de pantalla.La piedra angular del sistema de diseño es la situación relativa, que aumenta la capacidad de adaptación a los cambios en la configuración de las ventanas y de la pantalla. Además, el sistema de diseño administra la negociación entre los controles para determinar el diseño. La negociación es un proceso de dos pasos: en primer lugar, el control indica a su elemento primario qué ubicación y tamaño necesita; en segundo lugar, el elemento primario indica al control de qué espacio dispone.
El sistema del diseño se expone a los controles secundarios a través de las clases WPF base. Para los diseños comunes como cuadrículas, apilamiento y acoplamiento, WPF incluye varios controles de diseño:
Canvas : los controles secundarios proporcionan su propio diseño. DockPanel : los controles secundarios se alinean con los bordes del panel. Grid : los controles secundarios se sitúan por filas y columnas. StackPanel : los controles secundarios se apilan vertical u horizontalmente. VirtualizingStackPanel : los controles secundarios se organizan en una vista "virtual" de
una sola línea en sentido horizontal o vertical. WrapPanel : los controles secundarios se sitúan por orden de izquierda a derecha y se
ajustan a la línea siguiente cuando hay más controles de los que caben en la línea actual.
Enlace de datos (DataBinding)
El enlace de datos de Windows Presentation Foundation (WPF) proporciona un método simple y coherente para que las aplicaciones presenten e interactúen con datos. Los elementos se pueden enlazar a los datos de diversos orígenes de datos en forma de objetos common language runtime (CLR) y XML.
Los objetos controles tienen funciones integradas que permiten definir de forma flexible elementos de datos individuales o colecciones de elementos de datos.A partir de estos datos se pueden generar vistas de ordenación, filtro y agrupación.
La funcionalidad de enlace de datos de WPF presenta varias ventajas con respecto a los modelos tradicionales:
Un mayor número de propiedades que admiten de forma inherente el enlace de datos. Una representación flexible de los datos en la UI. La separación bien definida de la lógica del negocio de la UI.
¿Qué es?El enlace de datos es el proceso que establece una conexión entre la UI de la aplicación y la lógica del negocio. Si el enlace está correctamente configurado y los datos proporcionan las notificaciones adecuadas, cuando los datos cambian su valor, los elementos que están enlazados a ellos reflejan los cambios automáticamente.Por ejemplo, si el usuario modifica el valor en un elemento TextBox, el valor de los datos subyacentes se actualiza automáticamente para reflejar ese cambio.
Bouvier - Mast - TesonePágina 6/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Independientemente del elemento que se vaya a enlazar y de la naturaleza del origen de datos, cada enlace sigue siempre el modelo que se muestra en la ilustración siguiente:
El enlace de datos es esencialmente el puente entre el destino del enlace y el origen del enlace. En la ilustración se muestran los siguientes conceptos fundamentales del enlace de datos de WPF:
Normalmente, cada enlace tiene estos cuatro componentes: un objeto de destino del enlace, una propiedad de destino, un origen del enlace y una ruta de acceso al valor en el origen del enlace que se va a usar. Por ejemplo, si desea enlazar el contenido de TextBox a la propiedad Nombre de un objeto Empleado, su objeto de destino es TextBox, la propiedad de destino es la propiedad Text, el valor que se va a utilizar es Nombre y el objeto de origen es el objeto Empleado.
La propiedad de destino debe ser una propiedad de dependencia. La mayoría de las propiedades UIElement son propiedades de dependencia y la mayoría de las propiedades de dependencia, excepto las de sólo lectura, admiten el enlace de datos de forma predeterminada.
El enlace de datos de WPF admite datos en forma de objetos CLR y XML
Dirección del flujo de datos
El flujo de datos de un enlace puede ir desde el destino del enlace al origen del enlace (por ejemplo, el valor de origen cambia cuando un usuario modifica el valor de TextBox) o desde el origen del enlace al destino del enlace (por ejemplo, el contenido de TextBox se actualiza con los cambios en el origen del enlace) si el origen del enlace proporciona las notificaciones correspondientes.
Tal vez se desee que la aplicación permita que los usuarios cambien los datos y los propaguen al objeto de origen. O tal vez no se desee permitir que los usuarios actualicen los datos de origen. Se suele controlar este comportamiento estableciendo la propiedad Mode del objeto Binding. En la ilustración siguiente se muestran los tipos diferentes de flujo de datos:
Bouvier - Mast - TesonePágina 7/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
El enlace OneWay permite que los cambios en la propiedad de origen actualicen automáticamente la propiedad de destino, pero los cambios en la propiedad de destino no se propagan de nuevo a la propiedad de origen. Este tipo de enlace es adecuado si el control que se va a enlazar es de sólo lectura de forma implícita. Si no hay necesidad de supervisar los cambios de la propiedad de destino, con el modo de enlace OneWay evitará el trabajo adicional que supone usar el modo de enlace TwoWay.
El enlace TwoWay permite que los cambios realizados en la propiedad de origen o en la de destino se actualicen automáticamente en el otro. Este tipo de enlace es adecuado para formularios modificables u otros escenarios de UI totalmente interactivos. La mayoría de las propiedades tienen el enlace OneWay de forma predeterminada, pero algunas propiedades de dependencia (normalmente las propiedades de controles modificables por el usuario como la propiedad Text de TextBox y la propiedad IsChecked de CheckBox) tienen el enlace TwoWay de manera predeterminada.
OneWayToSource es el enlace inverso de OneWay; actualiza la propiedad de origen cuando cambia la propiedad de destino. Podría utilizar este tipo de enlace si, por ejemplo, sólo necesita volver a evaluar el valor de origen de la UI.
El enlace OneTime, no mostrado en la ilustración, permite que la propiedad de origen inicialice la propiedad de destino, pero los demás cambios no se propagan. Esto significa que si el contexto de los datos sufre un cambio o el objeto en los cambios de contexto de datos, a continuación, el cambio no se refleja en la propiedad de destino. Se trata básicamente de una forma más fácil de enlace OneWay que proporciona un mejor rendimiento en los casos en los que no cambia el valor de origen.
Importante: Observe que para detectar los cambios en el origen (aplicables a los enlaces OneWay y TwoWay), el origen debe implementar un mecanismo apropiado de notificación de cambios de propiedades, como INotifyPropertyChanged. Puede ver: Cómo: Implementar la notificación de cambio de propiedad para obtener un ejemplo de implementación de INotifyPropertyChanged.
Bouvier - Mast - TesonePágina 8/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
¿Qué desencadena la actualización del origen?
Los enlaces TwoWay u OneWayToSource realizan escuchas para detectar los cambios en la propiedad de destino y los propagan de nuevo al origen. Esto se conoce como la actualización del origen. Por ejemplo, puede modificar el texto de un control TextBox para cambiar el valor de origen subyacente. Pero ¿se actualizará su valor de origen mientras modifica el texto o después de modificarlo y sacar el mouse fuera del control TextBox? La propiedad UpdateSourceTrigger del enlace determina qué desencadena la actualización del origen.
Los puntos de las flechas que van hacia la derecha en la ilustración siguiente muestran la función de la propiedad UpdateSourceTrigger:
Si el valor de UpdateSourceTrigger es PropertyChanged, el valor al que apunta la fecha derecha del enlace TwoWay u OneWayToSource se actualizará en cuanto cambie la propiedad de destino. Sin embargo, si el valor de UpdateSourceTrigger es LostFocus (valor por defecto), ese valor sólo se actualizará con el nuevo valor cuando la propiedad de destino pierda el foco.
Bouvier - Mast - TesonePágina 9/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Gráficos
El contenido de los gráficos 3-D de WPF se encapsula en un elemento, Viewport3D, que puede participar en la estructura de elementos bidimensionales. El sistema de gráficos trata los objetos Viewport3D como elementos visuales bidimensionales, al igual que ocurre con muchos otros elementos de WPF. Viewport3D funciona como una ventana de una escena tridimensional. Expresado de modo más preciso, es la superficie sobre la que se proyecta una escena 3-D.
El sistema de coordenadas de WPF para gráficos 2-D localiza el origen en la parte superior izquierda del área de representación (que suele ser la pantalla). En el sistema 2-D, los valores positivos del eje X se extienden hacia la derecha, y los valores positivos del eje Y extienden hacia abajo. En el sistema de coordenadas 3-D, sin embargo, el origen se encuentra en el centro del área de representación, los valores positivos del eje X se extienden hacia la derecha, los valores positivos del eje Y se extienden hacia arriba (no hacia abajo) y los valores positivos del eje Z se extienden hacia el exterior partiendo del origen, es decir, hacia el espectador.
Los programadores que trabajan en 2-D están acostumbrados a colocar los elementos de dibujo primitivos en una pantalla bidimensional. Al crear una escena 3-D, es importante recordar que, en realidad, se está creando una representación 2-D de los objetos 3-D. Dado que una escena 3-D tiene un aspecto diferente dependiendo del punto de vista del espectador, debe especificar ese punto de vista. La clase Camera permite especificar este punto de vista para una escena 3-D.
Bouvier - Mast - TesonePágina 10/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Elementos primitivos y modelos de malla (mesh) en objetos 3-D.
Model3D es la clase base abstracta que representa un objeto 3-D genérico. En la actualidad, WPF permite geometrías de modelado con GeometryModel3D. La propiedad Geometry de este modelo acepta un elemento primitivo de malla.
El sistema 3-D proporciona elementos primitivos modelados a partir de la figura cerrada más simple: un triángulo definido por tres vértices. Dado que los tres puntos de un triángulo son coplanares, puede seguir agregando triángulos para modelar formas más complejas, denominadas mallas.
El sistema 3-D de WPF proporciona actualmente la clase MeshGeometry3D, que permite especificar cualquier geometría; en este momento, no admite elementos 3-D primitivos predefinidos, tales como esferas o formas cúbicas. Se debe empezar por crearMeshGeometry3D especificando una lista de vértices de triángulos como su propiedad Positions.
WPF necesita información sobre qué triángulos comparten qué vértices para dibujar la malla correctamente. Esta información se proporciona especificando una lista de índices de triángulos con la propiedad TriangleIndices.
Aplicar materiales al modelo 3-D
En 2-D, se utiliza la clase Brush para aplicar colores, patrones, degradados y otro contenido visual a las áreas de la pantalla. El aspecto de los objetos 3-D, sin embargo, depende del modelo de iluminación, no sólo del color o del patrón que se les aplica. Los objetos reales reflejan luz de manera distinta según la calidad de su superficie. Para definir las características de la superficie de un modelo, WPF utiliza la clase abstracta Material.
DiffuseMaterial especifica que el pincel se aplicará al modelo como si estuviera iluminado con una luz difusa.
SpecularMaterial especifica que el pincel se aplicará al modelo como si la superficie del modelo fuese dura o brillante, capaz de reflejar la iluminación.
EmissiveMaterial permite especificar que la textura se aplicará como si el modelo estuviera emitiendo luz del mismo color que el pincel.
Bouvier - Mast - TesonePágina 11/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Iluminar los objetos 3-D
Las luces de los gráficos 3-D hacen lo mismo que las luces en el mundo real: permiten ver las superficies. Se debe incluir por lo menos una luz en la escena, pues de lo contrario no habrá ningún modelo visible.
Las luces siguientes se derivan de la clase base Light:
AmbientLight : proporciona iluminación de ambiente que ilumina uniformemente todos los objetos sin tener en cuenta su ubicación u orientación.
DirectionalLight : ilumina como una fuente de luz distante. Las luces direccionales tienen Direction, que se especifica como Vector3D, pero ninguna ubicación concreta.
PointLight : ilumina como una fuente de luz cercana. Las luces puntuales tienen posición y emiten la luz desde esa posición.
SpotLight : hereda de PointLight. Los focos de luz iluminan como las luces puntuales, y tienen posición y dirección. Proyectan la luz en un área cónica.
Las luces son objetos Model3D, por lo que puede transformar y animar las propiedades de la luz, incluidas su posición, posición, color, dirección y alcance.
Animaciones
Una animación es una ilusión que se crea mediante el cambio rápido entre una serie de imágenes, cada una de las cuales es ligeramente diferente de la anterior. El cerebro percibe el grupo de imágenes como una sola escena cambiante. En las películas, esta efecto se obtiene mediante el uso de cámaras que graban muchas fotografías, o fotogramas, cada segundo. Cuando los fotogramas se reproducen en un proyector, la audiencia ve una imagen en movimiento.La animación en un equipo es similar. Por ejemplo, un programa que hace que un dibujo de un rectángulo se desvanezca hasta desaparecer de la vista podría funcionar de la siguiente manera:
El programa crea un temporizador. El programa comprueba el temporizador en los intervalos establecidos para ver cuánto
tiempo ha transcurrido. Cada vez que el programa comprueba el temporizador, calcula el valor de opacidad
actual del rectángulo en función del tiempo que ha transcurrido. Después, el programa actualiza el rectángulo con el nuevo valor y lo redibuja.
WPF incluye un sistema de control de tiempo eficaz que se expone a través del código administrado y del Extensible Application Markup Language (XAML) que se integra perfectamente en el marco de WPF. La animación WPF facilita la animación de controles y otros objetos gráficos.WPF controla todo el trabajo de administración del sistema de temporización y de actualización de la pantalla que se produce en segundo plano. Proporciona clases de temporización que permiten centrarse en los efectos que se desea crear, en lugar de la mecánica para lograr esos efectos. WPF también facilita la creación de sus propias animaciones exponiendo clases base de animación de las que se pueden heredar sus clases, para generar
Bouvier - Mast - TesonePágina 12/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
animaciones personalizadas. Estas animaciones personalizadas se benefician de la mayoría de las ventajas de rendimiento de las clases de animación estándar.Transformaciones
Al crear modelos, éstos tienen una ubicación determinada en la escena. Para mover esos modelos por la escena, girarlos o cambiar su tamaño, no es práctico para cambiar los vértices que definen los propios modelos. En lugar de ello, al igual que en 2-D, se aplican transformaciones a los modelos.Cada objeto de modelo tiene una propiedad Transform con la que puede mover, reorientar o cambiar el tamaño del modelo. Al aplicar una transformación, en realidad lo que se hace es desplazar todos los puntos del modelo según un vector o valor especificado por la transformación.
Windows Presentation Foundation (WPF) proporciona las siguientes clases Transform 2-D para las operaciones comunes de transformación:
RotateTransform: Gira un elemento el valor de Angle especificado. ScaleTransform: Escala (incrementa o disminuye el tamaño) un elemento usando los
valores de ScaleX y ScaleY especificados. SkewTransform: Sesga un elemento los valores de AngleX y AngleY especificados. TranslateTransform: Mueve (traslada) un elemento los valores de X y Y especificados.
Las transformaciones 3D heredan de la clase base abstracta Transform3D; se incluyen las clases de transformaciones afines TranslateTransform3D, ScaleTransform3D y RotateTransform3D. El sistema 3D de WPF también proporciona una clase MatrixTransform3D que permite especificar las mismas transformaciones en operaciones de matrices más precisas.
Animar los gráficos
Es posible animar directamente las propiedades de los elementos primitivos, pero suele ser más fácil animar las transformaciones que cambian la posición o el aspecto de los modelos.
Para animar un objeto en WPF, se crea una escala de tiempo, se define una animación (que, en realidad, es un cambio de algún valor de propiedad a lo largo del tiempo) y se especifica la propiedad a la que aplicar la animación.
Animaciones From/To/By
Entre otros tipos de animaciones, estas son las animaciones básicas y se describirán a continuación:Los nombres de las animaciones From/To/By se ajustan a la siguiente convención de nombres:
<Tipo>Animation
Donde <Tipo> es el nombre del tipo de la propiedad que se desea animar.
Esta animación conocida como animación "From/To/By", es una animación que ocurre entre dos valores inicio y final y va incrementando con un valor de incremento el valor de inicio. De este modo con este tipo de animaciones es posible generar una transición entre un valor inicial y un valor final en el intervalo de tiempo en que ocurre la animación especificado mediante la propiedad Duration.
Bouvier - Mast - TesonePágina 13/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Tiene una propiedad From con la que se especifica el valor inicio y una propiedad To para especificar el valor final.
En lugar de la propiedad To se puede usar una propiedad By con la que se indica que el valor final para la animación será igual a la suma del inicial más el que se le asigne a la propiedad By. Las propiedades To y By son excluyentes, en caso de que explícitamente se les de valor a ambas, By será ignorado.
Para comenzar lo primero que tenemos que hacer es inicializar un StoryBoard (conjunto de imágenes o animaciones en secuencia) para ello utilizamos BeginStoryBoard, este lo podemos usar tanto con un Trigger o un EventTrigger. Los EventTrigger definen tres propiedades fundamentales:
SourceName de tipo string que se refiere al nombre del elemento (que se le asocia al elemento con la propiedad Name o x:Name) sobre el que se trabaja. En la práctica la mayoría de las veces no es necesario especificar valor a esta propiedad, es definida por el propio contexto del EventTrigger.
La propiedad RoutedEvent contiene el nombre del evento que provocará el “desencadenado” de las acciones definidas en el EventTrigger.
Actions es la propiedad que define el conjunto de acciones a desencadenar cuando ocurra el evento especificado como condición del EventTrigger. La propiedad Actions es una colección de objetos TriggerAction. La clase derivada de TriggerAction en WPF más importante es quizás BeginStoryBoard.
A diferencia de los Trigger y DataTrigger, los EventTrigger no tienen concepto de terminación. El conjunto de acciones se desencadena cuando ocurre el evento y las propiedades que se modifiquen no retoman implícitamente el valor anterior porque no hay concepto de que el evento se acabó.
La propiedad TargetProperty indica que propiedad del objeto se va a controlar.Para finalizar le pasamos los valores a modificar (con From y To), luego defino el tiempo que deseo que dure la animación, este está representado con el formato de días:horas:segundos.
Bouvier - Mast - TesonePágina 14/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Patrón de Diseño Model View ViewModel (MVVM)
El patrón de diseño Modelo Vista VistaModelo es usado por las tecnologías Windows Presentation Foundation, Silverlight y Moonlight. Es un patrón de interfaz de usuario como lo son Modelo Vista Controlador o Modelo Vista Presentación.
El patrón MVVM se compone de 3 elementos:
El Modelo es la entidad que representa el concepto de negocio, puede ser cualquier cosa desde una entidad usuario hasta una entidad compleja de almacenaje (que contiene a su vez otras entidades).La clave para recordar el modelo es que contiene la información, pero no las acciones o servicios que la manipulan.
La Vista es la representación gráfica del control o un conjunto de controles que muestran el Modelo de datos en pantalla. Una vista puede ser desde una ventana de WPF, una página con Silverlight o una plantilla de un control de datos en XAML. La Vista es un observador (Observer) de la VistaModelo, tan pronto cambie la VistaModelo la interfaz de usuario se actualiza, para esto debe implementar el interfaz INotifyPropertyChanged e implementar el evento PropertyChanged, es decir, que no es responsable de llevar cuenta de su estado, el modelo de vista se encarga de ello y mantiene la vista al tanto de los cambios.
La VistaModelo es la que une todo. Contiene la lógica del interfaz de usuario, los comandos, los eventos y una referencia al Modelo. En MVVM, la VistaModelo no se encarga de actualizar los datos mostrados por el interfaz de usuario.Mantiene al modelo separado y protegido de los minuciosos detalles de la vista. Por eso es que el modelo de vista es la pieza clave del trío. Esta separación permite que el modelo se limite a contener los datos, en vez de verse obligado a saber la forma en que se presenta una fecha al usuario y tener que hacer la conversión de formato.El modelo de vista también hace disponibles métodos, comandos y otros puntos de acceso que ayudan a mantener el estado de la vista, manipular el modelo en respuesta a acciones de la vista y disparar eventos en la misma.
Bouvier - Mast - TesonePágina 15/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Características
La vista y el modelo de vista se comunican mediante enlaces de datos, métodos, propiedades, eventos y mensajes.
El modelo de vista expone propiedades (tal como información sobre el estado de la vista, p.ej. el indicador de “ocupado”) y comandos además de modelos.
La vista se encarga de sus propios eventos relacionados con la interface al usuario y los pasa al modelo de vista mediante comandos.
Los modelos y propiedades en el modelo de vista son actualizados desde la vista usando enlaces de datos bidireccionales.
¿Cuáles son los beneficios del patrón MVVM?
Separación de vista / presentación : mediante la separación de la vista (XAML) de la lógica de presentación podemos separar los roles de diseñador y desarrollador.
Permite las pruebas unitarias : como la lógica de presentación está separada de la vista, podemos realizar pruebas unitarias sobre la VistaModelo.
Mejora la reutilización de código : como la lógica de presentación está separada en componentes (clases) de las vistas (XAML) se puede combinar fácilmente utilizando herencia y composición como queramos igual que si se tratase de una clase estándar.
Soporte para manejar datos en tiempo de diseño : podemos ver como la interface de usuario se “bindea” en tiempo de diseño, pudiendo realizar pruebas de integrar datos de ejemplo y simular un escenario de “binding”.
Múltiples vistas : la VistaModelo puede ser presentada en múltiples vistas, dependiendo del rol del usuario por ejemplo.
Bouvier - Mast - TesonePágina 16/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Laboratorio Nº1 – Introducción a WPF
Objetivos: Crear su primera aplicación WPF, y familiarizarse con la nueva forma de desarrollo. Crear una ventana WPF con un botón que muestre un cartel cuando se ejecuta el
evento Click.
Duración aproximada: 15 minutos.
Pasos:
1) Ingresar a Microsoft Visual Studio 2010 y abrir un nuevo proyecto de tipo Aplicación WPF (Archivo Nuevo Proyecto Aplicación WPF) e ingresar los siguientes datos:
Nombre: Lab01WPF. Nombre de la Solución: Lab01WPF. Crear directorio para la solución: Dejar Tildado.
Asegurarse que se encuentre seleccionado el lenguaje de programación Visual C#.
Presione Aceptar.
Bouvier - Mast - TesonePágina 17/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
2) Hecho el punto anterior. Se abrirán dos pestañas: MainWindow.xaml: la cual contiene la vista de diseño de la ventana WPF y el
código XAML. Vista de Diseño:
Código XAML:
<Window x:Class="Lab01WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid></Window>
La ventana WPF, por defecto contiene un Grid que posicionará a los controles de su interior en filas y columnas.
Bouvier - Mast - TesonePágina 18/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
MainWindow.xaml.cs: contiene el “Code Behind”, el cual otorgará la funcionalidad al sistema.
Ahora, desde el explorador de soluciones, cambiar el nombre de la ventana WPF a Lab01:
Bouvier - Mast - TesonePágina 19/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
3) Procederemos a cambiarle el nombre y el tamaño a la ventana WPF, para eso iremos a nuestro código XAML (también se puede hacer desde la barra de herramientas Propiedades en la vista de diseño), y cambiaremos las propiedades:
o Title="Ventana con Botón"o Height="100"o Width="250"
<Window x:Class="Lab01WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ventana con Botón" Height="100" Width="250"> <Grid> </Grid></Window>
4) Desde la vista de diseño: Eliminamos el grid. Abrimos el cuadro de herramientas (CTRL + W, X o Ver Cuadro de
Herramientas) y arrastramos el control Button a nuestra ventana.El código XAML se verá así:
<Window x:Class="Lab01WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ventana con Botón" Height="100" Width="250"> <Button Content="Button" Height="23" Name="button1" Width="75" /></Window>
5) Desde el código XAML: Eliminaremos las propiedades Height y Width de nuestro botón, con esto, el
mismo se adaptará al tamaño de la ventana. Cambiamos las propiedades:
o Name: btnWPFo Content: Clickeame!
<Window x:Class="Lab01WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Ventana con Botón" Height="100" Width="250"> <Button Content="Clickeame!" Name="btnWPF" /></Window>
Observación: Puesto que XAML se basa en XML, la UI que se crea con este lenguaje se ensambla en una jerarquía de elementos anidados que se denomina árbol de elementos. El árbol de elementos proporciona una manera lógica e intuitiva de crear y administrar las UIs.
Bouvier - Mast - TesonePágina 20/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
6) Ahora trabajaremos con el código subyacente o Code Behind, para otorgarle funcionalidad al sistema e interacción con el usuario.Para esto, haremos doble click sobre nuestro botón, el cual, automáticamente creará el evento Click del Botón. En el código subyacente (Lab01.xaml.cs):
private void btnWPF_Click(object sender, RoutedEventArgs e) {
} Dentro de este método, escribiremos la funcionalidad que deberá proveer el sistema cuando el usuario realice un click sobre el botón.Simplemente, haremos que se muestre un mensaje, para esto, utilizaremos el objeto MessageBox y su método Show con un argumento tipo string.
private void btnWPF_Click(object sender, RoutedEventArgs e) { MessageBox.Show("¡Felicitaciones!, creaste una aplicación WPF"); }
7) Desde el código XAML, agregaremos la propiedad de la ventana
WindowStartupLocation con el valor CenterScreen, para que la misma se posicione en el centro de la pantalla cuando es ejecutada.
<Window x:Class="Lab01WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ventana con Botón" Height="100" Width="250" WindowStartupLocation="CenterScreen">
<Button Content="Clickeame!" Name="btnWPF" Click="btnWPF_Click" /></Window>
8) IMPORTANTE: Para que cuando se ejecuta la solución, la misma se inicialice con ventana creada, se debe indicar que la misma es la ventana de inicio, en la clase App.xaml, seteando la propiedad StartupUri a Lab01.xaml
StartupUri="Lab01.xaml"
9) Ejecutamos nuestro proyecto, presionando F5, y controlamos que nos se produzcan errores.
Bouvier - Mast - TesonePágina 21/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Laboratorio Nº2 – Enlace de Datos (DataBinding)
Objetivos: Entender los conceptos básicos de enlace de datos y aplicarlos a un caso sencillo.
Prerrequisitos: Haber realizado el Laboratorio Nº1 – Introducción a WPF.
Duración aproximada: 25 minutos.
Pasos:
1) Ingresar a Microsoft Visual Studio 2010 y abrir un nuevo proyecto de tipo Aplicación WPF (Archivo Nuevo Proyecto Aplicación WPF) e ingresar los siguientes datos:
Nombre: Lab02WPF. Nombre de la Solución: Lab02WPF. Crear directorio para la solución: Dejar Tildado.
Asegurarse que se encuentre seleccionado el lenguaje de programación Visual C#.Presionar Aceptar.
2) Cambiar el nombre de la clase MainWindow.xaml a Window1.xaml.3) Setear la propiedad StartupUri del archivo App.xaml a Window1.xaml.4) Desde el explorador de soluciones, hacer click derecho al proyecto y agregar una
nueva clase llamada Persona(Agregar Clase).
Bouvier - Mast - TesonePágina 22/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
5) Seleccionar Clase de Visual C# y Llamarla Persona
6) En la clase persona, definiremos atributos y propiedades, mediante el siguiente código:
string name = "Sin nombre";
public string Name { get { return name; } set { name = value; } }
Además definiremos a ésta clase como pública.
7) En la clase Lab02.xaml, en la vista de diseño, agregaremos un canvas con dos textbox y un label, o podemos copiar el siguiente código XAML:
<Window x:Class="Lab02WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Enlace de Datos" Height="134" Width="260"> <Canvas Height="86" Name="cvsEnlace" Width="220">
<TextBox Canvas.Left="80" Canvas.Top="20" Height="23" Name="txtNombre" Width="130"/><Label Canvas.Left="18" Canvas.Top="17" Content="Nombre: " Height="28" Name="lblNombre"/><TextBox Canvas.Left="80" Canvas.Top="51" Height="23" Name="textBox1" Width="130" />
</Canvas></Window>
Observación: El textbox textbox1 no tiene funcionalidad, sino que está agregado a fines prácticos, para poder visualizar una propiedad del DataBinding que se explicará en el punto 11.
8) Agregamos al textbox la propiedad Text que se enlazará con la propiedad Name de la clase persona, mediante el siguiente código:
Text="{Binding Path=Name}"
Bouvier - Mast - TesonePágina 23/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Recordamos que la propiedad Text de un TextBox, es de modo TwoWay de manera predeterminada, por lo tanto, automáticamente se verán reflejados los cambios en la propiedad Text del TextBox cuando se modifica la propiedad Name del Objeto Persona y viceversa.
9) Para finalizar, este enlace de datos, obviamente es necesario instanciar un objeto de la clase Persona, y asignarlo como DataContext de la ventana Lab02. El DataContext obtiene o establece el contexto de datos para un elemento cuando participa en un enlace de datos. Para ello, en el código subyacente Lab02.xaml.cs introduciremos el siguiente código:
//Instanciamos un objeto Persona Persona oPersona = new Persona();
//Lo definimos como DataContext de la ventana Window1 this.DataContext = oPersona;
10) Presionamos F5 para ejecutar la aplicación y controlamos que no se produzcan errores.Se visualizará que el TextBox mostrará el contenido de la propiedad Name del objeto persona.
11) El tiempo de las actualizaciones de DataBinding por defecto es LostFocus( ), es decir, El valor predeterminado de UpdateSourceTrigger de la propiedad TextBox.Text es LostFocus.Esto significa que si una aplicación tiene un objeto TextBox con una propiedad TextBox.Text enlazada a datos, el siguiente texto que se escriba en TextBox no actualizará el origen de enlace hasta que TextBox pierda el foco (por eso se colocó el textbox 1, que recibirá el foco cuando se presione TAB).
Esta propiedad del enlace de datos se mostrará de la siguiente manera:Crearemos otra ventana WPF y la llamaremos Window2.(Agregar Ventana WPF).
Y le pegaremos el siguiente código xaml:Bouvier - Mast - Tesone
Página 24/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
<Window x:Class="Lab02WPF.Window2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window2" Height="90" Width="400"> <Canvas Height="46" Name="cvsEnlace" Width="368">
<TextBox Canvas.Left="193" Canvas.Top="12" Height="23" Name="txtNombre" Width="163">
<TextBox.Text> <Binding Path="Name"> </Binding> </TextBox.Text> </TextBox>
<Label Canvas.Left="0" Canvas.Top="10" Content="Nombre ingresado en Window1: " Height="30" Name="lblNombre"/>
</Canvas></Window>
En el code behind de Windows2 (Window2.xaml.cs), redefiniremos el constructor de la siguiente manera:
public Window2(Persona oPersona){ InitializeComponent();
//Lo definimos como DataContext de la ventana Window2 this.DataContext = oPersona;}
Y en el code behind de Windows1 (Window1.xaml.cs) agregaremos las siguientes líneas de código: Window2 oWin = new Window2(oPersona); oWin.Show();
Lo que hemos hecho con el anterior código es que Window2 posea el mismo DataContext que Window1, pasándoselo como parámetro.
Entonces, si se cambia el nombre ingresado, solo se verá reflejado el cambio en el segundo TextBox, cuando el primero pierde el foco, lo puede probar presionando TAB o haciendo click sobre el segundo TextBox.
12) Ahora, si desea que el origen se actualice a medida que se escribe, debe establecer la propiedad UpdateSourceTrigger del enlace en PropertyChanged. En el ejemplo siguiente, las propiedades Text de los TextBox están enlazadas a la misma propiedad de origen. La propiedad UpdateSourceTrigger del enlace de TextBox está establecida enPropertyChanged.Entonces agregaremos:
UpdateSourceTrigger="PropertyChanged"
Dentro de la Propiedad TextBox.Text, entonces los cambios en el segundo TextBox, se verán instantáneamente ya que la propiedad Name de oPersona también lo hace. Los códigos xaml quedarían de la siguiente manera:Window1.xaml:
<Window x:Class="Lab02WPF.MainWindow"
Bouvier - Mast - TesonePágina 25/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Enlace de Datos" Height="134" Width="260"> <Canvas Height="86" Name="cvsEnlace" Width="220">
<TextBox Canvas.Left="80" Canvas.Top="20" Height="23" Name="txtNombre" Width="130">
<TextBox.Text> <Binding Path="Name" UpdateSourceTrigger="PropertyChanged"> </Binding> </TextBox.Text> </TextBox>
<Label Canvas.Left="18" Canvas.Top="17" Content="Nombre: " Height="28" Name="lblNombre"/><TextBox Canvas.Left="80" Canvas.Top="51" Height="23" Name="textBox1" Width="130" />
</Canvas></Window>
Window2.xaml:
<Window x:Class="Lab02WPF.Window2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window2" Height="90" Width="400"> <Canvas Height="46" Name="cvsEnlace" Width="368">
<TextBox Canvas.Left="193" Canvas.Top="12" Height="23" Name="txtNombre" Width="163">
<TextBox.Text> <Binding Path="Name" UpdateSourceTrigger="PropertyChanged"> </Binding> </TextBox.Text> </TextBox>
<Label Canvas.Left="0" Canvas.Top="10" Content="Nombre ingresado en Window1: " Height="30" Name="lblNombre"/>
</Canvas></Window>
13) Presionamos F5 para ejecutar la aplicación y modificamos txtNombre, y si todo es correcto, veremos los cambios reflejados instantanemante gracias a la Propiedad UpdateSourceTrigger en PropertyChanged, en cualquiera de los sentidos.
Para visualizar los sentidos del enlace de datos, puede probar seteando la propiedad Mode en cada enlace de datos, para visualizar cada uno de sus efectos.
Bouvier - Mast - TesonePágina 26/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Laboratorio Nº3 – Gráficos y Animaciones
Objetivos: Poseer conocimientos básicos sobre gráficos y animaciones WPF. Aprender a crear un gráfico 3D mediante un Viewport3D. Crear una animación From/To/By con el objeto 3D.
Prerrequisitos: Haber realizado el Laboratorio Nº1 – Introducción a WPF.
Duración Aproximada: 25 minutos.
Pasos:
1. Ingresar a Microsoft Visual Studio 2010 y abrir un nuevo proyecto de tipo Aplicación WPF (Archivo Nuevo Proyecto Aplicación WPF) e ingresar los siguientes datos: Nombre: Animacion. Nombre de la Solución: Animacion. Crear directorio para la solución: Dejar Tildado.
Asegurarse que se encuentre seleccionado el lenguaje de programación Visual C#.Presionar Aceptar.
2. Cambiar el nombre de la clase MainWindow.xaml a Animacion.xaml.3. Setear la propiedad StartupUri del archivo App.xaml a Animacion.xaml.
Creando un gráfico 3D
4. En Animacion.xaml incluiremos el elemento ViewPort3D (dentro del grid predeterminado) que nos brinda la capacidad de dibujar una escena tridimensional en una superficie bidimensional. Este elemento expone la colección Children que es una colección de objetos ModelVisual3D dentro de los cuales se implementaran los objetos tridimensionales. El código requerido es el siguiente:
<Viewport3D ClipToBounds="True"> <Viewport3D.Children> <ModelVisual3D> </ModelVisual3D> </Viewport3D.Children> </Viewport3D>
5. Dentro del elemento ModelVisual3D podemos especificar cualquier dibujo que deseemos. Sin embargo a diferencia de los gráficos en dos dimensiones donde existen primitivas predefinidas para dibujar objetos como elipses o rectángulos, en el mundo 3D únicamente contamos con una clase denominada MeshGeometry3D en la cual es posible especificar un conjunto de vértices de triángulos mediante la propiedad Positions. Esto se debe a que cualquier dibujo tridimensional es posible describirlo con triángulos.
Bouvier - Mast - TesonePágina 27/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Una vez que hemos definido nuestra superficie de dibujo procederemos a utilizar la propiedad ModelVisual3D.Content para dentro de la misma especificar un MeshGeometry3D, en este caso con las posiciones establecidas estaremos generando un cubo.
<ModelVisual3D.Content><GeometryModel3D>
<GeometryModel3D.Geometry><MeshGeometry3D
Positions="0 0 0 1 0 0 0 1 0 1 1 0 0 0 1 1 0 1 0 1 1 1 1 1"
TriangleIndices="2 3 1 2 1 0 7 1 3 7 5 1 6 5 7 6 4 5 6 2 4 2 0 4 2 7 3 2 6 7 0 1 5 0 5 4"/> </GeometryModel3D.Geometry>
</GeometryModel3D></ModelVisual3D.Content>
La propiedad TriangleIndices establece los índices de los triángulos, los cuales unidos, formarán el cuerpo que queremos representar.
6. A diferencia de lo que sucede con los objetos 2D donde el concepto de luz no existe, en 3D es indispensable especificar una fuente de luz debido a que si no existe ésta simplemente nuestro objeto no será visible de la misma manera que sucede en la misma vida real. Esto significa que debemos especificar el lugar que estará irradiando la luz y el tipo de material del cual se compone nuestro objeto es decir si éste es reflejante o no.
WPF especifica tres tipos de materiales el SpecularMaterial que refleja la luz de tal manera que el objeto parece brillar, el EmissiveMaterial que refleja la luz y el DiffuseMaterial que no refleja la luz.
En nuestro ejemplo utilizaremos el material DiffuseMaterial. Para especificar el tipo de material del cual se compone nuestro Mesh hacemos uso del siguiente código dentro de GeometryModel3D.
<GeometryModel3D.Material> <DiffuseMaterial Brush="Red"></DiffuseMaterial> </GeometryModel3D.Material>
7. Dentro del mundo de tercera dimensión los objetos cambian de apariencia desde el punto de vista de quien observa al objeto. En WPF especificamos este punto de vista haciendo uso de los objetos que heredan de ProjectionCamera.
Controlamos a nuestras cámaras como si en verdad la cámara estuviera posicionada en el espacio, la propiedad Position es del tipo Point3D y especifica las coordenadas en la cual se encuentra la cámara.
<Viewport3D.Camera> <PerspectiveCamera Position="6 5 4" LookDirection="-6 -5 -4"> </PerspectiveCamera> </Viewport3D.Camera>
Bouvier - Mast - TesonePágina 28/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
8. Si presionamos F5 veremos lo siguiente:
Podemos ver que a pesar de que el material especificado con DiffuseMaterial fue de color Red estamos viendo que nuestro programa muestra el cuadrado en color negro. Esto se debe a que aún no hemos especificado la manera en la cual llega la luz al objeto, estos pasos los haremos a continuación.
9. Para agregar una fuente de luz a nuestra escena, dentro de ViewPort3D.Children especificaremos el siguiente código:
<ModelVisual3D> <ModelVisual3D.Content>
<DirectionalLight Color="White" Direction="-0.5,-0.1,-0.5" /> </ModelVisual3D.Content> </ModelVisual3D>
Al ejecutar el código del listado previo podemos ver que ahora nuestro objeto está reflejando la luz y por lo tanto mostrando el color que se le especificó previamente:
Animando nuestro objeto 3D
A la par de la gran variedad de tipos de valores que puede tomar una propiedad, existe una amplia variedad de tipos de animaciones definidos en el espacio de nombres System.Windows.Media.Animations
10. Procederemos ahora generar una transformación dentro del elemento GeometryModel3D que nos permitirá ver a nuestro objeto en profundidad y de esta manera percibir el efecto de tercera dimensión. Para realizar este objetivo es
Bouvier - Mast - TesonePágina 29/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
necesario hacer uso de la clase RotateTransform3D que funciona de una manera similar a su equivalente bidimensional, pero a diferencia del segundo, en el primero hacemos uso de 3 dimensiones para rotar al elemento deseado. A continuación se muestra el uso de este objeto
<GeometryModel3D.Transform><RotateTransform3D>
<RotateTransform3D.Rotation><AxisAngleRotation3D x:Name="Rotacion" Axis="0,3,0"
Angle="40" /></RotateTransform3D.Rotation>
</RotateTransform3D></GeometryModel3D.Transform>
11. Luego incluiremos el siguiente código dentro de ViewPort3D, una animación From/To/By dentro de un StoryBoard.
Se inicializa un StoryBoard (conjunto de imágenes o animaciones en secuencia) para ello utilizamos BeginStoryBoard, este lo podemos usar tanto con un Trigger o un EventTrigger. Luego creamos el StoryBoard insertamos en él un DoubleAnimation, el Double es por la precisión del tipo de datos, luego seteamos la propiedad que vamos a controlar, esto lo hacemos con TargetProperty.
<Viewport3D.Triggers><EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard><Storyboard>
<DoubleAnimation From="1" To="360" Duration="0:0:03"
AccelerationRatio="1" Storyboard.TargetName="Rotacion"
Storyboard.TargetProperty="Angle"> </DoubleAnimation>
</Storyboard></BeginStoryboard>
</EventTrigger></Viewport3D.Triggers>
Entonces, en conclusión, animamos la propiedad Angle de la transformación. La sintaxis para hacer animación en elementos 3D es exactamente la misma que para los objetos bidimensionales. Con esta animación veremos que el objeto está moviéndose de una manera circular.
12. Presionamos F5 para ejecutar la aplicación y si todo está correcto deberíamos ver rotar al cubo al hacer click sobre él. El código xaml completo es el siguiente:
<Grid> <Viewport3D ClipToBounds="True">
<Viewport3D.Camera> <PerspectiveCamera Position="6 5 4" LookDirection="-6 -5 -4"> </PerspectiveCamera> </Viewport3D.Camera> <Viewport3D.Children>
Bouvier - Mast - TesonePágina 30/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
<ModelVisual3D> <ModelVisual3D.Content> <DirectionalLight Color="White" Direction="-0.5,-0.1,-0.5" /> </ModelVisual3D.Content> </ModelVisual3D> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D>
<GeometryModel3D.Geometry> <MeshGeometry3D Positions="0 0 0 1 0 0 0 1 0 1 1 0 0 0 1 1 0 1 0 1 1 1 1 1" TriangleIndices="2 3 1 2 1 0 7 1 3 7 5 1 6 5 7 6 4 5 6 2 4 2 0 4 2 7 3 2 6 7 0 1 5 0 5 4"/> </GeometryModel3D.Geometry>
<GeometryModel3D.Material> <DiffuseMaterial Brush="Red" ></DiffuseMaterial> </GeometryModel3D.Material>
<GeometryModel3D.Transform><RotateTransform3D>
<RotateTransform3D.Rotation><AxisAngleRotation3D
x:Name="Rotacion" Axis="0,3,0" Angle="40" /></RotateTransform3D.Rotation>
</RotateTransform3D> </GeometryModel3D.Transform>
</GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D.Children>
<Viewport3D.Triggers><EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard><Storyboard>
<DoubleAnimation From="1" To="360" Duration="0:0:03"
AccelerationRatio="1" Storyboard.TargetName="Rotacion"
Storyboard.TargetProperty="Angle"> </DoubleAnimation>
</Storyboard></BeginStoryboard>
</EventTrigger> </Viewport3D.Triggers> </Viewport3D> </Grid>
Bouvier - Mast - TesonePágina 31/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Bouvier - Mast - TesonePágina 32/33
Universidad Tecnológica Nacional – Facultad Regional RosarioTecnología de Desarrollo de Software IDE
WPF Ing. en Sistemas de Información 2011
Bibliografía
http://msdn.microsoft.com/es-es/library/aa970268.aspx - Introducción a WPF http://msdn.microsoft.com/es-es/library/ms750441.aspx - Arquitectura WPF http://msdn.microsoft.com/es-es/library/bb613588.aspx - Novedades WPF Versión 4. http://msdn.microsoft.com/es-es/library/ms752347.aspx - Información general sobre
el enlace de datos. http://msdn.microsoft.com/es-es/library/ms742562.aspx - Gráficos y multimedia. http://squad.devworx.com.mx/blogs/misael/archive/2008/01/29/conceptos-b-225-
sicos-de-programaci-243-n-3d-en-wpf.aspx - Conceptos básicos de programación 3D en WPF.
http://msdn.microsoft.com/es-es/library/ms747437.aspx - Información general sobre gráficos 3D.
http://msdn.microsoft.com/es-es/library/ms752312.aspx - Información general sobre animaciones.
http://stuff.seans.com/2008/08/13/drawing-a-cube-in-wpf/ - Drawing a Cube in WPF. Curso Online de WPF (msdn). http://livingincoria.wordpress.com/ - Patrón de Diseño: Model View – View Model. http://msdn.microsoft.com/es-es/library/ms750596.aspx - Información general sobre
transformaciones. http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-
explained.html - Model-View-ViewModel (MVVM) Explained
Bouvier - Mast - TesonePágina 33/33
