WPF Microsfot Trabajo

UNIVERSIDAD TECNOLGICA NACIONAL INGENIERA EN SISTEMAS DE INFORMACIN
TECNOLOGA DE DESARROLLO SOFTWARE IDE

Microsoft Visual C#
DE
Windows Presentation Fundation

Autores: Legajo 35138 34996 35087 Nombre y Apellido Eric Bouvier Lucas Alejandro Mast Federico Tesone
WPF
Universidad Tecnolgica Nacional Facultad Regional Rosario Tecnologa de Desarrollo de Software IDE Ing. en Sistemas de Informacin
2011
NDICE
Windows Presentation Fundation...................................................................3 Breve Introduccin...................................................................................... 3 Arquitectura WPF........................................................................................ 4 Cdigo de lenguaje de marcado y cdigo subyacente................................5 Controles WPF por funcin..........................................................................5 Diseo......................................................................................................... 7 Enlace de datos (DataBinding)....................................................................7 Grficos..................................................................................................... 12 Animaciones............................................................................................. 14 Patrn de Diseo Model View ViewModel (MVVM)....................................18 Laboratorio N1 Introduccin a WPF..........................................................21 Laboratorio N2 Enlace de Datos (DataBinding)........................................27 Laboratorio N3 Grficos y Animaciones....................................................33 Creando un grfico 3D.............................................................................. 33 Animando nuestro objeto 3D....................................................................35 Bibliografa................................................................................................... 39
Bouvier - Mast - Tesone Pgina 2/39
WPF
2011
Windows Presentation Fundation

Breve Introduccin
Windows Presentation Foundation (WPF) es un sistema de presentacin para crear aplicaciones cliente de Windows que proporcionen una buena experiencia para el usuario desde el punto de vista visual. El ncleo de WPF es un motor de representacin basado en vectores e independiente de la resolucin que se crea para sacar partido del hardware de grficos moderno. WPF extiende el ncleo con un conjunto completo de caractersticas de desarrollo de aplicaciones que incluye:

Extensible Application Markup Language (XAML). Controles. Enlace de datos (Laboratorio 2). Diseo. Grficos 2-D y 3-D (Laboratorio 3). Animaciones (Laboratorio 3). Estilos. Plantillas. Documentos. Multimedia. Texto y tipografa.
WPF se incluye en Microsoft .NET Framework (desde la versin 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 caractersticas con .NET Framework 4 en Visual Studio 2010, los cuales sern requisitos para desarrollar los laboratorios siguientes.
WPF
2011
Arquitectura WPF
El modelo de programacin primario de WPF se expone a travs de cdigo administrado, esto significa que el cdigo de la aplicacin no corre directamente sobre el sistema operativo del dispositivo, sino que en vez de ello, se apoya de un ambiente de ejecucin para ser ejecutado. CLR (Common Languaje Runtime) proporciona varias caractersticas que pueden hacer el proceso ms slido y productivo (como son la administracin de memoria, el control de errores, el sistema de tipos comn, etc.). Los componentes principales de WPF se muestran en la ilustracin siguiente. Las secciones rojas del diagrama (PresentationFramework, PresentationCore y milcore) son los componentes principales del cdigo de WPF. De stos, slo uno es un componente no administrado, milcore. Milcore se ha escrito en cdigo no administrado para conseguir una estrecha integracin con DirectX. La visualizacin en WPF se realiza a travs del motor de DirectX, lo que permite una presentacin eficaz mediante hardware y software. WPF tambin requiri un control preciso sobre la memoria y la ejecucin. El motor de composicin de milcore es sumamente sensible al rendimiento, y requiri renunciar a muchas de las ventajas de CLR para obtener mejoras en el rendimiento.
WPF
2011
Cdigo de lenguaje de marcado y cdigo subyacente

WPF proporciona mejoras de programacin adicionales para el desarrollo de aplicaciones cliente de Windows. Una mejora evidente es la capacidad para programar una aplicacin mediante cdigo 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 aplicacin, y los lenguajes de programacin administrados (subyacentes) para implementar su comportamiento. Esta separacin entre la apariencia y el comportamiento aporta las ventajas siguientes: Se reducen los costos de programacin y mantenimiento , al no estar el marcado especfico de la apariencia estrechamente relacionado con el cdigo especfico del comportamiento. La programacin es ms eficaz porque los diseadores pueden implementar la apariencia de una aplicacin al mismo tiempo que los programadores implementan su comportamiento. Se pueden usar varias herramientas de diseo para implementar y compartir el marcado XAML, a fin de responder a los requisitos de quienes colaboran en la programacin de aplicaciones; Microsoft Expression Blend proporciona una experiencia apropiada para los diseadores, mientras que Visual Studio est dirigido a los programadores. La globalizacin y localizacin de las aplicaciones WPF se ha simplificado en gran medida.
Controles WPF por funcin

A continuacin 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 Seleccin: Calendar (Nuevo) y DatePicker (Nuevo). Cuadros de dilogo: OpenFileDialog, PrintDialog y SaveFileDialog. Entradas de lpiz digitales: InkCanvas y InkPresenter. Documentos: DocumentViewer, FlowDocumentPageViewer, FlowDoc umentReader, FlowDocumentScrollViewer y StickyNoteControl. Entrada: TextBox, RichTextBox y PasswordBox. Diseo: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, Scroll Bar, ScrollViewer, StackPanel,Thumb, Viewbox, VirtualizingStackPanel , Window y WrapPanel. Multimedia: Image, MediaElement y SoundPlayerAction. Mens: ContextMenu, Menu y ToolBar.
WPF
2011
Navegacin: Frame, Hyperlink, Page, NavigationWindow y TabContro l. Seleccin: CheckBox, ComboBox, ListBox, RadioButtony Slider. Informacin para el usuario: AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock y ToolTip.
WPF
2011
Diseo
Al crear una UI, se organizan los controles segn su ubicacin y tamao para crear un diseo. Un requisito fundamental de cualquier diseo es adaptarse a los cambios de tamao de la ventana y de configuracin de pantalla. La piedra angular del sistema de diseo es la situacin relativa, que aumenta la capacidad de adaptacin a los cambios en la configuracin de las ventanas y de la pantalla. Adems, el sistema de diseo administra la negociacin entre los controles para determinar el diseo. La negociacin es un proceso de dos pasos: en primer lugar, el control indica a su elemento primario qu ubicacin y tamao necesita; en segundo lugar, el elemento primario indica al control de qu espacio dispone. El sistema del diseo se expone a los controles secundarios a travs de las clases WPF base. Para los diseos comunes como cuadrculas, apilamiento y acoplamiento, WPF incluye varios controles de diseo:

Canvas: los controles secundarios proporcionan su propio diseo. DockPanel: los controles secundarios se alinean con los bordes del panel. Grid: los controles secundarios se sitan 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 lnea en sentido horizontal o vertical. WrapPanel: los controles secundarios se sitan por orden de izquierda a derecha y se ajustan a la lnea siguiente cuando hay ms controles de los que caben en la lnea actual.
Enlace de datos (DataBinding)

El enlace de datos de Windows Presentation Foundation (WPF) proporciona un mtodo simple y coherente para que las aplicaciones presenten e interacten con datos. Los elementos se pueden enlazar a los datos de diversos orgenes 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 ordenacin, filtro y agrupacin. La funcionalidad de enlace de datos de WPF presenta varias ventajas con respecto a los modelos tradicionales: Un mayor nmero de propiedades que admiten de forma inherente el enlace de datos. Una representacin flexible de los datos en la UI. La separacin bien definida de la lgica del negocio de la UI. Qu es?
WPF
2011
El enlace de datos es el proceso que establece una conexin entre la UI de la aplicacin y la lgica del negocio. Si el enlace est correctamente configurado y los datos proporcionan las notificaciones adecuadas, cuando los datos cambian su valor, los elementos que estn enlazados a ellos reflejan los cambios automticamente. Por ejemplo, si el usuario modifica el valor en un elemento TextBox, el valor de los datos subyacentes se actualiza automticamente para reflejar ese cambio. 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 ilustracin siguiente:
El enlace de datos es esencialmente el puente entre el destino del enlace y el origen del enlace. En la ilustracin 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 mayora de las propiedades UIElement son propiedades de dependencia y la mayora de las propiedades de dependencia, excepto las de slo lectura, admiten el enlace de datos de forma predeterminada. El enlace de datos de WPF admite datos en forma de objetos CLR y XML
Direccin 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.
WPF
2011
Tal vez se desee que la aplicacin 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 ilustracin siguiente se muestran los tipos diferentes de flujo de datos:
El enlace OneWay permite que los cambios en la propiedad de origen actualicen automticamente 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 slo lectura de forma implcita. 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 automticamente en el otro. Este tipo de enlace es adecuado para formularios modificables u otros escenarios de UI totalmente interactivos. La mayora 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. Podra utilizar este tipo de enlace si, por ejemplo, slo necesita volver a evaluar el valor de origen de la UI. El enlace OneTime, no mostrado en la ilustracin, permite que la propiedad de origen inicialice la propiedad de destino, pero los dems 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 continuacin, el cambio no se refleja en la propiedad de destino. Se trata bsicamente de una forma ms fcil 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 notificacin de cambios de propiedades, como INotifyPropertyChanged.
WPF
2011
Puede ver: Cmo: Implementar la notificacin de cambio de propiedad para obtener un ejemplo de implementacin de INotifyPropertyChanged.
WPF
2011
Qu desencadena la actualizacin 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 actualizacin 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 despus de modificarlo y sacar el mouse fuera del control TextBox? La propiedad UpdateSourceTrigger del enlace determina qu desencadena la actualizacin del origen. Los puntos de las flechas que van hacia la derecha en la ilustracin siguiente muestran la funcin 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 slo se actualizar con el nuevo valor cuando la propiedad de destino pierda el foco.
WPF
2011
Grficos
El contenido de los grficos 3-D de WPF se encapsula en un elemento, Viewport3D, que puede participar en la estructura de elementos bidimensionales. El sistema de grficos 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 ms preciso, es la superficie sobre la que se proyecta una escena 3-D. El sistema de coordenadas de WPF para grficos 2-D localiza el origen en la parte superior izquierda del rea de representacin (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 representacin, 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 estn 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 representacin 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.
WPF
2011
Elementos primitivos y modelos de malla (mesh) en objetos 3-D. Model3D es la clase base abstracta que representa un objeto 3-D genrico. En la actualidad, WPF permite geometras 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 ms simple: un tringulo definido por tres vrtices. Dado que los tres puntos de un tringulo son coplanares, puede seguir agregando tringulos para modelar formas ms complejas, denominadas mallas. El sistema 3-D de WPF proporciona actualmente la clase MeshGeometry3D, que permite especificar cualquier geometra; en este momento, no admite elementos 3-D primitivos predefinidos, tales como esferas o formas cbicas. Se debe empezar por crearMeshGeometry3D especificando una lista de vrtices de tringulos como su propiedad Positions. WPF necesita informacin sobre qu tringulos comparten qu vrtices para dibujar la malla correctamente. Esta informacin se proporciona especificando una lista de ndices de tringulos 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 3D, sin embargo, depende del modelo de iluminacin, no slo del color o del patrn que se les aplica. Los objetos reales reflejan luz de manera distinta segn la calidad de su superficie. Para definir las caractersticas 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 iluminacin. EmissiveMaterial permite especificar que la textura se aplicar como si el modelo estuviera emitiendo luz del mismo color que el pincel.
WPF
2011
Iluminar los objetos 3-D Las luces de los grficos 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 ningn modelo visible. Las luces siguientes se derivan de la clase base Light: AmbientLight: proporciona iluminacin de ambiente que ilumina uniformemente todos los objetos sin tener en cuenta su ubicacin u orientacin. DirectionalLight: ilumina como una fuente de luz distante. Las luces direccionales tienen Direction, que se especifica como Vector3D, pero ninguna ubicacin concreta. PointLight: ilumina como una fuente de luz cercana. Las luces puntuales tienen posicin y emiten la luz desde esa posicin. SpotLight: hereda de PointLight. Los focos de luz iluminan como las luces puntuales, y tienen posicin y direccin. Proyectan la luz en un rea cnica.
Las luces son objetos Model3D, por lo que puede transformar y animar las propiedades de la luz, incluidas su posicin, posicin, color, direccin y alcance.
Animaciones
Una animacin es una ilusin que se crea mediante el cambio rpido entre una serie de imgenes, cada una de las cuales es ligeramente diferente de la anterior. El cerebro percibe el grupo de imgenes como una sola escena cambiante. En las pelculas, esta efecto se obtiene mediante el uso de cmaras que graban muchas fotografas, o fotogramas, cada segundo. Cuando los fotogramas se reproducen en un proyector, la audiencia ve una imagen en movimiento. La animacin en un equipo es similar. Por ejemplo, un programa que hace que un dibujo de un rectngulo se desvanezca hasta desaparecer de la vista podra funcionar de la siguiente manera: El programa crea un temporizador. El programa comprueba el temporizador en los intervalos establecidos para ver cunto tiempo ha transcurrido. Cada vez que el programa comprueba el temporizador, calcula el valor de opacidad actual del rectngulo en funcin del tiempo que ha transcurrido. Despus, el programa actualiza el rectngulo con el nuevo valor y lo redibuja.
WPF incluye un sistema de control de tiempo eficaz que se expone a travs del cdigo administrado y del Extensible Application Markup Language
WPF
2011
(XAML) que se integra perfectamente en el marco de WPF. La animacin WPF facilita la animacin de controles y otros objetos grficos. WPF controla todo el trabajo de administracin del sistema de temporizacin y de actualizacin de la pantalla que se produce en segundo plano. Proporciona clases de temporizacin que permiten centrarse en los efectos que se desea crear, en lugar de la mecnica para lograr esos efectos. WPF tambin facilita la creacin de sus propias animaciones exponiendo clases base de animacin de las que se pueden heredar sus clases, para generar animaciones personalizadas. Estas animaciones personalizadas se benefician de la mayora de las ventajas de rendimiento de las clases de animacin estndar. Transformaciones Al crear modelos, stos tienen una ubicacin determinada en la escena. Para mover esos modelos por la escena, girarlos o cambiar su tamao, no es prctico para cambiar los vrtices 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 tamao del modelo. Al aplicar una transformacin, en realidad lo que se hace es desplazar todos los puntos del modelo segn un vector o valor especificado por la transformacin. Windows Presentation Foundation (WPF) proporciona las siguientes clases Transform 2-D para las operaciones comunes de transformacin: RotateTransform: Gira un elemento el valor de Angle especificado. ScaleTransform: Escala (incrementa o disminuye el tamao) 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 tambin proporciona una clase MatrixTransform3D que permite especificar las mismas transformaciones en operaciones de matrices ms precisas.
Animar los grficos
Es posible animar directamente las propiedades de los elementos primitivos, pero suele ser ms fcil animar las transformaciones que cambian la posicin o el aspecto de los modelos. Para animar un objeto en WPF, se crea una escala de tiempo, se define una animacin (que, en realidad, es un cambio de algn valor de propiedad a lo largo del tiempo) y se especifica la propiedad a la que aplicar la animacin. Animaciones From/To/By
WPF
2011
Entre otros tipos de animaciones, estas son las animaciones bsicas y se describirn a continuacin: Los nombres de las animaciones From/To/By se ajustan a la siguiente convencin de nombres: <Tipo>Animation Donde <Tipo> es el nombre del tipo de la propiedad que se desea animar. Esta animacin conocida como animacin "From/To/By", es una animacin 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 transicin entre un valor inicial y un valor final en el intervalo de tiempo en que ocurre la animacin especificado mediante la propiedad Duration. 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 animacin ser igual a la suma del inicial ms el que se le asigne a la propiedad By. Las propiedades To y By son excluyentes, en caso de que explcitamente se les de valor a ambas, By ser ignorado. Para comenzar lo primero que tenemos que hacer es inicializar un StoryBoard (conjunto de imgenes 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 prctica la mayora 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 condicin del EventTrigger. La propiedad Actions es una coleccin de objetos TriggerAction. La clase derivada de TriggerAction en WPF ms importante es quizs BeginStoryBoard.
A diferencia de los Trigger y DataTrigger, los EventTrigger no tienen concepto de terminacin. El conjunto de acciones se desencadena cuando ocurre el evento y las propiedades que se modifiquen no retoman implcitamente 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 animacin, este est representado con el formato de das:horas:segundos.
WPF
2011
WPF
2011
Patrn de Diseo Model View ViewModel (MVVM)

El patrn de diseo Modelo Vista VistaModelo es usado por las tecnologas Windows Presentation Foundation, Silverlight y Moonlight. Es un patrn de interfaz de usuario como lo son Modelo Vista Controlador o Modelo Vista Presentacin. El patrn 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 informacin, pero no las acciones o servicios que la manipulan. La Vista es la representacin grfica 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 pgina 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 lgica 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 tro. Esta separacin 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 conversin de formato. El modelo de vista tambin hace disponibles mtodos, 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.
WPF
2011
WPF
2011
Caractersticas La vista y el modelo de vista se comunican mediante enlaces de datos, mtodos, propiedades, eventos y mensajes. El modelo de vista expone propiedades (tal como informacin sobre el estado de la vista, p.ej. el indicador de ocupado) y comandos adems 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.
Cules son los beneficios del patrn MVVM? Separacin de vista / presentacin : mediante la separacin de la vista (XAML) de la lgica de presentacin podemos separar los roles de diseador y desarrollador. Permite las pruebas unitarias: como la lgica de presentacin est separada de la vista, podemos realizar pruebas unitarias sobre la VistaModelo. Mejora la reutilizacin de cdigo : como la lgica de presentacin est separada en componentes (clases) de las vistas (XAML) se puede combinar fcilmente utilizando herencia y composicin como queramos igual que si se tratase de una clase estndar. Soporte para manejar datos en tiempo de diseo : podemos ver como la interface de usuario se bindea en tiempo de diseo, pudiendo realizar pruebas de integrar datos de ejemplo y simular un escenario de binding. Mltiples vistas: la VistaModelo puede ser presentada en mltiples vistas, dependiendo del rol del usuario por ejemplo.
WPF
2011
Laboratorio N1 Introduccin a WPF

Objetivos: Crear su primera aplicacin WPF, y familiarizarse con la nueva forma de desarrollo. Crear una ventana WPF con un botn que muestre un cartel cuando se ejecuta el evento Click. Duracin aproximada: 15 minutos. Pasos: 1) Ingresar a Microsoft Visual Studio 2010 y abrir un nuevo proyecto de tipo Aplicacin WPF (Archivo Nuevo Proyecto Aplicacin WPF) e ingresar los siguientes datos: Nombre: Lab01WPF. Nombre de la Solucin: Lab01WPF. Crear directorio para la solucin: Dejar Tildado. Asegurarse que se encuentre seleccionado el lenguaje de programacin Visual C#.
Presione Aceptar.
WPF
2011
2) Hecho el punto anterior. Se abrirn dos pestaas: MainWindow.xaml: la cual contiene la vista de diseo de la ventana WPF y el cdigo XAML. Vista de Diseo:
Cdigo 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.
WPF
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:
WPF
2011
3) Procederemos a cambiarle el nombre y el tamao a la ventana WPF, para eso iremos a nuestro cdigo XAML (tambin se puede hacer desde la barra de herramientas Propiedades en la vista de diseo), y cambiaremos las propiedades: o Title="Ventana con Botn" 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 Botn" Height="100" Width="250"> <Grid> </Grid> </Window>
4) Desde la vista de diseo: 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 cdigo 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 Botn" Height="100" Width="250"> <Button Content="Button" Height="23" Name="button1" Width="75" /> </Window>
5) Desde el cdigo XAML: Eliminaremos las propiedades Height y Width de nuestro botn, con esto, el mismo se adaptar al tamao de la ventana. Cambiamos las propiedades: o Name: btnWPF o 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 Botn" Height="100" Width="250"> <Button Content="Clickeame!" Name="btnWPF" /> </Window>
WPF
2011
Observacin: Puesto que XAML se basa en XML, la UI que se crea con este lenguaje se ensambla en una jerarqua de elementos anidados que se denomina rbol de elementos. El rbol de elementos proporciona una manera lgica e intuitiva de crear y administrar las UIs.
WPF
2011
6) Ahora trabajaremos con el cdigo subyacente o Code Behind, para otorgarle funcionalidad al sistema e interaccin con el usuario. Para esto, haremos doble click sobre nuestro botn, el cual, automticamente crear el evento Click del Botn. En el cdigo subyacente (Lab01.xaml.cs):
{ } private void btnWPF_Click(object sender, RoutedEventArgs e)
Dentro de este mtodo, escribiremos la funcionalidad que deber proveer el sistema cuando el usuario realice un click sobre el botn. Simplemente, haremos que se muestre un mensaje, para esto, utilizaremos el objeto MessageBox y su mtodo Show con un argumento tipo string.
{ } private void btnWPF_Click(object sender, RoutedEventArgs e) MessageBox.Show("Felicitaciones!, creaste una aplicacin WPF");
7) Desde el cdigo 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 Botn" Height="100" Width="250" WindowStartupLocation="CenterScreen"> <Button Content="Clickeame!" Name="btnWPF" Click="btnWPF_Click" /> </Window>
8) IMPORTANTE: Para que cuando se ejecuta la solucin, 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.
WPF
2011
Laboratorio N2 Enlace de Datos (DataBinding)

Objetivos: Entender los conceptos bsicos de enlace de datos y aplicarlos a un caso sencillo. Prerrequisitos: Haber realizado el Laboratorio N1 Introduccin a WPF. Duracin aproximada: 25 minutos. Pasos: 1) Ingresar a Microsoft Visual Studio 2010 y abrir un nuevo proyecto de tipo Aplicacin WPF (Archivo Nuevo Proyecto Aplicacin WPF) e ingresar los siguientes datos: Nombre: Lab02WPF. Nombre de la Solucin: Lab02WPF. Crear directorio para la solucin: Dejar Tildado. Asegurarse que se encuentre seleccionado el lenguaje de programacin 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).
WPF
2011
5) Seleccionar Clase de Visual C# y Llamarla Persona
6) En la clase persona, definiremos atributos y propiedades, mediante el siguiente cdigo:

string name = "Sin nombre"; public string Name { get { return name; } set { name = value; } }
Adems definiremos a sta clase como pblica. 7) En la clase Lab02.xaml, en la vista de diseo, agregaremos un canvas con dos textbox y un label, o podemos copiar el siguiente cdigo 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>
Observacin: El textbox textbox1 no tiene funcionalidad, sino que est agregado a fines prcticos, 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 cdigo:
WPF
2011
Text="{Binding Path=Name}"
Recordamos que la propiedad Text de un TextBox, es de modo TwoWay de manera predeterminada, por lo tanto, automticamente se vern 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 cdigo subyacente Lab02.xaml.cs introduciremos el siguiente cdigo:
//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 aplicacin 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 aplicacin 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).
WPF
2011
Y le pegaremos el siguiente cdigo 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"> </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 lneas de cdigo:

Window2 oWin = new Window2(oPersona); oWin.Show();
Lo que hemos hecho con el anterior cdigo es que Window2 posea el mismo DataContext que Window1, pasndoselo como parmetro.
WPF
2011
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 estn 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 vern instantneamente ya que la propiedad Name de oPersona tambin lo hace. Los cdigos xaml quedaran de la siguiente manera: Window1.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"> <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>
WPF
2011
13) Presionamos F5 para ejecutar la aplicacin 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.
WPF
2011
Laboratorio N3 Grficos y Animaciones

Objetivos: Poseer conocimientos bsicos sobre grficos y animaciones WPF. Aprender a crear un grfico 3D mediante un Viewport3D. Crear una animacin From/To/By con el objeto 3D. Prerrequisitos: Haber realizado el Laboratorio N1 Introduccin a WPF. Duracin Aproximada: 25 minutos. Pasos: 1. Ingresar a Microsoft Visual Studio 2010 y abrir un nuevo proyecto de tipo Aplicacin WPF (Archivo Nuevo Proyecto Aplicacin WPF) e ingresar los siguientes datos: Nombre: Animacion. Nombre de la Solucin: Animacion. Crear directorio para la solucin: Dejar Tildado. Asegurarse que se encuentre seleccionado el lenguaje de programacin 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 grfico 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 coleccin Children que es una coleccin de objetos ModelVisual3D dentro de los cuales se implementaran los objetos tridimensionales. El cdigo 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 grficos en dos dimensiones donde existen primitivas predefinidas para dibujar objetos como elipses o rectngulos, en el mundo 3D nicamente contamos con una clase denominada MeshGeometry3D en la cual es posible especificar un conjunto de vrtices de tringulos mediante
WPF
2011
la propiedad Positions. Esto se debe a que cualquier dibujo tridimensional es posible describirlo con tringulos. 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 tringulos, los cuales unidos, formarn 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 cdigo dentro de GeometryModel3D.
<GeometryModel3D.Material> <DiffuseMaterial Brush="Red"></DiffuseMaterial> </GeometryModel3D.Material>
7. Dentro del mundo de tercera dimensin 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 cmaras como si en verdad la cmara estuviera posicionada en el espacio, la propiedad Position es del tipo Point3D y especifica las coordenadas en la cual se encuentra la cmara.
<Viewport3D.Camera> <PerspectiveCamera Position="6 5 4" LookDirection="-6 -5 -4"> </PerspectiveCamera>
WPF
2011
</Viewport3D.Camera>
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 an no hemos especificado la manera en la cual llega la luz al objeto, estos pasos los haremos a continuacin. 9. Para agregar una fuente de luz a nuestra escena, dentro de ViewPort3D.Children especificaremos el siguiente cdigo:
<ModelVisual3D> <ModelVisual3D.Content> <DirectionalLight Color="White" Direction="-0.5,-0.1,-0.5" /> </ModelVisual3D.Content> </ModelVisual3D>
Al ejecutar el cdigo 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

WPF
2011
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 transformacin dentro del elemento GeometryModel3D que nos permitir ver a nuestro objeto en profundidad y de esta manera percibir el efecto de tercera dimensin. Para realizar este objetivo es 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 continuacin 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 cdigo dentro de ViewPort3D, una animacin From/To/By dentro de un StoryBoard. Se inicializa un StoryBoard (conjunto de imgenes 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 precisin 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 conclusin, animamos la propiedad Angle de la transformacin. La sintaxis para hacer animacin en elementos 3D es exactamente la misma que para los objetos bidimensionales. Con esta animacin veremos que el objeto est movindose de una manera circular. 12. Presionamos F5 para ejecutar la aplicacin y si todo est correcto deberamos ver rotar al cubo al hacer click sobre l. El cdigo xaml completo es el siguiente:
<Grid>
WPF
2011
<Viewport3D ClipToBounds="True"> <Viewport3D.Camera> <PerspectiveCamera Position="6 5 4" LookDirection="-6 -5 -4"> </PerspectiveCamera> </Viewport3D.Camera> <Viewport3D.Children> <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>
WPF
2011
WPF
2011
Bibliografa

http://msdn.microsoft.com/es-es/library/aa970268.aspx - Introduccin a WPF http://msdn.microsoft.com/es-es/library/ms750441.aspx Arquitectura WPF http://msdn.microsoft.com/es-es/library/bb613588.aspx - Novedades WPF Versin 4. http://msdn.microsoft.com/es-es/library/ms752347.aspx - Informacin general sobre el enlace de datos. http://msdn.microsoft.com/es-es/library/ms742562.aspx - Grficos y multimedia. http://squad.devworx.com.mx/blogs/misael/archive/2008/01/29/conce ptos-b-225-sicos-de-programaci-243-n-3d-en-wpf.aspx - Conceptos bsicos de programacin 3D en WPF. http://msdn.microsoft.com/es-es/library/ms747437.aspx - Informacin general sobre grficos 3D. http://msdn.microsoft.com/es-es/library/ms752312.aspx - Informacin 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/ - Patrn de Diseo: Model View View Model.
http://msdn.microsoft.com/es-es/library/ms750596.aspx - Informacin general sobre transformaciones. http://csharperimage.jeremylikness.com/2010/04/model-viewviewmodel-mvvm-explained.html - Model-View-ViewModel (MVVM) Explained

WPF Microsfot Trabajo

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

WPF Microsfot Trabajo

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD TECNOLGICA NACIONAL INGENIERA EN SISTEMAS DE INFORMACIN

TECNOLOGA DE DESARROLLO SOFTWARE IDE

Windows Presentation Fundation

Bouvier - Mast - Tesone Pgina 2/39

Windows Presentation Fundation

Bouvier - Mast - Tesone Pgina 3/39

Bouvier - Mast - Tesone Pgina 4/39

Cdigo de lenguaje de marcado y cdigo subyacente

Controles WPF por funcin

Bouvier - Mast - Tesone Pgina 6/39

Enlace de datos (DataBinding)

Bouvier - Mast - Tesone Pgina 10/39

Bouvier - Mast - Tesone Pgina 11/39

Bouvier - Mast - Tesone Pgina 12/39

Bouvier - Mast - Tesone Pgina 13/39

Bouvier - Mast - Tesone Pgina 17/39

Patrn de Diseo Model View ViewModel (MVVM)

Bouvier - Mast - Tesone Pgina 18/39

Bouvier - Mast - Tesone Pgina 19/39

Bouvier - Mast - Tesone Pgina 20/39

Laboratorio N1 Introduccin a WPF

Bouvier - Mast - Tesone Pgina 21/39

Bouvier - Mast - Tesone Pgina 22/39

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 - Tesone Pgina 23/39

Bouvier - Mast - Tesone Pgina 24/39

Bouvier - Mast - Tesone Pgina 25/39

Bouvier - Mast - Tesone Pgina 26/39

Laboratorio N2 Enlace de Datos (DataBinding)

Bouvier - Mast - Tesone Pgina 27/39

5) Seleccionar Clase de Visual C# y Llamarla Persona

6) En la clase persona, definiremos atributos y propiedades, mediante el siguiente cdigo:

Bouvier - Mast - Tesone Pgina 29/39

Y le pegaremos el siguiente cdigo xaml:

En el code behind de Windows2 (Window2.xaml.cs), redefiniremos el constructor de la siguiente manera:

Y en el code behind de Windows1 (Window1.xaml.cs) agregaremos las siguientes lneas de cdigo:

Bouvier - Mast - Tesone Pgina 30/39

Bouvier - Mast - Tesone Pgina 31/39

Bouvier - Mast - Tesone Pgina 32/39

Laboratorio N3 Grficos y Animaciones

Bouvier - Mast - Tesone Pgina 34/39

8. Si presionamos F5 veremos lo siguiente:

Animando nuestro objeto 3D

Bouvier - Mast - Tesone Pgina 36/39

Bouvier - Mast - Tesone Pgina 37/39

Bouvier - Mast - Tesone Pgina 38/39

http://msdn.microsoft.com/es-es/library/ms750596.aspx - Informacin general sobre transformaciones. http://csharperimage.jeremylikness.com/2010/04/model-viewviewmodel-mvvm-explained.html - Model-View-ViewModel (MVVM) Explained

Bouvier - Mast - Tesone Pgina 39/39

También podría gustarte