1

Copyright Computer Aided Education, S.A.

Introduccin a
Windows Presentation Foundation
1. UNA NUEVA GENERACIN DE APLICACIONES
E
n la actualidad la interfaz de usuario de una aplicacin es
uno de los factores determinantes para su xito.
Los usuarios no se conforman nicamente con aplicaciones
potentes y funcionales, sino que stas tienen que ser sencillas de utilizar
y con una interfaz de usuario agradable y atractiva.
Adems, cada vez es ms comn encontrar aplicaciones en las
que se trabaja con distintos tipos de contenido, en muchos casos
contenido multimedia, como imgenes, vdeos, documentos de distinta
naturaleza, navegacin al estilo web, etc.
Los requerimientos de las aplicaciones cliente aumentan cada
vez ms lo que hace necesario tambin mayores requerimientos de
hardware, principalmente en cuanto a memoria y potencia de la tarjeta
grfica.
Ejemplos de ello son las aplicaciones de productividad, como
los gadgets; las aplicaciones de redes sociales; herramientas de
colaboracin en lnea; juegos; reproductores multimedia, etc.
Desarrollar este tipo de aplicaciones, tan ricas en contenido
y atractivas visualmente, con Windows Forms puede llegar a ser un
verdadero desafo principalmente porque se hace necesario utilizar
distintas tecnologas y porque es difcil compaginar las labores de
diseo y de desarrollo de la aplicacin.
2
Introduccin a Windows Presentation Foundation
Los roles de diseador y desarrollador quedan bien
diferenciados cuando se trata de este tipo de aplicaciones, trabajando
en muchas ocasiones de forma paralela, cada uno centrado en su tarea
principal.
As, el diseador se encarga de preparar el aspecto y usabilidad de
la interfaz de usuario, mientras que el desarrollador se responsabiliza
de programar la lgica de la aplicacin en respuesta a los eventos que
el usuario genera interactuando con ella.
La respuesta de Microsoft a todos estos problemas que representa
el desarrollo de una aplicacin moderna es Windows Presentantion
Foundation. En esta leccin se introduce, de forma muy general, esta
nueva tecnologa.
La aplicacin de la gura anterior es un ejemplo que proporciona
Microsoft del uso de las clases WPF. Se trata de Contoso
Healthcare prototype application.
W
indows Presentation Foundation, o simplemente WPF, se
incluye en la versin 3.0 de .NET Framework (y se mejora
con la versin 3.5), pero su aparicin estelar se produce con el
sistema operativo Windows Vista.
WPF es todo un conjunto de clases que facilita la confeccin
de este tipo de aplicaciones y para ello utiliza una serie de conceptos
clave, como:
La posibilidad de aprovechar la potencia de las nuevas tarjetas
grficas, trabajando con Direct3D y DirectX.
La representacin grfica de la aplicacin mediante vectores.
Es decir, las interfaces creadas con WPF no se basan en mapas
de bits sino que se generan mediante rdenes o comandos
vectoriales.
Esto ltimo permite, por ejemplo, que las aplicaciones se adapten
automticamente a la resolucin de pantalla o al tamao de la
ventana en la que se ubican.
2. QU ES WINDOWS PRESENTATION FOUNDATION?
3
Copyright Computer Aided Education, S.A.
Introduccin a Windows Presentation Foundation
El uso de un lenguaje para describir o disear la interfaz de la
aplicacin distinto e independiente del lenguaje de programacin
.NET en el que se escribe la lgica de la aplicacin. Este lenguaje
es XAML (eXtensible Application Markup Language).
Visual Studio 2008 es la herramienta fundamental para el
desarrollador de este tipo de aplicaciones, pero no para el diseador,
que tiene unos requerimientos distintos. Veamos qu nos proporciona.
Aqu encontramos el aspecto de una ventana de la aplicacin
WPF, que se corresponde con un archivo de extensin .xaml. Visual
Studio la muestra desde dos puntos de vista:
En la ficha Design podemos ver el aspecto o diseo de la ventana,
tal como la estamos construyendo en Visual Studio 2008.
El lenguaje
XAML es muy
parecido al
XML, pero
especializado
para crear
aplicaciones
WPF.
4
Introduccin a Windows Presentation Foundation
Mientras que en la ficha XAML encontramos el cdigo que se
genera para crear dicho aspecto y funcionalidad.
El diseador trabaja con este lenguaje, ya sea directamente o
visualmente a travs del editor de Visual Studio 2008 o incluso
mejor, con una aplicacin especializada como es Microsoft
Expression Blend.
Es interesante entender que el lenguaje XAML no slo permite
describir los componentes o elementos de la interfaz de usuario, sino
tambin es posible establecer gran parte de la forma de interaccionar
del usuario con la aplicacin.
Por ejemplo, fjese en la figura siguiente. En la parte superior
aparece una aplicacin como se muestra inicialmente; en el centro
puede observar lo que ocurre cuando situamos el puntero del ratn por
encima de la imagen de la derecha; y, finalmente, en la parte inferior,
el aspecto de la imagen cuando se pulsa en ella.
5
Copyright Computer Aided Education, S.A.
Introduccin a Windows Presentation Foundation
Al pasar el puntero del ratn por encima de las imgenes, stas
cambian su tamao, utilizando para ello una especie de animacin muy
atractiva.
Adems, al hacer clic en una de ellas, sta queda enmarcada con
un rectngulo de color azul y se muestra la imagen sin atenuacin.
Todo esto puede realizarlo y, sobre todo, decidirlo, el diseador
de la aplicacin utilizando XAML, lo que libera en gran medida al
desarrollador que se encargar de la lgica de la aplicacin.
Por su parte, si se incluyera un botn para imprimir la imagen
seleccionada, el cdigo necesario ya sera responsabilidad del
desarrollador.
Y dnde programara dicho cdigo? Pues en lo que se conoce
como el archivo "de cdigo subyacente" (code-behind).
Todo archivo XAML puede tener asociado un archivo denominado
de cdigo subyacente (code-behind). La extensin de este archivo
nos indica el lenguaje .NET que se utiliza: vb para Visual Basic y cs
para C#.
En el archivo de cdigo subyacente encontraremos el cdigo
necesario para responder a los eventos de la aplicacin, para lo que se
utiliza Visual Basic o C#.
6
Introduccin a Windows Presentation Foundation
En este caso la lgica de la aplicacin es muy sencilla, ya que
nicamente se encarga de cargar las imgenes al iniciar la aplicacin,
pero disponemos de toda la potencia .NET como hemos hecho con las
aplicaciones Windows Forms.
La diferencia con estas ltimas es que la capa de presentacin
o de interfaz de usuario se genera mediante un lenguaje distinto e
independiente, como es el XAML.
Veamos, por ejemplo, cmo se ha conseguido la animacin que
hemos podido comprobar que ocurre al situar el puntero del ratn por
encima de una de las imgenes.
Recuerde que ha sido responsabilidad del diseador y no del
programador, por lo que se ha creado a travs en la capa de presentacin,
es decir, utilizando XAML y no Visual Basic.
Sin entrar en detalles sobre el lenguaje XAML, s que me interesa
que entienda para qu sirve este lenguaje.
<!--DataTemplate to display Photos as images
instead of text strings of Paths-->
<DataTemplate DataType="{x:Type local:Photo}">
<Border Margin="3">
<Image Source="{Binding Source}"/>
</Border>
</DataTemplate>
<Style TargetType="ListBoxItem">
<Setter Property="Opacity" Value=0.5 />
<Setter Property="MaxHeight" Value="75" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter Property="Opacity" Value="1.0" />
</Trigger.Setters>
</Trigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.2"
Storyboard.TargetProperty="MaxHeight"
To="90" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
....
7
Copyright Computer Aided Education, S.A.
Introduccin a Windows Presentation Foundation
As pues, es sencillo entender que se encargar de establecer el
aspecto de los elementos de la interfaz de usuario: colores, fuentes,
estilos, etc. Desde este punto de vista, XAML es similar a algunas
tecnologas web, como CSS.
Pero tambin permite crear interaccin de forma realmente
sencilla. Desde este punto de vista podemos pensar en otras tecnologas
como Flash.
En el cdigo anterior vemos lo que el diseador ha decidido que
ocurra cuando el usuario selecciona una imagen. Lo que ms destaca es
que el valor de la propiedad o atributo Opacity pasa a ser 1.0, es decir,
que se mostrar sin transparencia.
Por su parte, tambin encontramos el cdigo que se ocupa del
aspecto y funcionalidad de las imgenes cuando se pasa el puntero
del ratn por encima de ellas. Fjese que parece que se utilice una
animacin. Las palabras DoubleAnimation, Duration y Storyboard nos
dan una idea de ello.
Desde luego, no es nuestro propsito explicar el lenguaje XAML,
sino que tenga una visin general de la nueva tecnologa WPF, pero,
sobre todo, de sus posibilidades.
V
isual Studio 2008 es la herramienta para el programador
o desarrollador de aplicaciones WPF y para ello facilita el
editor con el que hemos estado trabajando.
Aunque no es un editor tan funcional como el disponible para las
aplicaciones Windows Forms, sigue siendo de gran ayuda.
Lo primero que destaca es el control de zoom que podemos
encontrar en la esquina superior derecha del rea de edicin.
Este control permite comprobar el aspecto de la aplicacin
en funcin del tamao (zoom) de la ventana. Recuerde que uno
de los aspectos ms interesantes de las aplicaciones WPF es que
su aspecto se adapta al tamao disponible en la ventana.
Es decir, que los botones, cuadros de texto, imgenes y
otros controles cambian su tamao dinmicamente.
3. EL EDITOR WPF DE VISUAL STUDIO
8
Introduccin a Windows Presentation Foundation
Y es que tambin se dispone de todo un
conjunto de controles para las aplicaciones
WPF. La mayora ya los conocemos al haber
estudiado Windows Forms, aunque no
siempre encontraremos equivalencias. Podr
encontrarlos en la caja de herramientas o
Toolbox.
La forma de trabajar en Visual Studio
con una aplicacin WPF es similar a la que
utilizaramos en una aplicacin Windows
Forms. Es decir que se repiten las tareas de:
Dibujar controles en la superficie de la
ventana o pgina WPF.
Establecer propiedades a travs de la
ventana Properties.
Escribir cdigo en el archivo subyacente
utilizando un lenguaje .NET, como Visual
Basic o C#.
Tambin se puede modificar el cdigo
XAML, si es necesario.
Por ejemplo, si incluimos un botn en una ventana WPF y
accedemos a sus propiedades en la ventana Properties, comprobaremos
que no existe una propiedad Text, sino que el texto del botn se
introduce en su propiedad Content.
Esto es muy significativo, ya que los controles WPF pueden
disponer, como contenido, cualquier otro tipo de control, lo que
permite, por ejemplo, incluir una imagen, un archivo de vdeo, etc.
como contenido de un botn.
De esta forma podemos crear interfaces de usuario tan ricas y
atractivas. Es lo que se conoce como el modelo de contenido de
WPF.
Haciendo doble clic en los controles o eligiendo el correspondiente
evento, acceder al archivo de cdigo subyacente, donde podr escribir
el cdigo Visual Basic o C# para responder a dichos eventos, igual que
lo hara en una aplicacin Windows Forms.
9
Copyright Computer Aided Education, S.A.
Introduccin a Windows Presentation Foundation
Como puede ver, el desarrollador de una aplicacin WPF trabaja
de forma muy similar a cuando est desarrollando una aplicacin
Windows Forms. Eso s, con las caractersticas especiales de WPF.
A
unque Visual Studio 2008 proporciona herramientas para el
diseo de la interfaz de usuario de una aplicacin WPF, no
es la mejor opcin para ello.
Desde luego, que si se trata de una aplicacin sencilla, seguramente
ser ms que suficiente; pero no as si se trata de una aplicacin
compleja en la que es necesaria la intervencin de un diseador.
Los diseadores estn acostumbrados a trabajar con aplicaciones
como Adobe Photoshop, Illustrator, Dreamweaver, Flash, etc.
Microsoft entiende que este tipo de profesional no se sentir
cmodo en un entorno de desarrollo de aplicaciones como Visual Studio,
por lo que ha creado una aplicacin ms acorde a las caractersticas y
conocimientos de los diseadores. Se trata de Microsoft Expression
Blend.
Aqu puede ver el aspecto de Microsoft Expression Blend. Se
trata de una aplicacin de diseo especialmente indicada para crear
aplicaciones WPF.
4. MICROSOFT EXPRESSION BLEND
10
Introduccin a Windows Presentation Foundation
El diseador trabaja con Expression Blend visualmente,
generando automticamente el cdigo XAML de la interfaz de usuario.
Esto no le impide modificar directamente dicho cdigo XAML, ya que
muchas veces es la mejor forma de conseguir el resultado deseado.
Adems, diseadores y desarrolladores pueden trabajar en
paralelo, incluso teniendo abierto el mismo proyecto en la aplicacin
que utilizan.
Con las herramientas que Microsoft proporciona para crear
aplicaciones WPF los roles de diseador y desarrollador estn bien
diferenciados, lo que permite trabajar cada uno con la parte de la
aplicacin que es de su responsabilidad.
Por ejemplo, el diseador podra crear la interfaz de usuario
primero en Expression Blend y despus el desarrollador programar
la lgica de la aplicacin en Visual Studio; en el orden contrario o
incluso simultneamente. En cualquier caso, cada profesional tendra
su labor claramente diferenciada.
Con WPF, Microsoft propone una forma distinta de crear
aplicaciones que se caracterizan por una interfaz de usuario de gran
riqueza.
Esto no quiere decir que WPF venga a sustituir a Windows
Forms, sino que es una plataforma de desarrollo que se adapta mejor
para ciertas aplicaciones.
Windows Forms seguir siendo, al menos durante un tiempo,
la mejor opcin para las aplicaciones de negocio tradicionales, que se
caracterizan, entre otras cosas, por el acceso a bases de datos.