Manual Wpf

Windows Presentation Foundation

Pedro Bauz Pic [email protected]

Empresa Innova Desarrollos Informticos

ndice

Introduccin ............................................................................................................................... 1 Qu es Windows Presentation Foundation? ..................................................................... 1 Qu es XAML?................................................................................................................. 1 Qu es AERO? ................................................................................................................. 1 Windows Presentation Foundation es la nueva generacin del sistema grfico. ............... 2 Aprovecha la potencia y la capacidad que hoy en da brindan los sistemas grficos. ....... 2 Proporciona una base para construir aplicaciones y dar al usuario una experiencia de alta fidelidad en el uso de Windows Vista. ............................................................................... 2 Los desarrolladores podrn proporcionar una experiencia de usuario ms rica y precisa para sus propias aplicaciones. ............................................................................................ 2 Se podrn aprovechar nuevas funciones visuales, por ejemplo, AERO. ........................... 2 XAML y WPF separan los controles segn su funcionalidad y sus habilidades. .............. 3 Implementacin de estilos.................................................................................................. 3 Un nuevo modelo de aplicacin mediante un Objeto Aplicacin...................................... 3 WPF nos introduce en una nueva forma declarativa de programar, llamada XAML........ 3 Los paneles son la clase base para todos los elementos que proporciona WPF en el soporte de layout ................................................................................................................ 4 Efectos 3D .......................................................................................................................... 4 Animaciones....................................................................................................................... 4 Grficos basados en vectores ............................................................................................. 4

Framework de Windows Presentation Foundation .................................................................... 5 Arquitectura de Windows Presentation Foundation........................................................... 5 Capacidades de Windows Presentation Foundation........................................................... 7 Modelo de clases ................................................................................................................ 8 System.Windows................................................................................................................ 8 System.Windows.Controls ................................................................................................. 8 System.Windows.Data ....................................................................................................... 8 System.Windows.Input ...................................................................................................... 8 System.Windows.Media..................................................................................................... 9 System.Windows.Media.Animation .................................................................................. 9 System.Windows.Media.Media3D .................................................................................... 9 System.Windows.Navigation ............................................................................................. 9 System.Windows.Shapes ................................................................................................... 9 System.Windows.Resources .............................................................................................. 9 System.Windows.Serialization........................................................................................... 9 UIElement .......................................................................................................................... 9 FrameworkElement ............................................................................................................ 9 Ejemplo del Namespace System.IO ................................................................................. 10

Bases de WPF........................................................................................................................... 11 Introduccion ..................................................................................................................... 11 SubClass ........................................................................................................................... 11 Freezable Objects ............................................................................................................. 13 Qu es Freezable?........................................................................................................... 13 Ejemplo Freezable............................................................................................................ 13

XAML ...................................................................................................................................... 14 Introduccion ..................................................................................................................... 14 Declaraciones de namespaces en XAML......................................................................... 15 XAML y code-behind ...................................................................................................... 16 XAML sin code-behind.................................................................................................... 17 Programando en XAML................................................................................................... 18 Documentos en XAML .................................................................................................... 18 Ejemplo XAML y Code-behind....................................................................................... 20

User Interfaces Controles ...................................................................................................... 21 Introduccion ..................................................................................................................... 21 Jerarqua de controles....................................................................................................... 21 Lista de controles XAML................................................................................................. 22 Control Button y Label..................................................................................................... 22 Control Checkbox ............................................................................................................ 23 Control ListBox................................................................................................................ 23 Control RadioButton ........................................................................................................ 23 Control Expander ............................................................................................................. 24 Control MenuBase............................................................................................................ 25 Control ComboBox .......................................................................................................... 25 Control TreeView............................................................................................................. 25 Paneles.............................................................................................................................. 26 Panel Canvas .................................................................................................................... 26 Panel DockPanel .............................................................................................................. 27 Panel FlowPanel ............................................................................................................... 28 Panel TextPanel................................................................................................................ 29 Panel GridPanel................................................................................................................ 30 Panel StackPanel .............................................................................................................. 30 Trabajando con documentos............................................................................................. 31 Documento Fixed ............................................................................................................. 31 Control FixedDocument DocumentViewer .................................................................. 32 Ejemplo de DocumentViewer .......................................................................................... 33 Documento Flow .............................................................................................................. 35 FlowDocumentPageViewer ............................................................................................. 36 FlowDocumentScrollViewer............................................................................................ 36 FlowDocumentReader...................................................................................................... 37

Trabajando con grficos y animaciones ................................................................................... 38 Introduccion ..................................................................................................................... 38 Objeto Shape .................................................................................................................... 39 Objeto Geometries............................................................................................................ 39 Objeto Pen ........................................................................................................................ 39 Ejemplo objeto Ellipse ..................................................................................................... 40 Tipos de transformaciones ............................................................................................... 40 Cmaras y proyecciones................................................................................................... 41 Traslacin y rotacin........................................................................................................ 41

Animaciones............................................................................................................................. 42 Introduccion ..................................................................................................................... 42 Propiedades ...................................................................................................................... 43 Compatibilidad de tipos de animaciones.......................................................................... 43 Ejemplo Animacin.......................................................................................................... 44

Estilos ....................................................................................................................................... 45 Introduccion ..................................................................................................................... 45 Declaracion....................................................................................................................... 45 x:Key ................................................................................................................................ 45 TargetType ....................................................................................................................... 46 Extendiendo estilos .......................................................................................................... 46 Triggers ............................................................................................................................ 47 Ejemplo de uso de triggers ............................................................................................... 48

Tipos de aplicaciones ............................................................................................................... 49 Aplicaciones de navegador XAML.................................................................................. 49 Control Library................................................................................................................. 49 Aplicaciones instaladas .................................................................................................... 49 Tipos Aplicaciones instaladas .......................................................................................... 50 Aplicaciones Web ............................................................................................................ 51 Formas de escribir aplicaciones ....................................................................................... 52

Microsoft Expression Graphic Designer .................................................................................. 53 Microsoft Expression Interactive Designer.............................................................................. 54

Standards-Based Web Sites.............................................................................................. 54 Entorno sofisticado basado en CSS.................................................................................. 54 Presentacin de informacin ............................................................................................ 54 Tecnologa de servidor ..................................................................................................... 54

Microsoft Expression Interactive Designer.............................................................................. 55 Capacidades de diseo ..................................................................................................... 55 Completo control en creatividad ...................................................................................... 55 Incrementa la satisfaccin del uso de IU.......................................................................... 55

Windows Presentation Fundation

Pgina 1 de 55

Introduccin

Qu es Windows Presentation Foundation? El Windows Framework Extension (WinFX) es la siguiente generacin del framework de programacin de Windows. WinFX est basado en el Framework .NET 2.0; sin embargo, incorpora una nueva API de programacin compuesta por Avalon (ahora llamado Windows Presentation Foundation) e Indigo (ahora conocido como Windows Communication Foundation). WinFX fue presentado por primera vez al mundo en el PDC 2003 (Professional Developers Conference) en Los Angeles, e inicialmente ha sido integrado como parte del cliente de Windows Longhorn, ahora ya conocido como Windows Vista. En esta serie de presentaciones se da una visin global de Windows Presentation Foundation.

Windows Presentation Foundation es el subsistema de presentacin unificado de Microsoft para Windows, expuesto a travs de WinFX, modelo de cdigo administrado de Windows Vista que extiende Microsoft .NET Framework. Windows Presentation Foundation est compuesto por un motor que saca ventaja del hardware con grficos modernos y por un conjunto de clases administradas que los desarrolladores pueden usar para crear aplicaciones visualmente ricas. Tambin presenta XAML, que permite que los desarrolladores utilicen un modelo basado en XML para manipular modelos de objetos.

Qu es XAML? En Windows Vista, WinFX admite una API con la cual los desarrolladores pueden alojar los controles y formularios de Windows Forms en una aplicacin de Windows Presentation Foundation, y viceversa. Cuando un desarrollador crea una aplicacin en Windows Presentation Foundation, la mayor parte del cdigo se encuentra escrito e implementado en XAML. XAML es ms rpido, ms fcil de implementar y de localizar, y significa una eleccin mejor que cualquier cdigo equivalente. Con XAML, no existen errores de rendimiento, porque es una representacin de un modelo de objetos basado en XML.

Qu es AERO? El trmino AERO, sigla de Autntico, Energtico, Reflexivo y Open (Abierto), remite a las guas de experiencia de usuario para Windows Vista, y se encarga del look and feel del sistema operativo. Estas guas no slo determinan el modo en que se dibujan los pxeles, sino tambin la forma en que el usuario interacta con el sistema y evoca sentimientos.


Pgina 2 de 55

Windows Presentation Foundation es la nueva generacin del sistema grfico. Windows Presentation Foundation de Microsoft permite construir aplicaciones de alta fidelidad dentro de Windows Vista, trayendo consigo aplicaciones IU y contenido multimedia, y aprovechando al mximo la capacidad de la computadora del usuario. La funcionalidad se extiende en el soporte de Tablets y otros formularios de entrada, un moderno sistema de imgenes e impresin de pipelines, accesibilidad y automatizacin de la infraestructura de IU, y manejo y visualizacin de datos.

Aprovecha la potencia y la capacidad que hoy en da brindan los sistemas grficos. La potencia del hardware 3D, que ya es estndar en las computadoras modernas, es algo hoy poco utilizada; solamente los juegos y algunas aplicaciones especiales de negocios la emplean. Windows Presentation Foundation define un conjunto de estas avanzadas capacidades como plataforma para construir aplicaciones con una experiencia de usuario mejorada.

Proporciona una base para construir aplicaciones y dar al usuario una experiencia de alta fidelidad en el uso de Windows Vista. Windows Presentation Foundation es la nueva generacin del subsistema que define un rango de servicios de salida: interfaz de usuario, dibujos 2D y 3D e imgenes, una nueva representacin de documentos, y servicios de audio y video. De este modo, abastece una sola base de marco de trabajo en el manejo de todos estos servicios. Windows Presentation Foundation hace posible construir una experiencia de usuario mejorada que hasta ahora era difcil o imposible. Para los desarrolladores .NET, el marco de trabajo es familiar, y reducirn un gran nmero de lneas de cdigo de animacin.

Los desarrolladores podrn proporcionar una experiencia de usuario ms rica y precisa para sus propias aplicaciones. Uno de los objetivos primordiales en el desarrollo bajo Windows Presentation Foundation es la integracin. Servicios como las animaciones y DataBinding son usados exactamente de la misma manera que el manejo que tienen los grficos 2D y 3D, los elementos de interfaz de usuario, como botones y TextBox, e incluso los elementos multimedia.

Se podrn aprovechar nuevas funciones visuales, por ejemplo, AERO. Los usuarios finales desean excelentes grficos, con buenas resoluciones en DPI, efectos 3D, animaciones, transiciones y fundidos, todo en un entorno simple. Justamente, Windows Vista ofrece esta nueva generacin de grficos.


Pgina 3 de 55

XAML y WPF separan los controles segn su funcionalidad y sus habilidades.

Simple Controls Controles simples que no tienen ningn contenido o tems.

Content Controls Son controles que pueden mostrar algn contenido.

Items Controls Controles que pueden tener hijos. Cualquier control que tenga alguna coleccin cae en esta categora.

Headered Content Controls Contienen dos propiedades: Header (es tpicamente usada para poner un identificador) y Content (es contenido del control).

Headered Items Controls Contienen las siguientes propiedades: Header, Item e ItemSource.

Implementacin de estilos Los estilos permiten a los diseadores de aplicaciones, documentos e IU, estandarizar una apariencia particular de un elemento. Esto se puede realizar, pero es necesario un fuerte modelo de estilo para poder compartir la apariencia. WPF provee ese modelo.

Se puede declarar un estilo de cualquier elemento que derive desde FrameworkElement o de FrameworkContentElement. La forma ms comn de declarar un estilo es hacindolo dentro del archivo XAML. Si se declara un estilo en el elemento principal de la aplicacin, ste puede ser utilizado en cualquier lugar de la aplicacin.

Un nuevo modelo de aplicacin mediante un Objeto Aplicacin Todas las aplicaciones que usan Windows Presentation Foundation estn asociadas a un Objeto Aplicacin. Este objeto representa a la aplicacin frente al sistema, y permite al sistema comunicarse con la aplicacin. Tiene ms funciones que veremos ms adelante.

WPF nos introduce en una nueva forma declarativa de programar, llamada XAML XAML es un lenguaje declarativo basado en XML, optimizado para describir grficamente interfaces de usuario visuales ricas desde el punto de vista grfico, tales como las creadas por medio de Macromedia Flash.

XAML fue diseado para soportar las clases y los mtodos de la plataforma de desarrollo .NET que tienen relacin con la interaccin con el usuario, en especial, el despliegue en pantalla.


Pgina 4 de 55

Los paneles son la clase base para todos los elementos que proporciona WPF en el soporte de layout Los elementos de un panel son componentes que controlan la renderizacin de los elementos (tamao y dimensiones, posicin, y el arreglo del contenido de sus hijos). WPF proporciona un gran nmero de paneles, como Canvas, DockPanel y GridPanel, que veremos ms adelante.

Efectos 3D La implementacin 3D de Windows Presentation Foundation permite a los desarrolladores dibujar, transformar y animar grficos 3D de distintas formas, usando las mismas habilidades afrontadas por la plataforma de grficos 2D. Tambin permite combinar grficos 2D y 3D para crear controles ms atractivos, y proporcionar complejas ilustraciones de informacin. Este soporte 3D que nos otorga Windows Presentation Foundation no tiene todas las caractersticas para el desarrollo de juegos.

Animaciones Las animaciones pueden ser un atractivo para una interfaz de usuario. Solamente con pocas animaciones se pueden crear sorprendentes efectos de animacin. WPF proporciona todas las herramientas para que este proceso que tan complicado nos pareca antes sea ms fcil de implementar.

Grficos basados en vectores Windows Presentation Foundation usa grficos basados en vectores. stos, que incluyen SVG (Scalable Vector Graphics), archivos metafile (.wmf) y las fuentes (que usamos usualmente para las letras), almacenan la informacin y la transmiten como una lista de instrucciones que describen cmo se va a recrear una imagen usando grficos primitivos.


Pgina 5 de 55

Framework de Windows Presentation Foundation

Arquitectura de Windows Presentation Foundation

La figura muestra los componentes internos de Windows Presentation Foundation.

Avalon proporciona una vista expandida de la capa de interfaz de usuario Avalon con un modelo especfico para documentos (1) y medios (2). Varias otras caractersticas incluyen controles e, incluso, Servicios de personalizacin y profiling (3) para ASP.NET, que son definidos tambin como parte de Windows Vista.

Otras de las caractersticas son la Mquina de Composicin de Escritorio (4) y el Administrador de Objetos de Presentacin (5).

Avalon interacta con el sistema operativo de base, que, por ejemplo, contiene GDI/GDI+. Algunos de estos tems se encuentran en el kernel, otros no.

Avalon ofrece un cambio fundamental en el modo en que se interacta con la computadora, que probablemente sea el cambio ms significativo de la IU desde Windows 1.0. Esto ocasiona modificaciones en la tecnologa, como la forma en que se buferean los grficos internamente. Estas caractersticas van a brindar una interaccin ms eficiente con sonido y video, y un sofisticado uso de transparencias.


Pgina 6 de 55

Las aplicaciones en Windows Presentation Foundation estn representadas con el nuevo motor de composicin basado en vectores. La aceleracin del hardware es usada por el proceso de representacin sobre el DirectX de la placa grfica de nuestra computadora, con un software de respaldo para monitores ms viejos. El sistema de coordenadas provee doble precisin y resolucin independiente, que permite soportar resoluciones altas de DPI para las pantallas y se est utilizando cada vez ms frecuentemente.

Document WPF provee muchas caractersticas para combinar documentos, IU y contenidos audiovisuales. Los documentos usualmente contienen un flujo de controles e imgenes, los cuales son difciles de proporcionar con los controles tradicionales de Windows.

UI Los controles UI permiten una alta interaccin con el usuario, pero no se concentran tanto en el soporte para textos.

Media Enriquecen la visin de las presentaciones interactivas, como video, audio y ms.

Desktop Services (servicios de escritorio) Provee un alto rango de servicios que permiten el uso eficiente de las aplicaciones de escritorio. En especial, con respecto al men Inicio y la barra de tareas, hay nuevas caractersticas incluidas en la sidebar, que permiten a los usuarios monitorear notificaciones y actividades en tiempo real (como el tiempo, la batera y actividades online).

Administrador de ventanas Maneja la mayor parte del trabajo duro de la administracin de ventanas, como minimizar, maximizar y mostrar cuadros de dilogo. Las nuevas caractersticas incluyen la navegacin basada en pginas y soporte en Extensible Application Markup Language, XAML.

Controls Interop Engine Provee soporte para controles .NET, HTML y Win32.

Motor de composicin de escritorio El motor est basado en vectores.

Animation and Composition Provee un fuerte soporte para una alta representacin de vectores grficos y estndares como SVG (Scalable Vector Graphics).

Media Processing Provee procesamiento de audio y video, como tambin nuevos codecs y APIs.


Pgina 7 de 55

Consiste en dos partes principales: El motor

Unifica la manera en que desarrolladores y diseadores manejan documentos, material audiovisual e IU. El motor de WPF unifica la manera en que desarrolladores y diseadores manejan documentos, material audiovisual e IU, proporcionando un runtime nico para experiencias de navegacin, aplicaciones basadas en formularios, grficos, videos, audio y documentos. Windows Presentation Foundation se encuentra construido sobre Microsoft DirectX(r), lo cual libera todo el poder de los grficos que el hardware presenta en computadoras modernas, y es posible explotar los futuros avances en materia de hardware. Por ejemplo, el motor de rendering basado en vectores de Windows Presentation Foundation permite que las aplicaciones escalen y aprovechen los monitores de alta definicin sin exigir trabajo suplementario por parte del desarrollador o usuario. De modo similar, usted tambin sacar provecho del momento en que Windows Presentation Foundation detecte una tarjeta de video que soporta la aceleracin de hardware.

El marco de programacin Proporciona soluciones para material audiovisual, diseo para interfaz de usuario y

documentos que van mucho ms all de lo que los desarrolladores tienen hoy. El framework de Windows Presentation Foundation proporciona soluciones para material audiovisual, diseo para interfaz de usuario y documentos que van mucho ms all de lo que los desarrolladores tienen hoy. Creado con criterios de extensibilidad, Windows Presentation Foundation permite que los desarrolladores creen sus propios controles sobre el motor de Windows Presentation Foundation desde el ground up o haciendo una subclase con los controles ya existentes de Windows Presentation Foundation. Son centrales en el framework de Windows Presentation Foundation los controles para formas, documentos, imgenes, videos, animaciones, 3D y paneles donde ubicar controles y contenido. Estas cuestiones primitivas proporcionan los blocks de construccin para el desarrollo de la nueva generacin de experiencias de usuario.

Capacidades de Windows Presentation Foundation

Contiene varios componentes comunes de interfaz de usuario, incluidos buttons, sliders y edit boxes.

Ofrece animacin 2D y 3D.

Contiene hyperlinks para navegar entre documentos y tablas.

Presenta varios tipos de grillas y paneles para asistir en el formato.

Contiene formatos de documento fijo y flotante, estilos y storyboards.

Efectos, enlace a datos y ms.


Pgina 8 de 55

Modelo de clases

System.Windows Este namespace contiene las clases e interfaces que son utilizadas para crear aplicaciones. Define varias interfaces y estructuras comunes usadas a travs de la API, como la clase Application, la clase Window, styling, dependency, y clases base comunes.

System.Windows.Controls El namespace de controles est asociado a la interfaz de usuario de la aplicacin. ste incluye mens, hyperlinks, edit boxes (text, check, combo y list boxes), buttons, panels, borders, y sliders para audio y video. El Viewport3D est tambin localizado en este namespace para controlar todo el contenido 3D y el contenido con interaccin.

System.Windows.Data El namespace de datos controla todas las propiedades para enlace a datos. ste es usado especficamente para la fuente, para estas clases y para cualquier otra asociada a la implementacin de datos y colecciones.

System.Windows.Input Este namespace controla todos los modos de entrada, como el mouse, el teclado o Tablet, con los cuales interacta el usuario cuando usa la aplicacin.


Pgina 9 de 55

System.Windows.Media El namespace Media controla todas las clases de grficos tanto para 2D como para 3D. ste tambin define el camino para las clases de segmento, brochas, colores, efectos de imgenes, clases geomtricas, colecciones, audio, video, enumeraciones y estructuras.

System.Windows.Media.Animation Este namespace contiene las clases utilizadas para animacin 2D y 3D. Esta rea incluye tipos para Timelines, KeyFrames y Animation.

System.Windows.Media.Media3D Contiene una variedad de clases especficas para grficos en 3D. Estas clases son utilizadas para definir cmo los grficos van a ser presentados dentro de la aplicacin.

System.Windows.Navigation Este namespace est dedicado a las clases e interfaces utilizadas para la navegacin de aplicaciones, donde la navegacin puede ser entre ventanas, paneles o journaling.

System.Windows.Shapes Este namespace es para todas las formas primitivas 2D usadas dentro de la API. stas son ellipse, glyphs, line, path, polygon, polyline y rectangle. Estas clases con similares a las encontradas en Scalable Vector Graphics (SVG).

System.Windows.Resources Este namespace contiene todas las clases que usan recursos, que podran definir propiedades para estilos de animacin y localizacin, y que pueden ser accedidas por un objeto referenciando el nombre como Style={StaticResource ResourceName} dentro de la aplicacin.

System.Windows.Serialization Este namespace soporta la conversin de objetos Avalon al modelo XAML y viceversa.

UIElement El elemento UIElement, que proviene del namespace System.Windows, es la clase base de la cual derivan muchos objetos visuales. Determina de cada elemento la apariencia inicial, el diseo, la posicin y la interaccin con el usuario.

FrameworkElement Derivado de UIElement, FrameworkElement es tambin una clase base. Es una clase de la cual la mayora de los elementos visuales heredan la apariencia y las caractersticas (por ejemplo, altura, ancho, etc.). Cuando escribimos cdigo en .NET, podemos acceder a un objeto que se encuentra dentro del XAML referencindolo con la propiedad Name.


Pgina 10 de 55

UIElement y FrameworkElement son dos de los elementos ms importantes dentro de la API. Son los que influyen sobre la apariencia bsica de cada uno de los elementos de la API. Por ejemplo, la altura y el ancho de un elemento son dos propiedades que heredan de FrameworkElement. Estas dos propiedades tienen un tipo de dato Double; esto quiere decir que cualquier elemento dentro de la API tiene una propiedad del tipo Double, para esto es una propiedad heredada del elemento UIElement.

Ejemplo del Namespace System.IO private void CreateAndShowMainWindow() { mainWindow = new Window(); Canvas myCanvas = new Canvas(); myCanvas.Background = Bushes.LightSteelBlue;

TextBlock txt1 = new TextBlock(); txt1.FontSize = 14; txt1.Text = Hola Mundo!"; Canvas.SetTop(txt1, 100); Canvas.SetLeft(txt1, 10); myCanvas.Children.Add(txt1); TextBlock txt2 = new TextBlock();

txt2.FontSize = 22; txt2.Text = Hola Mundo 2!"; Canvas.SetTop(txt2, 200); Canvas.SetLeft(txt2, 75);

myCanvas.Children.Add(txt2); mainWindow.Content = myCanvas; mainWindow.Title = Ejemplo"; mainWindow.Show(); } }

Creamos un objeto de tipo Window. Creamos un objeto de tipo Canvas. Establecemos el color de fondo de nuestro panel. Creamos un objeto de tipo TextBlock. Establecemos el tamao de la letra que va a aparecer en este TextBlock. Le asignamos el contenido que va a tener el TextBlock (Hola Mundo!). Establecemos la posicin del objeto de tipo TextBlock dentro del Canvas. Posicin

100 desde la parte superior y 10 desde la parte izquierda del Canvas. Le decimos al Canvas que el objeto txt1 es su nuevo hijo. Creamos otro objeto de tipo TextBlock, le asignamos el tamao de fuente 22 y el

contenido Hola Mundo 2!, y le indicamos la posicin donde va a estar en el Canvas.

Lo agregamos como hijo al Canvas. Le asignamos el Canvas al contenido de la ventana de nuestra aplicacin. En la propiedad Title de la ventana de la aplicacin asignamos Ejemplo. Finalmente, mostramos nuestra ventana.


Pgina 11 de 55

Bases de WPF

Introduccion Un gran porcentaje de las clases de Windows Presentation Foundation hereda de cuatro clases:

UIElement FrameworkElement ContentElement FrameworkContentElement

UIElement y ContentElement heredan de la clase DependencyObject, a travs de diferentes caminos. En trminos de herencia, UIElement tambin posee la clase Visual, que expone el nivel ms bajo de grficos soportado en Windows Presentation Foundation, definiendo regiones rectangulares independientes en la pantalla.

SubClass La forma ms prctica de crear una clase personalizada que se extienda de Windows

Presentation Foundation es creando una subclase que herede de una de las clases de WPF.

Tendremos todas las funcionalidades a travs de la herencia.

Se destacan tres clases cuyas funcionalidades podemos utilizar.

En la prctica, UIElement es para elementos que podrn soportar un largo modelo de objeto. Est para renderizar y definir IU dentro de regiones que pueden ser descriptas como regiones rectangulares en pantalla, y donde el contenido del modelo es entregado un poco ms abierto, para permitir diferentes combinaciones de elementos.

Si creamos una clase que herede de DependencyObject, se obtienen las siguientes funcionalidades:

Se adquieren los mtodos GetValue y SetValue, para obtener y asignar una propiedad.

La habilidad de usar propiedades dependientes y adjuntar propiedades.

Si creamos una clase que herede de UIElement, se pueden obtener las siguientes funcionalidades, adems de las que nos provee la clase DependencyObject:

Soporte para animaciones. Soporte bsico para entrada y de comandos. Mtodos virtuales que pueden sobrecargar para proveer informacin para

el manejador de layout.


Pgina 12 de 55

Si creamos una clase que herede de FrameworkElement, se pueden obtener las siguientes funcionalidades, adems de las que provee la clase UIElement.

Soporte para styles y storyboards. Soporte para DataBinding.

Si creamos una clase que herede de ContentElement, obtenemos las siguientes funcionalidades, adems de las que nos brinda DependencyObject.

Soporte para animaciones. Soporte bsico para eventos de entrada y comandos.

Si creamos una clase que herede de FrameworkContentElement, obtenemos las siguientes funcionalidades, adems de las que provee la clase ContentElement:

Soporte para styles y storyboards. Soporte para DataBinding. No se obtiene acceso a las modificaciones del manejador de layout.


Pgina 13 de 55

Freezable Objects Los objetos del tipo Freezable presentan caractersticas especiales que ayudan a desarrollar una aplicacin con mejor funcionamiento. Los ejemplos de objetos del tipo Freezable incluyen brushes, pens, transformaciones y animaciones.

Qu es Freezable? Es un tipo especial de objeto que tiene dos estados posibles: Unfrozen o Frozen.

Cuando se encuentra en el estado Unfrozen, un objeto Freezable se comporta como cualquier otro objeto. Cuando se encuentra en estado Frozen, ya no puede ser modificado.

Un objeto del tipo Freezable provee un evento Changed para notificar cualquier modificacin del objeto.

La mayora de los objetos del tipo Freezable de Windows Presentation Foundation pertenece al sistema de grficos.

La clase Freezable facilita el uso del sistema de grficos de forma ms segura.

Ayuda a mejorar el rendimiento de la aplicacin.

Ejemplos de clases que heredan de Freezable incluyen Brush, Transform y Geometry. Ya que estos objetos contienen recursos sin manejar, el sistema debe monitorear las modificaciones generadas en ellos, y luego actualizar los recursos correspondientes cuando hay algn cambio en el objeto original.

Incluso cuando no se modifica un objeto del sistema grfico, el sistema debe gastar recursos de su mtodo de monitoreo para el caso de que se haya realizado alguna modificacin.

Ejemplo Freezable Por ejemplo, creamos un SolidColorBrush y lo usamos para pintar el fondo de un

botn. Cuando el botn es renderizado, el sistema de grficos de Windows Presentation Foundation usa la informacin que se le provee para pintar un grupo de pxeles y crear la apariencia de un botn. Button myButton = new Button(); SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow); myButton.Background = myBrush;

El mtodo Freeze permite deshabilitar la capacidad de un objeto de actualizarse por s mismo. Se puede usar este mtodo para hacer que un Brush se congele o se vuelva inmodificable. if (myBrush.CanFreeze) { // Convertirmos el Brush en inmodificable

myBrush.Freeze(); }


Pgina 14 de 55

XAML

Introduccion XAML es un lenguaje declarativo XAML es un lenguaje declarativo basado en XML que define objetos y propiedades en XML. Un parser XAML instancia y ejecuta los objetos usando una API apropiada.

Creando una IU en XAML XAML y Avalon (Windows Presentation Foundation) son dos cosas distintas. XAML es, simplemente, una forma de marcado XML. Avalon es la API grfica y de interfaz de usuario. Mientras que XAML es usado para instanciar objetos Avalon, nada impide usar XAML para crear otros objetos no grficos.

XAML es la manera recomendada para crear interfaces de usuario en el modelo de programacin de Windows Presentation Foundation, porque nos proporciona un mtodo para separar la definicin del diseo de la IU y la lgica. Tambin permite integrar cdigo usando archivos code-behind. Con XAML tambin es posible crear una IU entera sin utilizar cdigo.

Creando un archivo bsico de XAML Hola Mundo

Este ejemplo muestra todo lo que se necesita para escribir un Hola Mundo en XAML.

Los archivos XAML son, convencionalmente, archivos XML con una extensin de tipo .xaml y un namespace referenciado a los namespaces de XML. Aqu, como estamos trabajando con Windows Presentation Foundation, todos los nombres sern referenciados hacia Windows Presentation Foundation y los namespaces de XAML.

XAML es la sigla de Extensible Application Markup Language, Lenguaje de Formato para Aplicaciones Extensibles.

Es un lenguaje para la interfaz de WPF.

Est optimizado para describir grficamente interfaces visuales de usuario ricas desde el punto de vista grfico.

Los archivos de tipo XAML sern producidos por una herramienta de diseo visual, como Microsoft Visual Studio o Microsoft Expression.


Pgina 15 de 55

El XML resultante es interpretado de forma instantnea por un subsistema de despliegue de Windows Vista que reemplaza al GDI de las versiones anteriores de Windows. Los elementos de XAML se interconectan con objetos del Entorno Comn de Ejecucin para Lenguajes. Los atributos se conectan con propiedades o eventos de esos objetos.

XAML fue diseado para soportar las clases y los mtodos de la plataforma de desarrollo .NET que tienen relacin con la interaccin con el usuario, en especial, el despliegue en pantalla. La sigla XAML originalmente significaba Extensible Avalon Markup Language, Lenguaje de Formato para Extensibilidad de Avalon, habiendo sido Avalon el nombre clave original de la Base de Presentacin de Windows, nombre que engloba a este grupo de clases de .NET.

Declaraciones de namespaces en XAML Existen dos declaraciones:

xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation La primera referencia el total de los namespaces de WPF como predeterminado.

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" La segunda referencia a un namespace de XAML separado, que tpicamente empieza con el prefijo x:

La relacin entre estas dos declaraciones es que XAML es un lenguaje estndar, y Windows Presentation Foundation es una implementacin que usa XAML como lenguaje. XAML especifica ciertos elementos que son preasumidos para la implementacin, y cada uno de ellos debe ser accesible a travs de XAML. El espacio XAML define muchas caractersticas comnmente utilizadas que son necesarias hasta para aplicaciones bsicas en Windows Presentation Foundation.


Pgina 16 de 55

XAML y code-behind XAML Click Me!

Code-behind namespace MyNamespace{ public partial class MyCanvasCode : Canvas { void Button_Click(object sender, RoutedEventArgs e){ Button b = e.Source as Button; b.Background = Brushes.Red; }}}

XAML crea elementos de la interfaz de usuario, como botones, cajas de texto, paneles, etc., pero no maneja eventos. Por ejemplo, si hay un botn en una pgina, XAML puede crearlo y mostrarlo por pantalla. Pero el botn no hizo nada hasta ahora. El modelo de programacin de Windows Presentation Foundation permite, a travs de los atributos del elemento XAML, asociar un evento que definimos en code-behind. El code-behind puede estar en lenguajes como Microsoft Visual Basic .NET o C#. Para poder asociar los eventos que definimos en el XAML con los manejadores en el code-behind, los nombres de los eventos en el code-behind y el valor del atributo en el elemento XAML tienen que coincidir, como se ve en el ejemplo.

Propiedad Name Muchos elementos XAML soportan la propiedad Name. sta es muy importante, ya que permite referenciar un elemento particular desde el code-behind, cuando ese elemento fue originalmente creado desde el cdigo XAML. Hay elementos que no tienen esta propiedad ya que su clase no hereda, pero pueden usar x:Name para el mismo propsito.

X:Name

Adems de la propiedad x:Name, existen muchas propiedades que nos brindan facilidades para el desarrollo, como X:Key, x:Code, x:ClassModifies, x:Class, x:Array, etc.


Pgina 17 de 55

XAML sin code-behind Click Me!

En el caso de no querer usar un archivo separado para el code-behind, se tiene la alternativa de agregar el cdigo en el archivo XAML; ste va a interactuar con los elementos de XAML. El cdigo XAML que vemos contiene C#. Ntese que el cdigo que est dentro del elemento x:Code debe estar rodeado de .

Este ejemplo es muy sencillo: hay un botn llamado button1, y al cliquear sobre ste, se procesa el evento Clicked. Lo nico que hace este evento es cambiar el texto que aparece dentro del botn.

Hay muchas razones para desalentar sobre el uso de cdigo en XAML. En trminos de arquitectura y filosofa de codificacin, separar el XAML y el code-behind permite que las funciones del desarrollador y del diseador sean distintas. No se pueden declarar mltiples clases dentro del cdigo XAML, y todo debe existir en un miembro o variable dentro del cdigo generado de la clase parcial.


Pgina 18 de 55

Programando en XAML

Mediante el uso de XAML se puede:

Escribir un documento que muestre contenido esttico. Crear un documento que muestre por pantalla datos de un enlace y actualice su

contenido desde el archivo fuente. Definir animaciones y efectos de ratn.

En muchas aplicaciones, gran parte del cdigo se escribe para crear o actualizar la interfaz de usuario. En los ltimos aos, muchos desarrolladores han aprendido a escribir las IU utilizando lenguajes basados en etiquetas. La plataforma Longhorn (Windows Vista) define un nuevo lenguaje de este tipo, llamado XAML. Usar un lenguaje de etiquetas para definir una interfaz de usuario tiene ventajas sobre los lenguajes de programacin tradicionales:

Una propiedad de herencia ms aparente. Un control de jerarquas ms aparente. Es posible aplicar propiedades de forma

conjunta a los hijos de un elemento padre. Mayor facilidad de interpretacin y procesamiento de las etiquetas mediante

herramientas; la interfaz de una aplicacin puede ser visualizada en cualquier navegador que soporte XAML.

Separacin potencial de IU y cdigo procedimental.

Sin embargo, para crear una aplicacin productiva ser necesario trabajar con eventos, proporcionar una lgica de decisiones personalizadas, o incluir algunas operaciones que no tengan nada que ver con la IU. Esto requiere mezclar XAML con cdigo y, afortunadamente, es muy sencillo de conseguir, gracias al code-behind.

Documentos en XAML

Extensible Application Markup Language (Lenguaje de Formato para Aplicaciones Extensibles).

Describe grficamente interfaces de usuario visuales ricas desde el punto de vista grfico.

Permite a los desarrolladores especificar una jerarqua de objetos con un sistema de caractersticas y de lgica.

Soporta las clases y los mtodos de la plataforma de desarrollo .NET.

Es interpretado de forma instantnea.

Separa el aspecto lgico del aspecto visual.

XAML es un lenguaje declarativo basado en XML


Pgina 19 de 55

XAML es un lenguaje declarativo basado en XML, que puede ser utilizado para programar en el modelo de objetos de Windows Presentation Foundation. Es especialmente til a la hora de implementar las IU de sus aplicaciones. Cada etiqueta (o tag, en ingls) de XAML corresponde a una clase de modelo de objetos. En general, una etiqueta tambin posee una coleccin de atributos que remiten a las propiedades de la clase asociada de etiqueta.

En tiempos de compilacin, el parseador convierte el XAML en una clase parcial que contiene un cdigo equivalente. Cada etiqueta de XAML se convierte en una instancia de la clase de modelo de objetos correspondiente, y los valores del atributo de la etiqueta se asignan a las propiedades del objeto pertinente. Luego, la clase parcial creada desde el XAML parseado se combina con el archivo del cdigo de la pgina a travs del compilador runtime del lenguaje comn, y luego crea un objeto para la pgina en cuestin.

Separar la parte visual de la parte lgica les permite a las personas utilizar diversos utilitarios grficos para crear el layout y el diseo de la parte grfica de la interfaz de usuario, sin afectar la parte lgica del programa. Entonces, podemos combinar diferentes disciplinas de trabajo en la misma aplicacin, algo que hoy es difcil de lograr.

Con XAML, Windows Presentation Foundation se inclina hacia un modelo de programacin distinto: la programacin declarativa. A un lenguaje declarativo se le indica qu es lo que se quiere obtener, lo que se est buscando. Tiene las ventajas de ser fiable, elegante y expresivo.


Pgina 20 de 55

Ejemplo XAML y Code-behind


Pgina 21 de 55

User Interfaces Controles

Introduccion Avalon tiene un conjunto rico de controles. Incluye varios similares a los de Win32 y otros muy distintos. La mayor parte del look and feel puede ser realizada declarativamente con XAML. La funcionalidad est dada por las clases FrameworkElement y Control.

Un control es cualquier cosa que requiere interaccin del usuario. Avalon tiene un conjunto rico de controles, incluidos varios muy similares a los de Win32 y otros muy distintos. Una diferencia clave entre los controles de Avalon y los previamente usados en el desarrollo de aplicaciones Windows, es que su apariencia y su comportamiento pueden ser modificados completamente con un cdigo fuente complejo. La mayor parte del look and feel de estos controles puede ser realizada declarativamente en el documento XAML.

La funcionalidad de un control en Avalon viene de dos clases: FrameworkElement y Control. La primera es la base de la implementacin que puede ser usada tpicamente para definir una Control. Comnmente usan propiedades dependientes.

Jerarqua de controles

En Windows Presentation Foundation armamos una jerarqua de objetos; por ejemplo, dentro de la pgina tenemos un DockPanel. Este panel contiene tres hijos: un StackPanel, un Label y un ComboBox. El StackPanel, a su vez, tiene dos hijos: un TextBox y un Button.

La jerarqua de clases nos ser muy til, ya que cada hijo puede heredar propiedades y estilos de su padre. Por ejemplo, los elementos del StackPanel tendrn un estilo de posicin distinto de los hijos que tendrn los hijos del DockPanel. Tambin podemos crear distintos estilos y aplicarlos a los diferentes grupos de controles que tengamos.


Pgina 22 de 55

Lista de controles XAML

Control Button y Label

This is Label

Para empezar, podemos decir que un botn es un control, un componente de interaccin que permite a los usuarios comunicarse con una aplicacin. Normalmente, cuando hacemos clic en un botn, mandamos un mensaje, y la aplicacin responde a l. El sistema, el botn y la aplicacin cooperan entre s para cambiar la apariencia y el estado del botn.

En el ejemplo del botn que vimos, nos podemos dar cuenta de cmo Windows Presentation Foundation interpreta el cdigo XAML.

Los atributos ID, Height, Width, Content y Click, por lo general, se encuentran en la mayora de los controles, ya que describen aspectos generales, pero hay algunos controles que tienen atributos que slo ellos poseen, y es por eso por lo que se diferencian de los dems. Como vemos, en el Label tenemos atributos parecidos a los del botn, lo nico que cambia para que sean distintos es que en el comienzo del tag especificamos el control que queremos mostrar.

Border BulletDecorator Button Canvas CheckBox ComboBox ContextMenu Control DockPanel DocumentViewer Expander FlowDocumentPag

eViewer FlowDocumentReader FlowDocumentSc

rollViewer Frame

Grid GridSplitter GridView GroupBox ImageLabel ListBox ListView Menu Panel PasswordBox PopIp ProgressBar PrintDialog RaduiButton RepeatButton RichTextBox ScrollBar ScrollViewer Separator Slider StackPanel StatusBar TabControl TextBix Thumb ToolBar ToolTip TreeView WrapPanel ViewBox


Pgina 23 de 55

Control Checkbox El control CheckBox permite a los usuarios seleccionar y deseleccionar opciones dentro de una IU. Este control es un contenedor, lo que significa que puede haber otros contenidos dentro de l, como imgenes y textos. Los estados de los tems pueden ser seleccionado o deseleccionado (checked y unchecked).

Check Box

Control ListBox Representa el control que provee una lista de tems entre los cuales el usuario puede seleccionar. Note en el ejemplo que todos los elementos hijos de ListBox son envueltos por el tag ListBoxItem.

Item 1 Item 2 Item 3

Control RadioButton Es un control que se usa como un conjunto de estos controles; por lo general, no se utiliza un solo RadioButton, pero es posible crear un simple RadioButton. RadioButton es de tipo ContentControls.

Si No


Pgina 24 de 55

Control Expander Muestra informacin que puede desplegarse y esconderse. El usuario lo conoce, ya que es un control de la ventana Explorer en Windows XP.

Windows Presentation Foundation nos permite dar estilo para adaptar nuestro desarrollo.

Para crear este control simplemente se genera un Expander, una regin de Header para el rea del ttulo, y luego se agregan algunos contenidos dentro del cuerpo del Expander.

Se puede, opcionalmente, usar el ScrollViewer para prevenir que la lista se haga muy larga.

Books Item 1 Item 2 Item 3 Item 4


Pgina 25 de 55

Control MenuBase Dentro de esta clase hay dos tipos de mens: Menu y ContextMenu. El primero acta como contenedor para el control MenuItem. ContextMenu le permite al desarrollador extender las opciones de un control a travs del clic derecho. En el ejemplo que tenemos, vemos que la ventaja que nos brinda adherir un control ContextMenu es que le da al botn mucha ms potencia en el evento Click. El clic izquierdo es usado normalmente, pero el derecho se utiliza para ver y seleccionar desde un men. Como vemos en la imagen, al hacer clic derecho sobre el botn, aparece un men donde hay muchas ms opciones.

A ContextMenu within a Button

Control ComboBox


Pgina 26 de 55

Paneles Una pgina de XAML comienza tpicamente con un elemento del panel.

El panel es un envase para el contenido de una pgina, y controla la colocacin y la representacin de ese contenido.

Un panel puede contener otros paneles, lo que permite repartir la superficie de exhibicin en regiones, cada una controlada por su panel.

Los paneles son contenedores de controles que pueden ser jerarquizados. El conjunto de atributos sobre un panel es heredado por los controles que estn contenidos por l. Se puede usar un panel para las siguientes funciones:

Agrupar controles lgicamente para que stos se puedan mostrar o esconder. Definir un contenedor conveniente donde los controles puedan ser creados y

borrados dinmicamente. Usar un solo punto para aplicar cualidades del estilo a un conjunto de controles. Proveer de informacin a las pginas ASP.NET sobre los controles que estn juntos

en la paginacin.

Panel Canvas Un panel Canvas coloca cada elemento hijo en coordenadas dentro del rea del

panel de Canvas.

Cuando las coordenadas de los elementos se superponen, se puede especificar el orden de aparicin de los elementos.

Todos los hijos del Canvas usan las siguientes propiedades para poder situarse dentro de l y, como su nombre lo indica, la distancia con respecto a un extremo: Top (parte superior) Button (parte inferior). Left Right

Canvas es un panel que no hereda caractersticas de diseo. Tiene predefinidos la altura y el ancho en cero, a menos que sea hijo de otro elemento del que automticamente hereda esas propiedades. Los hijos de Canvas nunca cambian de tamao segn la herencia sobre el canvas, simplemente se sitan sobre los puntos de coordenadas designados.

Hello Shapes!


Pgina 27 de 55

Panel DockPanel Un DockPanel permite acomodar sus elementos de forma horizontal o vertical. Cuando se le asignan al DockPanel dos elementos en la misma rea, ste los acomoda de forma vertical u horizontal dentro de ella.

En el ejemplo vemos cmo se divide el espacio usando un DockPanel. Hay cinco elementos Border que son adheridos como hijos del DockPanel. Cada uno usa una propiedad diferente de posicin del DockPanel para dividir el espacio. El ltimo elemento llena el espacio restante; para esto hay que establecer la propiedad LastChildFill del DockPanel en verdadero. Para poder ubicar los elementos hijos del DockPanel en las distintas posiciones que nos ofrece el control, tenemos que establecer la propiedad Dock. Las distintas posiciones que tenemos son Top, Bottom, Left, Right y Fill. En caso de que tengamos dos en Top, como en el ejemplo, nos dibujar ms arriba la que est escrita en primer lugar en nuestro cdigo XAML. Lo mismo har con las otras posiciones distintas del DockPanel.

Dock = "Top" Dock = "Top" Dock = "Bottom" Dock = "Left" This content will "Fill" the remaining space


Pgina 28 de 55

Panel FlowPanel El panel FlowPanel proporciona un gran nmero de caractersticas automticas, y

nos permite trabajar con textos y grficos complejos.

Exhibe sus elementos de la mejor manera posible, teniendo en cuenta el rea de trabajo, y envolviendo y alineando los elementos como sea necesario.

El FlowPanel ofrece un conjunto de caractersticas de salida automticas que facilitan la presentacin de texto y grficos.

Se define el tamao del panel usando las propiedades Width y Height. El panel se muestra dependiendo de estas dimensiones, como se ve en las figuras.

Se trata, por tanto, de un elemento potente que, a partir de sus dimensiones (propiedades Width y Height), distribuye el espacio de forma adecuada. Por defecto, los elementos son colocados de izquierda a derecha, y de arriba hacia abajo. El siguiente fragmento XAML muestra la forma en que el FlowPanel separa y redistribuye sus elementos (cuatro cuadrados Canvas), tras ser redimensionado:


Pgina 29 de 55

Panel TextPanel Soporta textos multilnea y textos multiformato.

El uso tpico es el caso de tener que realizar un diseo complejo del texto.

Para mostrar un simple texto es recomendable usar el elemento Text.

TextPanel tambin formatea y redimensiona los textos.

El siguiente cdigo XAML nos muestra cmo este tipo de panel distribuye el contenido, ajustando el nmero y la altura de las columnas.

Transcript of the Nicolay Draft of the Gettysburg Address.


Pgina 30 de 55

Panel GridPanel Soporta muchas propiedades que se pueden usar para especificar el diseo de los

datos por mostrar.

La distribucin de los elementos hijos empieza en la esquina superior izquierda.

Un elemento puede ocupar varias filas o varias columnas, utilizando la propiedad ColumnSpan o RowSpan.

Cada hijo del GridPanel est dibujado en el orden en que aparece en el cdigo XAML. Como consecuencia, el orden de las capas puede ser alcanzado cuando los controles comparten las mismas coordenadas.

El control Grid y las tablas comparten una funcionalidad en comn, pero cada uno puede ser aplicado en escenarios distintos para su mejor uso. El control Grid agrega elementos basados en columnas y filas indexadas, las tablas no. Tambin nos permite mantener el contenido en una capa, donde ms de un elemento puede existir sin estar en una simple celda; las tablas no soportan capas.

Si un elemento se agrega dentro de un Grid y la columna tiene auto en la propiedad Width, se acomodar sin restricciones.

Panel StackPanel StackPanel es para crear un conjunto de botones situados verticalmente. Para posicionamiento horizontal, se debe colocar la propiedad Orientation en Horizontal.

Botn 1 Botn 2 Botn 3


Pgina 31 de 55

Trabajando con documentos WPF ofrece nuevas caractersticas en los documentos que permiten una alta fidelidad en el contenido que se est diseando, para brindar fcil acceso y lectura. Esto super a las generaciones anteriores de Microsoft. Existen dos tipos de documentos

Fixed y Flow

Localizado en el namespace System.Windows.Documents, el objetivo del servicio de documentos de Avalon es proporcionar una mejor experiencia en la lectura online e integrar otras caractersticas presentes en la API de Avalon. Provee un conjunto de controles preconstruidos que simplifican el uso de documentos de tipo Fixed y Flow. La pantalla del contenido del documento Flow es soportada por tres controles: FlowDocumentReader, FlowDocumentPageViewer y FlowDocumentScrollViewer.

Documento Fixed Los documentos Fixed estn pensados para aplicaciones que requieren una precisa presentacin de WYSIWYG (What you see is what you get, lo que ve es lo que obtiene).

El uso tpico del documento Fixed incluye procesamiento de textos, publicaciones de escritorio y diseo de formularios, donde la necesidad de mantener el diseo de la pgina es crtica.

Un documento Fixed mantiene con precisin la posicin de los elementos del contenido, independientemente de la pantalla o de la impresora en uso. Por ejemplo, una pgina del documento Fixed mostrada en 96 dpi aparecer en la misma posicin cuando la salida sea en una impresora lser con 600 dpi o cuando se necesite imprimir en dimensiones mucho ms grandes, con 4800 dpi. La estructura de la pgina se mantiene en todos los casos, mientras la calidad del documento se maximiza para las capacidades de cada tipo de dispositivo.


Pgina 32 de 55

Control FixedDocument DocumentViewer El control DocumentViewer est diseado para mostrar por pantalla el contenido de este tipo de documento de forma paginada. De manera predeterminada, el estilo que provee es intuitivo y visualmente ergonmico, fcil de usar y soporta las necesidades ms comunes. Provee acceso a las pginas a travs de un mecanismo familiar de scroll. Tambin brinda un estilo de vista de pgina que permite a los usuarios ver el contenido cambiando de pgina. Este control es de slo lectura; la modificacin del contenido no est disponible y no es soportada.

ToolBar El estilo predeterminado del DocumentViewer incluye una barra de herramientas que permite el uso de algunas funciones como las siguientes:

Hide/Show ToolBar: esconde y muestra la barra de herramientas. Zoom Controls: permite acercarse al contenido de la pgina. Copy Button: botn que copia el contenido al clipboard. Find Button: nos permite buscar algn contenido dentro de lo mostrado en pantalla por el DocumentViewer.

El DocumentViewer soporta el cambio de diseo completo o parcial, el cual permite al control ser visualmente integrado a cualquier entorno de aplicacin. Tambin est diseado para mostrar el contenido para manejo de slo lectura, las modificaciones de contenido no estn soportadas.


Pgina 33 de 55

Ejemplo de DocumentViewer


Pgina 34 de 55

try { ParserContext parserContext = new ParserContext(); parserContext.Mapper = XmlParserDefaults.DefaultMapper; parserContext.Parent = MyDocumentViewer; // Let the parser know where the related content files and resource files are. parserContext.BaseUri = parserContext.ResourceUri = contentUri;

// If the parsed content cannot be cast to an IDocumentPaginator, content is set to null. object content = Parser.LoadXml(documentStream, parserContext) as IDocumentPaginator;

if (content == null) { System.Windows.MessageBox.Show( "The parsed content cannot be cast to an IDocumentPaginator object.", "Cannot Create IDocumentPaginator", MessageBoxButton.OK); } else MyDocumentViewer.Content = (IDocumentPaginator)content; } catch { /* An exception was raised during parsing. */ } } }


Pgina 35 de 55

Documento Flow Est diseado para optimizar la visin y la legibilidad por parte del usuario. Se ajusta dinmicamente segn el contenido que haya en l. Una pgina web es un ejemplo sencillo de un documento Flow.

Mientras que los Fixed Documents se enfocan en representar el contenido de forma consistente y precisa, los Flow Documents estn diseados para optimizar la experiencia del lector cuando el contenido es mostrado en diferentes tamaos y resoluciones de dispositivos.

El Flow Document soporta algunos controles para la visualizacin de documentos: FlowDocumentPageViewer FlowDocumentReader FlowDocumentScrollViewer

La figura muestra cmo la vista del documento Flow se modifica con los severos cambios de tamao de ventana. Como cambia el rea de la pantalla, el contenido se mueve para lograr la mejor vista del espacio visible.


Pgina 36 de 55

FlowDocumentPageViewer Muestra el contenido de forma paginada, se ve una pgina a la vez. En el caso de que tengamos un contenido muy extenso, al darle este contenido al control, automticamente lo paginar para ofrecer una mejor lectura.

Content Area: el rea de contenido muestra el contenido de este documento especificado en la propiedad del documento.

Tool Bar: la barra de herramientas predeterminada est debajo del rea de contenido, y tiene controles de navegacin entre pginas, un control para cambiar el nivel de zoom, y un indicador que nos muestra qu nmero de pgina estamos viendo actualmente y la cantidad total de pginas.

Page Navigation Controls: incluye un botn para saltar a la pgina siguiente y otro para saltar a la pgina anterior.

Zoom Controls: permiten al usuario aumentar y disminuir el nivel del zoom, haciendo clic en el botn de ms y en el de menos.

FlowDocumentScrollViewer La barra desplazadora vertical es siempre mostrada, y la horizontal se exhibe slo si es necesario. De forma predeterminada, el FlowDocumentScrollViewer no incluye una barra de herramientas (la cual trae los controles de los otros documentos, como zoom, botn de bsqueda, etc.), pero se puede hacer visible modificando la propiedad IsToolBarVisible.


Pgina 37 de 55

FlowDocumentReader Permite al usuario elegir varios tipos de vistas de forma dinmica. Puede ver el contenido en una simple pgina, en dos pginas a la vez, o con un scroll continuo.

FlowDocumentReader tiene los mismos controles que FlowDocumentPageViewer, pero agrega algunos ms. Estos controles se encuentran en el rea de Tool Bar, debajo del rea de contenido.

Find Button: el botn de bsqueda abre una ventana de dilogo, la cual permite al usuario buscar algn contenido del FlowDocumentReader. El botn Find no se mostrar si la propiedad IsFindEnable es falsa.

Viewing Mode Buttons: los botones de tipo de vista le permiten al usuario seleccionar las distintas vistas. Puede ser una o varias pginas a la vez.

Las distintas vistas que ofrece este documento son:

Page. Brinda la misma funcionalidad que el control FlowDocumentPageViewer. Visin del contenido de una pgina por vez.

Scroll. Ofrece la misma funcionalidad que el control FlowDocumentScrollViewer. Se muestra todo el contenido en una sola pgina con una barra desplazadora para poder ver todo el contenido.

Two Page. El contenido se muestra en dos pginas a la vez, de manera similar a un libro.


Pgina 38 de 55

Trabajando con grficos y animaciones Introduccion WPF proporciona avanzadas caractersticas de dibujo y animacin.

Para utilizar las nuevas herramientas multimedia no es necesario contar con libreras especiales.

Permiten a los desarrolladores crear interesantes interfaces y contenidos para los usuarios.

Tanto con Visual Studio como con el Notepad se pueden crear grficos con vectores o animaciones complejas, e integrarlos a nuestras aplicaciones.

WPF proporciona avanzadas caractersticas de dibujo y animacin. Para utilizar las nuevas herramientas de multimedia, no es necesario contar con libreras especiales. stas permiten a los desarrolladores crear interesantes interfaces y contenidos para los usuarios. Tanto con Visual Studio como con Notepad se pueden crear grficos con vectores o animaciones complejas, e integrarlos a nuestras aplicaciones.

Precisin mejorada: El sistema de coordenadas de WPF usa el tipo de datos Double, que es ms preciso que Float. Las transformaciones y la opacidad tambin estn manejando este tipo de datos. WPF tambin soporta una gama de color mucho ms extensa y provee un soporte integrado para administrar salidas desde distintos espacios de color.

Aceleracin del hardware: El sistema de WPF est diseado para aprovechar ms hardware de grficos y minimizar la utilizacin del CPU.


Pgina 39 de 55

Objeto Shape Windows Presentation Foundation provee un gran nmero de objetos listos para usar. Todos los objetos Shape heredan propiedades de la clase Shape. El Shape de tipo Line permite dibujar una lnea entre dos puntos dados.

En el ejemplo damos las coordenadas del primer punto (X1, Y1) y las del segundo punto (X2, Y2) donde se va a encontrar nuestro Shape. Adems, especificamos el color, el grosor y otras propiedades. Son elementos para crear y dibujar Shapes 2D.

Las propiedades de los Shapes son dependientes de los objetos y pueden ser animados.

Soportan una variedad de eventos, hacindolos adecuados para su uso.Pertenecen a la clase System.Windows.Shape.

Objeto Geometries Como los objetos Shape, representan Shapes 2D, pero son ms verstiles que aqullos. Pueden ser definidos, por ejemplo, para describir curvas. Tambin es posible renderizarlos usando otro elemento del framework, controles o brushes.

Objeto Pen Dibuja una lnea de una altura y un ancho especficos. Una lnea dibujada con un Pen puede adquirir una variedad de estilos, incluidos colores slidos y texturas. El relleno depende del brush o la textura que se utilice como objeto de relleno.


Pgina 40 de 55

Ejemplo objeto Ellipse El dibujo de una Ellipse es con WPF una tarea muy fcil: indicamos las medidas de ancho y alto (Width y Height), el relleno (Fill), el color del borde (Stroke) y el grosor del borde (Stroke Thickness).

Vimos dos ejemplos, Ellipse y Line, pero adems de stos, existen otros tipos de Shapes, como Path, Polygon, Polyline y Rectangle. Algunas de las caractersticas que tienen en comn estos objetos Shape son:

Stroke: dibuja una lnea alrededor del objeto Shape. StrokeThickness: dibuja una lnea ms gruesa alrededor del objeto Shape. Fill: describe cmo se pinta dentro del objeto Shape. Las propiedades para especificar coordenadas y vrtices estn medidas en pxeles independientes del dispositivo.

Como los Shapes son elementos de IU, se pueden agregar dentro de paneles y de otros controles. El panel de tipo Canvas es la mejor opcin para trabajar con dibujos complejos, ya que ste soporta posicin absoluta de los hijos del panel.

Tipos de transformaciones Rotation Con este tipo de transformacin podemos rotar un objeto con un determinado ngulo. Con la propiedad Angle en 45 se rota un elemento 45 grados en el sentido de las agujas del reloj. Se pueden especificar las propiedades CenterX y CenterY si se quiere controlar el punto donde el elemento es rotado.

Scale Cambia el tamao de nuestro dibujo de forma escalar. Las propiedades ScaleX y ScaleY redimensionan el elemento. Por ejemplo, si el valor ScaleX es 1.5, el elemento se estira un 150% ms con respecto al ancho. Si ScaleY tiene un valor de 0.5, el elemento se reduce un 50% con respecto a la altura.

Skew Con esta transformacin estiramos la figura, modificando las propiedades AngleX, AngleY y Center. Son tiles para la simulacin 3D en objetos 2D. La propiedad Center especifica el punto central del estiramiento. Las propiedades AngleX y AngleY establecen los ngulos de estiramiento de eje X y de eje Y.


Pgina 41 de 55

Cmaras y proyecciones Cuando los desarrolladores trabajan en 2D, la posicin de los dibujos es primitiva, pero cuando se crea un escenario 3D, es importante recordar que slo se est creando una representacin 2D de un objeto 3D. Porque una escena 3D se ve diferente segn el punto de vista desde donde se mire, se debe marcar el punto desde donde se est viendo el grfico. La clase Camera permite especificar el punto desde donde queremos que se vea el grfico.

Otra manera de entender cmo est representada una imagen 3D en una superficie 2D es describiendo la escena como una proyeccin sobre la superficie de la visin. La clase ProjectionCamera nos permite especificar las diferentes proyecciones y sus propiedades para modificar el modo en que se va a representar el modelo del grfico 3D. Las propiedades NearPlaneDistance (distancia mnima) y FarPlaneDistance (distancia mxima) limitan la distancia de la proyeccin de la cmara. Esto es porque la cmara puede ubicarse en cualquier lugar de la escena; entonces, podramos ubicar la cmara muy cerca y no se podra distinguir nuestro grfico 3D, y hasta podramos estar dentro de l.

Traslacin y rotacin Traslacin Las traslaciones se heredan desde la clase Transform3D, e incluyen las clases TranslateTransform3D, ScaleTransform3D y RotateTransform3D. TranslateTransform3D mueve todos los puntos del modelo 3D en direccin del vector que se define en la propiedad Offset. Por ejemplo, tenemos un cubo donde el vrtice se encuentra en el (2, 2, 2), y queremos que el vrtice est en el (2, 3.6, 3). Para hacerlo, en la propiedad Offset tendramos que asignar el vector de traslacin (0, 1.6, 1), y entonces el vrtice del cubo cambiara de posicin y toda nuestra grfica 3D sera trasladada.

Rotacin Un grfico 3D se puede rotar de muchas maneras. Una rotacin tpica especifica un eje y un ngulo de rotacin alrededor del eje. La clase RotateTransform3D nos permite rotar con la propiedad Rotation, y luego las propiedades del eje y el ngulo de la rotacin para definirlo.


Pgina 42 de 55

Animaciones

Introduccion WPF se encarga del trabajo de detrs de la escena para administrar el sistema de sincronizacin y el de redisear la pantalla eficientemente.

WPF provee un conjunto de clases de sincronizacin que le permite al desarrollador enfocarse en los efectos que quiera crear.

Hay varios puntos fundamentales sobre el concepto del sistema de sincronizacin que sern tiles para entender cmo usar las animaciones de WPF. El ms importante es que, en WPF, el desarrollador les da animacin a los objetos aplicndoles la animacin. Por ejemplo, si el desarrollador quiere que un elemento se agrande, tiene que animar las propiedades Width y Height. Para que un objeto se desvanezca, hay que animar la propiedad Opacity.

Para que la propiedad sea animable, hay tres requisitos: Debe haber una dependencia de propiedad. Debe haber un tipo compatible de la animacin. Debe ser una clase que herede de DependencyObject.

WPF contiene muchos objetos con la propiedad Animacin. Controles como Button y TabControl heredan propiedades desde DependencyObject. La mayora de sus propiedades son propiedades de dependencia.

Nos brindan la posibilidad de animar objetos muy fcilmente.

Todos los objetos tienen propiedades que pueden modificarse para poder animarlos, pero tendremos que, adems de cambiar su propiedad, utilizar un tipo de Animation apropiado. Propiedad: Color Animation: ColorAnimation. Propiedad: Point Animation: PointAnimation (cambia la posicin de un elemento

Geometry).

Cada una de las Animations deriva de la clase Timeline.

Timeline es una medida de tiempo a la que podemos especificar la duracin, la velocidad y las veces que repetiremos esta medida.

StoryBoard y ParallelTimeline son clases que derivan de TimelineGroup, y nos permiten contener y organizar varias Timelines.

Con TargetName especificamos qu objeto vamos a animar, y con TargetProperty especificamos la propiedad que utilizaremos.


Pgina 43 de 55

Podemos asignar tres tipos de valores a TargetProperty segn el caso. stos son:

Starting Value From es utilizado cuando se desea especificar el valor inicial preciso de la propiedad del objeto que se va a animar, y puede usarse junto con To y By. Es posible usar From de forma solitaria; de esta manera la animacin se encarga de hacer la transicin usando el valor de base que tiene la propiedad del objeto por animar.

Ending Value To lo utilizaremos cuando queramos precisar el valor final de la propiedad del objeto que vamos a animar; puede utilizarse junto con From o de forma individual. En el ltimo caso, la animacin tomar el valor base de la propiedad del objeto.

Offset Value

Propiedades Duration. Determina cunto va a durar nuestra animacin.

RepeatBehavior. Es la cantidad de veces que se va a reproducir nuestra animacin.

RepeatBehavior puede recibir tambin un valor de tipo days:minutes:seconds, y en el caso de que asignemos un tiempo ms largo de lo que realmente dura nuestra animacin, sta se repetir.

Compatibilidad de tipos de animaciones Animation. Conocida como Basic (bsica), sta anima entre un valor de comienzo y uno de destino.

AnimationUsingKeyFrames. Son ms poderosas que las animaciones Basic, porque se puede especificar cualquier nmero de valores y, tambin, controlar su mtodo de interpolacin. Algunos tipos slo pueden ser animados con esta clase de animaciones.

AnimationBase. Clase abstracta que realiza una animacin a valor . Esta clase sirve como base para las clases de Animation y AnimationUsingKeyFrames. Se usa para crear animaciones propias predeterminadas.

Como los valores de la salida de las animaciones son utilizados para establecer una propiedad, hay distintas animaciones para diferentes propiedades. Para animar una propiedad que toma como parmetro un Double, usamos una animacin que produce valores del tipo Double. Para animar una propiedad que toma como parmetro un valor del tipo Point, usamos una animacin que produce valores del tipo Point.


Pgina 44 de 55

Ejemplo Animacin

Dentro de un EventTrigger, lo primero que debemos hacer es iniciar el BeginStoryBoard. Luego creamos una etiqueta del tipo StoryBoard en la cual insertamos un DoubleAnimation. El elemento Double nos indica cun precisos somos en el tipo de datos. Luego configuramos el control objetivo y la propiedad que vamos a controlar, con TargetName y TargetProperty, respectivamente.

Para finalizar, le pasamos los valores por modificar. Si se fijan en el ejemplo, vern que esto lo hacemos con From y To; luego le pasamos el tiempo que queremos que dure la animacin, que est representado con el formato de day:hour:second. Tambin habilitamos las opciones de AutoReverse y repeticin continua, y podemos configurar la aceleracin o desaceleracin.


Pgina 45 de 55

Estilos

Introduccion Permiten disear una aplicacin, documento o interfaz de usuario de forma estndar

para un determinado producto.

El modelo de estilo que presenta Windows Presentation Foundation separa la lgica y la interfaz.

Los estilos son recursos, y obedecen a las mismas reglas de alcance que se aplican a todos los recursos.

Los estilos permiten disear una aplicacin, documento o interfaz de usuario de forma estndar para un determinado producto. El diseador puede personalizar una interfaz de usuario, pero se necesita un fuerte modelo de estilo para el mantenimiento y para poder compartir esa interfaz. Windows Presentation Foundation provee ese modelo.

La separacin entre la lgica y la interfaz significa que los diseadores pueden disear las pantallas de una aplicacin al mismo tiempo que los desarrolladores escriben la lgica de esa aplicacin.

Declaracion La forma ms comn de declarar un estilo es a travs de XAML.

Es posible declarar un estilo a cualquier elemento que derive de FrameworkElement o de FrameworkContentElement.

La declaracin de un estilo consiste en un elemento Style que contiene una coleccin de uno o ms Setters. Cada Setter contiene una propiedad y un valor. Una vez que el estilo est

declarado como un recurso, puede ser referenciado como cualquier otro recurso.

XAML

x:Key El valor del recurso x:Key es utilizado para asociar el estilo con elementos que

deben usar ese estilo.

En el siguiente ejemplo vemos cmo el estilo del elemento Label hace referencia al estilo Style1.

En el este ejemplo vemos como el estilo del elemento Label hace referencia al estilo Style1


Pgina 46 de 55

TargetType Podemos aplicar estilos a todos los elementos de un tipo usando la propiedad

TargetType y la llave x:Type.

Insertando el TargetType en el estilo, no habr que asignar la propiedad a los elementos que se definen.

Insertando el TargetType en el estilo, no habr que asignar la propiedad a los elementos que se definen. El TargetType tambin determina que slo se pueda aplicar ese estilo a los elementos del tipo que se define.

Extendiendo estilos Los estilos de Windows Presentation Foundation pueden ser extendidos o

heredados.

Pueden estar basados en otros estilos mediante la propiedad BasedOn.

En el ejemplo, Style2 hereda el background amarillo, y tambin se agrega el estilo Foreground con valor azul.


Pgina 47 de 55

Triggers Windows Presentation Foundation define propiedades que corresponden a las

acciones de los usuarios finales. IsMouseOver se vuelve verdadera cuando el usuario pasa el mouse sobre

un elemento de tipo UIElement o un ContentElement.

Los triggers permiten a los usuarios de Windows Presentation Foundation cambiar las propiedades basadas en las acciones de los usuarios finales.

Podemos usar un conjunto de triggers con un grupo de propiedades para cambiar otras propiedades del estilo de un elemento. De la misma manera, podemos cambiar los valores de un elemento en respuesta a un evento usando el elemento Eventrigger. El siguiente ejemplo contiene dos eventos de un trigger; uno de ellos ocurre cuando el puntero de mouse entra en el elemento y el otro se produce cuando el mouse sale del elemento.


Pgina 48 de 55

Ejemplo de uso de triggers El siguiente ejemplo contiene dos triggers.

El primero cambia la propiedad de fondo de un botn cuando se pasa el mouse por encima de l.

El segundo trigger cambia la propiedad Foreground de un botn cuando se lanza el evento IsPressed.

Tambin es posible definir un trigger que es aplicado sobre la base de mltiples propiedades usando el elemento MultiTrigger. El siguiente ejemplo contiene dos elementos MultiTrigger. El primero define el valor de la propiedad MinWidth cuando la propiedad HasItems es falsa y la propiedad Width est en automtico.


Pgina 49 de 55

Tipos de aplicaciones

Aplicaciones de navegador XAML No estn instaladas en el sistema del usuario. Pueden correr con permisos de Internet, y garantizan el acceso limitado a los recursos del sistema del usuario.

Control Library Este tipo de aplicacin es similar a las aplicaciones instaladas en trminos de dnde corre y seguridad. Pero, en realidad, es una coleccin de componentes empaquetados en una DLL para el uso de aplicaciones despus de que el usuario haya ejecutado la aplicacin. Como sta no tiene una IU para el usuario, no utiliza XAML.

Aplicaciones instaladas Estas aplicaciones estn instaladas en el sistema del usuario. Poseen acceso total a los recursos del sistema del usuario y deben tener el permiso del usuario antes de ejecutarse.

Se instalan en la mquina local.

Pueden ejecutarse estando conectado o desconectado de Internet.

Tambin se pueden ejecutar en una ventana del explorador.

Comparten caractersticas tpicas soportadas por las Web Applications.

Las aplicaciones instaladas estn tpicamente en una ventana. No pueden correr en un navegador.

Seguridad. Diferentes de las aplicaciones XAML de navegador, estas aplicaciones tienen acceso total a los recursos del sistema.

Quedan en el sistema del usuario hasta que l decida desinstalarlas.

El modelo de aplicacin Windows Vista (Longhorn) tambin define cmo escribir aplicaciones de escritorio, aquellas que el usuario ha instalado de forma local. Este tipo de aplicaciones pueden funcionar online u offline, colocar iconos en el escritorio, aadir accesos directos al men Inicio...


Pgina 50 de 55

Adems, pueden ejecutarse tanto en un navegador como en una ventana. De hecho, una aplicacin de escritorio soporta la mayora de las caractersticas tradicionalmente asociadas a una aplicacin Web, incluidas las siguientes:

Definicin explcita de puntos externos de entrada. Esto permite empezar en cualquier pgina.

Manejo de eventos de navegacin. Control de flujo de la aplicacin. Creacin o eliminacin de entradas del historial de pginas. Ejecucin de aplicaciones Windows. A diferencia de las aplicaciones de navegador XAML, las aplicaciones

instaladas tienen total acceso a las caractersticas que brinda Windows Presentation Foundation.

Todas las aplicaciones instaladas aparecen en el men Inicio y en Agregar o quitar programas del Panel de control.

Permisos del usuario. El usuario debe especificar varios permisos para que la aplicacin sea instalada.

Las aplicaciones instaladas son residentes en el sistema del usuario, y no tienen ninguna necesidad de estar conectadas. Y como tienen acceso total al sistema, pueden almacenar informacin de cualquier manera y de la forma ms apropiada.

Tipos Aplicaciones instaladas Navigation Las aplicaciones Navigation consisten en una o ms pginas dentro de una aplicacin, y tienen gran similitud con las aplicaciones Web, que poseen muchas pginas .aspx. El usuario navega normalmente a travs de la aplicacin haciendo clic en los enlaces o botones, con contenido en cada pgina.

Window Estas aplicaciones siguen un modelo similar a las aplicaciones Windows Forms. Una aplicacin Window puede mostrar pop-ups. Es muy habitual que estas aplicaciones tengan asociado Procedural Code para responderle al usuario.

Document Las aplicaciones Document, por otra parte, no tienen Procedur

Manual Wpf

Documents

Transcript of Manual Wpf