Manual Wpf

Windows

Presentation Foundation

Pedro Bauzá Picó [email protected]

Empresa Innova Desarrollos Informáticos

Índice Introducción ............................................................................................................................... 1

¿Qué es Windows Presentation Foundation? ..................................................................... 1 ¿Qué es XAML?................................................................................................................. 1 ¿Qué es AERO? ................................................................................................................. 1 Windows Presentation Foundation es la nueva generación del sistema gráfico. ............... 2 Aprovecha la potencia y la capacidad que hoy en día brindan los sistemas gráficos. ....... 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 podrán proporcionar una experiencia de usuario más rica y precisa para sus propias aplicaciones. ............................................................................................ 2 Se podrán aprovechar nuevas funciones visuales, por ejemplo, AERO. ........................... 2 XAML y WPF separan los controles según su funcionalidad y sus habilidades. .............. 3 Implementación de estilos.................................................................................................. 3 Un nuevo modelo de aplicación mediante un Objeto Aplicación...................................... 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 Gráficos 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 Jerarquía 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 gráficos y animaciones ................................................................................... 38 Introduccion ..................................................................................................................... 38 Objeto Shape .................................................................................................................... 39 Objeto Geometries............................................................................................................ 39 Objeto Pen........................................................................................................................ 39 Ejemplo objeto Ellipse ..................................................................................................... 40 Tipos de transformaciones ............................................................................................... 40 Cámaras y proyecciones................................................................................................... 41 Traslación y rotación........................................................................................................ 41

Animaciones............................................................................................................................. 42 Introduccion ..................................................................................................................... 42 Propiedades ...................................................................................................................... 43 Compatibilidad de tipos de animaciones.......................................................................... 43 Ejemplo Animación.......................................................................................................... 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 Presentación de información ............................................................................................ 54 Tecnología de servidor ..................................................................................................... 54

Microsoft Expression Interactive Designer.............................................................................. 55 Capacidades de diseño ..................................................................................................... 55 Completo control en creatividad ...................................................................................... 55 Incrementa la satisfacción del uso de IU.......................................................................... 55

Windows Presentation Fundation

Página 1 de 55

Introducción

¿Qué es Windows Presentation Foundation? El Windows Framework Extension (WinFX) es la siguiente generación del framework de programación de Windows. WinFX está basado en el Framework .NET 2.0; sin embargo, incorpora una nueva API de programación 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 Developer’s 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 visión global de Windows Presentation Foundation. Windows Presentation Foundation es el subsistema de presentación unificado de Microsoft para Windows, expuesto a través de WinFX, modelo de código administrado de Windows Vista que extiende Microsoft .NET Framework. Windows Presentation Foundation está compuesto por un motor que saca ventaja del hardware con gráficos modernos y por un conjunto de clases administradas que los desarrolladores pueden usar para crear aplicaciones visualmente ricas. También 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 aplicación de Windows Presentation Foundation, y viceversa. Cuando un desarrollador crea una aplicación en Windows Presentation Foundation, la mayor parte del código se encuentra escrito e implementado en XAML. XAML es más rápido, más fácil de implementar y de localizar, y significa una elección mejor que cualquier código equivalente. Con XAML, no existen errores de rendimiento, porque es una representación de un modelo de objetos basado en XML.

¿Qué es AERO? El término AERO, sigla de Auténtico, Energético, Reflexivo y Open (Abierto), remite a las guías de experiencia de usuario para Windows Vista, y se encarga del look and feel del sistema operativo. Estas guías no sólo determinan el modo en que se dibujan los píxeles, sino también la forma en que el usuario interactúa con el sistema y evoca sentimientos.


Página 2 de 55

Windows Presentation Foundation es la nueva generación del sistema gráfico. 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 máximo 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 imágenes e impresión de “pipelines”, accesibilidad y automatización de la infraestructura de IU, y manejo y visualización de datos.

Aprovecha la potencia y la capacidad que hoy en día brindan los sistemas gráficos. La potencia del hardware 3D, que ya es estándar 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 generación del subsistema que define un rango de servicios de salida: interfaz de usuario, dibujos 2D y 3D e imágenes, una nueva representación 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 difícil o imposible. Para los desarrolladores .NET, el marco de trabajo es familiar, y reducirán un gran número de líneas de código de animación.

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

Se podrán aprovechar nuevas funciones visuales, por ejemplo, AERO. Los usuarios finales desean excelentes gráficos, con buenas resoluciones en DPI, efectos 3D, animaciones, transiciones y fundidos, todo en un entorno simple. Justamente, Windows Vista ofrece esta nueva generación de gráficos.


Página 3 de 55

XAML y WPF separan los controles según su funcionalidad y sus habilidades.

• Simple Controls Controles simples que no tienen ningún contenido o ítems.

• Content Controls Son controles que pueden mostrar algún contenido.

• Items Controls Controles que pueden tener hijos. Cualquier control que tenga alguna colección cae en esta categoría.

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

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

Implementación de estilos Los estilos permiten a los diseñadores 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 más común de declarar un estilo es haciéndolo dentro del archivo XAML. Si se declara un estilo en el elemento principal de la aplicación, éste puede ser utilizado en cualquier lugar de la aplicación.

Un nuevo modelo de aplicación mediante un Objeto Aplicación Todas las aplicaciones que usan Windows Presentation Foundation están asociadas a un Objeto Aplicación. Este objeto representa a la aplicación frente al sistema, y permite al sistema comunicarse con la aplicación. Tiene más funciones que veremos más adelante.

WPF nos introduce en una nueva forma declarativa de programar, llamada XAML XAML es un lenguaje declarativo basado en XML, optimizado para describir gráficamente interfaces de usuario visuales ricas desde el punto de vista gráfico, tales como las creadas por medio de Macromedia Flash. XAML fue diseñado para soportar las clases y los métodos de la plataforma de desarrollo .NET que tienen relación con la interacción con el usuario, en especial, el despliegue en pantalla.


Página 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 renderización de los elementos (tamaño y dimensiones, posición, y el arreglo del contenido de sus hijos). WPF proporciona un gran número de paneles, como Canvas, DockPanel y GridPanel, que veremos más adelante.

Efectos 3D La implementación 3D de Windows Presentation Foundation permite a los desarrolladores dibujar, transformar y animar gráficos 3D de distintas formas, usando las mismas habilidades afrontadas por la plataforma de gráficos 2D. También permite combinar gráficos 2D y 3D para crear controles más atractivos, y proporcionar complejas ilustraciones de información. Este soporte 3D que nos otorga Windows Presentation Foundation no tiene todas las características 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 animación. WPF proporciona todas las herramientas para que este proceso que tan complicado nos parecía antes sea más fácil de implementar.

Gráficos basados en vectores Windows Presentation Foundation usa gráficos basados en vectores. Éstos, que incluyen SVG (Scalable Vector Graphics), archivos metafile (.wmf) y las fuentes (que usamos usualmente para las letras), almacenan la información y la transmiten como una lista de instrucciones que describen cómo se va a recrear una imagen usando gráficos primitivos.


Página 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 específico para documentos (1) y medios (2). Varias otras características incluyen controles e, incluso, Servicios de personalización y profiling (3) para ASP.NET, que son definidos también como parte de Windows Vista. Otras de las características son la Máquina de Composición de Escritorio (4) y el Administrador de Objetos de Presentación (5). Avalon interactúa 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 interactúa con la computadora, que probablemente sea el cambio más significativo de la IU desde Windows 1.0. Esto ocasiona modificaciones en la tecnología, como la forma en que se “buferean” los gráficos internamente. Estas características van a brindar una interacción más eficiente con sonido y video, y un sofisticado uso de transparencias.


Página 6 de 55

Las aplicaciones en Windows Presentation Foundation están representadas con el nuevo motor de composición basado en vectores. La aceleración del hardware es usada por el proceso de representación sobre el DirectX de la placa gráfica de nuestra computadora, con un software de respaldo para monitores más viejos. El sistema de coordenadas provee doble precisión y resolución independiente, que permite soportar resoluciones altas de DPI para las pantallas y se está utilizando cada vez más frecuentemente. Document WPF provee muchas características para combinar documentos, IU y contenidos audiovisuales. Los documentos usualmente contienen un flujo de controles e imágenes, los cuales son difíciles de proporcionar con los controles tradicionales de Windows. UI Los controles UI permiten una alta interacción con el usuario, pero no se concentran tanto en el soporte para textos. Media Enriquecen la visión de las presentaciones interactivas, como video, audio y más. 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 características incluidas en la “sidebar”, que permiten a los usuarios monitorear notificaciones y actividades en tiempo real (como el tiempo, la batería y actividades online). Administrador de ventanas Maneja la mayor parte del trabajo duro de la administración de ventanas, como minimizar, maximizar y mostrar cuadros de diálogo. Las nuevas características incluyen la navegación basada en páginas y soporte en Extensible Application Markup Language, XAML. Controls Interop Engine Provee soporte para controles .NET, HTML y Win32. Motor de composición de escritorio El motor está basado en vectores. Animation and Composition Provee un fuerte soporte para una alta representación de vectores gráficos y estándares como SVG (Scalable Vector Graphics). Media Processing Provee procesamiento de audio y video, como también nuevos codecs y APIs.


Página 7 de 55

� Consiste en dos partes principales: � El motor

Unifica la manera en que desarrolladores y diseñadores manejan documentos, material audiovisual e IU. El motor de WPF unifica la manera en que desarrolladores y diseñadores manejan documentos, material audiovisual e IU, proporcionando un runtime único para experiencias de navegación, aplicaciones basadas en formularios, gráficos, videos, audio y documentos. Windows Presentation Foundation se encuentra construido sobre Microsoft DirectX(r), lo cual libera todo el poder de los gráficos 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 definición sin exigir trabajo suplementario por parte del desarrollador o usuario. De modo similar, usted también sacará provecho del momento en que Windows Presentation Foundation detecte una tarjeta de video que soporta la aceleración de hardware.

� El marco de programación

Proporciona soluciones para material audiovisual, diseño para interfaz de usuario y documentos que van mucho más allá de lo que los desarrolladores tienen hoy. El framework de Windows Presentation Foundation proporciona soluciones para material audiovisual, diseño para interfaz de usuario y documentos que van mucho más 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, imágenes, videos, animaciones, 3D y “paneles” donde ubicar controles y contenido. Estas cuestiones “primitivas” proporcionan los blocks de construcción para el desarrollo de la nueva generación de experiencias de usuario.

Capacidades de Windows Presentation Foundation � Contiene varios componentes comunes de interfaz de usuario, incluidos buttons,

sliders y edit boxes. � Ofrece animación 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 más.


Página 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 través 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 aplicación. Éste incluye menús, hyperlinks, edit boxes (text, check, combo y list boxes), buttons, panels, borders, y sliders para audio y video. El Viewport3D está también localizado en este namespace para controlar todo el contenido 3D y el contenido con interacción.

System.Windows.Data El namespace de datos controla todas las propiedades para enlace a datos. Éste es usado específicamente para la fuente, para estas clases y para cualquier otra asociada a la implementación 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 interactúa el usuario cuando usa la aplicación.


Página 9 de 55

System.Windows.Media El namespace Media controla todas las clases de gráficos tanto para 2D como para 3D. Éste también define el camino para las clases de segmento, brochas, colores, efectos de imágenes, clases geométricas, colecciones, audio, video, enumeraciones y estructuras.

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

System.Windows.Media.Media3D Contiene una variedad de clases específicas para gráficos en 3D. Estas clases son utilizadas para definir cómo los gráficos van a ser presentados dentro de la aplicación.

System.Windows.Navigation Este namespace está dedicado a las clases e interfaces utilizadas para la navegación de aplicaciones, donde la navegación 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 podrían definir propiedades para estilos de animación y localización, y que pueden ser accedidas por un objeto referenciando el nombre como Style=”{StaticResource ResourceName}” dentro de la aplicación.

System.Windows.Serialization Este namespace soporta la conversión 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 diseño, la posición y la interacción con el usuario.

FrameworkElement Derivado de UIElement, FrameworkElement es también una clase base. Es una clase de la cual la mayoría de los elementos visuales heredan la apariencia y las características (por ejemplo, altura, ancho, etc.). Cuando escribimos código en .NET, podemos acceder a un objeto que se encuentra dentro del XAML referenciándolo con la propiedad “Name”.


Página 10 de 55

UIElement y FrameworkElement son dos de los elementos más importantes dentro de la API. Son los que influyen sobre la apariencia básica 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 tamaño de la letra que va a aparecer en este TextBlock. • Le asignamos el contenido que va a tener el TextBlock (“Hola Mundo!”). • Establecemos la posición del objeto de tipo TextBlock dentro del Canvas. Posición

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 tamaño de fuente 22 y el

contenido “Hola Mundo 2!”, y le indicamos la posición donde va a estar en el Canvas.

• Lo agregamos como hijo al Canvas. • Le asignamos el Canvas al contenido de la ventana de nuestra aplicación. • En la propiedad Title de la ventana de la aplicación asignamos “Ejemplo”. • Finalmente, mostramos nuestra ventana.


Página 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 través de diferentes caminos. En términos de herencia, UIElement también posee la clase Visual, que expone el nivel más bajo de gráficos soportado en Windows Presentation Foundation, definiendo regiones rectangulares independientes en la pantalla.

SubClass � La forma más práctica 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 través de la herencia.

� Se destacan tres clases cuyas funcionalidades podemos utilizar. En la práctica, UIElement es para elementos que podrán 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 más abierto, para permitir diferentes combinaciones de elementos. � Si creamos una clase que herede de DependencyObject, se obtienen las siguientes

funcionalidades: � Se adquieren los métodos 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, además de las que nos provee la clase DependencyObject:

� Soporte para animaciones. � Soporte básico para entrada y de comandos. � Métodos virtuales que pueden sobrecargar para proveer información para

el manejador de layout.


Página 12 de 55

� Si creamos una clase que herede de FrameworkElement, se pueden obtener las siguientes funcionalidades, además 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, además de las que nos brinda DependencyObject. � Soporte para animaciones. � Soporte básico para eventos de entrada y comandos.

� Si creamos una clase que herede de FrameworkContentElement, obtenemos las

siguientes funcionalidades, además 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.


Página 13 de 55

Freezable Objects Los objetos del tipo Freezable presentan características especiales que ayudan a desarrollar una aplicación 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 modificación del objeto.

� La mayoría de los objetos del tipo Freezable de Windows Presentation Foundation pertenece al sistema de gráficos.

� La clase Freezable facilita el uso del sistema de gráficos de forma más segura.

� Ayuda a mejorar el rendimiento de la aplicación.

� 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 algún cambio en el objeto original.

� Incluso cuando no se modifica un objeto del sistema gráfico, el sistema debe gastar recursos de su método de monitoreo para el caso de que se haya realizado alguna modificación.

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

botón. Cuando el botón es renderizado, el sistema de gráficos de Windows Presentation Foundation usa la información que se le provee para pintar un grupo de píxeles y crear la apariencia de un botón. Button myButton = new Button(); SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow); myButton.Background = myBrush;

� El método Freeze permite deshabilitar la capacidad de un objeto de actualizarse por

sí mismo. Se puede usar este método para hacer que un Brush se congele o se vuelva inmodificable. if (myBrush.CanFreeze) { // Convertirmos el Brush en inmodificable

myBrush.Freeze(); }


Página 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 gráfica y de interfaz de usuario. Mientras que XAML es usado para instanciar objetos Avalon, nada impide usar XAML para crear otros objetos no gráficos. XAML es la manera recomendada para crear interfaces de usuario en el modelo de programación de Windows Presentation Foundation, porque nos proporciona un método para separar la definición del diseño de la IU y la lógica. También permite integrar código usando archivos code-behind. Con XAML también es posible crear una IU entera sin utilizar código. � Creando un archivo básico de XAML <?xml version="1.0" standalone="yes"?> <Window> <Button>Hola Mundo</Button> </Window> Este ejemplo muestra todo lo que se necesita para escribir un “Hola Mundo” en XAML. Los archivos XAML son, convencionalmente, archivos XML con una extensión de tipo .xaml y un namespace referenciado a los namespaces de XML. Aquí, como estamos trabajando con Windows Presentation Foundation, todos los nombres serán 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 gráficamente interfaces visuales de usuario ricas

desde el punto de vista gráfico. � Los archivos de tipo XAML serán producidos por una herramienta de diseño visual,

como Microsoft Visual Studio o Microsoft Expression.


Página 15 de 55

El XML resultante es interpretado de forma instantánea 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 Común de Ejecución para Lenguajes. Los atributos se conectan con propiedades o eventos de esos objetos. XAML fue diseñado para soportar las clases y los métodos de la plataforma de desarrollo .NET que tienen relación con la interacción 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 Presentación 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 típicamente empieza con el prefijo “x:” La relación entre estas dos declaraciones es que XAML es un lenguaje estándar, y Windows Presentation Foundation es una implementación que usa XAML como lenguaje. XAML especifica ciertos elementos que son preasumidos para la implementación, y cada uno de ellos debe ser accesible a través de XAML. El espacio XAML define muchas características comúnmente utilizadas que son necesarias hasta para aplicaciones básicas en Windows Presentation Foundation.


Página 16 de 55

XAML y code-behind XAML <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MyNamespace.MyCanvasCode"> <Button Click="Button_Click">Click Me!</Button> </Canvas> 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 botón en una página, XAML puede crearlo y mostrarlo por pantalla. Pero el botón no hizo nada hasta ahora. El modelo de programación de Windows Presentation Foundation permite, a través 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 código XAML. Hay elementos que no tienen esta propiedad ya que su clase no hereda, pero pueden usar x:Name para el mismo propósito. X:Name <element x:Name="aStringNameValue".../> Además 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.


Página 17 de 55

XAML sin code-behind <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MyNamespace.MyCanvasCodeInline" > <Button Name="button1" Click="Clicked">Click Me!</Button> <x:Code><![CDATA[ void Clicked(object sender, RoutedEventArgs e) { button1.Content = "Hello World"; } ]]></x:Code> </Canvas> En el caso de no querer usar un archivo separado para el code-behind, se tiene la alternativa de agregar el código en el archivo XAML; éste va a interactuar con los elementos de XAML. El código XAML que vemos contiene C#. Nótese que el código que está dentro del elemento x:Code debe estar rodeado de <CDDATA[…]> . Este ejemplo es muy sencillo: hay un botón 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 botón. Hay muchas razones para desalentar sobre el uso de código en XAML. En términos de arquitectura y filosofía de codificación, separar el XAML y el code-behind permite que las funciones del desarrollador y del diseñador sean distintas. No se pueden declarar múltiples clases dentro del código XAML, y todo debe existir en un miembro o variable dentro del código generado de la clase parcial.


Página 18 de 55

Programando en XAML � Mediante el uso de XAML se puede: � Escribir un documento que muestre contenido estático. � Crear un documento que muestre por pantalla datos de un enlace y actualice su

contenido desde el archivo fuente. � Definir animaciones y efectos de ratón. En muchas aplicaciones, gran parte del código se escribe para crear o actualizar la interfaz de usuario. En los últimos años, 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 programación tradicionales:

• Una propiedad de herencia más aparente. • Un control de jerarquías más aparente. Es posible aplicar propiedades de forma

conjunta a los hijos de un elemento padre. • Mayor facilidad de interpretación y procesamiento de las etiquetas mediante

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

• Separación potencial de IU y código procedimental. Sin embargo, para crear una aplicación productiva será necesario trabajar con eventos, proporcionar una lógica de decisiones personalizadas, o incluir algunas operaciones que no tengan nada que ver con la IU. Esto requiere mezclar XAML con código 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 gráficamente interfaces de usuario visuales ricas desde el punto de vista gráfico.

� Permite a los desarrolladores especificar una jerarquía de objetos con un sistema de características y de lógica.

� Soporta las clases y los métodos de la plataforma de desarrollo .NET. � Es interpretado de forma instantánea. � Separa el aspecto lógico del aspecto visual. � XAML es un lenguaje declarativo basado en XML


Página 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 inglés) de XAML corresponde a una clase de modelo de objetos. En general, una etiqueta también posee una colección de atributos que remiten a las propiedades de la clase asociada de etiqueta. En tiempos de compilación, el “parseador” convierte el XAML en una clase parcial que contiene un código 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 código de la página a través del compilador runtime del lenguaje común, y luego crea un objeto para la página en cuestión. Separar la parte visual de la parte lógica les permite a las personas utilizar diversos utilitarios gráficos para crear el layout y el diseño de la parte gráfica de la interfaz de usuario, sin afectar la parte lógica del programa. Entonces, podemos combinar diferentes disciplinas de trabajo en la misma aplicación, algo que hoy es difícil de lograr. Con XAML, Windows Presentation Foundation se inclina hacia un modelo de programación distinto: la programación 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.


Página 20 de 55

Ejemplo XAML y Code-behind


Página 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 interacción 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 código 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 implementación que puede ser usada típicamente para definir una Control . Comúnmente usan propiedades dependientes.

Jerarquía de controles

En Windows Presentation Foundation armamos una jerarquía de objetos; por ejemplo, dentro de la página 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 jerarquía de clases nos será muy útil, ya que cada hijo puede heredar propiedades y estilos de su padre. Por ejemplo, los elementos del StackPanel tendrán un estilo de posición distinto de los hijos que tendrán los hijos del DockPanel. También podemos crear distintos estilos y aplicarlos a los diferentes grupos de controles que tengamos.


Página 22 de 55

Lista de controles XAML

Control Button y Label <Button ID="btn1" Height="50" Width="200" Background="Red" Foreground="White" FontFamily="Times New Roman" FontSize="14" Content="Red Button"/> <Label Height="50" Width="200" Background="lightblue" Foreground="Red" FontSize="16" FontFamily="Verdana"> This is Label </Label> Para empezar, podemos decir que un botón es un control, un componente de interacción que permite a los usuarios comunicarse con una aplicación. Normalmente, cuando hacemos clic en un botón, mandamos un mensaje, y la aplicación responde a él. El sistema, el botón y la aplicación cooperan entre sí para cambiar la apariencia y el estado del botón. En el ejemplo del botón que vimos, nos podemos dar cuenta de cómo Windows Presentation Foundation interpreta el código XAML. Los atributos ID, Height, Width, Content y Click, por lo general, se encuentran en la mayoría de los controles, ya que describen aspectos generales, pero hay algunos controles que tienen atributos que sólo ellos poseen, y es por eso por lo que se diferencian de los demás. Como vemos, en el Label tenemos atributos parecidos a los del botón, 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 FlowDocumentPageViewer

FlowDocumentReader FlowDocumentScrollViewer

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


Página 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 imágenes y textos. Los estados de los ítems pueden ser seleccionado o deseleccionado (checked y unchecked). <CheckBox Margin="10, 10, 3, 3" Grid.Column="0" Grid.Row="2" Name="cb1" FontSize="12" Checked="HandleChange">Check Box</CheckBox>

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. <ListBox Width="100" Height="55" SelectionChanged="PrintText" SelectionMode="Single"> <ListBoxItem>Item 1</ListBoxItem> <ListBoxItem>Item 2</ListBoxItem> <ListBoxItem>Item 3</ListBoxItem> </ListBox>

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. <RadioButton Name="rb1" Checked="WriteText2">Si</RadioButton> <RadioButton Name="rb2" Checked="WriteText2">No</RadioButton>


Página 24 de 55

Control Expander Muestra información 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 región de Header para el área del título, 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. <Expander > <Expander.Header> <TextBlock > Books </TextBlock> </Expander.Header> <ScrollViewer > <ListBox > <ListBoxItem>Item 1</ListBoxItem> <ListBoxItem>Item 2</ListBoxItem> <ListBoxItem>Item 3</ListBoxItem> <ListBoxItem>Item 4</ListBoxItem> </ListBox > </ScrollViewer> </Expander>


Página 25 de 55

Control MenuBase Dentro de esta clase hay dos tipos de menús: “Menu” y “ContextMenu”. El primero actúa como contenedor para el control “MenuItem”. “ContextMenu” le permite al desarrollador extender las opciones de un control a través del clic derecho. En el ejemplo que tenemos, vemos que la ventaja que nos brinda adherir un control “ContextMenu” es que le da al botón mucha más 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 botón, aparece un menú donde hay muchas más opciones. <Canvas> <Button Width=”300 ” Height==”45 ”>A ContextMenu within a Button <Button.ContextMenu> <ContextMenu> <MenuItem Header=”File ”/> <MenuItem Header=”New ”/> <MenuItem Header=”SaveAs ”/> <MenuItem Header=”Recent Files ”> <MenuItem Header=”DocumentOne.txt ”/> <MenuItem Header=”SpeadSheetOne.xls ”/> </MenuItem> </ContextMenu> </Button.ContextMenu> </Button> </Canvas>

Control ComboBox <ComboBox Text="Cerrado" Width="100“ Height="20"> <ComboBoxItem MouseMove="OnHover" Name="cbi1">Item1</ComboBoxItem> <ComboBoxItem MouseMove="OnHover" Name="cbi2">Item2</ComboBoxItem> <ComboBoxItem MouseMove="OnHover" Name="cbi3">Item3</ComboBoxItem> </ComboBox>

Control TreeView <TreeView>

<TreeViewItem Header ="Animales"> <TreeViewItem Header="Mamiferos"> <TreeViewItem Header="Perro"/> <TreeViewItem Header="Gato"/> </TreeViewItem> <TextBlock>Anfibios</TextBlock> <TreeViewItem Header="Aves"> <TextBlock>Condor</TextBlock> <TextBlock>Aguila</TextBlock> </TreeViewItem> </TreeViewItem> </TreeView>


Página 26 de 55

Paneles � Una página de XAML comienza típicamente con un elemento del panel. � El panel es un envase para el contenido de una página, y controla la colocación y la

representación de ese contenido. � Un panel puede contener otros paneles, lo que permite repartir la superficie de

exhibición 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 están contenidos por él. Se puede usar un panel para las siguientes funciones: • Agrupar controles lógicamente para que éstos se puedan mostrar o esconder. • Definir un contenedor conveniente donde los controles puedan ser creados y

borrados dinámicamente. • Usar un solo punto para aplicar cualidades del estilo a un conjunto de controles. • Proveer de información a las páginas ASP.NET sobre los controles que están juntos

en la paginación.

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 aparición 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 características de diseño. Tiene predefinidos la altura y el ancho en cero, a menos que sea hijo de otro elemento del que automáticamente hereda esas propiedades. Los hijos de Canvas nunca cambian de tamaño según la herencia sobre el canvas, simplemente se sitúan sobre los puntos de coordenadas designados. <Canvas xmlns="http://schemas.microsoft.com/2003/xaml" > <Rectangle Fill="#33CC66" Width="2in" Height="1in" Canvas.Top="25" Canvas.Left="50" StrokeThickness="6px" Stroke="Orange" /> <Ellipse Fill="yellow" CenterX="1.5in" CenterY="1.1in" RadiusX=".5in" RadiusY="1in" StrokeThickness="4px" Stroke="Blue" /> <Text Canvas.Top="50" Canvas.Left="60" Foreground="#000000" FontWeight="Bold" FontFamily="Arial" FontStyle="Normal" FontSize="25"> Hello Shapes! </Text> </Canvas>


Página 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 cómo 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 posición 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á más arriba la que esté escrita en primer lugar en nuestro código XAML. Lo mismo hará con las otras posiciones distintas del DockPanel. <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="DockPanel Sample"> <DockPanel LastChildFill="True"> <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top"> <TextBlock Foreground="Black">Dock = "Top"</TextBlock> </Border> <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top"> <TextBlock Foreground="Black">Dock = "Top"</TextBlock> </Border> <Border Height="25" Background="LemonChiffon" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom"> <TextBlock Foreground="Black">Dock = "Bottom"</TextBlock> </Border> <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left"> <TextBlock Foreground="Black">Dock = "Left"</TextBlock> </Border> <Border Background="White" BorderBrush="Black" BorderThickness="1"> <TextBlock Foreground="Black">This content will "Fill" the remaining space</TextBlock> </Border> </DockPanel> </Page>


Página 28 de 55

Panel FlowPanel � El panel FlowPanel proporciona un gran número de características automáticas, y

nos permite trabajar con textos y gráficos 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 características de salida automáticas que facilitan la presentación de texto y gráficos. Se define el tamaño 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: <Border xmlns="http://schemas.microsoft.com/2003/xaml“ Background="White">

<FlowPanel> <Border Background="Red" Width="1in" Height="1in"/> <Border Background="Green" Width="1in" Height="1in"/> <Border Background="Blue" Width="1in" Height="1in"/>* <Border Background="Yellow" Width="1in" Height="1in"/>

</FlowPanel> </Border>


Página 29 de 55

Panel TextPanel � Soporta textos multilínea y textos multiformato.

� El uso típico es el caso de tener que realizar un diseño complejo del texto.

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

TextPanel también formatea y redimensiona los textos. El siguiente código XAML nos muestra cómo este tipo de panel distribuye el contenido, ajustando el número y la altura de las columnas. <Border xmlns="http://schemas.microsoft.com/2003/xaml" Background="White"> <TextPanel ColumnCount="3" ColumnWidth="200px" ColumnGap="25px" ColumnRuleWidth="5px" ColumnRuleBrush="blue"> <Block Background="LightGray"> <Inline FontFamily="Arial" FontWeight="Bold" FontSize="16pt">Transcript of the <Italic>Nicolay Draft</Italic> of the Gettysburg Address. </Inline> </Block> </TextPanel> </Border>


Página 30 de 55

Panel GridPanel � Soporta muchas propiedades que se pueden usar para especificar el diseño de los

datos por mostrar.

� La distribución 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 código 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 común, 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. También nos permite mantener el contenido en una capa, donde más 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.

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"> <Button>Botón 1</Button> <Button>Botón 2</Button> <Button>Botón 3</Button> </StackPanel>


Página 31 de 55

Trabajando con documentos WPF ofrece nuevas características en los documentos que permiten una alta fidelidad en el contenido que se está diseñando, para brindar fácil 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 características 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 están pensados para aplicaciones que requieren una precisa presentación de WYSIWYG (“What you see is what you get”, lo que ve es lo que obtiene). El uso típico del documento Fixed incluye procesamiento de textos, publicaciones de escritorio y diseño de formularios, donde la necesidad de mantener el diseño de la página es crítica. Un documento Fixed mantiene con precisión la posición de los elementos del contenido, independientemente de la pantalla o de la impresora en uso. Por ejemplo, una página del documento Fixed mostrada en 96 dpi aparecerá en la misma posición cuando la salida sea en una impresora láser con 600 dpi o cuando se necesite imprimir en dimensiones mucho más grandes, con 4800 dpi. La estructura de la página se mantiene en todos los casos, mientras la calidad del documento se maximiza para las capacidades de cada tipo de dispositivo.


Página 32 de 55

Control FixedDocument – DocumentViewer El control DocumentViewer está diseñado 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 ergonómico, fácil de usar y soporta las necesidades más comunes. Provee acceso a las páginas a través de un mecanismo familiar de scroll. También brinda un estilo de vista de página que permite a los usuarios ver el contenido “cambiando de página”. Este control es de sólo lectura; la modificación 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 página. Copy Button: botón que copia el contenido al clipboard. Find Button : nos permite buscar algún contenido dentro de lo mostrado en pantalla por el DocumentViewer. El DocumentViewer soporta el cambio de diseño completo o parcial, el cual permite al control ser visualmente integrado a cualquier entorno de aplicación. También está diseñado para mostrar el contenido para manejo de sólo lectura, las modificaciones de contenido no están soportadas.


Página 33 de 55

Ejemplo de DocumentViewer <Grid> <Grid.RowDefinitions> <RowDefinition Height="20" /> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Menu Grid.Row="0"> <MenuItem Header="Archivo"> <MenuItem Header="Abrir" Click="MenuFileOpen"/> </MenuItem> </Menu> <DocumentViewer Name="MyDocumentViewer" Grid.Row="1" HorizontalAlignment="Stretch“ /> </Grid> El anterior ejemplo de XAML define un DocumentViewer llamado “MyDocumentViewer”, como también un menú para acceder al diálogo file-loading. El siguiente código C# implementa la acción “abrir” del menú: private void MenuFileOpen(object sender, RoutedEventArgs e) { OpenFileDialog fileOpenDialog = new OpenFileDialog(); // Ask the user what file to open. System.Windows.Forms.DialogResult openResult = fileOpenDialog.ShowDialog(); if (openResult != System.Windows.Forms.DialogResult.OK) return; // Open and parse the XAML file. if (File.Exists(fileOpenDialog.FileName)) { FileInfo fileInfo = new FileInfo(fileOpenDialog.FileName); FileStream documentStream = fileInfo.OpenRead(); Uri contentUri = new Uri(fileInfo.DirectoryName + "\\", UriKind.Absolute);


Página 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. */ } } }


Página 35 de 55

Documento Flow Está diseñado para optimizar la visión y la legibilidad por parte del usuario. Se ajusta dinámicamente según el contenido que haya en él. Una página 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 están diseñados para optimizar la experiencia del lector cuando el contenido es mostrado en diferentes tamaños y resoluciones de dispositivos. El Flow Document soporta algunos controles para la visualización de documentos:

• FlowDocumentPageViewer • FlowDocumentReader • FlowDocumentScrollViewer •

La figura muestra cómo la vista del documento Flow se modifica con los severos cambios de tamaño de ventana. Como cambia el área de la pantalla, el contenido se mueve para lograr la mejor vista del espacio visible.


Página 36 de 55

FlowDocumentPageViewer Muestra el contenido de forma paginada, se ve una página a la vez. En el caso de que tengamos un contenido muy extenso, al darle este contenido al control, automáticamente 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 navegación entre páginas, un control para cambiar el nivel de zoom, y un indicador que nos muestra qué número de página estamos viendo actualmente y la cantidad total de páginas. Page Navigation Controls: incluye un botón para saltar a la página siguiente y otro para saltar a la página anterior. Zoom Controls: permiten al usuario aumentar y disminuir el nivel del zoom, haciendo clic en el botón de más y en el de menos.

FlowDocumentScrollViewer La barra desplazadora vertical es siempre mostrada, y la horizontal se exhibe sólo 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, botón de búsqueda, etc.), pero se puede hacer visible modificando la propiedad IsToolBarVisible.


Página 37 de 55

FlowDocumentReader Permite al usuario elegir varios tipos de vistas de forma dinámica. Puede ver el contenido en una simple página, en dos páginas a la vez, o con un scroll continuo.

FlowDocumentReader tiene los mismos controles que FlowDocumentPageViewer, pero agrega algunos más. Estos controles se encuentran en el área de Tool Bar, debajo del área de contenido. Find Button : el botón de búsqueda abre una ventana de diálogo, la cual permite al usuario buscar algún contenido del FlowDocumentReader. El botón 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 páginas a la vez. Las distintas vistas que ofrece este documento son: Page. Brinda la misma funcionalidad que el control FlowDocumentPageViewer. Visión del contenido de una página por vez. Scroll. Ofrece la misma funcionalidad que el control FlowDocumentScrollViewer. Se muestra todo el contenido en una sola página con una barra desplazadora para poder ver todo el contenido. Two Page. El contenido se muestra en dos páginas a la vez, de manera similar a un libro.


Página 38 de 55

Trabajando con gráficos y animaciones

Introduccion � WPF proporciona avanzadas características de dibujo y animación.

� Para utilizar las nuevas herramientas multimedia no es necesario contar con librerías

especiales.

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

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

WPF proporciona avanzadas características de dibujo y animación. Para utilizar las nuevas herramientas de multimedia, no es necesario contar con librerías especiales. Éstas permiten a los desarrolladores crear interesantes interfaces y contenidos para los usuarios. Tanto con Visual Studio como con Notepad se pueden crear gráficos con vectores o animaciones complejas, e integrarlos a nuestras aplicaciones. Precisión mejorada: El sistema de coordenadas de WPF usa el tipo de datos Double, que es más preciso que Float. Las transformaciones y la opacidad también están manejando este tipo de datos. WPF también soporta una gama de color mucho más extensa y provee un soporte integrado para administrar salidas desde distintos espacios de color. Aceleración del hardware: El sistema de WPF está diseñado para aprovechar más hardware de gráficos y minimizar la utilización del CPU.


Página 39 de 55

Objeto Shape Windows Presentation Foundation provee un gran número de objetos “listos para usar”. Todos los objetos Shape heredan propiedades de la clase Shape. El Shape de tipo Line permite dibujar una línea 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. Además, 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, haciéndolos adecuados para su uso.Pertenecen a la clase System.Windows.Shape. <Line Stroke="Black" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round" X1="10" Y1="10" X2="75" Y2="90"/>

Objeto Geometries Como los objetos Shape, representan Shapes 2D, pero son más versátiles que aquéllos. Pueden ser definidos, por ejemplo, para describir curvas. También es posible renderizarlos usando otro elemento del framework, controles o brushes.

Objeto Pen Dibuja una línea de una altura y un ancho específicos. Una línea dibujada con un Pen puede adquirir una variedad de estilos, incluidos colores sólidos y texturas. El relleno depende del brush o la textura que se utilice como objeto de relleno.


Página 40 de 55

Ejemplo objeto Ellipse El dibujo de una Ellipse es con WPF una tarea muy fácil: 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). <Ellipse Height="100" Width="200" Fill="Yellow" Stroke="Black" StrokeThickness="2" /> Vimos dos ejemplos, Ellipse y Line, pero además de éstos, existen otros tipos de Shapes, como Path, Polygon, Polyline y Rectangle. Algunas de las características que tienen en común estos objetos Shape son: Stroke: dibuja una línea alrededor del objeto Shape. StrokeThickness: dibuja una línea más gruesa alrededor del objeto Shape. Fill : describe cómo se pinta dentro del objeto Shape. Las propiedades para especificar coordenadas y vértices están medidas en píxeles 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 opción para trabajar con dibujos complejos, ya que éste soporta posición absoluta de los hijos del panel.

Tipos de transformaciones Rotation Con este tipo de transformación 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 tamaño 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% más 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 transformación estiramos la figura, modificando las propiedades AngleX, AngleY y Center. Son útiles para la simulación 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.


Página 41 de 55

Cámaras y proyecciones Cuando los desarrolladores trabajan en 2D, la posición de los dibujos es primitiva, pero cuando se crea un escenario 3D, es importante recordar que sólo se está creando una representación 2D de un objeto 3D. Porque una escena 3D se ve diferente según el punto de vista desde donde se mire, se debe marcar el punto desde donde se está viendo el gráfico. La clase Camera permite especificar el punto desde donde queremos que se vea el gráfico. Otra manera de entender cómo está representada una imagen 3D en una superficie 2D es describiendo la escena como una proyección sobre la superficie de la visión. 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 gráfico 3D. Las propiedades NearPlaneDistance (distancia mínima) y FarPlaneDistance (distancia máxima) limitan la distancia de la proyección de la cámara. Esto es porque la cámara puede ubicarse en cualquier lugar de la escena; entonces, podríamos ubicar la cámara muy cerca y no se podría distinguir nuestro gráfico 3D, y hasta podríamos estar dentro de él.

Traslación y rotación Traslación 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 dirección del vector que se define en la propiedad Offset. Por ejemplo, tenemos un cubo donde el vértice se encuentra en el (2, 2, 2), y queremos que el vértice esté en el (2, 3.6, 3). Para hacerlo, en la propiedad Offset tendríamos que asignar el vector de traslación (0, 1.6, 1), y entonces el vértice del cubo cambiaría de posición y toda nuestra gráfica 3D sería trasladada. Rotación Un gráfico 3D se puede rotar de muchas maneras. Una rotación típica especifica un eje y un ángulo de rotación alrededor del eje. La clase RotateTransform3D nos permite rotar con la propiedad Rotation, y luego las propiedades del eje y el ángulo de la rotación para definirlo.


Página 42 de 55

Animaciones

Introduccion WPF se encarga del trabajo de “detrás de la escena” para administrar el sistema de sincronización y el de rediseñar la pantalla eficientemente. WPF provee un conjunto de clases de sincronización que le permite al desarrollador enfocarse en los efectos que quiera crear. Hay varios puntos fundamentales sobre el concepto del sistema de sincronización que serán útiles para entender cómo usar las animaciones de WPF. El más importante es que, en WPF, el desarrollador les da animación a los objetos aplicándoles la animación. 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 animación. • Debe ser una clase que herede de DependencyObject.

WPF contiene muchos objetos con la propiedad Animación. Controles como Button y TabControl heredan propiedades desde DependencyObject. La mayoría de sus propiedades son propiedades de dependencia. Nos brindan la posibilidad de animar objetos muy fácilmente. Todos los objetos tienen propiedades que pueden modificarse para poder animarlos, pero tendremos que, además de cambiar su propiedad, utilizar un tipo de “Animation” apropiado. � Propiedad: Color – Animation: ColorAnimation. � Propiedad: Point – Animation: PointAnimation (cambia la posición 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 duración, 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.


Página 43 de 55

Podemos asignar tres tipos de valores a TargetProperty según 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 animación se encarga de hacer la transición 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 animación tomará el valor base de la propiedad del objeto.

• Offset Value

Propiedades � Duration . Determina cuánto va a durar nuestra animación.

� RepeatBehavior. Es la cantidad de veces que se va a reproducir nuestra animación.

� RepeatBehavior puede recibir también un valor de tipo “days:minutes:seconds”, y

en el caso de que asignemos un tiempo más largo de lo que realmente dura nuestra animación, ésta se repetirá.

Compatibilidad de tipos de animaciones <Type> Animation. Conocida como “Basic” (básica), ésta anima entre un valor de comienzo y uno de destino. <Type>AnimationUsingKeyFrames. Son más poderosas que las animaciones “Basic”, porque se puede especificar cualquier número de valores y, también, controlar su método de interpolación. Algunos tipos sólo pueden ser animados con esta clase de animaciones. <Type>AnimationBase. Clase abstracta que realiza una animación a valor <Type>. Esta clase sirve como base para las clases de <Type>Animation y <Type>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 parámetro un Double, usamos una animación que produce valores del tipo Double. Para animar una propiedad que toma como parámetro un valor del tipo Point, usamos una animación que produce valores del tipo Point.


Página 44 de 55

Ejemplo Animación <Window.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard Name="Storyboard01"> <DoubleAnimation Storyboard.TargetName="myImage" Storyboard.TargetProperty="(Image.Width)" From="250" To="0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Window.Triggers> <Grid> <Image Name="myImage" Source="d:/webcasts.jpg" Width="250"/> </Grid> 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 cuán 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, verán que esto lo hacemos con From y To; luego le pasamos el tiempo que queremos que dure la animación, que está representado con el formato de “day:hour:second”. También habilitamos las opciones de AutoReverse y repetición continua, y podemos configurar la aceleración o desaceleración.


Página 45 de 55

Estilos

Introduccion � Permiten diseñar una aplicación, documento o interfaz de usuario de forma estándar

para un determinado producto.

� El modelo de estilo que presenta Windows Presentation Foundation separa la lógica 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 diseñar una aplicación, documento o interfaz de usuario de forma estándar para un determinado producto. El diseñador 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 separación entre la lógica y la interfaz significa que los diseñadores pueden diseñar las pantallas de una aplicación al mismo tiempo que los desarrolladores escriben la lógica de esa aplicación.

Declaracion � La forma más común de declarar un estilo es a través de XAML. � Es posible declarar un estilo a cualquier elemento que derive de FrameworkElement

o de FrameworkContentElement.

� La declaración de un estilo consiste en un elemento Style que contiene una colección de uno o más 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 <Style x:Key="Style1"> <Setter Property="Control.Background" Value="Yellow"/> </Style>

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 cómo 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 <Label Content="Yellow Background" Style="{StaticResource Style1}" />


Página 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 también determina que sólo se pueda aplicar ese estilo a los elementos del tipo que se define.

<Style TargetType="{x:Type TextBlock}"> <Setter Property="FontFamily" Value="Segoe Black" /> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="FontSize" Value="12pt" /> <Setter Property="Foreground" Value="#777777" /> </Style>

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 también se agrega el estilo

Foreground con valor azul. <Style x:Key="Style1"> <Setter Property="Control.Background" Value="Yellow"/> </Style> <Style x:Key="Style2" BasedOn="{StaticResource Style1}"> <Setter Property="Control.Foreground" Value="Blue"/> </Style>


Página 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. <Style TargetType="{x:Type Rectangle}">

<Setter Property="Width" Value="50" /> <Setter Property="Height" Value="50" /> <Setter Property="Margin" Value="20" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Style.Triggers>

<EventTrigger RoutedEvent="Rectangle.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="300" Duration="0:0:1.5" AccelerationRatio="0.10" DecelerationRatio="0.25" Storyboard.TargetProperty="(Canvas.Width)"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Rectangle.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="0:0:1.5" AccelerationRatio="0.10" DecelerationRatio="0.25" Storyboard.TargetProperty="(Canvas.Width)" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger>

</Style.Triggers> </Style>


Página 48 de 55

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

� El primero cambia la propiedad de fondo de un botón cuando se pasa el mouse por encima de él.

� El segundo trigger cambia la propiedad Foreground de un botón cuando se lanza el evento IsPressed.

<Style x:Key="Triggers" TargetType="{x:Type Button}">

<Style.Triggers> <Trigger Property="Button.IsMouseOver" Value="true"> <Setter Property = "Background" Value="Red"/> </Trigger> <Trigger Property="Button.IsPressed" Value="true"> <Setter Property = "Foreground" Value="Green"/> </Trigger>

</Style.Triggers> </Style> También es posible definir un trigger que es aplicado sobre la base de múltiples 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 automático. <Style.Triggers> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" Value="#EEEEEE" /> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="HasItems" Value="false" /> <Condition Property="Width" Value="Auto" /> </MultiTrigger.Conditions> <Setter Property="MinWidth" Value="120"/> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="HasItems" Value="false" /> <Condition Property="Height" Value="Auto" /> </MultiTrigger.Conditions> <Setter Property="MinHeight" Value="95"/> </MultiTrigger> </Style.Triggers>


Página 49 de 55

Tipos de aplicaciones

Aplicaciones de navegador XAML No están 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 aplicación es similar a las aplicaciones instaladas en términos de dónde corre y seguridad. Pero, en realidad, es una colección de componentes empaquetados en una DLL para el uso de aplicaciones después de que el usuario haya ejecutado la aplicación. Como ésta no tiene una IU para el usuario, no utiliza XAML.

Aplicaciones instaladas Estas aplicaciones están 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 máquina local. � Pueden ejecutarse estando conectado o desconectado de Internet. � También se pueden ejecutar en una ventana del explorador. � Comparten características típicas soportadas por las Web Applications. � Las aplicaciones instaladas están típicamente 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 aplicación Windows Vista (Longhorn) también define cómo 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, añadir accesos directos al menú Inicio ...


Página 50 de 55

Además, pueden ejecutarse tanto en un navegador como en una ventana. De hecho, una aplicación de escritorio soporta la mayoría de las características tradicionalmente asociadas a una aplicación Web, incluidas las siguientes:

• Definición explícita de puntos externos de entrada. Esto permite empezar en cualquier página.

• Manejo de eventos de navegación. • Control de flujo de la aplicación. • Creación o eliminación de entradas del historial de páginas. • Ejecución de aplicaciones Windows. • A diferencia de las aplicaciones de navegador XAML, las aplicaciones

instaladas tienen total acceso a las características 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 aplicación 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 información de cualquier manera y de la forma más apropiada.

Tipos Aplicaciones instaladas Navigation Las aplicaciones Navigation consisten en una o más páginas dentro de una aplicación, y tienen gran similitud con las aplicaciones Web, que poseen muchas páginas .aspx. El usuario navega normalmente a través de la aplicación haciendo clic en los enlaces o botones, con contenido en cada página. Window Estas aplicaciones siguen un modelo similar a las aplicaciones Windows Forms. Una aplicación 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 Procedural Code asociado. En vez de eso, constituyen simplemente presentación de información para el usuario, de la misma manera que las presentaciones PDF.


Página 51 de 55

Aplicaciones Web � Son más simples y mucho más poderosas que DHTML.

� El código de la aplicación puede usar toda la capa de WPF.

� Manejan los eventos localmente.

� Soportan gráficos y multimedia en la página. El modelo WPF permite implementar una aplicación de forma similar a las aplicaciones Web. Esto simplifica la migración de desarrolladores Web, pues el código es similar al de las páginas HTML dinámicas (DHTML). Etiquetas y lógica de la aplicación coexisten en un mismo archivo; los archivos son desplegados desde un servidor Web, y las páginas de la aplicación se muestran en un navegador. Sin embargo, el modelo objeto de una aplicación WPF orientada a la Web es más simple y poderoso que el de DHTML: la interfaz de ésta se encuentra construida sobre la completa API de WPF (Avalon). Es por ello por lo que las aplicaciones Web contarán con ricos controles, soporte multimedia avanzado, gráficos y manejo local de eventos. Básicamente, lo que cualquier aplicación cliente ofrece. De hecho, las principales diferencias entre una aplicación Web WPF y una aplicación de escritorio no son otras que el alojamiento de los archivos (servidor o máquina cliente) y que, en el primer caso, algunos permisos de la aplicación estarán restringidos. Describimos algunos escenarios en los que se debería considerar el uso de aplicaciones del explorador Web. En función de la relativa importancia de la complejidad visual, la facilidad para el desarrollo y los clientes a los que se dirige, puede ser recomendable la creación de una experiencia de WBA preferida, además de una versión HTML que llegue a un sector más amplio. En muchos casos, para las campañas de marketing puede resultar útil crear una experiencia más atractiva para los usuarios de Windows, mediante la creación de aplicaciones del explorador Web. Las aplicaciones del explorador Web (WBA) permiten trasladar a Internet el potencial de Windows Presentation Foundation. Proporcionan unas vistas de máxima calidad al tiempo que ofrecen las herramientas para crear la lógica de la aplicación necesaria. El lenguaje XAML flexible y la integración total con el explorador proporcionan métodos eficaces para migrar los sitios existentes. Las WBA cuentan con un historial de implementación intachable y un recinto de seguridad, lo cual las convierte en una opción de tecnología Web de gran eficacia.


Página 52 de 55

Formas de escribir aplicaciones

En la primera forma, usamos el archivo XAML para definir la IU. Se puede adherir un archivo code-behind con las clases y los métodos para manejar los eventos de la página. En la segunda forma, se puede escribir toda la aplicación totalmente en nuestro code-behind. Para poder hacer este tipo de aplicación, hay que crear una clase que herede desde la clase Application, se debe crear una clase del tipo Windows o NavigationWindow, y objetos del tipo TextBox y ListBox para poder mostrarlos. Ésta es una parte de un código que nos puede servir como ejemplo: win = new System.Windows.Window(); rootPanel = new StackPanel(); txtElement = new TextBlock(); txtElement.Text = "Some Text"; win.Content = rootPanel; rootPanel.Children.Add(txtElement); win.Show();

XAML y code-behind

Procedural Code

Archivo XAML con

Archivo VB o CS

Archivo VB o CS


Página 53 de 55

Microsoft Expression Graphic Designer � Efectos visuales dinámicos. Los diseñadores pueden explotar su creatividad con

propiedades gráficas y estilos innovadores como texturas, márgenes y dimensionalidad.

� Nuevos efectos en las imágenes, como aspecto borroso, sombras, corrección del color y filtros.

� Aplique efectos y filtros usando Live Effects editables y no destructivos. � Use variaciones de la paleta de colores para dibujar múltiples formas y movimientos

tan sólo cambiando los atributos. � Distorsione imágenes usando Warp Mesh, la cual puede ser combinada con Live

Effects y otras propiedades mientras se mantiene la fuente de píxeles para edición. � Trabaje con la paleta de Effect Lines para crear grupos controlados de movimientos

con parámetros seleccionados al azar. � Agregue profundidad y texturas a objetos con bordes resaltados o suaves, y cree una

apariencia única con rellenos personalizados, movimientos y texturas de fondo. � Convierta objetos de tipo vectores a capas de píxeles para que puedan ser

modificadas con herramientas de las imágenes de píxeles. � Use características como RotateCanvas, la cual permite trabajar de la forma más

apropiada para dibujar e ilustrar. � Cree y aplique estilos predefinidos, que contienen múltiples propiedades de

pinturas, efectos y filtros, usando la lista de la paleta de estilos � Exporte las ilustraciones de tipo vectores y bitmap a XAML. XAML es el lenguaje

declarativo para describir elementos de la interfaz de usuario para Windows Presentation Foundation.

� Ahorre tiempo en la creación de la presentación gráfica copiando y pegando tanto

imágenes de tipo vectores como bitmap, con una completa integración con Microsoft Office PowerPoint.

� Cree efectos de giro interactivos y exporte imágenes optimizadas junto con código

HTML y JavaScript para edición futura en diseño Web y herramientas de desarrollo como Visual Studio y FrontPage.

� Vea la versión preliminar en modo Pixel, la cual le mostrará el documento entero

renderizado para poder especificar la resolución y la compresión de la imagen, mientras se mantiene la habilidad completa de edición para modificaciones de ilustraciones de vectores y bitmaps.


Página 54 de 55

Microsoft Expression Interactive Designer

Standards-Based Web Sites Elija cualquier schema que se adapte a su desarrollo, y utilice todos los beneficios que vienen con cada uno (HTML 4.0, XHTML 1.1, XHTML 1.0 Frameset) La recepción de feedback instantáneo sobre violaciones estándar hace que las correcciones puedan efectuarse durante el diseño del proceso. De esa manera, se evita perder tiempo en las correcciones luego, en el escenario de diseño.

Entorno sofisticado basado en CSS Produzca, administre, aplique y reutilice formatos con hojas de estilo, usando un profundo soporte a través de las herramientas que ofrece el producto Mejore el diseño inicial empezando con los templates profesionales llenos que utilizan CSS y XHTML. Conozca y configure todas las propiedades del tag HTML seleccionado. Se tiene un acceso total al poder de HTML a través de una sola paleta.

Presentación de información Diseñe vistas personalizadas de información XML usando “drag and drop” para alcanzar rápidamente visualizaciones que se adaptan a los CSS del diseño del sitio. Consuma servicios RSS para su sitio, y haga que tengan los mismos estilos de su sitio.

Tecnología de servidor Utilice todas las ventajas de ASP.NET 2.0 con el soporte integrado del servidor y los controles de usuario. Cree sitios dinámicos e interactivos. Use la caja de herramientas de controles y la tabla de propiedades para poder insertar y configurar rápidamente los controles ASP.NET. Puede mantener la vista de su sitio de forma correcta con el uso de Master Pages; ahorrará tiempo en el diseño del sitio, y podrá acceder a él rápidamente para realizar modificaciones. Es posible acceder a los controles de ASP.NET y a sus propiedades con el mismo poder que nos brinda Microsoft Visual Studio 2005.


Página 55 de 55

Microsoft Expression Interactive Designer

Capacidades de diseño � Incorpora vectores, bitmaps, contenido 3D, video, sonido y texto enriquecido

totalmente 3D. � Es posible importar y combinar los dos tipos de imágenes que se manejan (vectores

y bitmap), o dibujar y editar vectores, y aplicar gradientes avanzadas, transparencias y bordes personalizados.

� Agrega geometría real 3D y animación, incluyendo control directo de

transformaciones de objetos a través de los ejes XYZ y cámaras 3D. � Realice videos con un alto nivel de interacción a través de un amplio rango de

ajustes de resoluciones y calidad, incluido HD Video.

Completo control en creatividad � Utilice la gran cantidad de controles estándar que WPF proporciona para generar

una compleja IU. Aplique los cambios de diseño visual y de comportamiento sin modificar sus capacidades funcionales.

� Agregue estados básicos (MouseOver, etc.) a los controles de animación, gráficos,

3D y videos, para manejar su comportamiento. Cree sus propios estilos estándar para su reutilización o emplee los temas estándar de Windows, como “Luna(XP)” o “Royale(MACE)”.

� Diseñe el layout utilizando contenedores automatizados (Grid, Flow, Dock, Stack),

los cuales ofrecen control de diseño sobre las distintas escalas. La reposición de la IU es muy ventajosa, ya que se adapta a los diferentes factores (por ejemplo, la resolución) de pantalla del usuario.

Incrementa la satisfacción del uso de IU � Desarrolla las aplicaciones con estilo Web o totalmente integradas a las aplicaciones

de escritorio, e incorpora la capacidad de datos de manera conectada y desconectada para una óptima experiencia.

Manual Wpf

Documents

Transcript of Manual Wpf