Silverlight

CONÉCTESE CON LOS MEJORES
LIBROS DE COMPUTACIÓN
DESCUBRA EL POTENCIAL DE WINDOWS VISTA
MANUALES USERS I 384 páginas I ISBN 978-987-1347-40-7
MANEJE LAS HERRAMIENTAS DE VISTA COMO UN EXPERTO
MANUALES USERS I 352 páginas I ISBN 978-987-663-007-8
DESARROLLE APLICACIONES PARA WINDOWS Y LA WEB
MANUALES .CODE I 368 páginas I ISBN 978-987-1347-32-2
usershop.redusers.com
APRENDA A PROGRAMAR CON EL LENGUAJE MÁS POTENTE
DESARROLLADORES I 400 páginas I ISBN 978-987-1347-76-6
RT_Bombo_LIBROSilverlight.qxp 21/09/2009 17:07 Página RT2

DE APLICACIONES PARA INTERNET
00_Silverlight.qxp 9/30/09 1:16 PM Page 1

TÍTULO: SILVERLIGHT
AUTOR: Matías Iacono
COLECCIÓN: Manuales USERS
FORMATO: 17 x 24 cm
PÁGINAS: 352
Copyright © MMIX. Es una publicación de Gradi S.A. Hecho el depósito que marca la
ley 11723. Todos los derechos reservados. No se permite la reproducción parcial o to-
tal, el almacenamiento, el alquiler, la transmisión o la transformación de este libro, en
cualquier forma o por cualquier medio, sea electrónico o mecánico, mediante foto-
copias, digitalización u otros métodos, sin el permiso previo y escrito del editor. Su
infracción está penada por las leyes 11723 y 25446. La editorial no asume responsa-
bilidad alguna por cualquier consecuencia derivada de la fabricación, funcionamien-
to y/o utilización de los servicios y productos que se describen y/o analizan. Todas las
marcas mencionadas en este libro son propiedad exclusiva de sus respectivos due-
ños. Impreso en Argentina. Libro de edición argentina. Primera impresión realizada
en Sevagraf, Costa Rica 5226, Grand Bourg, Malvinas Argentinas, Pcia. de Buenos
Aires en octubre de MMIX.
ISBN 978-987-663-010-8
Iacono, Matías
Silverlight. - 1a ed. - Banfield - Lomas de Zamora : Gradi, 2009.
352 p. ; 24x17 cm. - (Manual users; 175)
ISBN 978-987-663-010-8
1. Informática. I. Título
CDD 005.3

4
PRELIMINARES
Matías Iacono
Ingeniero de sistemas, Microsoft Most Valuable Professional en
ASP.net, Orador Regional para INETA Latam, Scrum Master cer-
tificado y Microsoft Certified Technology Specialist. Cuenta con
más de quince años de experiencia en el desarrollo de software
con distintas tecnologías y metodologías.
Ha dictado cerca de cincuenta conferencias técnicas en distintos
países latinoamericanos, así como escrito y publicado artículos en
numerosas publicaciones internacionales.
Ha trabajado para empresas extranjeras de gran envergadura. En
la actualidad, se desempeña como ingeniero de software para Mo-
torola Argentina y es profesor en la Universidad Tecnológica Na-
cional de Córdoba.
Agradecimientos
Agradezco a todos los amigos que me brindaron su apoyo y sus
opiniones sobre lo escrito. A Miguel Saez, de Microsoft, por ha-
berme facilitado material y a Lucas Ontivero, de Motorola Ar-
gentina, por su crítica aguda, que me ayudó con el contenido pro-
puesto en el libro.
Dedicatoria
A mi familia, por quedarse a mi lado largos fines de semana mien-
tras concluía este libro.

5
PRÓLOGO
Si hay algo a lo que le debemos la actual difusión de la tecnología informática, tan-
to dentro del hogar como de las oficinas, es a la continua evolución de las interfa-
ces gráficas de usuarios (GUI). Gracias a ellas, personas de todas las edades y pro-
fesiones, en todo el mundo, pueden interactuar con equipos de computación para
fines tan diversos como entretenerse, obtener información, realizar cálculos y co-
municarse, entre un sinnúmero de otras posibilidades.
Es seguro que tanto la constante innovación en el desarrollo de las interfaces grá-
ficas como la aparición de Internet han sido los catalizadores para uno de los más
fabulosos cambios en la manera en que las personas, alrededor del globo, se rela-
cionan mediante el uso de la tecnología.
Mientras que la Web seguirá siendo el ámbito de comunicación del futuro, es de es-
perar que los requerimientos de interactividad entre máquinas y humanos se vuel-
van aún más sofisticados y exigentes. Ante esto, Microsoft desarrolló Silverlight, una
nueva apuesta para el desarrollo de elementos de gráficos de interacción con los usua-
rios orientados a la Web.
En este aspecto es, justamente, en el que esta obra hace un gran aporte, al presentar
Silverlight 2.0 de una manera amena, clara y completa. En ella, se abarcan no sólo
los pormenores técnicos de la tecnología, sino que, además, el autor se ha esmerado
en brindar al lector un cúmulo de conocimientos que sólo podría obtenerse mediante
la experiencia, todo esto reflejado en tips, datos útiles, recomendaciones, curiosida-
des, advertencias y todos los consejos que el lector reconocerá como invaluables a la
hora de adentrarse en esta apasionante tecnología.
Por último, quisiera agradecer a Matías Iacono por este maravilloso trabajo que ha
sido una guía segura en el aprendizaje de Silverlight y, con cuya lectura y estudio,
me he sentido guiado y acompañado siempre.
Lucas Ontivero
Ingeniero de software,
Motorola Argentina
Prólogo

PRELIMINARES
66
EL LIBRO DE UN VISTAZO
En esta obra se verán los conceptos principales para dominar Silverlight, la tecnología de
Microsoft orientada al desarrollo de contenido dinámico y animaciones para la Web. El contenido
está dirigido a desarrolladores con conocimiento de Microsoft .Net Framework, C# como lenguaje
principal, y que dominen algunos conceptos de JavaScript y HTML.
Capítulo 1
INTRODUCCIÓN A SILVERLIGHT 2
Para conocer Silverlight desde sus comienzos,
en este capítulo describiremos
su arquitectura. Hablaremos de las diferencias
entre aplicaciones tradicionales y las nuevas
aplicaciones visuales, y conoceremos la lista
de herramientas necesarias para poder
desarrollar aplicaciones Silverlight.
Capítulo 2
En este capítulo nos enfocaremos
en Microsoft Expression Blend 2 como
herramienta de desarrollo para Silverlight,
orientada a diseñadores visuales
y a diagramadores de aplicaciones. Daremos
un paseo por la interfaz de Microsoft
Expression Blend 2 y crearemos nuestra
primera aplicación Silverlight. Este capítulo
ayudará a los diseñadores y desarrolladores
a entender cada uno de estos mundos.
Capítulo 3
EL MEJOR TRABAJO, CON LA MEJOR
HERRAMIENTA
Luego de enfocarnos en el diseñador visual,
centraremos la atención de este capítulo
en el desarrollador. Para esto, veremos
qué posibilidades nos ofrece Microsoft Visual
Studio 2008 para desarrollar aplicaciones
Silverlight, los controles y componentes
propuestos, su interfaz visual y los diferentes
tipos de proyectos disponibles desde este
entorno de desarrollo.
Capítulo 4
XAML AL EXTREMO
Cada uno de los controles y componentes
proporcionados por Silverlight,
su funcionalidad, eventos, métodos
y funciones, serán vistos en este capítulo.
Cada uno de estos elementos será descripto
con profundidad, generando código
de ejemplo por cada uno de ellos.
Este capítulo representa una excelente guía
de referencia sobre todos los componentes
disponibles en Silverlight.
Capítulo 5
LUZ, CÁMARA, ACCIÓN
Gran parte de las prestaciones otorgadas
por Silverlight incluyen la posibilidad
de mover objetos dentro de nuestra aplicación.
En este capítulo veremos cómo manipular esta
característica, ya que se explicarán
los distintos modelos disponibles para
animaciones y transformaciones dentro
de las aplicaciones Silverlight.
Capítulo 6
CERRAR EL CÍRCULO
Silverlight también otorga mucho potencial
con el manejo de imágenes, video y sonido.
En este capítulo hablaremos de ciertas
características relacionadas con actividades

El libro de un vistazo
7
!
A lo largo de este manual encontrará una serie de recuadros que le brindarán información
complementaria: curiosidades, trucos, ideas y consejos sobre los temas tratados.
Cada recuadro está identificado con uno de los siguientes iconos:
INFORMACIÓN COMPLEMENTARIA
CURIOSIDADES
E IDEAS
DATOS ÚTILES
Y NOVEDADES
ATENCIÓN SITIOS WEB
RRR,_`
como consumir videos, mostrar imágenes
o tocar sonidos dentro de las aplicaciones.
También hablaremos de Deep Zoom
y sus características, así como del dibujo
a mano alzada con InkPresenter.
Capítulo 7
INTERCONEXIÓN
Este capítulo ofrece funcionalidades
altamente valiosas. Crearemos un juego
desde código C# y un lector de RSS,
usaremos almacenamiento aislado para
guardar información en el cliente, crearemos
aplicaciones para subir archivos al servidor
y culminaremos con la implementación
de la última tecnología de interoperabilidad
propuesta por Microsoft al conectar Silverlight
con Windows Communication Foundation.
Capítulo 8
EL NAVEGADOR Y SU DOMINIO
Silverlight se ejecuta dentro de una página
HTML manejada por el navegador web.
Por tal motivo, posee gran potencial
de interacción con el cliente. En este capítulo
veremos cómo Silverlight puede manipular
HTML así como intercambiar información
con JavaScript. Además, conoceremos cómo
JavaScript es capaz de consumir servicios
generados desde Silverlight.
Apéndice A
SILVERLIGHT FUERA DE WINDOWS
Gracias a MoonLight, Silverlight puede salir
de Windows y trabajar en sistemas
operativos basados en Linux y Unix.
Hablaremos del proyecto MoonLight,
sus características, limitaciones y el futuro
de Silverlight como tecnología fuera
de su ambiente nativo. Además, se presentan
algunas herramientas gratuitas y de código
libre que nos ayudarán en el desarrollo,
tanto para Windows como para Linux.
Apéndice B
SILVERLIGHT 3, LA NUEVA GENERACIÓN
Daremos un vistazo al producto recientemente
lanzado por Microsoft. Silverlight 3 trae
consigo valiosas mejoras al modelo
ya planteado, las que enumeraremos para
ganar conocimiento adicional por sobre
lo ya aprendido durante todo el libro.
Servicios al lector
En esta última sección, encontraremos
un índice que nos ayudará a buscar de forma
rápida los términos más importantes de esta
obra. Además, veremos un listado de sitios
de interés para ampliar nuestros
conocimientos y mantenernos al tanto
de las últimas novedades en la materia.

Contenido
9
Sobre el autor 4
Prólogo 5
El libro de un vistazo 6
Información complementaria 7
Introducción 12
Capítulo 1
INTRODUCCIÓN A SILVERLIGHT 2
Iniciarse en el mundo de Silverlight 2 14
Navegar hacia el mundo
de Silverlight 2 14
La experiencia de usuario
y la portabilidad 16
Arquitectura de Silverlight 2 19
Microsoft .Net Framework 20
Interfaz de usuario y presentación 21
El código XAML 22
Herramientas de desarrollo
para Silverlight 2 24
Resumen 27
Actividades 28
Capítulo 2
Un paseo por Expression Blend 2 30
Silverlight 2 con Expression Blend 2 30
Unir los extremos 32
Un recorrido por Expression Blend 2 37
Explorador de soluciones 38
Página inicial de Silverlight 2 39
La página App.xaml 40
El entorno de Expression Blend 2 43
La barra de herramientas 46
Crear nuestra primera aplicación
con Expression Blend 2 48
Resumen 53
Actividades 54
Capítulo 3
EL MEJOR TRABAJO,
CON LA MEJOR HERRAMIENTA
Silverlight para desarrolladores 56
Puesta a punto de Visual Studio 2008 56
Silverlight 2 con Visual Studio 59
Crear la primera aplicación
con Visual Studio 2008 63
Interoperabilidad con
Expression Blend 2 76
Resumen 79
Actividades 80
Capítulo 4
XAML AL EXTREMO
El lenguaje XAML 82
¿Qué es XAML? 82
Declaración de objetos 82
Controles y componentes 83
Controles contenedores y agrupadores 84
Control Grid 84
Control GridSplitter 89
Control Canvas 92
Control StackPanel 95
Control ScrollViewer 98
Control Border 101
Controles de interacción con el usuario 103
CONTENIDO

PRELIMINARES
10
Control Button 103
Control CheckBox 106
Control RadioButton 110
Control HyperlinkButton 113
Control Image 114
Control ComboBox 117
Control ListBox 124
Control TextBlock 126
Control TextBox 127
Control PasswordBox 130
Control DataGrid 132
Control Calendar 139
Control DatePicker 147
Control ProgressBar 148
Control Slider 152
Resumen 153
Actividades 154
Capítulo 5
LUZ, CÁMARA, ACCIÓN
Mover objetos 156
Transformaciones 158
Transformación de traslación 159
Transformación de rotación 161
Transformación escalar 165
Transformación de distorsión 167
Aplicar todas las transformaciones 168
Animaciones 170
DoubleAnimation 171
ColorAnimation 173
Animaciones y transformaciones 175
Estilos y plantillas 178
Estilos 178
Plantillas 182
Resumen 185
Actividades 186
Capítulo 6
CERRAR EL CÍRCULO
MediaElement 188
Ejecutar sonidos 188
Video 194
Elementos con video embebido 195
Marcadores de video 196
Deep Zoom 199
Crear el primer Deep Zoom 200
Incluir Deep Zoom en Silverlight 203
Dibujar con InkPresenter 208
Dibujar en forma manual 212
Dibujar sobre otros elementos 215
InkPresenter y áreas de dibujo 217
Resumen 219
Actividades 220
Capítulo 7
INTERCONEXIÓN
Ampliar las funcionalidades 222
Silverlight desde C# 222

Contenido
11
WebClient 230
Enviar información 233
Almacenamiento aislado 239
Implementar el almacenamiento
aislado 240
Capacidad de almacenamiento 245
Almacenar configuraciones 247
OpenFileDialog 251
Manejo de hilos 255
El concepto de hilos 256
Temporizador 257
Personalizar los hilos 259
Hilos y eventos 261
Consumir servicios
desde Silverlight 263
Crear un servicio WCF 270
Manipular datos 275
Enlazado de datos 276
LinQ 283
Resumen 287
Actividades 288
Capítulo 8
EL NAVEGADOR Y SU DOMINIO
Conectar tecnologías 290
Silverlight 2 y el HTML 290
HtmlDocument y HtmlElement 292
HtmlPage 301
HtmlWindow 307
Cookies 316
Modificar CSS 320
Silverlight 2 y JavaScript 323
Llamar funciones 325
Objetos Silverlight
para JavaScript 327
Resumen 347
Actividades 348
Apéndice A
SILVERLIGHT FUERA
DE WINDOWS
Proyecto Moonlight 330
Sistemas operativos 330
Versiones de Moonlight 331
Herramientas de desarrollo 331
Problemas conocidos 333
Apéndice B
SILVERLIGHT 3, LA NUEVA GENERACIÓN
Silverlight 3 336
Nuevos controles 336
Efectos en tres dimensiones 337
Uso de Pixel Shader 338
Fuera del navegador 339
Servicios al lector
Índice temático 342
Sitios web recomendados 345

INTRODUCCIÓN
Este libro está orientado a desarrolladores de software, y diseñadores visuales y grá-
ficos que deseen expandir su área de conocimiento de desarrollo hacia el ambiente
web. Un lector con nociones iniciales podrá ver, durante los capítulos, una evolu-
ción que le dará la oportunidad de aprender sin necesidad de saberes previos sobre
la tecnología propuesta, Silverlight, mientras que aquel lector con experiencia po-
drá encontrar en estas páginas una guía fundamental para aprender, con agilidad,
conceptos sobre esta tecnología de Microsoft. Sin embargo, es necesario, para am-
bos lectores, contar con conocimientos medios de desarrollo utilizando Microsoft
C#, así como las técnica primordiales del funcionamiento y ejecución de la Web.
Los temas propuestos en el libro fueron seleccionados para cubrir la mayor superfi-
cie de conceptos sobre Silverlight 2, presentados de una manera progresiva de tal
forma que el lector se sienta cómodo con su evolución y que aprenda a cada paso
que da. Desde la recomendación y el uso de las herramientas ideales para el desa-
rrollo bajo esta tecnología, tanto para diseñadores como para desarrolladores, gene-
ramos ejemplos prácticos en cada capítulo, que abarcan desde HTML hasta C#, así
como la aplicación de ASP.net y el uso de JavaScript.
Silverlight es un modelo en ebullición. En el momento de lanzarse la versión 1,
sus características eran limitadas; pero, al poco tiempo, Microsoft mejoró la tec-
nología y sacó a relucir la segunda versión de Silverlight, versión de la que se ocupa
este libro. Pero esta efervescencia, este cambio constante junto a la búsqueda de
un mejor producto y de una tecnología superior, hicieron que, durante el tiem-
po de escritura de este libro, Microsoft sacara la siguiente versión de Silverlight.
En este momento, ya contamos con la versión 3 de Silverlight como una versión
funcional y finalizada, por lo que incluimos un apartado, al final del libro, para in-
troducir al lector en algunas de las nuevas funcionalidades provistas por Silverlight 3.
De esta forma, con este texto, el lector no sólo aprenderá sobre Silverlight, sino
que tendrá un bono extra al final, que le servirá de rampa de lanzamiento para
abordar de lleno la nueva versión y permanecer siempre actualizado.
PRELIMINARES
12

Introducción
a Silverlight 2
Iniciarse en el mundo
de Silverlight 2 14
Navegar hacia el mundo
de Silverlight 2 14
La experiencia de usuario
y la portabilidad 16
Arquitectura de Silverlight 2 19
Microsoft .Net Framework 20
Interfaz de usuario
y presentación 21
El código XAML 22
Herramientas de desarrollo
para Silverlight 2 24
Resumen 27
Actividades 28
Capítulo 1
En este primer capítulo veremos
el porqué de Silverlight 2, al mismo
tiempo que hablaremos de problemas
comunes en el desarrollo de software
desde la óptica de las interfaces gráficas,
los diseñadores y programadores,
así como las limitaciones
de las herramientas usadas por cada uno.
Silverlight
SERVICIO DE ATENCIÓN AL LECTOR: usershop@redusers.com

INICIARSE EN EL MUNDO DE SILVERLIGHT 2
Muchos cambios se han producido en el desarrollo web desde sus inicios. Se han
sucedido mejoras sustanciales hasta la llegada de la Web 2.0 y, sin embargo, se si-
guen buscando mejores formas y herramientas para trabajar en este fascinante mun-
do. Recorramos esos años de evolución hasta la actualidad, cuando una de estas
herramientas ve la luz para traer una solución a nuevas necesidades. Veamos, en
este capítulo, los componentes clave de Silverlight 2: las herramientas de desarro-
llo y diseño, su arquitectura y los elementos principales que le dan vida.
Navegar hacia el mundo de Silverlight 2
Desde los inicios de la Web, ésta ha ido evolucionando, mutando y creciendo.
Esta evolución se inició con la simple transferencia de texto, pasó por las imáge-
nes y la captura de datos del usuario por parte del sistema, hasta llegar al manejo
de contenido personalizado. Éste se genera para el usuario y por él, simulando
casi el mismo comportamiento de aplicaciones desarrolladas para sistemas de es-
critorio. Los cambios radicales en las tasas de transferencias de datos, así como
en las capacidades de los equipos que servían esta información, también acom-
pañaron dichos acontecimientos. Por supuesto, esta evolución no sólo fue de capa-
cidades de hardware y prestaciones hacia el usuario. Al mismo tiempo, estuvo acom-
pañada por software, lenguajes de programación y herramientas de desarrollo que,
en conjunto, ayudaran a amortiguar la curva de complejidad sobre las necesida-
des crecientes que tenían los sistemas. En definitiva, existían mayores requeri-
mientos por parte de los usuarios y de los sistemas, por lo que la implementación
en líneas de código y la puesta en marcha de los servicios necesitaron de herra-
mientas que hicieran más simple este trabajo.
En la actualidad, el desarrollo web está más pujante que nunca. Además, con el
advenimiento de teorías (y prácticas) como el Cloud Computing o servicios de
Internet totalmente dinámicos para correos electrónicos, confección de docu-
mentos, redes sociales e interconexión de servicios, entre otros, debemos enten-
der que la Web seguirá creciendo y mejorando durante mucho más tiempo. Esto
nos llevará de vuelta a la idea antes tratada: mayor complejidad, mejoramiento en
las herramientas y el soporte. Esta mejora en las herramientas que brindan soporte
tanto al desarrollador como al diseñador se hace cada vez más necesaria y es mu-
cho más requeridas por aquellos que se ven involucrados en el desarrollo web. De-
bido a que desarrollar para la Web no se restringe al uso de una tecnología única
y definitiva, el desarrollador web se ve en la necesidad imperativa de adquirir do-
minio y conocimientos sobre decenas de tecnologías y lenguajes de programación,
como XML, HTML, CSS, JavaScript, ActionScript, Lingo, PHP, C# y Java,
entre muchas otras que forman el conjunto de la Web. Y es aquí donde se hace
1. INTRODUCCIÓN A SILVERLIGHT 2
14

visible Silverlight. Este software forma parte de dicho crecimiento y sirve como
solución, ya que plantea una mejor forma de desarrollar contenido dinámico pa-
ra la Web. Esto sucede no sólo en lo visual, sino también como herramienta de
desarrollo basado en tecnologías comunes ya conocidas.
No debemos equivocarnos al pensar que Silverlight constituye la estrategia de
Microsoft para competir con el ya popular Flash, ex de Macromedia, y ahora de
Adobe. Por el contrario, Silverlight representa una oportunidad de reutilizar el co-
nocimiento ya adquirido sobre código basado en Microsoft.Net Framework, un
modelo que soporta no sólo lenguajes desarrollados y mantenidos por esta empresa,
sino que cuenta, por el contrario, con el soporte de compañías creadoras de lengua-
jes tan populares como Borland C# Builder y Delphi, también de Borland. De es-
ta forma, Silverlight trae consigo la posibilidad de enriquecer la experiencia visual
en el cliente web, trabajando en cualquiera de los navegadores de Internet más
conocidos. Puede interactuar y ser modificado por lenguajes como JavaScript, ex-
tendiendo el concepto de HTML dinámico y A.J.A.X. (Asynchronous JavaScript and
XML o, en castellano, JavaScript asíncrono y XML). También puede consumir ser-
vicios web o cualquier elemento con la capacidad de retornar XML, al mismo tiempo
que puede ser programado o desarrollado mediante aquel lenguaje que usamos to-
dos los días para nuestros desarrollos, o con el que nos sintamos más cómodos para
generar las líneas de código que darán vida a nuestra aplicación.
Figura 1. Microsoft .Net Framework es el nexo entre el sistema
operativo y nuestro código. Nos ofrece una plataforma de ejecución, librerías
de código, acceso a datos y soporte para diferentes lenguajes.
VB C++ C# J# ...
Common Language Specification
VisualStudio.NET
ADO .NET y XML
Librería de clases base
Common Language Runtime
Sistema Operativo
ASP .NET
Web Forms • Web Services
Mobile Internet Toolkit
Windows
Forms
Iniciarse en el mundo de Silverlight 2
15

La experiencia de usuario y la portabilidad
Antes de la aparición de Microsoft .Net Framework, construir una aplicación de soft-
ware requería diferentes habilidades y dependía del ambiente en el cual se desarrollara
esta aplicación. Así, si las aplicaciones necesitaban desarrollarse para ser usadas bajo
Windows, éstas requerían que su diseño visual se creara de manera especial para este
modelo. Al mismo tiempo, debería contemplar las limitaciones que el lenguaje de pro-
gramación trajera consigo. El diseño, entonces, quedaba encapsulado dentro del códi-
go del lenguaje seleccionado, siendo casi imposible su implementación en otro lenguaje
o en una nueva versión del mismo. Pensemos que, si una aplicación debía ser migrada
a una nueva versión del lenguaje o, por necesidades de negocio, debía ser implemen-
tada en otro lenguaje, toda la interfaz visual debía ser reescrita e implementada. A lo
anterior debíamos sumar que, si existía un cambio de ambiente, es decir, si movíamos
el desarrollo a un dispositivo móvil o a la Web, no sólo la interfaz debía ser reescrita,
sino que también debía cambiar la lógica radicada en el código. Esto no sólo acarrea
reinversión de tiempo y dinero, sino que, además, la interfaz (y tal vez la lógica de ne-
gocio) nunca quedaría del todo igual, castigando la experiencia del usuario que se ha-
bía acostumbrado a una herramienta ya construida e implementada.
Con la primera versión del .Net Framework, Microsoft hace el intento inicial de
generar portabilidad entre ambientes y lenguajes, separando la interfaz gráfica del
lenguaje de programación y proveyendo componentes comunes para que los am-
bientes similares puedan reutilizar las interfaces ya creadas. Gracias a esto, teníamos
aplicaciones creadas para Windows, que también funcionaban en dispositivos móviles,
aunque aún quedaba trabajo por hacer en cuanto a desarrollo web y Windows,
ya que estos dos ambientes seguían siendo incompatibles. Con la versión 3.0 de
Microsoft .Net Framework, se introdujo un nuevo enfoque por medio de un es-
quema XML para la confección y manipulación de interfaces de usuarios: ya no
aparecían los típicos botones y cajas de texto rígidas comunes en cualquier aplica-
ción de escritorio. Este esquema, llamado XAML (eXtensive Application Markup
Language, o en castellano, Lenguaje Extensible de Formato para Aplicaciones) por
sus siglas en inglés, le permitió al desarrollador crear otro tipo de aplicaciones a
nivel visual. XAML fue explotado por WPF (Windows Presentation Foundation),
pero muy rápido se entendió que XAML tenía mucho futuro por delante.
16
,
La experiencia demuestra que la primera reacción por parte de los desarrolladores al ver
Silverlight es asociarlo en forma directa con la competencia de Adobe Flash. Silverlight persigue
objetivos similares, pero se separa de Adobe Flash en ciertos aspectos técnicos, como lengua-
jes de programación y arquitectura.
¿QUÉ ES SILVERLIGHT?

Figura 2. CardSpace, WCF, WPF y WF (Workflow Foundation)
se agregan como parte de Framework 3 sobre la versión 2 de Framework.
Silverlight 2 usa, para la representación visual de sus elementos, XAML. Las mis-
mas etiquetas que, como decíamos antes, también son soportadas por aplicaciones
de escritorio construidas con WPF. Esto genera una ventaja significativa sobre la
creación de aplicaciones y la adaptación del usuario a nuevas tecnologías. Pen-
semos que, al tener un componente común como XAML para la representación
visual de elementos de la interfaz gráfica, el esfuerzo aplicado para la creación de
uno de estos componentes puede ser reutilizado y explotado en otros ambientes,
no sólo en aquel para el cual Silverlight fue ideado. Pensemos entonces en una
aplicación de escritorio, con cientos de usuarios que la usan durante meses o años
y, de un momento a otro, se encuentran usando la misma aplicación, pero den-
tro de un navegador web, con los mismos botones, el mismo contenido visual e
igual comportamiento. Uno de los lados más rugosos en la implementación de un
sistema está atado a la adopción de éste por parte del usuario, y es en los cambios
de plataformas y ambientes donde se producen las discordias. Aquí es necesario
Microsoft
.NET Framework
Versión 2.0
CardSpace WPF
WCFWF
17
_`
Microsoft .Net Framework no sólo soporta los lenguajes de programación propuestos por Mi-
crosoft. También podemos encontrar otros como Boo, Icc, Clarion#, Cobol, Corba, Eiffel, Fortran,
Lisp, PHP, Perl y más. Esto puede resultar en especial interesante, ya que no necesitamos apren-
der un nuevo lenguaje para desarrollar en Microsoft .Net Framework.
MICROSOFT .NET Y LENGUAJES

invertir mayor esfuerzo para que esta nueva idea sea aceptada. Por tal motivo, nos
hará falta toda la ayuda posible al momento de hacer este cambio.
En la Web, las aplicaciones tienen más representatividad y, por ende, su atractivo
y su facilidad de uso necesitan potenciarse. Esta mejora es llevada a cabo por la
implementación de soluciones que conjugan JavaScript y XML, dando como pro-
ducto la pieza conocida como A.J.A.X., donde bien podemos encontrar cientos de
modelos listos para ser implementados. Pero el desarrollo sigue enfocándose en la
manipulación del HTML que, sin desmerecer sus posibilidades, siempre llegará a
un techo máximo, relacionado con las capacidades del mismo modelo HTML. En
comparación con el modelo de aplicaciones de escritorio, la interactividad ofrecida
por este último es muy superior a la que presenta HTML, y es aquí donde Silverlight,
una vez más, explota lo mejor de estos dos mundos y lo lleva en forma directa al
ámbito de aquel que pierde en comparación: el del HTML.
Figura 3. Silverlight se nutre de cada una de las principales
características de los dos mundos, generando una mejor experiencia
de usuario e independencia en plataformas.
Navegadores web
CSS/HTML
JavaScript/AJAX
ASP.net
Aplicaciones
de escritorio
XAML
Framework .Net
18
RRR
Es importante entender las diferencias entre las versiones de Microsoft .Net Framework. Sólo a
partir de la versión 3, se incorpora el uso de XAML, así como WPF, pero el núcleo de este Fra-
mework se mantiene idéntico al de la versión 2. Al desarrollar para cualquiera de estas nuevas
plataformas, deberemos elegir una versión de Framework 3 o superior.
VERSIONES DE MICROSOFT .NET FRAMEWORK

Como observamos en la Figura 3, Silverlight toma lo mejor de los dos mundos. Por
un lado, los controles y componentes versátiles propuestos por el desarrollo de es-
critorio y, por el otro, la portabilidad entre plataformas y la rapidez de la actuali-
zación de aplicaciones a miles de usuarios al mismo tiempo que otorga Internet.
Esta versatilidad y portabilidad entre plataformas, tanto de escritorio como web,
no sería posible sin un lenguaje común de representación de controles.
XAML es el lenguaje que nos dará esta posibilidad no sólo para el desarrollo, sino
que también brinda la oportunidad de aumentar la versatilidad de las interfaces,
poder llevar el comportamiento de las aplicaciones de escritorio a la Web, posibi-
litar la adopción por parte del usuario final de manera independiente del sistema,
mediante el aumento de la calidad y de la velocidad en el desarrollo, y otros pun-
tos ganados con la utilización de XAML y Silverlight.
Arquitectura de Silverlight 2
Al comienzo de nuestro recorrido, nombramos algunas de las características de Sil-
verlight que, al mismo tiempo, definen su planteo arquitectónico. Dijimos que
Silverlight está enfocado a la Web y que es ejecutado por el navegador web. Es-
to se consigue gracias a un plugin o aditivo que hará las veces de gestor o in-
térprete. Este componente ronda los 5 megabytes, lo que constituye una suma
muy pequeña en relación con su potencia. En la actualidad, es soportado por los
principales navegadores de Internet como Internet Explorer, FireFox y Safari,
así como los sistemas operativos Windows (con base en Windows XP con Service
Pack 2 y hasta Windows 7), Mac OS X 10+ y Linux.
Pero Silverlight, aunque hemos hecho hincapié en la gestión de interfaces de usuario,
no sólo es un lienzo donde podemos crear animaciones vectoriales, sino, muy por el
contrario, consiste en una plataforma liviana de desarrollo con soporte para SOA
(Service Oriented Architecture o, en castellano, Arquitectura Orientada a Servicios), re-
des, manejo de datos, y más. Como observamos en la Figura 4, Silverlight va mucho
más allá y nos entrega, por sobre todas las cosas, acceso a las últimas tecnologías y
patrones de desarrollo de software. Podemos separar y enumerar las diferentes carac-
terísticas sobre la base de su área de trabajo, como veremos a continuación.
19
_`
Por lo general, es difícil lograr que un usuario adopte una nueva aplicación cuando está acos-
tumbrado a la que usa desde hace años. Este problema de adopción se ve potenciado en quienes
nunca usaron una computadora. Pero, si podemos reproducir en el ordenador lo que el usuario
está acostumbrado a utilizar en la vida real, la adopción será casi transparente.
LA DIFÍCIL ADOPCIÓN POR PARTE DE LOS USUARIOS

Figura 4. En este diagrama podemos observar
la arquitectura soporte completa de Silverlight 2.
Microsoft .Net Framework
Con respecto a las líneas de código y de clases ya implementadas para ser usadas por
el desarrollador de código, el Framework disponible cubre todas las áreas necesarias
para interactuar con datos y hasta con lenguajes propios de la Web.
.NET para Silverlight
Centro de presentación
Manejo de navegador
WCF
REST
RSS/ATOM
SOAP
Librería para
Microsoft
AJAX
Motor
JavaScript
POX
JSON
WPF
Controls
Data Binding
Layout
Editing
Data
Motor de ejecución CLR
XAML
LINQ
XLINQ
XML
Centro de interfaz
gráfica
Vector
Animation
Text
Images
Integrado
con la red
Integrado
con DOM
Servicio
de aplicaciones
Instalador
Periféricos
Keyboard
Mouse
Ink
Multimedia
VC1
WMA
MP3
DRM
Media
BCC
Generics
Collections
Cryptography
Threading
DLR
Iron Python
Iron Ruby
Jscript
20

• LinQ y XLinQ: soporte especializado para llevar a cabo el manejo de colec-
ciones de objetos, acceso a datos y XML. Con LinQ podremos crear consultas
integradas con el lenguaje de programación.
• WCF (Windows Communication Foundation): plataforma de comunicación para
acceso a servicios web, servicios remotos y peticiones HTTP, entre otros.
• Librería de clases base: acceso a las librerías de clases de Microsoft .Net Frame-
work, que nos ofrece soporte para el manejo de cadenas de texto, expresiones regu-
lares, serialización de datos, manejo de internacionalización de aplicaciones y más.
• CLR (Common Language Runtime): motor de Microsoft .Net que se encarga del
manejo de la memoria y demás puntos de contacto con el sistema operativo.
• DLR (Dynamic Language Runtime, en castellano Lenguajes Dinámicos): soporte pa-
ra lenguajes de programación como JavaScript, Iron Phyton e Iron Ruby.
• Almacenamiento aislado: permite generar sectores de almacenamiento de archi-
vos e información de manera aislada y para usuarios específicos.
Interfaz de usuario y presentación
Silverlight también presenta una gran cantidad de funcionalidad en cuanto a su pre-
sentación visual y puede manejar sonidos, imágenes y videos, así como una serie de
controles y componentes listos para usar.
• Video y sonido: inclusión de soporte de formatos de video y sonido comunes co-
mo MP3 y WMA. Incluye capacidades de streaming.
• Imágenes: capacidad de despliegue de imágenes tanto vectoriales como mapas de
bits en sus formatos más comunes, texto y animaciones.
• Enlazado de datos: capacidad de enlazado de fuentes de datos automática que fa-
cilita el despliegue de la información desde diferentes fuentes de datos.
• Controles: set de controles listos para usar que brindan la posibilidad de crear
nuestro propio set de controles y de reusarlos en diferentes aplicaciones.
• XAML: implementación de eXtensible Application Markup Language para la con-
fección de las interfaces. Éstas son creadas sobre la base de XML.
Como pudimos ver hasta aquí, Silverlight no es un simple visualizador de ani-
maciones, sino un avanzado complemento de desarrollo que hace uso de las
principales tecnologías Microsoft y que permite desenvolvernos con soltura al
momento de desarrollar aplicaciones sobre éste.
Silverlight, entonces, nos ofrece la potencia de los lenguajes de programación uti-
lizados, por lo general, en el desarrollo de aplicaciones de escritorio y web, ade-
más, de su posibilidad de interacción con bases de datos y servicios remotos.
También, nos brinda la elegancia de sus vistosas interfaces visuales, que pueden
interactuar con lenguajes cliente, tales como JavaScript, enmarcado en un nave-
gador web, sin estar atado a un sistema operativo ni a un navegador específico.
21

Figura 5. En la imagen, observamos los controles
visuales listos para usar y su apariencia por defecto.
El código XAML
Ya hemos nombrado a XAML como uno de los componentes fundamentales de
Silverlight, pero veamos un poco más en profundidad de qué se trata exactamen-
te. XAML es un lenguaje declarativo, formado por etiquetas descriptivas para
cada uno de los componentes que Silverlight pueda representar. XAML basa el
concepto descriptivo en el conocido modelo de XML. Gracias a esta cualidad (ba-
se de XML), entender la estructura de XAML resulta simple e intuitivo. Veamos
a continuación un ejemplo de elementos XML simples:
22
RRR
Debido a que Silverlight puede ser desarrollado con los principales lenguajes de programación
soportados por Microsoft .Net Framework, éste brinda pleno soporte para la programación orien-
tada a objetos y puede absorber todos los beneficios inherentes a este modelo de programación.
PROGRAMACIÓN PROFESIONAL

<Contenedor>
<Elemento Atributo=”Valor”>
Contenido del Elemento
</Elemento>
</Contenedor>
Etiquetas o tags descriptivas dentro de caracteres < y >. Cada elemento es iniciado con
un nombre específico y siempre deberemos señalar su cierre utilizando el mismo nom-
bre más los caracteres </, lo que especificará la finalización del tag. En el ejemplo, tam-
bién podemos notar cómo un elemento puede contener otros elementos, así como atri-
butos descriptivos y valores dentro del mismo nodo. XAML sigue este mismo patrón:
<Canvas Width=”300” Height=”300” Background=”Brown”>
<TextBlock x:Name=”Texto” Text=”Hola
Mundo!”></TextBlock>
</Canvas>
El ejemplo en XAML nos demuestra que la estructura es similar al del que hemos
usado para XML, con la salvedad de que las etiquetas o tags ya se encuentran defi-
nidas y asociadas a los elementos visuales que representan. En el ejemplo, colocamos
un contenedor que tendrá un tamaño en ancho y en alto de 300 pixeles, y color de
fondo azul. Dentro de este contenedor, encontramos otro control utilizado para la
visualización de textos, que mostrará la frase Hola Mundo! en pantalla.
Figura 6. Resultado de nuestra primera prueba con XAML y Silverlight.
23

El ejemplo nos sirve, al mismo tiempo, para mostrar otros atributos importantes den-
tro del mundo de XAML y de Silverlight. Tanto el elemento Canvas como TextBlock
son controles preestablecidos por el entorno de Silverlight. Canvas es utilizado
para definir un elemento contenedor de otros componentes, y TextBlock nos da la
posibilidad de mostrar texto en pantalla en forma de bloques. La combinación de
estos elementos produce lo que aparece en la Figura 6, pero el concepto va más allá
porque muestra cómo, anidando elementos, podemos conseguir diferentes efectos
visuales. Así, es posible mezclar un control del tipo botón con un control utilizado
para mostrar imágenes o videos y obtener como resultado un botón en cuyo fondo
se reproduce un video. Por último, el atributo x:Name es el que le otorga, al con-
trol, la capacidad de tener un nombre único, descriptivo, que podrá ser usado por
el lenguaje de programación que elijamos para darle funcionalidad a la interfaz vi-
sual. Con este atributo, podremos cambiar el texto representado al principio en tiem-
po de ejecución, sobre la base de la reacción de un evento por parte del usuario o
por parte del flujo de nuestra aplicación. A medida que avancemos en el libro, nos
introduciremos dentro de XAML; también en los diferentes componentes y con-
troles disponibles por parte del entorno de desarrollo y librerías de objetos.
Herramientas de desarrollo para Silverlight 2
Si tenemos en cuenta que una de las principales cualidades de Silverlight es el poten-
ciamiento visual en interfaces de usuario, sería muy interesante contar con herramien-
tas para su correcto diseño y diagramación. Así, de manera sencilla, nos guiarían en la
confección de los elementos XAML, su estructura, controles anidados, enlazado a fuen-
tes de datos, entre otros. Microsoft nos provee de dos herramientas principales, cada
una de ellas enfocada a cubrir una de las ramas involucradas en la generación de ele-
mentos Silverlight. Por un lado, para desarrolladores de software, la herramienta por
excelencia es Microsoft Visual Studio en su versión 2008. Aunque la nueva versión
de esta herramienta puede obtenerse con facilidad (Visual Studio 10), la que hemos
nombrado es suficiente para emprender nuestra labor. Microsoft Visual Studio 2008
resultará ideal debido a su soporte de Microsoft .Net Framework 3.5, herramienta
que trae consigo una serie de plantillas para Silverlight 2.
24
RRR
Gracias a la extensibilidad de XML como lenguaje de etiquetas es que XAML genera un nuevo sub-
conjunto de estas etiquetas para la representación de controles en el entorno de Silverlight. Así
lo hace flexible en la creación de los elementos, fácil de entender y portable entre ambientes.
XAML Y XML

Figura 7. Visual Studio 2008 otorga pleno soporte para
Silverlight 2 mediante plantillas como las que observamos en la imagen.
De cualquier manera, tendremos que instalar, además de la herramienta mencio-
nada, el Service Pack 1 para ésta. La instalación del Service Pack 1, junto con la de
las herramientas de desarrollo de Silverlight 2, incluirán en Visual Studio 2008 las
plantillas de la Figura 7. Debido a que la versión 2 de Silverlight vio la luz después
que la herramienta de desarrollo, este procedimiento resulta la única forma de po-
der ver los asistentes y demás componentes dentro de la mencionada herramienta.
Además de las plantillas que acelerarán el desarrollo, podremos encontrar una serie de
controles y componentes para su uso inmediato que, si bien, como veremos más ade-
lante, es posible construirlos por nuestra cuenta desde cero, toda la lógica de funcio-
nalidad ya se encuentra contenida y probada en ellos. Esto nos ahorra tiempo de tra-
bajo al no tener que desarrollar algo ya existente. Componentes como botones,
calendarios y cajas de texto son sólo algunos de los que encontraremos dentro del aba-
nico de posibilidades. Como vemos en la Figura 8, Visual Studio 2008 nos presenta una
lista completa de controles listos para usar que, como ya dijimos, tienen toda la lógica
que necesitarán impresa en el mismo componente, y, además, está pronta para usar.
25
Además del Service Pack 1 para Visual Studio 2008, también deberíamos contar con el con-
junto de herramientas de Silverlight. Éstas pueden ser descargadas desde la dirección
www.microsoft.com/downloads, ingresando Silverlight 2 tools for Visual Studio 2008 como
criterio de búsqueda.
DESCARGA DE SILVERLIGHT 2 TOOLS PARA VISUAL STUDIO 2008

Figura 8. Grillas, cajas de texto y listas desplegables son sólo
algunos de los controles listos para usar incluidos en Visual Studio 2008.
Por otro lado, también existe una herramienta para diseñadores gráficos que no
cuenten con experiencia en el desarrollo de software. Con una interfaz similar a
la de herramientas para manejo fotográfico, Microsoft Expression Blend 2 le
permite al diseñador gráfico, y por qué no al desarrollador, construir XAML de
manera rápida y amigable, como toda herramienta WYSIWYG (What you see is
what you get o en castellano Lo que ves es lo que obtienes) por sus siglas en in-
glés. Esto quiere decir que, al trabajar con Microsoft Expression Blend 2, el
diseño que planteemos será igual al resultado final en el momento de ejecución
de la aplicación de Silverlight. Deberemos usar Microsoft Expression Blend 2 si
estamos habituados a la creación de imágenes vectoriales o si sólo buscamos ace-
lerar el desarrollo de componentes Silverlight. Veremos más a fondo las cualida-
des de Microsoft Expression Blend 2 a lo largo de los capítulos, con suficiente
detalle como para poder utilizarlo con cierta seguridad.
Por último, cabe mencionar que Microsoft Visual Studio 2008 y Microsoft Ex-
pression Blend 2 se compenetran de tal forma que, por lo común, nos veremos
creando código en la primera herramienta, abriendo y editando el mismo pro-
yecto en la segunda, para terminar con algunos retoques artísticos o acelerar el
enlazado de datos en nuestro trabajo. En la Figura 9, podemos observar cómo un
proyecto creado en Visual Studio 2008 puede ser abierto y manipulado en for-
ma directa con Microsoft Expression Blend 2.
Debido al mismo motivo citado en el caso de Visual Studio 2008, es necesario
instalar un conjunto de herramientas en Microsoft Expression Blend 2 para con-
tar con plantillas que den soporte a Silverlight 2. En este caso, el Service Pack 1
para Microsoft Expression Blend 2 nos otorgará la prestación.
26

Figura 9. Microsoft Expression Blend 2 trabajando
sobre una solución creada en Microsoft Visual Studio 2008.
A lo largo del libro haremos referencia a estas dos herramientas, que serán usadas
para los distintos ejemplos que plantearemos. Por tal motivo, es recomendable con-
tar con las herramientas instaladas en nuestro equipo antes de continuar con los
siguientes capítulos. Es posible también realizar los ejemplos con las versiones gra-
tuitas de Visual Studio 2008 (Visual Studio 2008 Express), aunque no podemos
garantizar que los ejemplos de interfaz y otros aspectos concuerden con lo que los
usuarios de estas versiones verán en sus equipos.
27
… RESUMEN
Silverlight puede ser una herramienta extremadamente potente con soporte basado en
Microsoft .Net Framework, que nos otorga la posibilidad de desarrollar en el lenguaje y la forma
que mejor nos convenga. Desde la versión 1 de Silverlight hasta la actual, ha habido mejoras
notables, con mayor funcionalidad y prestaciones tanto para el desarrollador como para el
diseñador visual. El usuario final se ve beneficiado al tener que descargar un plugin de tamaño
pequeño y que trabaja en casi todos los navegadores y sistemas operativos de la actualidad.

28

PREGUNTAS TEÓRICAS
1 ¿En qué modelo se basa el código XAML pa-
ra representar los elementos de la interfaz?
2 ¿Subconjunto de qué otro modelo de desa-
rrollo visual para Windows podríamos con-
siderar a Silverlight?
3 ¿Qué versión de Microsoft .Net Framework
necesitamos, como mínimo, para trabajar
con Silverlight 2.0?
4 ¿Qué sistemas operativos y navegadores
web soportan la ejecución de Silverlight 2.0?
5 ¿Qué herramienta resulta ideal para desa-
rrolladores, que les permita potenciar el
desarrollo de aplicaciones Silverlight 2.0?
6 ¿Los diseñadores visuales cuentan con al-
guna herramienta de software que los ayu-
de a crear contenido para Silverlight 2.0?
7 ¿Es necesario instalar algún aditamento en
la herramienta de desarrollo?
8 ¿Silverlight 2.0 provee algún conjunto de
componentes listos para usar?
9 ¿Por qué es importante crear interfaces
atractivas e intuitivas en las aplicaciones?
10¿Cómo se llama el modelo de desarrollo
para la Web que conjuga el uso de XML y
JavaScript?
ACTIVIDADES
EJERCICIOS PRÁCTICOS
1 Diríjase al sitio web de la W3C (www.
w3.org/XML) para aprender más sobre
XML.
2 Para introducirse mejor en el mundo de
Silverlight, intente ampliar el ejemplo pro-
puesto en este capítulo, modificando el
tipo de fuente y el color de fondo de la apli-
cación creada.
3 Para conocer más sobre desarrollo con
Microsoft .Net, tome el curso gratuito del
Desarrollador 5 Estrellas desde el sitio
web de Microsoft. Este curso ayuda a en-
tender términos utilizados en este libro. La
URL es www.mslatam.com/latam/msdn/
comunidad/dce2005.
4 Instale Microsoft Expression Blend 2 y
déjelo listo para trabajar en el siguiente
capítulo.
5 Una vez instalados Visual Studio 2008 y
Microsoft Expression Blend 2, ingrese en
www.silverlight.net, el sitio oficial de
Silverlight, descargue los ejemplos y
analícelos. Esto ayuda a entender con
mayor facilidad esta tecnología.

Microsoft
Expression
Blend 2
Un paseo por Expression
Blend 2 30
Silverlight 2 con Expression
Blend 2 30
Unir los extremos 32
Un recorrido por Expression
Blend 2 37
Explorador de soluciones 38
Página inicial de Silverlight 2 39
La página App.xaml 40
El entorno de Expression
Blend 2 43
La barra de herramientas 46
Crear nuestra primera
aplicación con Expression
Blend 2 48
Resumen 53
Actividades 54
Capítulo 2
¿Cuáles son las herramientas disponibles
para desarrollar aplicaciones Silverlight?
¿Cómo podemos aumentar nuestra
productividad a la hora de escribir XAML?
Éstas son algunas de las preguntas
que abordaremos en este capítulo.
Silverlight

UN PASEO POR EXPRESSION BLEND 2
En el capítulo anterior, nos introdujimos en el mundo de Silverlight 2. Vimos
algunas de sus características, los elementos que lo componen y las principales he-
rramientas de desarrollo usadas para la creación de aplicaciones y componentes de
Silverlight. Una de estas herramientas, Microsoft Expression Blend 2, es usada
por los diseñadores visuales y por los desarrolladores como un suplemento para
los detalles visuales avanzados. En este capítulo, ahondaremos en el uso de esta
herramienta y su interacción con Silverlight 2, cómo crear animaciones así como
también elementos compuestos, para finalizar con la creación de nuestra primera
aplicación Silverlight 2. Este contenido está dirigido, en especial, a diseñadores
visuales que quieran incursionar en el uso de Expression Blend 2 como herramienta
de diseño para software y a desarrolladores de software que necesiten modificar, de
manera rápida, interfaces visuales basadas en XAML.
Silverlight 2 con Expression Blend 2
Desde los inicios de su desarrollo, este software siempre se enfocó, de manera
prioritaria, en las líneas de código y en la solución del problema propuesto. Es-
to sucede ya que, justamente, fueron el código y el problema por corregir los que
motivaron la creación de soluciones de software, que provean una respuesta
programática a la dificultad planteada. Este enfoque, el de la solución del problema,
causó que en el desarrollo de software primara la capacidad y la calidad de reso-
lución de un problema por encima del enfoque interactivo entre la aplicación y
el ejecutor de ese programa. Así, dentro de la historia del software y las compu-
tadoras, por carencias o por el enfoque antes citado, el trabajo se hacía mediante
tarjetas perforadas, las cuales se apilaban en grandes cajas y que poseían, en sí mis-
mas, la resolución de una de las partes que solucionaba el todo del problema. Sin
ninguna duda, este sistema era manejado sólo por el desarrollador de este software
primario y no por alguien ajeno a la informática de la época. Desde ese momen-
to de la historia y hasta la actualidad, se produjeron cambios en la manera en que
el usuario interactuaba entonces e interactúa ahora con esta pieza de software. Sin
2. MICROSOFT EXPRESSION BLEND 2
30
_`
A pesar de más de 40 años de evolución en la ingeniería de software, sólo en la actualidad se po-
ne especial énfasis en las interfaces visuales y en cómo éstas pueden ser parte de la solución
del problema al que el usuario se debe enfrentar a diario. Así, vemos aparecer nuevas tecnolo-
gías multitáctiles en sistemas operativos, o de captura de movimientos en consolas de juegos.
LA EVOLUCIÓN DE LAS INTERFACES

embargo, éste seguiría encontrándose una y otra vez ante una herramienta que,
aunque en esencia cubriera sus necesidades funcionales y resolviera el dominio del
problema planteado, no abarcaría los conceptos de usabilidad, ergonomía visual
o interactividad entre el hombre y la máquina.
Figura 1. En el Mix 2009 realizado por Microsoft,
uno de los temas por tratar fue la creación de interfaces gráficas.
Después de algunas décadas marcadas por este comportamiento de parte de la
ingeniería de software y de aquellos que la han practicado, de alguna forma, el usuario
terminó acostumbrándose a la idea de obtener aplicaciones o piezas de software que
aparecen, como grandes hitos visuales y pantallas monocromáticas. Esto sucede,
incluso, en pleno auge de las tarjetas aceleradoras de video con capacidades vi-
suales que diez años atrás se reservaban sólo a inmensos ordenadores destinados a la
producción de efectos cinematográficos. Muy pocos desarrolladores de software
contemporáneos, incluidas las empresas, contemplan como parte de sus desarro-
llos la inclusión de esta temática. Sólo con la llegada de la Web, algunos de ellos
adicionaron esto como una necesidad comercial, pero, en muy pocos casos, co-
mo una realidad para brindar un mejor producto que, además de solucionar un
Un paseo por Expression Blend 2
31
,
Es importante incluir en los proyectos de desarrollo de software a un diseñador gráfico que
cuente con experiencia en interfaces de usuario. No debemos desestimar este punto en nues-
tros desarrollos. El éxito de nuestro producto no está marcado sólo por las líneas de código,
la usabilidad es un aspecto muy importante.
CONSULTEMOS A UN DISEÑADOR

problema, resulte optimizado en lo que a interactividad con el usuario se refiere.
Por supuesto, la implantación de este concepto dentro del desarrollo de software
acarreó ciertos problemas que han tenido que ser resueltos por fuerza bruta más que
por inteligencia, debido a que la solución planteada, la de incorporar mejoras vi-
suales e interactivas, requiere de la presencia de otras ciencias. Esas ciencias están
alejadas del desarrollo de software, por lo que el problema resulta bastante claro al
tener que unir, de alguna forma, extremos que hablan idiomas diferentes.
Unir los extremos
En la actualidad, el mayor impedimento en la creación de aplicaciones visuales y
el trabajo realizado por los expertos en esta materia es causado por las herramien-
tas que éstos utilizan. Cuando en un proyecto de software es necesaria la interven-
ción de diseñadores gráficos especializados en experiencia de usuario, éstos plasman
su trabajo en herramientas más ligadas a las doctrinas del diseño gráfico y las artes
visuales que a las del desarrollo de software. Entonces, el problema recae en que
tanto el diseñador como el desarrollador hablan idiomas diferentes: los primeros
se refieren a colores, movimiento, disposición de elementos y formas, entre otros
aspectos, mientras que los segundos necesitan saber qué mostrar y cómo se reali-
zará el código que contenga la lógica. Al mismo tiempo, los diseñadores suelen
desconocer las limitaciones de las plataformas donde serán creados los productos
de software y tienden a generar elementos visuales extremadamente atractivos, pe-
ro con costos elevados en su implementación por parte del desarrollador. Al final
y sin ser lo último, el producto resultante del diseñador será un conjunto de imá-
genes o un esquema que mostrará lo pretendido de manera visual para la aplica-
ción de software, y le deja al desarrollador la tarea de volver a armar esto dentro
de las líneas de código, quien no lo conseguirá con exactitud al compararlo con
lo propuesto en un principio por el diseñador.
Y es aquí donde han surgido herramientas que traducen, de alguna forma, esto
que el diseñador piensa y plasma en algo que el desarrollador pueda usar. Así, es
posible encontrar herramientas muy potentes como Adobe Fireworks donde,
por medio del modelo visual creado por el diseñador, el desarrollador obtiene un
conjunto de imágenes y código HTML. A pesar de eso, este tipo de herramientas
acarrea un problema, ya que se enfocan en el diseñador y no en el desarrollador,
creando código HTML que, basado en el dibujo propuesto, generan HTML poco
útil para su implementación, como podemos ver a continuación. El siguiente es
el resultado HTML generado para la Figura 2.
tr
tdimg src=”images/spacer.gif” width=”103” height=”1” border=”0”alt=””
//td
32

td
[...41 líneas eliminadas ...]
td colspan=”2”img name=”Untitled1_r4_c1” src=”images/Untitled-
1_r4_c1.gif”
width=”112” height=”60” border=”0” id=”Untitled1_r4_c1” alt=”” //td
tdimg src=”images/spacer.gif” width=”1” height=”60” border=”0” alt=””
//td
/tr
Y, si bien este código puede ayudar, resulta imposible de usar para el desarrollador,
por lo que éste se verá forzado a reescribir partes o su totalidad para poder obtener
código que le sea útil. Para esto utilizará sólo código HTML, debido a que a éste se
le pueden agregar cuestiones programáticas a diferencia del anterior.
spanFiltro de búsqueda/span
br
select
option/option
option/option
option/option
/select
Figura 2. A la derecha podemos
ver lo que consiguió el desarrollador como resultado
del concepto ideado por el diseñador.
33

El problema es claro: estas herramientas hacen las veces de traductores, pero no de ge-
neradores. Traducen lo que el diseñador quiso decir a algo que el desarrollador pueda
entender, pero, en este proceso de traducción, las herramientas no traducen funciona-
lidad, por lo que el desarrollador no la obtendrá y deberá retraducirla por su cuenta.
La diferencia sustancial sobre este concepto por parte de Expression Blend 2 reside en
que no es un traductor, sino un generador de funcionalidad, con la característica
de que para el diseñador la herramienta se comportará como cualquier otra herra-
mienta de las que está acostumbrado a usar. Sin embargo, a medida que diagrama y
diseña los contenidos visuales, ésta generará funcionalidad lista para ser implementa-
da por el desarrollador de software, como podemos observar en el siguiente código:
Grid x:Name=”LayoutRoot” Background=”White”
TextBlock Height=”23” HorizontalAlignment=”Left” Margin=”96,32,0,0”
VerticalAlignment=”Top” Width=”174” Text=”Filtro de búsqueda”
TextWrapping=”Wrap” FontFamily=”Aharoni” FontSize=”18”/
ComboBox Height=”42” HorizontalAlignment=”Left” Margin=”96,59,0,0”
Style=”{StaticResource ComboBoxStyle1}” VerticalAlignment=”Top”
Width=”160” OpacityMask=”{x:Null}”
ComboBox.Foreground
LinearGradientBrush EndPoint=”0.5,1”
StartPoint=”0.5,0”
GradientStop Color=”#FFF36767”/
GradientStop Color=”#FFFFFFFF” Offset=”1”/
/LinearGradientBrush
/ComboBox.Foreground
ComboBox.Background
GradientStop Color=”#FFC07070”/
GradientStop Color=”#FF0F0000” Offset=”1”/
34
_`
Existen especializaciones en el desarrollo de software que se enfocan en la optimización de las
interfaces visuales, llegando al punto de calcular la cantidad de clics que deberá hacer un usuario
para conseguir realizar una acción determinada. La implementación de estas técnicas produce
mayor aceptación de los productos por parte de los usuarios.
OPTIMIZACIÓN DE LA INTERFAZ

/ComboBox.Background
/ComboBox
/Grid
El diseñador verá, en lugar del código anterior, un modelo como el que se mues-
tra en la figura que aparece a continuación:
Figura 3. Una lista desplegable creada con Expression Blend 2,
que generará código XAML listo para ser usado por el desarrollador.
Como el desarrollador obtiene código que se adapta a sus necesidades, puede en-
focarse directamente en la solución del problema. A modo de ejemplo, en las si-
guientes líneas de código vemos cómo el desarrollador agrega algunas líneas de
código C# en la clase asociada al código XAML para generar funcionalidad so-
bre el producto del diseñador:
public partial class Page : UserControl
{
public Page()
{
// Required to initialize variables
InitializeComponent();
this.ComboBox.Items.Add(“Item 1”);
35

}
}
El resultado de esta implementación de código podemos verlo a continuación:
Figura 4. Como observamos en esta imagen, el resultado propuesto
por el diseñador y la implementación del desarrollador son idénticas.
Microsoft Expression Blend 2, entonces, sirve de nexo entre los dos elementos
involucrados en el desarrollo, tanto para diseñadores como para desarrolladores.
De esta manera se logra que los productos resultantes en ambos casos sean com-
patibles entre sí, para que ninguno de los profesionales involucrados tenga la ne-
cesidad de salir de su ámbito natural de trabajo. El resultado final será, entonces,
que el diseñador obtendrá en la pieza de software el comportamiento y la apariencia
visual, tal como los había ideado, mientras que el desarrollador no se verá forzado
a intentar traducir estas ideas a elementos programáticos y se dedicará exclusiva-
mente a la funcionalidad y a la resolución del problema.
36
RRR
Contar con un diseño visual de la aplicación de manera temprana no sólo sincronizará a los
miembros del equipo de desarrollo, ya que todos tendrán una idea general del producto final, sino
que puede servir de disparador de retroalimentación por parte del cliente al ver con antelación
la idea del producto terminado.
PROTOTIPO DEL PRODUCTO

Un recorrido por Expression Blend 2
Al iniciar Expression Blend 2 o al crear un nuevo proyecto con él, podemos elegir
entre cuatro tipos diferentes. Tenemos dos proyectos específicos para Silverlight y
sus diferentes versiones, pero también podemos diseñar y trabajar con proyectos
Windows Presentation Foundation (WPF).
• Aplicación WPF: este tipo de proyecto representa una aplicación de escritorio con
soporte para WPF. Si tenemos en cuenta que WPF también se compone de código
XAML, es posible crear un entorno visual directamente desde Expression Blend 2.
• Librería de controles WPF: esta librería de controles está especializada en el en-
capsulamiento de elementos XAML y código de programación para su posterior
reutilización en aplicaciones WPF. Debemos optar por esta opción cuando quere-
mos crear elementos reutilizables para ser incorporados en distintas aplicaciones.
• Sitio de Silverlight 1: este tipo de proyectos está orientado a crear sitios web con
soporte para la versión 1 de Silverlight. Debemos tener en cuenta que este modelo
no es tratado en este libro y además representa una versión antigua del software.
• Aplicación de Silverlight 2: una vez instalado el Service Pack 1 para Expression
Blend 2, podremos ver esta clase de trabajos. Éste es el tipo de proyectos sobre los
cuales nos moveremos, tanto de manera visual como programática.
Figura 5. Lista de proyectos incluidos en Expression Blend 2.
37
,
La mayoría de los controles preestablecidos en Silverlight presentarán un comportamiento si-
milar al de sus homónimos presentes en el desarrollo web y de escritorio. Al interactuar con
ellos se deberá, por consiguiente, imitar las mismas líneas de código usadas en los demás
ambientes de desarrollo con Microsoft .Net.
CONTROLES EN SILVERLIGHT

Además de poder indicar el nombre del proyecto que vamos a crear y la ubica-
ción física que tendrá, es posible seleccionar el lenguaje de programación con el
cual preferimos trabajar. Vale aclarar que, para poder conseguir esta lista, es ne-
cesario haber instalado esos lenguajes en nuestra estación de trabajo. El hecho de
poder seleccionar un lenguaje de programación se refiere a que cualquier código
que se realice desde Expression Blend 2 se hará en ese lenguaje, por lo que es im-
portante elegir aquel con el que estemos más familiarizados.
Explorador de soluciones
Una vez que hemos creado el proyecto Silverlight 2, podremos navegar entre sus
archivos desde el explorador de la solución, que típicamente puede ser encontrado
a la derecha de la aplicación, como podemos observar en la Figura 6. Este explorador
nos mostrará, como elementos iniciales, una página del tipo XAML más una clase
creada en el lenguaje seleccionado, en este caso C#. Esta clase de C# es la que será
usada para generar el código que maneje los elementos creados en la página XAML.
Figura 6. El explorador de soluciones (área superior derecha)
de Expression Blend 2 con los elementos iniciales de una aplicación Silverlight 2.
38
RRR
Para mejorar nuestro desarrollo en Expression Blend 2, es recomendable tener instalado, ade-
más, alguna de las herramientas de desarrollo de software de Microsoft, como por ejemplo
Visual Studio 2008. Esto hará que, de tener que agregar código de programación a nuestro pro-
yecto Silverlight, lo podamos hacer con mayor facilidad desde estas herramientas.
INTEROPERABILIDAD

Página inicial de Silverlight 2
El archivo Page.xaml es considerado la página o componente de inicio para nuestra
aplicación Silverlight 2, teniendo como contenido el siguiente código:
UserControl
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
x:Class=”SilverlightApplication2.Page”
Width=”640” Height=”480”
Grid x:Name=”LayoutRoot” Background=”White”/
/UserControl
En el caso de Silverlight 2, el elemento inicial es representado por un tag llamado
UserControl. Lo que nos dice esto es que no será considerado como una apli-
cación en sí misma, sino como un componente que puede ser incrustado o con-
sumido por otras aplicaciones del tipo Silverlight, así como por aplicaciones web.
En la misma declaración de atributos de este control Silverlight, se incluye el
nombre de la clase de C# encargada de manejar los componentes del control, así
como el ancho y el alto, en pixeles, del control. Si exploramos el contenido de
esa clase, podremos ver lo siguiente:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
39
RRR
Es posible hacer que nuestro control Silverlight se adapte a la superficie que lo contiene. Si co-
locamos el elemento Silverlight dentro de una tabla HTML y configuramos las propiedades del
elemento para que sus atributos Width y Height sean igual a Auto, éste se adaptará de manera
automática a las dimensiones de su contenedor.
DIMENSIONES DE SILVERLIGHT

using System.Windows.Shapes;
namespace SilverlightApplication2
{
{
public Page()
{
}
}
}
Esta clase, como ya comentamos, es la que será usada como contenedor de la
implementación del código que interactuará con los componentes colocados en la
página XAML previamente vista. Esto quiere decir que, si queremos que nuestra
aplicación Silverlight consuma datos de una base de datos o reaccione apoyada en
estímulos por parte del usuario, deberíamos escribir esas líneas dentro de esta clase.
Por supuesto, no estamos obligados a acumular todas las líneas de código en este
único archivo ya que, como en todo lenguaje orientado a objetos, podremos crear
tantas clases como necesitemos sin estar obligados a tener una página XAML por
cada una. Así, podríamos encapsular la lógica de negocios o el acceso a datos en
clases especializadas, y generar código mantenible y fácilmente modificable.
La página App.xaml
La página App.xaml, junto con la clase de código que la representa, es otro de los
archivos creados inicialmente. Esta clase es usada en especial para almacenar có-
digo XAML, que en el caso de App.xaml puede ser reusado dentro de todas las
demás páginas de tipo XAML. Como podemos ver en el siguiente código:
40
,
Como una buena práctica en el desarrollo de software, encontramos los patrones de diseño de
software. Éstos representan formas de crear código para solucionar problemas específicos. Es
importante tener presente estos patrones para mejorar la calidad del código creado en Silverlight.
Como resultado, obtendremos código más prolijo y más fácil de modificar.
PATRONES DE DISEÑO DE SOFTWARE

Application.Resources
!— Resources scoped at the Application level should be defined here.
—
Style x:Key=”TextBoxStyle1” TargetType=”TextBox”
Setter Property=”BorderThickness” Value=”1”/
Setter Property=”Background”
Setter.Value
GradientStop Color=”#FFE8EFF1”/
GradientStop Color=”#FF87DFF4” Offset=”1”/
/Setter.Value
/Setter
Setter Property=”Foreground” Value=”#FFFF0000”/
Setter Property=”Padding” Value=”2”/
Setter Property=”BorderBrush”
...
...
En el código anterior, el archivo App.xaml es usado para alojar la definición de un
nuevo elemento TextBox, que presenta ciertas particularidades de sus atributos de
color y comportamiento, como podemos ver en la Figura 7. Este nuevo elemento,
ahora, puede ser accedido y consumido por cualquier otro TextBox que se en-
cuentre dentro de nuestra aplicación. Por lo común, cuando desarrollemos con
Silverlight, tendremos la necesidad de crear nuestros propios esquemas visuales
para que sean aplicados sobre controles específicos. Una forma de compartir estos
esquemas es mediante su colocación dentro de este archivo. De cualquier manera,
hablaremos más de estos esquemas y propiedades en los capítulos 4 y 5.
41
RRR
Debemos tener cuidado en la cantidad de información que agregamos a nuestros archivos XAML,
ya que éstos deben ser descargados por el usuario. Un archivo de gran tamaño tomará más
tiempo en ser descargado, en detrimento de la experiencia del usuario. Podemos usar carga por
demanda para mejorar esta experiencia.
TAMAÑO DE ARCHIVOS

Figura 7. El esquema generado puede ser aplicado a otros
controles del mismo tipo en cualquier otra página de Silverlight.
Con respecto a la página de código (App.xaml.cs), podemos decir que presenta
un conjunto de eventos que se dispararán en determinados momentos de la vi-
da de nuestra aplicación. El código genérico se muestra a continuación, y luego
lo analizaremos con más detalle:
public App()
{
this.Startup += this.OnStartup;
this.Exit += this.OnExit;
this.UnhandledException += this.Application_UnhandledException;
}
private void OnStartup(object sender, StartupEventArgs e)
{
// Load the main control here
this.RootVisual = new Page();
}
private void OnExit(object sender, EventArgs e)
{
}
42

El primer método, constructor de esta clase, se encarga de enlazar eventos inhe-
rentes al comportamiento de nuestra aplicación. El método OnStartup se ejecutará
al inicio de la aplicación, en este caso, podríamos colocar código en él para con-
seguir algún comportamiento necesario al momento de inicializarse nuestra apli-
cación. Por ejemplo, podríamos necesitar inicializar objetos o conectarnos a un
servicio web, entre otras posibilidades. En el mismo caso, el evento OnExit será dis-
parado en el momento en el que la aplicación sea cerrada o terminada, y de igual
forma que en el caso anterior, podríamos necesitar liberar ciertos recursos o realizar
acciones específicas cuando la aplicación concluya.
El entorno de Expression Blend 2
El entorno de Expression Blend 2 no se limita a los archivos previamente tratados.
Si tenemos en cuenta que esta herramienta puede ser usada tanto por diseñadores
como por desarrolladores, podremos encontrar elementos útiles para los dos casos.
Una de las secciones destacadas involucra el lienzo de dibujo central. En este lien-
zo, podremos arrojar y ordenar todos los controles incluidos en Silverlight, así co-
mo crear nuestros propios modelos y controles.
Figura 8. En este lienzo, podemos ver cómo
son manipulados distintos controles de manera visual.
Desde esta área central, también es posible interactuar en forma directa con el
código XAML. En nuestra interfaz podemos ver, en la parte superior derecha, las
opciones para intercambiar entre los diferentes modos de visualización: Diseño,
XAML o Dividir (mixto), y tenemos la posibilidad de modificar los componentes
desde cualquiera de estas vistas. Si contamos con cierta experiencia en edición de
43

XAML, es probable que trabajemos en el modo mixto o de pantalla dividida, ya
que esto puede acelerar nuestro trabajo de manera significativa.
El próximo grupo de paneles que vamos a inspeccionar es el de las propiedades.
Éste se encuentra situado a la derecha de Expression Blend 2. Típicamente, estas
propiedades son el acceso rápido a las configuraciones de aspecto y comportamiento
de los controles adicionados al lienzo de edición. Para lograr la inspección de las
propiedades de un control, primero será necesario seleccionarlo. Según el control
seleccionado, las propiedades se verán afectadas en relación a éste por lo que no con-
taremos con las mismas opciones en todos los casos.
Figura 9. Existen otras propiedades relacionadas con diferentes controles,
sólo debemos movernos usando la barra de desplazamiento ubicada a la derecha.
En esta área también podemos encontrar, en la parte superior, opciones que tengan
que ver con el proyecto. En especial, la pestaña relacionada con los recursos de
la aplicación, donde se listarán todos los atributos previamente configurados,
como los alojados en el archivo App.xaml, que ya hemos tratado. La gran venta-
ja de esta lista de recursos radica en que podemos arrastrar cualquiera de estos
44
RRR
En Silverlight, no sólo es posible modificar la apariencia visual de los controles nativos mediante
la generación de esquemas. También podremos crear nuestros propios componentes y controles
heredándolos en nuestro propio código y creando nueva lógica funcional.
IMPLEMENTACIÓN DE CONTROLES

elementos sobre alguno de los controles existentes para aplicar las configuracio-
nes a ese control. El resultado de arrastrar el estilo configurado al inicio permite
obtener lo que podemos ver en la siguiente figura.
Figura 10. El control de caja de texto posee, una vez aplicado, el estilo
definido en el elemento TextBoxStyle1, que aparece debajo de la pestaña de recursos.
El último panel que agrupa información sobre nuestra aplicación Silverlight se en-
cuentra a la izquierda del lienzo de dibujo. Sobre estos grupos, en la parte superior, se
ubican las transformaciones y animaciones de los componentes de nuestra aplica-
ción. Aunque hablaremos de estas propiedades con mayor detalle en el capítulo 5, vale
recalcar que se pueden generar diferentes efectos de movimiento y transformaciones
desde esta sección. Debajo de este panel, se encuentra el árbol de controles de la pá-
gina que estamos visualizando. Los controles se agruparán de manera jerárquica sobre
la base del contenedor inmediato superior. Si tenemos en cuenta que los controles
XAML pueden ser contenedores de otros controles XAML, esta estructura nos dará
rápido acceso a cada uno de los elementos que componen un control de manera rápi-
da. En la Figura 11, podemos ver un ejemplo de este árbol y del panel de animaciones.
45
_`
Todas las imágenes, videos y sonidos que agreguemos a nuestro proyecto, así como cualquier
archivo externo, serán comprimidos en un único archivo final con extensión XAP. Este archivo
es, en realidad, un archivo zip que contiene todos los elementos creados por el proyecto Silverlight.
COMPRESIÓN DE ARCHIVOS

Figura 11. En este árbol de controles se muestra la lista
de elementos agregados antes a nuestro lienzo de dibujo, cómo éstos
son contenidos por una grilla y ésta, a su vez, por el control Silverlight.
La barra de herramientas
Desde la barra de herramientas de Expression Blend 2, tendremos acceso a todos
los controles y componentes preestablecidos de Silverlight y de Microsoft .Net
Framework. Podemos separar la lista de controles en los siguientes grupos:
• Elementos de dibujo: son aquellos que nos dan acceso a herramientas de dibujo
vectoriales. Con éstos, podremos dibujar líneas, curvas, círculos y rectángulos.
Figura 12. Listas de controles para dibujo vectorial.
• Contenedores y agrupadores: la tarea de estos elementos consiste, principal-
mente, en agrupar otros controles Silverlight, aunque también se encargan de
ordenar, dentro de la superficie de dibujo, la disposición de esos elementos. Así,
46

podemos encontrar grillas, donde se definirán filas y columnas (agregando den-
tro de cada celda distintos controles y componentes) o elementos de barras de
desplazamiento para colocar contenido que exceda los límites de ancho o alto de-
finidos para una zona de nuestra aplicación.
Figura 13. Controles para la agrupación y contención de otros elementos y controles.
• Interacción con el usuario: este último grupo representa aquellos controles y
componentes que sirven para capturar comportamiento por parte del usuario.
Dentro de los más conocidos, podemos encontrar los botones, cajas de texto, lis-
tas desplegables y botones de selección múltiple, entre otros.
Figura 14. Controles más comunes para capturar información por parte del usuario.
Los controles antes nombrados suelen ser los que se usan con mayor frecuencia para el
desarrollo de aplicaciones con Silverlight, pero existen otros que no se ven de forma di-
recta. Para poder acceder a ellos, es necesario seleccionar el último elemento de la lista
en la barra de herramientas. Al hacerlo, podremos ver la lista completa de controles dis-
ponibles y agregarlos a nuestra colección de controles, como se muestra a continuación.
47

Figura 15. Todos los controles disponibles desde Expression Blend 2.
Crear nuestra primera aplicación con Expression Blend 2
Ya estamos en condiciones de comenzar a trabajar con Expression Blend 2 para crear
nuestra primera aplicación Silverlight. En este caso, crearemos un visor simple de
videos. Este visor deberá contemplar las posibilidades de iniciar, pausar y detener, en
forma completa, una película designada por nosotros. El primer paso es crear una
nueva aplicación Silverlight 2. Una vez hecho esto, necesitaremos agregar a nuestro
lienzo de dibujo un control del tipo MediaElement, que sirve para representar videos,
imágenes y sonidos en Silverlight. Para poder agregar este control, es necesario que lo
busquemos en la lista completa de controles Silverlight, como vimos en la Figura 15,
ya que no se encuentra disponible en la barra de herramientas. Junto con este control,
agregaremos alguno del tipo Border. Este control es necesario para darle una apa-
riencia de caja a nuestra película, debido aque el control MediaElement no posee
características. Podemos obtener un cambio en la configuración visual del control
Border si modificamos sus características en la pestaña Propiedades. Para este caso,
48
_`
A medida que Silverlight va madurando, más empresas y portales en la Web se inclinan por
la utilización de esta tecnología sobre otras. Uno de los últimos portales que optó por modi-
ficar toda su implementación de servicios para los usuarios fue Terra, al cambiar su utilización
de Adobe Flash por Silverlight.
CADA VEZ MÁS SE INCLINAN POR SILVERLIGHT

debemos modificar las propiedades del fondo (Background), para que se aplique el
color degradado, y las de apariencia, colocando el grosor del borde del control
(BorderThikness) en 1 y el radio de curvatura de las esquinas (CornerRadius) en 10.
Figura 16. Propiedades aplicadas al control Border.
Por último, el control MediaElement debe ser contenido por el control que representa
el borde configurado previamente. Para esto, arrastramos el control MediaElement den-
tro del control Border para lograr el efecto deseado. Como podemos editar directamente
XAML, es posible lograr el mismo fin con las siguientes líneas de código:
Border Margin=”95.5,57,91.5,217” BorderBrush=”#FF000000”
BorderThickness=”1,1,1,1” CornerRadius=”10,10,10,10”
Border.Background
LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0”
GradientStop Color=”#FF6985B5”/
GradientStop Color=”#FFFFFFFF” Offset=”1”/
/Border.Background
MediaElement Height=”Auto” Width=”Auto” OpacityMask=”{x:Null}”/
/Border
Por último, es necesario que agreguemos tres botones para las tres acciones antes
definidas. Podremos cambiarle el texto que se va a mostrar en cada botón, presio-
nando dos veces con el puntero del ratón sobre el control, o mediante sus propie-
dades. El resultado debería ser similar al mostrado en la siguiente figura.
49

Figura 17. Nuestro visor de videos con los botones que controlarán la reproducción.
Una vez conseguido el visor de videos, es necesario configurar el control MediaElement
para especificarle cuál será el video que se va a reproducir. Seleccionamos el con-
trol MediaElement en la lista de propiedades y buscamos la fuente de contenido
(Source). Por lo general, podremos seleccionar formatos soportados por Silverlight
de los que hablaremos con más detalles en el capítulo 6 cuando veamos el compo-
nente MediaElement de manera especial. Una vez que hemos seleccionado el video
en cuestión, presionamos la tecla F5 para inicializar la aplicación. Esta acción de-
berá iniciar un explorador de Internet y desplegar la aplicación creada. Podremos
notar que el video se reproduce con normalidad, pero los botones creados para ca-
da una de las acciones no funcionan como esperábamos, debido a que no hemos
generado ningún código que las realice (Figura 18).
Para conseguirlo, el primer paso es asignarle un nombre a nuestro MediaElement,
ya que sin él no podremos acceder a las propiedades del control, por lo que no se-
rá posible iniciarlo, pausarlo o detenerlo. Podemos asignarle el nombre al control
seleccionándolo y agregándole el mismo que tiene en la lista de propiedades o me-
diante XAML por medio del atributo x:Name=”Nombre del Control”. El elemento
MediaElement quedará como se ve en el siguiente código:
50
RRR
Si necesitamos buscar material sobre desarrollo de interfaces visuales, es posible que también
las encontremos mediante la sigla UX (User eXperience o experiencia de usuario, por su signifi-
cado en inglés). Debido a que el término, con el tiempo, mutó, tendremos más chances de hallar
información mediante este último nombre.
INTERFACES DE USUARIO

MediaElement Height=”Auto” Width=”Auto” Source=”silverlight.wmv”
AutoPlay=”False” x:Name=”visorVideo”/
Figura 18. El visor de videos trabajando de manera correcta en nuestro navegador.
Si tenemos en cuenta que la lógica debe ser creada en la clase de código C#, necesita-
remos escribir algunas líneas en ella para realizar las acciones propuestas por los tres
botones. Tenemos varios caminos para lograrlo: podríamos usar Visual Studio 2008
para generar el código. Visual Studio 2008 es una herramienta de alto nivel para la
creación de código para aplicaciones, así como para realizar pruebas sobre él. Por otro
lado, sería posible modificar el archivo de clase y el código XAML por nuestra cuen-
ta. Sin embargo, esto puede redundar en un aumento de trabajo y del tiempo de
desarrollo y crear posibles problemas en la confección del código, si no somos expe-
rimentados conocedores del lenguaje de programación utilizado. De cualquier ma-
nera, para este ejemplo, si optamos por la segunda opción, sólo deberemos seguir unos
cuantos pasos. Primero, en el código XAML, tendremos que agregar el atributo
Click=”Nombre del Método” por cada botón creado. Click representa el evento por el
51
RRR
Expression Blend 2 trae consigo un pequeño servidor de páginas web. Este servidor es activado
en el momento en que queremos depurar nuestro trabajo y ver los resultados obtenidos. Gra-
cias a este servidor, no dependeremos de grandes infraestructuras para desplegar y ejecutar
nuestros proyectos cada vez que necesitemos validar lo que estemos desarrollando.
SERVIDOR WEB

cual se disparará la acción o la lógica contenida en el método o función creada en el
código C#. Así, cuando el usuario presione el botón en cuestión, el evento Click será
disparado y se desencadenará toda la lógica que hayamos programado. Es necesario,
entonces, que modifiquemos nuestro XAML para agregar los tres eventos:
Button Height=”33” HorizontalAlignment=”Left” Margin=”95.5,0,0,162”
VerticalAlignment=”Bottom” Width=”76.5” Content=”Iniciar”
RenderTransformOrigin=”0.481,0.515” Click=”Iniciar”/
Button Height=”33” HorizontalAlignment=”Left” Margin=”193,0,0,162”
VerticalAlignment=”Bottom” Width=”76.5”
RenderTransformOrigin=”0.481,0.515” Content=”Pausar” Click=”Pausar”/
Button Height=”33” Margin=”287,0,276,162” VerticalAlignment=”Bottom”
Width=”76.5” RenderTransformOrigin=”0.5,0.5” Content=”Detener”
Click=”Detener”/
Estos tres eventos ahora hacen referencia a tres funciones: Iniciar, Pausar y Detener. Pa-
ra agregar la lógica que maneje estas acciones, necesitamos modificar nuestra clase C#.
Si no contamos con Visual Studio 2008, podremos abrirla con el bloc de notas o cual-
quier editor de texto. El resultado final debería ser como el que sigue:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication2
{
{
public Page()
{
52

}
private void Iniciar(object sender, RoutedEventArgs e)
{
visorVideo.Play();
}
private void Pausar(object sender, RoutedEventArgs e)
{
visorVideo.Pause();
}
private void Detener(object sender, RoutedEventArgs e)
{
visorVideo.Stop();
}
}
}
En el código anterior, vemos cómo una simple línea de código por acción pue-
de ejecutar, pausar o detener el video. Si volvemos a ejecutar nuestra aplicación
Silverlight, deberemos poder interactuar con el video seleccionado mediante los
botones, iniciándolo, deteniéndolo y pausándolo.
53
… RESUMEN
Expression Blend 2 es una herramienta altamente flexible que une dos áreas del desarrollo
de software que habían estado separadas y con falta de comunicación. De esta forma les da
tanto a los diseñadores como a los desarrolladores una forma de comunicarse para que los
primeros puedan ver plasmadas sus ideas en las aplicaciones tal cual las han concebido, y los
desarrolladores implementen estas ideas sin la necesidad de reescribir código, para no
invertir tiempo y esfuerzo de manera innecesaria.

54

PREGUNTAS TEÓRICAS
1 ¿Cuál es, en el desarrollo web, el principal
problema con el que se encuentra un desa-
rrollador al recibir el trabajo del diseñador
para ser implementado?
2 ¿Por qué es importante poner esfuerzo en
el área de experiencia visual del usuario?
3 ¿Qué herramientas intentan unir el diseño
y el desarrollo de software?
4 ¿Por qué es importante la creación de proto-
tipos visuales en el desarrollo de software?
5 ¿Podemos encontrar todos los controles y
componentes HTML representados en Sil-
verlight con XAML?
6 ¿Qué tipos de proyectos es posible crear
con Expression Blend 2?
7 ¿Es necesario instalar algún programa adi-
cional para poder desarrollar aplicaciones
Silverlight 2 con Expression Blend 2?
8 Si queremos ver todos los controles de Ex-
pression Blend 2, ¿cómo accedemos a ellos?
9 ¿Es necesario contar con un servidor web
para depurar las aplicaciones Silverlight
desde Expression Blend 2?
10 ¿Cuántos tipos de controles encontramos en
Silverlight? ¿Cómo los categorizamos?
ACTIVIDADES
EJERCICIOS PRÁCTICOS
1 Ingrese y navegue por Quince (http://
quince.infragistics.com), el sitio web de
Infragistics dedicado a la mejora de las in-
terfaces visuales.
2 Diríjase al sitio web oficial de Silverlight
(http://silverlight.net) para ver más ejem-
plos sobre esta plataforma.
3 Intente crear un visor de videos por Inter-
net, ejecutando la aplicación creada me-
diante el uso de IIS (Internet Information
Services).
4 Ingrese en www.microsoft.com/surface,
el sitio web de Microsoft Surface, para ver
buenos ejemplos de interfaces visuales y
su aplicación en soluciones de software.
5 Visite el sitio de experiencia para el usua-
rio de Microsoft (www.microsoft.com/
design) para maximizar el conocimiento
sobre posibilidades involucradas en esta
área de la ingeniería de software.

El mejor trabajo,
con la mejor
herramienta
Silverlight para desarrolladores 56
Puesta a punto de Visual
Studio 2008 56
Silverlight 2 con Visual Studio 59
Crear la primera aplicación
con Visual Studio 2008 63
Interoperabilidad con
Expression Blend 2 76
Resumen 79
Actividades 80
Capítulo 3
Más allá de nuestro conocimiento,
la forma más eficiente de crear viene
de la mano de la mejor herramienta
disponible. Así como los diseñadores
visuales tienen una herramienta creada
para ellos, los desarrolladores
no se pueden quedar atrás. Visual Studio
2008 y Silverlight son una mezcla
con la que podremos obtener código
de extrema calidad.
Silverlight

SILVERLIGHT PARA DESARROLLADORES
En este punto, ya hemos pasado por los conceptos iniciales de Silverlight y recorri-
mos un poco una de las herramientas provistas por Microsoft, Expression Blend 2,
para desarrollar aplicaciones para esta plataforma. En este capítulo, hablaremos de
Visual Studio 2008 como la herramienta ideal para los desarrolladores de software
y también para desarrollar aplicaciones Silverlight. Además, crearemos una nueva
aplicación que consuma datos y se los mostraremos al usuario.
Puesta a punto de Visual Studio 2008
En el primer capítulo, comentamos que la versión 2 de Silverlight no viene incluida
en Visual Studio 2008 y, por consiguiente, es necesario que hagamos esta instala-
ción descargando los componentes desde la página de Microsoft. El motivo de es-
ta sección en este capítulo se debe a que, en muchas ocasiones, nos encontramos
con el dilema de no saber qué versión, componente u herramienta descargar. En
general, los sitios de los proveedores suelen presentarnos más de una versión dis-
ponible para su descarga, pero si elegimos una incorrecta nos retrasará en nuestro
trabajo, así como también podemos encontrarnos con algún funcionamiento ines-
perado mientras realizamos nuestro trabajo. En la Figura 1, se ilustra el sitio web de
Microsoft que representa el portal de entrada para Silverlight.
Figura 1. Portal de Silverlight en Microsoft.com.
En esta figura, se muestra una lista de componentes que pueden ser descargados.
El primero hace referencia al motor o plugin de Silverlight. Este motor es el que
3. EL MEJOR TRABAJO, CON LA MEJOR HERRAMIENTA
56

debe instalar todo usuario que quiera ver las aplicaciones Silverlight desde el na-
vegador. Por supuesto, no es necesario que proveamos por nuestra cuenta este
plugin ni que tengamos que instalarlo de forma manual en cada uno de los equi-
pos y de los navegadores que quieran nuestro producto ya que, en la declaración
del objeto Silverlight en el código HTML, se incluye una comprobación de ver-
siones, además de indicarle al navegador de dónde obtener esta versión:
object data=”data:application/x-silverlight,” type=”application/x-
silverlight-2” width=”100%” height=”100%”
param name=”source” value=”SilverlightApplication1.xap”/
param name=”onerror” value=”onSilverlightError” /
param name=”background” value=”white” /
param name=”minRuntimeVersion” value=”2.0.31005.0” /
param name=”autoUpgrade” value=”true” /
a href=”http://go.microsoft.com/fwlink/?LinkID=124807” style=”text-
decoration: none;”
img src=”http://go.microsoft.com/fwlink/?LinkId=108181”
alt=”Get Microsoft Silverlight” style=”border-style: none”/
/a
/object
Este código es el que deberemos usar de manera habitual para la incrustación de
aplicaciones Silverlight en páginas webs. Si analizamos las partes del código, ve-
mos que, dentro del atributo data, se detalla el tipo de componente por ejecutar.
De esta forma, el navegador sabrá que el objeto requerido es del tipo Silverlight.
El atributo type específica la versión de aplicación que se usará, en nuestro caso,
Silverlight 2. Los elementos param, con sus atributos name, preconfiguran la aplica-
ción Silverlight. La propiedad onerror especifica el nombre de la función JavaScript
que se ejecutará si ocurriera un error en el transcurso del implemento de la apli-
cación. Por su parte, minRuntimeVersion detalla la versión exacta de la aplicación,
por lo que deberemos tener el plugin compatible para poder ejecutarla.
Silverlight para desarrolladores
57
,
Este software no es un componente para realizar presentaciones vistosas en Internet. Por el con-
trario, Silverlight no sólo cumple con esta característica, sino que extiende el desarrollo de apli-
caciones profesionales al ambiente web con contenido dinámico. Podemos usar Silverlight, en
especial, cuando tengamos que resolver problemas complejos desde la Web.
¿QUÉ ES SILVERLIGHT EN REALIDAD?

Silverlight

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Silverlight

Ähnlich wie Silverlight (20)

Mehr von Whaleejaa Wha

Mehr von Whaleejaa Wha (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Silverlight