Manual WPF

Windows
Presentation
Foundation

Pedro Bauz Pic
pedro.bauza@balearsinnovacio.com
Empresa Innova Desarrollos Informticos

ndice

Introduccin ............................................................................................................................... 1
Qu es Windows Presentation Foundation?..................................................................... 1
Qu es XAML?................................................................................................................. 1
Qu es AERO? ................................................................................................................. 1
Windows Presentation Foundation es la nueva generacin del sistema grfico. ............... 2
Aprovecha la potencia y la capacidad que hoy en da brindan los sistemas grficos. ....... 2
Proporciona una base para construir aplicaciones y dar al usuario una experiencia de alta
fidelidad en el uso de Windows Vista. ............................................................................... 2
Los desarrolladores podrn proporcionar una experiencia de usuario ms rica y precisa
para sus propias aplicaciones. ............................................................................................ 2
Se podrn aprovechar nuevas funciones visuales, por ejemplo, AERO. ........................... 2
XAML y WPF separan los controles segn su funcionalidad y sus habilidades. .............. 3
Implementacin de estilos.................................................................................................. 3
Un nuevo modelo de aplicacin mediante un Objeto Aplicacin...................................... 3
WPF nos introduce en una nueva forma declarativa de programar, llamada XAML........ 3
Los paneles son la clase base para todos los elementos que proporciona WPF en el
soporte de layout ................................................................................................................ 4
Efectos 3D.......................................................................................................................... 4
Animaciones....................................................................................................................... 4
Grficos basados en vectores ............................................................................................. 4
Framework de Windows Presentation Foundation .................................................................... 5
Arquitectura de Windows Presentation Foundation........................................................... 5
Capacidades de Windows Presentation Foundation........................................................... 7
Modelo de clases ................................................................................................................ 8
System.Windows................................................................................................................ 8
System.Windows.Controls................................................................................................. 8
System.Windows.Data ....................................................................................................... 8
System.Windows.Input ...................................................................................................... 8
System.Windows.Media..................................................................................................... 9
System.Windows.Media.Animation .................................................................................. 9
System.Windows.Media.Media3D .................................................................................... 9
System.Windows.Navigation............................................................................................. 9
System.Windows.Shapes ................................................................................................... 9
System.Windows.Resources .............................................................................................. 9
System.Windows.Serialization........................................................................................... 9
UIElement .......................................................................................................................... 9
FrameworkElement ............................................................................................................ 9
Ejemplo del Namespace System.IO................................................................................. 10
Bases de WPF........................................................................................................................... 11
Introduccion ..................................................................................................................... 11
SubClass........................................................................................................................... 11
Freezable Objects ............................................................................................................. 13
Qu es Freezable?........................................................................................................... 13
Ejemplo Freezable............................................................................................................ 13

XAML...................................................................................................................................... 14
Introduccion ..................................................................................................................... 14
Declaraciones de namespaces en XAML......................................................................... 15
XAML y code-behind ...................................................................................................... 16
XAML sin code-behind.................................................................................................... 17
Programando en XAML................................................................................................... 18
Documentos en XAML.................................................................................................... 18
Ejemplo XAML y Code-behind....................................................................................... 20
User Interfaces Controles ...................................................................................................... 21
Introduccion ..................................................................................................................... 21
Jerarqua de controles....................................................................................................... 21
Lista de controles XAML................................................................................................. 22
Control Button y Label..................................................................................................... 22
Control Checkbox ............................................................................................................ 23
Control ListBox................................................................................................................ 23
Control RadioButton ........................................................................................................ 23
Control Expander ............................................................................................................. 24
Control MenuBase............................................................................................................ 25
Control ComboBox .......................................................................................................... 25
Control TreeView............................................................................................................. 25
Paneles.............................................................................................................................. 26
Panel Canvas .................................................................................................................... 26
Panel DockPanel .............................................................................................................. 27
Panel FlowPanel ............................................................................................................... 28
Panel TextPanel................................................................................................................ 29
Panel GridPanel................................................................................................................ 30
Panel StackPanel .............................................................................................................. 30
Trabajando con documentos............................................................................................. 31
Documento Fixed ............................................................................................................. 31
Control FixedDocument DocumentViewer .................................................................. 32
Ejemplo de DocumentViewer .......................................................................................... 33
Documento Flow.............................................................................................................. 35
FlowDocumentPageViewer ............................................................................................. 36
FlowDocumentScrollViewer............................................................................................ 36
FlowDocumentReader...................................................................................................... 37
Trabajando con grficos y animaciones ................................................................................... 38
Introduccion ..................................................................................................................... 38
Objeto Shape .................................................................................................................... 39
Objeto Geometries............................................................................................................ 39
Objeto Pen........................................................................................................................ 39
Ejemplo objeto Ellipse ..................................................................................................... 40
Tipos de transformaciones ............................................................................................... 40
Cmaras y proyecciones................................................................................................... 41
Traslacin y rotacin........................................................................................................ 41
Animaciones............................................................................................................................. 42
Introduccion ..................................................................................................................... 42
Propiedades ...................................................................................................................... 43
Compatibilidad de tipos de animaciones.......................................................................... 43
Ejemplo Animacin.......................................................................................................... 44

Estilos....................................................................................................................................... 45
Introduccion ..................................................................................................................... 45
Declaracion....................................................................................................................... 45
x:Key................................................................................................................................ 45
TargetType ....................................................................................................................... 46
Extendiendo estilos .......................................................................................................... 46
Triggers ............................................................................................................................ 47
Ejemplo de uso de triggers ............................................................................................... 48
Tipos de aplicaciones ............................................................................................................... 49
Aplicaciones de navegador XAML.................................................................................. 49
Control Library................................................................................................................. 49
Aplicaciones instaladas .................................................................................................... 49
Tipos Aplicaciones instaladas .......................................................................................... 50
Aplicaciones Web ............................................................................................................ 51
Formas de escribir aplicaciones ....................................................................................... 52
Microsoft Expression Graphic Designer .................................................................................. 53
Microsoft Expression Interactive Designer.............................................................................. 54
Standards-Based Web Sites.............................................................................................. 54
Entorno sofisticado basado en CSS.................................................................................. 54
Presentacin de informacin ............................................................................................ 54
Tecnologa de servidor ..................................................................................................... 54
Microsoft Expression Interactive Designer.............................................................................. 55
Capacidades de diseo ..................................................................................................... 55
Completo control en creatividad ...................................................................................... 55
Incrementa la satisfaccin del uso de IU.......................................................................... 55
Windows Presentation Fundation
Pgina 1 de 55

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

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

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

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

Pgina 2 de 55

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

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

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

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

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

Pgina 3 de 55

XAML y WPF separan los controles segn su funcionalidad y sus
habilidades.
Simple Controls
Controles simples que no tienen ningn contenido o tems.
Content Controls
Son controles que pueden mostrar algn contenido.
Items Controls
Controles que pueden tener hijos. Cualquier control que tenga alguna coleccin cae en
esta categora.
Headered Content Controls
Contienen dos propiedades: Header (es tpicamente usada para poner un identificador) y
Content (es contenido del control).
Headered Items Controls
Contienen las siguientes propiedades: Header, Item e ItemSource.

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

Se puede declarar un estilo de cualquier elemento que derive desde
FrameworkElement o de FrameworkContentElement. La forma ms comn de
declarar un estilo es hacindolo dentro del archivo XAML. Si se declara un estilo en el
elemento principal de la aplicacin, ste puede ser utilizado en cualquier lugar de la
aplicacin.
Un nuevo modelo de aplicacin mediante un Objeto Aplicacin
Todas las aplicaciones que usan Windows Presentation Foundation estn asociadas a un
Objeto Aplicacin. Este objeto representa a la aplicacin frente al sistema, y permite al
sistema comunicarse con la aplicacin. Tiene ms funciones que veremos ms adelante.

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

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

Pgina 4 de 55

Los paneles son la clase base para todos los elementos que proporciona
WPF en el soporte de layout
Los elementos de un panel son componentes que controlan la renderizacin de los
elementos (tamao y dimensiones, posicin, y el arreglo del contenido de sus hijos).
WPF proporciona un gran nmero de paneles, como Canvas, DockPanel y GridPanel,
que veremos ms adelante.
Efectos 3D
La implementacin 3D de Windows Presentation Foundation permite a los
desarrolladores dibujar, transformar y animar grficos 3D de distintas formas, usando
las mismas habilidades afrontadas por la plataforma de grficos 2D. Tambin permite
combinar grficos 2D y 3D para crear controles ms atractivos, y proporcionar
complejas ilustraciones de informacin. Este soporte 3D que nos otorga Windows
Presentation Foundation no tiene todas las caractersticas para el desarrollo de juegos.
Animaciones
Las animaciones pueden ser un atractivo para una interfaz de usuario. Solamente con
pocas animaciones se pueden crear sorprendentes efectos de animacin.
WPF proporciona todas las herramientas para que este proceso que tan complicado nos
pareca antes sea ms fcil de implementar.
Grficos basados en vectores
Windows Presentation Foundation usa grficos basados en vectores. stos, que incluyen
SVG (Scalable Vector Graphics), archivos metafile (.wmf) y las fuentes (que usamos
usualmente para las letras), almacenan la informacin y la transmiten como una lista de
instrucciones que describen cmo se va a recrear una imagen usando grficos
primitivos.

Pgina 5 de 55

Framework de Windows Presentation Foundation
Arquitectura de Windows Presentation Foundation

La figura muestra los componentes internos de Windows Presentation Foundation.

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

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

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

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

Pgina 6 de 55

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

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

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

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

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

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

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

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

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

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

Pgina 7 de 55

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

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

Capacidades de Windows Presentation Foundation

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

Ofrece animacin 2D y 3D.

Contiene hyperlinks para navegar entre documentos y tablas.

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

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

Efectos, enlace a datos y ms.
Pgina 8 de 55

Modelo de clases

System.Windows
Este namespace contiene las clases e interfaces que son utilizadas para crear
aplicaciones. Define varias interfaces y estructuras comunes usadas a travs de la API,
como la clase Application, la clase Window, styling, dependency, y clases base
comunes.
System.Windows.Controls
El namespace de controles est asociado a la interfaz de usuario de la aplicacin. ste
incluye mens, hyperlinks, edit boxes (text, check, combo y list boxes), buttons, panels,
borders, y sliders para audio y video. El Viewport3D est tambin localizado en este
namespace para controlar todo el contenido 3D y el contenido con interaccin.
System.Windows.Data
El namespace de datos controla todas las propiedades para enlace a datos. ste es usado
especficamente para la fuente, para estas clases y para cualquier otra asociada a la
implementacin de datos y colecciones.
System.Windows.Input
Este namespace controla todos los modos de entrada, como el mouse, el teclado o
Tablet, con los cuales interacta el usuario cuando usa la aplicacin.
Pgina 9 de 55

System.Windows.Media
El namespace Media controla todas las clases de grficos tanto para 2D como para 3D.
ste tambin define el camino para las clases de segmento, brochas, colores, efectos de
imgenes, clases geomtricas, colecciones, audio, video, enumeraciones y estructuras.
System.Windows.Media.Animation
Este namespace contiene las clases utilizadas para animacin 2D y 3D. Esta rea
incluye tipos para Timelines, KeyFrames y Animation.
System.Windows.Media.Media3D
Contiene una variedad de clases especficas para grficos en 3D.
Estas clases son utilizadas para definir cmo los grficos van a ser presentados dentro
de la aplicacin.
System.Windows.Navigation
Este namespace est dedicado a las clases e interfaces utilizadas para la navegacin de
aplicaciones, donde la navegacin puede ser entre ventanas, paneles o journaling.
System.Windows.Shapes
Este namespace es para todas las formas primitivas 2D usadas dentro de la API. stas
son ellipse, glyphs, line, path, polygon, polyline y rectangle. Estas clases con similares a
las encontradas en Scalable Vector Graphics (SVG).
System.Windows.Resources
Este namespace contiene todas las clases que usan recursos, que podran definir
propiedades para estilos de animacin y localizacin, y que pueden ser accedidas por un
objeto referenciando el nombre como Style={StaticResource ResourceName}
dentro de la aplicacin.
System.Windows.Serialization
Este namespace soporta la conversin de objetos Avalon al modelo XAML y viceversa.
UIElement
El elemento UIElement, que proviene del namespace System.Windows, es la clase base
de la cual derivan muchos objetos visuales. Determina de cada elemento la apariencia
inicial, el diseo, la posicin y la interaccin con el usuario.
FrameworkElement
Derivado de UIElement, FrameworkElement es tambin una clase base. Es una clase de
la cual la mayora de los elementos visuales heredan la apariencia y las caractersticas
(por ejemplo, altura, ancho, etc.). Cuando escribimos cdigo en .NET, podemos acceder
a un objeto que se encuentra dentro del XAML referencindolo con la propiedad
Name.

Pgina 10 de 55

UIElement y FrameworkElement son dos de los elementos ms importantes dentro de la
API. Son los que influyen sobre la apariencia bsica de cada uno de los elementos de la
API. Por ejemplo, la altura y el ancho de un elemento son dos propiedades que heredan
de FrameworkElement. Estas dos propiedades tienen un tipo de dato Double; esto
quiere decir que cualquier elemento dentro de la API tiene una propiedad del tipo
Double, para esto es una propiedad heredada del elemento UIElement.
Ejemplo del Namespace System.IO
private void
CreateAndShowMainWindow()
{
mainWindow = new Window();
Canvas myCanvas = new Canvas();
myCanvas.Background =
Bushes.LightSteelBlue;

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

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

Creamos un objeto de tipo Window.
Creamos un objeto de tipo Canvas.
Establecemos el color de fondo de nuestro panel.
Creamos un objeto de tipo TextBlock.
Establecemos el tamao de la letra que va a aparecer en este TextBlock.
Le asignamos el contenido que va a tener el TextBlock (Hola Mundo!).
Establecemos la posicin del objeto de tipo TextBlock dentro del Canvas. Posicin
100 desde la parte superior y 10 desde la parte izquierda del Canvas.
Le decimos al Canvas que el objeto txt1 es su nuevo hijo.
Creamos otro objeto de tipo TextBlock, le asignamos el tamao de fuente 22 y el
contenido Hola Mundo 2!, y le indicamos la posicin donde va a estar en el
Canvas.
Lo agregamos como hijo al Canvas.
Le asignamos el Canvas al contenido de la ventana de nuestra aplicacin.
En la propiedad Title de la ventana de la aplicacin asignamos Ejemplo.
Finalmente, mostramos nuestra ventana.
Pgina 11 de 55

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

UIElement
FrameworkElement
ContentElement
FrameworkContentElement

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

SubClass
La forma ms prctica de crear una clase personalizada que se extienda de Windows
Presentation Foundation es creando una subclase que herede de una de las clases de
WPF.

Tendremos todas las funcionalidades a travs de la herencia.

Se destacan tres clases cuyas funcionalidades podemos utilizar.

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

Si creamos una clase que herede de DependencyObject, se obtienen las siguientes
funcionalidades:
Se adquieren los mtodos GetValue y SetValue, para obtener y asignar
una propiedad.
La habilidad de usar propiedades dependientes y adjuntar propiedades.

Si creamos una clase que herede de UIElement, se pueden obtener las siguientes
funcionalidades, adems de las que nos provee la clase DependencyObject:
Soporte para animaciones.
Soporte bsico para entrada y de comandos.
Mtodos virtuales que pueden sobrecargar para proveer informacin para
el manejador de layout.
Pgina 12 de 55

Si creamos una clase que herede de FrameworkElement, se pueden obtener las
siguientes funcionalidades, adems de las que provee la clase UIElement.
Soporte para styles y storyboards.
Soporte para DataBinding.

Si creamos una clase que herede de ContentElement, obtenemos las siguientes
funcionalidades, adems de las que nos brinda DependencyObject.
Soporte para animaciones.
Soporte bsico para eventos de entrada y comandos.

Si creamos una clase que herede de FrameworkContentElement, obtenemos las
siguientes funcionalidades, adems de las que provee la clase ContentElement:
Soporte para styles y storyboards.
Soporte para DataBinding.
No se obtiene acceso a las modificaciones del manejador de layout.

Pgina 13 de 55

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

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

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

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

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

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

Ayuda a mejorar el rendimiento de la aplicacin.

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

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

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

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

Pgina 14 de 55

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

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

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

Creando un archivo bsico de XAML
<?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 extensin de tipo
.xaml y un namespace referenciado a los namespaces de XML. Aqu, como estamos
trabajando con Windows Presentation Foundation, todos los nombres sern
referenciados hacia Windows Presentation Foundation y los namespaces de XAML.

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

Es un lenguaje para la interfaz de WPF.

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

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

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

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

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

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

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

XAML y code-behind
XAML
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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 botn en una pgina, XAML puede
crearlo y mostrarlo por pantalla. Pero el botn no hizo nada hasta ahora. El modelo de
programacin de Windows Presentation Foundation permite, a travs de los atributos
del elemento XAML, asociar un evento que definimos en code-behind. El code-behind
puede estar en lenguajes como Microsoft Visual Basic .NET o C#. Para poder asociar
los eventos que definimos en el XAML con los manejadores en el code-behind, los
nombres de los eventos en el code-behind y el valor del atributo en el elemento XAML
tienen que coincidir, como se ve en el ejemplo.

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

X:Name
<element x:Name="aStringNameValue".../>

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

XAML sin code-behind
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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 cdigo en el archivo XAML; ste va a interactuar con los
elementos de XAML. El cdigo XAML que vemos contiene C#. Ntese que el cdigo
que est dentro del elemento x:Code debe estar rodeado de <CDDATA[]>.

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

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

Pgina 18 de 55

Programando en XAML

Mediante el uso de XAML se puede:

Escribir un documento que muestre contenido esttico.
Crear un documento que muestre por pantalla datos de un enlace y actualice su
contenido desde el archivo fuente.
Definir animaciones y efectos de ratn.

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

Una propiedad de herencia ms aparente.
Un control de jerarquas ms aparente. Es posible aplicar propiedades de forma
conjunta a los hijos de un elemento padre.
Mayor facilidad de interpretacin y procesamiento de las etiquetas mediante
herramientas; la interfaz de una aplicacin puede ser visualizada en cualquier
navegador que soporte XAML.
Separacin potencial de IU y cdigo procedimental.

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

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

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

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

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

Es interpretado de forma instantnea.

Separa el aspecto lgico del aspecto visual.

XAML es un lenguaje declarativo basado en XML
Pgina 19 de 55

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

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

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

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

Ejemplo XAML y Code-behind

Pgina 21 de 55

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

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

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

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

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

Lista de controles XAML
Control Button y Label
<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 botn es un control, un componente de interaccin
que permite a los usuarios comunicarse con una aplicacin. Normalmente, cuando
hacemos clic en un botn, mandamos un mensaje, y la aplicacin responde a l. El
sistema, el botn y la aplicacin cooperan entre s para cambiar la apariencia y el estado
del botn.

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

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

Border BulletDecorator Button Canvas CheckBox
ComboBox ContextMenu Control DockPanel DocumentViewer
Expander FlowDocumentPag
eViewer
FlowDocumentReader FlowDocumentSc
rollViewer
Frame
Grid GridSplitter GridView GroupBox ImageLabel
ListBox ListView Menu Panel PasswordBox
PopIp ProgressBar PrintDialog RaduiButton RepeatButton
RichTextBox ScrollBar ScrollViewer Separator Slider
StackPanel StatusBar TabControl TextBix Thumb
ToolBar ToolTip TreeView WrapPanel ViewBox
Pgina 23 de 55

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

<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>
</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>

Pgina 24 de 55

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

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

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

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

<Expander >
<Expander.Header>
<TextBlock > Books </TextBlock>
</Expander.Header>
<ScrollViewer >
<ListBox >
</ListBox >
</ScrollViewer>
</Expander>
Pgina 25 de 55

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

<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>
</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>
Pgina 26 de 55

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

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

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

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

Agrupar controles lgicamente para que stos se puedan mostrar o esconder.
Definir un contenedor conveniente donde los controles puedan ser creados y
borrados dinmicamente.
Usar un solo punto para aplicar cualidades del estilo a un conjunto de controles.
Proveer de informacin a las pginas ASP.NET sobre los controles que estn juntos
en la paginacin.
Panel Canvas
Un panel Canvas coloca cada elemento hijo en coordenadas dentro del rea del
panel de Canvas.

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

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

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

<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>
Pgina 27 de 55

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

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

<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>
Pgina 28 de 55

Panel FlowPanel
El panel FlowPanel proporciona un gran nmero de caractersticas automticas, y
nos permite trabajar con textos y grficos complejos.

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

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

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

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

<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>
Pgina 29 de 55

Panel TextPanel
Soporta textos multilnea y textos multiformato.

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

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

TextPanel tambin formatea y redimensiona los textos.

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

<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>

Pgina 30 de 55

Panel GridPanel
Soporta muchas propiedades que se pueden usar para especificar el diseo de los
datos por mostrar.

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

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

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

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

Si un elemento se agrega dentro de un Grid y la columna tiene auto en la propiedad
Width, se acomodar sin restricciones.
Panel StackPanel
StackPanel es para crear un conjunto de botones situados verticalmente. Para
posicionamiento horizontal, se debe colocar la propiedad Orientation en Horizontal.

<StackPanel HorizontalAlignment="Left"
VerticalAlignment="Top">
<Button>Botn 1</Button>
</StackPanel>
Pgina 31 de 55

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

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

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

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

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

Pgina 32 de 55

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

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

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

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

Pgina 33 de 55

Ejemplo de DocumentViewer
<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 tambin un men para acceder al dilogo file-loading. El
siguiente cdigo C# implementa la accin 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);

Pgina 34 de 55

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

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

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

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

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

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

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

Pgina 36 de 55

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

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

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

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

Zoom Controls: permiten al usuario aumentar y disminuir el nivel del zoom, haciendo
clic en el botn de ms y en el de menos.
FlowDocumentScrollViewer
La barra desplazadora vertical es siempre mostrada, y la horizontal se exhibe slo si es
necesario. De forma predeterminada, el FlowDocumentScrollViewer no incluye una
barra de herramientas (la cual trae los controles de los otros documentos, como zoom,
botn de bsqueda, etc.), pero se puede hacer visible modificando la propiedad
IsToolBarVisible.

Pgina 37 de 55

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

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

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

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

Las distintas vistas que ofrece este documento son:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 ms verstiles que aqullos.
Pueden ser definidos, por ejemplo, para describir curvas. Tambin es posible
renderizarlos usando otro elemento del framework, controles o brushes.
Objeto Pen
Dibuja una lnea de una altura y un ancho especficos. Una lnea dibujada con un Pen
puede adquirir una variedad de estilos, incluidos colores slidos y texturas. El relleno
depende del brush o la textura que se utilice como objeto de relleno.

Pgina 40 de 55

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

<Ellipse
Height="100"
Width="200"
Fill="Yellow"
Stroke="Black"
StrokeThickness="2" />

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

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

Como los Shapes son elementos de IU, se pueden agregar dentro de paneles y de otros
controles. El panel de tipo Canvas es la mejor opcin para trabajar con dibujos
complejos, ya que ste soporta posicin absoluta de los hijos del panel.
Tipos de transformaciones
Rotation
Con este tipo de transformacin podemos rotar un objeto con un determinado ngulo.
Con la propiedad Angle en 45 se rota un elemento 45 grados en el sentido de las agujas
del reloj. Se pueden especificar las propiedades CenterX y CenterY si se quiere
controlar el punto donde el elemento es rotado.

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

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

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

Otra manera de entender cmo est representada una imagen 3D en una superficie 2D es
describiendo la escena como una proyeccin sobre la superficie de la visin. La clase
ProjectionCamera nos permite especificar las diferentes proyecciones y sus propiedades
para modificar el modo en que se va a representar el modelo del grfico 3D. Las
propiedades NearPlaneDistance (distancia mnima) y FarPlaneDistance (distancia
mxima) limitan la distancia de la proyeccin de la cmara. Esto es porque la cmara
puede ubicarse en cualquier lugar de la escena; entonces, podramos ubicar la cmara
muy cerca y no se podra distinguir nuestro grfico 3D, y hasta podramos estar dentro
de l.
Traslacin y rotacin
Traslacin
Las traslaciones se heredan desde la clase Transform3D, e incluyen las clases
TranslateTransform3D, ScaleTransform3D y RotateTransform3D.
TranslateTransform3D mueve todos los puntos del modelo 3D en direccin del vector
que se define en la propiedad Offset. Por ejemplo, tenemos un cubo donde el vrtice se
encuentra en el (2, 2, 2), y queremos que el vrtice est en el (2, 3.6, 3). Para hacerlo, en
la propiedad Offset tendramos que asignar el vector de traslacin (0, 1.6, 1), y entonces
el vrtice del cubo cambiara de posicin y toda nuestra grfica 3D sera trasladada.

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

Pgina 42 de 55

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

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

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

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

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

Nos brindan la posibilidad de animar objetos muy fcilmente.

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

Cada una de las Animations deriva de la clase Timeline.

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

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

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

Pgina 43 de 55

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

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

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

Offset Value

Propiedades
Duration. Determina cunto va a durar nuestra animacin.

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

RepeatBehavior puede recibir tambin un valor de tipo days:minutes:seconds, y
en el caso de que asignemos un tiempo ms largo de lo que realmente dura nuestra
animacin, sta se repetir.
Compatibilidad de tipos de animaciones
<Type> Animation. Conocida como Basic (bsica), sta anima entre un valor de
comienzo y uno de destino.

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

<Type>AnimationBase. Clase abstracta que realiza una animacin 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 parmetro un Double, usamos una animacin que produce
valores del tipo Double. Para animar una propiedad que toma como parmetro un valor
del tipo Point, usamos una animacin que produce valores del tipo Point.

Pgina 44 de 55

Ejemplo Animacin
<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 cun precisos somos
en el tipo de datos. Luego configuramos el control objetivo y la propiedad que vamos a
controlar, con TargetName y TargetProperty, respectivamente.

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

Estilos
Introduccion
Permiten disear una aplicacin, documento o interfaz de usuario de forma estndar
para un determinado producto.

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

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

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

La separacin entre la lgica y la interfaz significa que los diseadores pueden disear
las pantallas de una aplicacin al mismo tiempo que los desarrolladores escriben la
lgica de esa aplicacin.
Declaracion
La forma ms comn de declarar un estilo es a travs de XAML.

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

La declaracin de un estilo consiste en un elemento Style que contiene una
coleccin de uno o ms Setters.
Cada Setter contiene una propiedad y un valor. Una vez que el estilo est
declarado como un recurso, puede ser referenciado como cualquier otro recurso.

XAML
<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 cmo el estilo del elemento Label hace referencia al
estilo Style1.

En el este ejemplo vemos como el estilo del elemento Label hace referencia al estilo
Style1
<Label Content="Yellow Background" Style="{StaticResource Style1}" />
Pgina 46 de 55

TargetType
Podemos aplicar estilos a todos los elementos de un tipo usando la propiedad
TargetType y la llave x:Type.

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

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

<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 tambin 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>
Pgina 47 de 55

Triggers
Windows Presentation Foundation define propiedades que corresponden a las
acciones de los usuarios finales.
IsMouseOver se vuelve verdadera cuando el usuario pasa el mouse sobre
un elemento de tipo UIElement o un ContentElement.

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

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

<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>
Pgina 48 de 55

Ejemplo de uso de triggers
El siguiente ejemplo contiene dos triggers.
El primero cambia la propiedad de fondo de un botn cuando se pasa el
mouse por encima de l.
El segundo trigger cambia la propiedad Foreground de un botn cuando
se lanza el evento IsPressed.

<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>

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

<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>
Pgina 49 de 55

Tipos de aplicaciones
Aplicaciones de navegador XAML
No estn instaladas en el sistema del usuario. Pueden correr con permisos de Internet, y
garantizan el acceso limitado a los recursos del sistema del usuario.
Control Library
Este tipo de aplicacin es similar a las aplicaciones instaladas en trminos de dnde
corre y seguridad. Pero, en realidad, es una coleccin de componentes empaquetados en
una DLL para el uso de aplicaciones despus de que el usuario haya ejecutado la
aplicacin. Como sta no tiene una IU para el usuario, no utiliza XAML.
Aplicaciones instaladas
Estas aplicaciones estn instaladas en el sistema del usuario. Poseen acceso total a los
recursos del sistema del usuario y deben tener el permiso del usuario antes de
ejecutarse.

Se instalan en la mquina local.

Pueden ejecutarse estando conectado o desconectado de Internet.

Tambin se pueden ejecutar en una ventana del explorador.

Comparten caractersticas tpicas soportadas por las Web Applications.

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

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

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

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

Pgina 50 de 55

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

Definicin explcita de puntos externos de entrada. Esto permite empezar en
cualquier pgina.
Manejo de eventos de navegacin.
Control de flujo de la aplicacin.
Creacin o eliminacin de entradas del historial de pginas.
Ejecucin de aplicaciones Windows.
A diferencia de las aplicaciones de navegador XAML, las aplicaciones
instaladas tienen total acceso a las caractersticas que brinda Windows
Presentation Foundation.
Todas las aplicaciones instaladas aparecen en el men Inicio y en Agregar o
quitar programas del Panel de control.
Permisos del usuario. El usuario debe especificar varios permisos para que la
aplicacin sea instalada.
Las aplicaciones instaladas son residentes en el sistema del usuario, y no tienen
ninguna necesidad de estar conectadas. Y como tienen acceso total al sistema,
pueden almacenar informacin de cualquier manera y de la forma ms
apropiada.
Tipos Aplicaciones instaladas
Navigation
Las aplicaciones Navigation consisten en una o ms pginas dentro de una aplicacin, y
tienen gran similitud con las aplicaciones Web, que poseen muchas pginas .aspx. El
usuario navega normalmente a travs de la aplicacin haciendo clic en los enlaces o
botones, con contenido en cada pgina.

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

Document
Las aplicaciones Document, por otra parte, no tienen Procedural Code asociado. En vez
de eso, constituyen simplemente presentacin de informacin para el usuario, de la
misma manera que las presentaciones PDF.
Pgina 51 de 55

Aplicaciones Web
Son ms simples y mucho ms poderosas que DHTML.

El cdigo de la aplicacin puede usar toda la capa de WPF.

Manejan los eventos localmente.

Soportan grficos y multimedia en la pgina.

El modelo WPF permite implementar una aplicacin de forma similar a las aplicaciones
Web. Esto simplifica la migracin de desarrolladores Web, pues el cdigo es similar al
de las pginas HTML dinmicas (DHTML). Etiquetas y lgica de la aplicacin
coexisten en un mismo archivo; los archivos son desplegados desde un servidor Web, y
las pginas de la aplicacin se muestran en un navegador.

Sin embargo, el modelo objeto de una aplicacin WPF orientada a la Web es ms
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 contarn
con ricos controles, soporte multimedia avanzado, grficos y manejo local de eventos.
Bsicamente, lo que cualquier aplicacin cliente ofrece. De hecho, las principales
diferencias entre una aplicacin Web WPF y una aplicacin de escritorio no son otras
que el alojamiento de los archivos (servidor o mquina cliente) y que, en el primer caso,
algunos permisos de la aplicacin estarn restringidos.

Describimos algunos escenarios en los que se debera considerar el uso de aplicaciones
del explorador Web. En funcin 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
creacin de una experiencia de WBA preferida, adems de una versin HTML que
llegue a un sector ms amplio.

En muchos casos, para las campaas de marketing puede resultar til crear una
experiencia ms atractiva para los usuarios de Windows, mediante la creacin 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 mxima calidad al
tiempo que ofrecen las herramientas para crear la lgica de la aplicacin necesaria. El
lenguaje XAML flexible y la integracin total con el explorador proporcionan mtodos
eficaces para migrar los sitios existentes. Las WBA cuentan con un historial de
implementacin intachable y un recinto de seguridad, lo cual las convierte en una
opcin de tecnologa Web de gran eficacia.

Pgina 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 mtodos para manejar los eventos de la pgina.

En la segunda forma, se puede escribir toda la aplicacin totalmente en nuestro code-
behind. Para poder hacer este tipo de aplicacin, 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 cdigo 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
Pgina 53 de 55

Microsoft Expression Graphic Designer
Efectos visuales dinmicos. Los diseadores pueden explotar su creatividad con
propiedades grficas y estilos innovadores como texturas, mrgenes y
dimensionalidad.

Nuevos efectos en las imgenes, como aspecto borroso, sombras, correccin del
color y filtros.

Aplique efectos y filtros usando Live Effects editables y no destructivos.

Use variaciones de la paleta de colores para dibujar mltiples formas y movimientos
tan slo cambiando los atributos.

Distorsione imgenes usando Warp Mesh, la cual puede ser combinada con Live
Effects y otras propiedades mientras se mantiene la fuente de pxeles para edicin.

Trabaje con la paleta de Effect Lines para crear grupos controlados de movimientos
con parmetros 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 pxeles para que puedan ser
modificadas con herramientas de las imgenes de pxeles.

Use caractersticas como RotateCanvas, la cual permite trabajar de la forma ms
apropiada para dibujar e ilustrar.

Cree y aplique estilos predefinidos, que contienen mltiples 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 creacin de la presentacin grfica copiando y pegando tanto
imgenes de tipo vectores como bitmap, con una completa integracin con
Microsoft Office PowerPoint.

Cree efectos de giro interactivos y exporte imgenes optimizadas junto con cdigo
HTML y JavaScript para edicin futura en diseo Web y herramientas de desarrollo
como Visual Studio y FrontPage.

Vea la versin preliminar en modo Pixel, la cual le mostrar el documento entero
renderizado para poder especificar la resolucin y la compresin de la imagen,
mientras se mantiene la habilidad completa de edicin para modificaciones de
ilustraciones de vectores y bitmaps.
Pgina 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 recepcin de feedback instantneo sobre violaciones estndar hace que las
correcciones puedan efectuarse durante el diseo del proceso. De esa manera, se evita
perder tiempo en las correcciones luego, en el escenario de diseo.

Entorno sofisticado basado en CSS
Produzca, administre, aplique y reutilice formatos con hojas de estilo, usando un
profundo soporte a travs de las herramientas que ofrece el producto

Mejore el diseo 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 travs de una sola paleta.
Presentacin de informacin
Disee vistas personalizadas de informacin XML usando drag and drop para
alcanzar rpidamente visualizaciones que se adaptan a los CSS del diseo del sitio.
Consuma servicios RSS para su sitio, y haga que tengan los mismos estilos de su sitio.
Tecnologa de servidor
Utilice todas las ventajas de ASP.NET 2.0 con el soporte integrado del servidor y los
controles de usuario. Cree sitios dinmicos e interactivos. Use la caja de herramientas
de controles y la tabla de propiedades para poder insertar y configurar rpidamente los
controles ASP.NET.

Puede mantener la vista de su sitio de forma correcta con el uso de Master Pages;
ahorrar tiempo en el diseo del sitio, y podr acceder a l rpidamente 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.
Pgina 55 de 55

Microsoft Expression Interactive Designer
Capacidades de diseo
Incorpora vectores, bitmaps, contenido 3D, video, sonido y texto enriquecido
totalmente 3D.

Es posible importar y combinar los dos tipos de imgenes que se manejan (vectores
y bitmap), o dibujar y editar vectores, y aplicar gradientes avanzadas, transparencias
y bordes personalizados.

Agrega geometra real 3D y animacin, incluyendo control directo de
transformaciones de objetos a travs de los ejes XYZ y cmaras 3D.

Realice videos con un alto nivel de interaccin a travs de un amplio rango de
ajustes de resoluciones y calidad, incluido HD Video.
Completo control en creatividad
Utilice la gran cantidad de controles estndar que WPF proporciona para generar
una compleja IU. Aplique los cambios de diseo visual y de comportamiento sin
modificar sus capacidades funcionales.

Agregue estados bsicos (MouseOver, etc.) a los controles de animacin, grficos,
3D y videos, para manejar su comportamiento. Cree sus propios estilos estndar
para su reutilizacin o emplee los temas estndar de Windows, como Luna(XP) o
Royale(MACE).

Disee el layout utilizando contenedores automatizados (Grid, Flow, Dock, Stack),
los cuales ofrecen control de diseo sobre las distintas escalas. La reposicin de la
IU es muy ventajosa, ya que se adapta a los diferentes factores (por ejemplo, la
resolucin) de pantalla del usuario.

Incrementa la satisfaccin 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

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual WPF

Caricato da

Copyright:

Formati disponibili

Windows

Potrebbero piacerti anche