Manual 14 - Silverlight

Silverlight
1. Informacin general sobre Silverlight

Microsoft Silverlight es una implementacin multiplataforma de .NET Framework que se puede ejecutar en
distintos exploradores para crear y proporcionar la nueva generacin de experiencias multimedia y
aplicaciones interactivas enriquecidas para la Web. Silverlight unifica las funciones del servidor, la Web y el
escritorio, del cdigo administrado y de los lenguajes dinmicos, de la programacin declarativa y la
tradicional, as como la eficacia de Windows Presentation Foundation (WPF).
Qu es Silverlight?
Silverlight permite crear aplicaciones de vanguardia con las siguientes caractersticas:
Es una tecnologa multiplataforma que se ejecuta en varios exploradores. Se ejecuta en todos los
exploradores web conocidos, como Microsoft Internet Explorer, Mozilla Firefox, Apple Safari y
Google Chrome, as como en Microsoft Windows y Apple Mac OS X.
Es una descarga pequea que se instala en pocos segundos.
Transmite los contenidos de audio y vdeo por secuencias. Ajusta el contenido de vdeo a todo tipo
de calidades, desde dispositivos mviles hasta exploradores de escritorio y modos de vdeo HDTV
de 720p.
Incluye grficos atractivos que los usuarios pueden manipular (arrastrar, girar y acercar o alejar)
directamente en el explorador.
Lee datos y actualiza la pantalla, pero no interrumpe al usuario al actualizar la pgina completa.
La aplicacin se puede ejecutar en el explorador web o se puede configurar de modo que los
usuarios puedan ejecutarla en su equipo (ejecucin fuera del explorador).
Aplicacin de Silverlight con grficos enriquecidos e interaccin con el usuario
Los desarrolladores web y diseadores de grficos pueden crear aplicaciones de Silverlight de diversas
maneras. Se puede utilizar el marcado de Silverlight para crear elementos multimedia y grficos y
manipularlos con lenguajes dinmicos y cdigo administrado. Silverlight tambin permite utilizar
herramientas de calidad profesional, como Visual Studio para la codificacin y Microsoft Expression Blend
para la esquematizacin y el diseo grfico.
Qu caractersticas tiene Silverlight?

Silverlight combina varias tecnologas en una sola plataforma de desarrollo que permite seleccionar las
herramientas y el lenguaje de programacin apropiados segn las necesidades del usuario. Silverlight ofrece
las caractersticas siguientes:
WPF y XAML. Silverlight incluye un subconjunto de la tecnologa Windows Presentation Foundation
(WPF), que extiende en gran medida los elementos en el explorador para crear la interfaz de
usuario. Silverlight permite crear grficos, animaciones y elementos multimedia fascinantes, as
como otras caractersticas de cliente enriquecidas, extendiendo la interfaz de usuario basada en
explorador ms all de lo que est disponible nicamente con HTML. El Lenguaje XAML
proporciona una sintaxis de marcado declarativa para crear elementos.
MCT: Luis Dueas Pag 1

Silverlight
Extensiones a JavaScript. Silverlight proporciona extensiones al lenguaje de scripting de explorador

universal que permiten controlar la interfaz de usuario del explorador, incluida la capacidad para
trabajar con elementos WPF.
Compatibilidad con varios exploradores y plataformas. Silverlight se ejecuta de la misma manera en
todos los exploradores conocidos (y en las plataformas conocidas). Es posible disear y desarrollar
aplicaciones sin tener que preocuparse del explorador o de la plataforma de los usuarios.
Integracin con aplicaciones existentes. Silverlight se integra perfectamente con el cdigo
JavaScript y ASP.NET AJAX existente de modo que complementa la funcionalidad ya creada.
Acceso al modelo de programacin de .NET Framework. Es posible crear aplicaciones de Silverlight
mediante lenguajes dinmicos, como IronPython, y lenguajes como C# y Visual Basic.
Compatibilidad de herramientas. Se pueden utilizar herramientas de desarrollo, como Visual Studio
y Expression Blend, para crear rpidamente aplicaciones de Silverlight.
Compatibilidad de red. Silverlight incluye compatibilidad con HTTP sobre TCP. Se puede conectar a
los servicios WCF, SOAP o ASP.NET AJAX y recibir datos XML, JSON o RSS. Adems, es posible
compilar clientes de multidifusin con Silverlight.
LINQ. Silverlight incluye Language Integrated Query (LINQ), que permite programar el acceso a
datos utilizando una sintaxis nativa intuitiva y objetos fuertemente tipados en los lenguajes de .NET
Framework.
Ejecutar aplicaciones de Silverlight

Para ejecutar una aplicacin de Silverlight, los usuarios requieren un pequeo complemento en su
explorador. Ese complemento es gratuito. Si los usuarios an no tienen el complemento, aparecer
automticamente un mensaje para indicarles que lo instalen. La descarga y la instalacin solo tardan unos
segundos y no requieren ninguna interaccin por parte del usuario, excepto su permiso para llevar a cabo la
instalacin.
Silverlight garantiza que las aplicaciones se pueden ejecutar en todos los exploradores modernos, sin tener
que crear cdigo especfico del explorador. Las aplicaciones de Silverlight se pueden ejecutar en el
explorador o fuera del mismo.
Crear aplicaciones de Silverlight

Es posible crear aplicaciones de Silverlight mediante cualquier lenguaje compatible con .NET Framework
(incluidos Visual Basic, C# y JavaScript). Visual Studio y Expression Blend permiten desarrollar aplicaciones
de Silverlight. Con Silverlight, se pueden crear pginas web con elementos HTML y WPF. Al igual que HTML,
XAML permite crear la interfaz de usuario de las aplicaciones basadas en web mediante una sintaxis
declarativa, pero XAML proporciona elementos mucho ms eficaces.
1.1. Lo Nuevo en Silverlight 4

Silverlight 4 incluye varias caractersticas nuevas que se basan en las sugerencias de los usuarios. En
este tema, se presentan algunas de las nuevas caractersticas y mejoras que incluye Silverlight 4.
Controles
Control RichTextBox
El control RichTextBox permite mostrar, escribir y modificar texto enriquecido. Es posible aplicar formato de
caracteres o de prrafos al texto, mostrar hipervnculos y agregar imgenes incorporadas.
Control Viewbox
El control Viewbox es un decorador de contenido que toma un elemento secundario y lo ajusta o lo escala
de acuerdo con el tamao de Viewbox.
Control WebBrowser
El control WebBrowser proporciona una superficie para mostrar contenido HTML cuando la aplicacin se
ejecuta fuera del explorador.

Silverlight
Control WebBrowserBrush
El control WebBrowserBrush se puede usar para mostrar el contenido HTML de un control WebBrowser. Por
ejemplo, se puede utilizar un control WebBrowserBrush para dibujar el relleno (Fill) de una forma, como
Rectangle, o el contenido de la geometra de una forma Path.
Ejecucin fuera del explorador

Compatibilidad de ejecucin fuera del explorador
Las aplicaciones que se ejecutan fuera del explorador admiten varias caractersticas que no estn
disponibles para las aplicaciones que se hospedan en un explorador, incluidas las siguientes:
Caractersticas de Window, incluidos el ajuste de tamao en tiempo de ejecucin, la capacidad para
permanecer siempre visible y un evento Closing que se puede cancelar.
Compatibilidad con la administracin de derechos digitales (DRM) sin conexin.
Hospedaje de HTML con el control WebBrowser.
Alertas emergentes con la clase NotificationWindow.
Compatibilidad con la confianza elevada.
Mayor compatibilidad con la depuracin de aplicaciones que se ejecutan fuera del explorador.
Aplicaciones de confianza
Es posible configurar aplicaciones de ejecucin fuera del explorador de modo que requieran confianza
elevada. Las aplicaciones de confianza pueden omitir algunas de las restricciones del espacio aislado de
seguridad de Silverlight e integrarse con la funcionalidad nativa. Por ejemplo, las aplicaciones que se
ejecutan fuera del explorador con confianza elevada pueden leer y escribir en los archivos ubicados en las
carpetas de usuario, y pueden usar el modo de pantalla completa sin restricciones de teclado.
Adems, las aplicaciones de confianza pueden obtener acceso a las API de Window que habilitan una
personalizacin completa de la ventana de la aplicacin que se ejecuta fuera del explorador. Por ejemplo,
las aplicaciones de confianza pueden ocultar la barra de ttulo y el borde de la ventana y proporcionar
elementos de interfaz de usuario personalizados para mover, cambiar de tamao o cerrar la ventana.
Las aplicaciones de confianza muestran una advertencia de seguridad a los usuarios antes de la instalacin.
Sin embargo, Silverlight admite la firma de las aplicaciones de confianza y muestra una advertencia ms
tranquilizadora para las aplicaciones con firmas comprobadas.
Enlace en tiempo de ejecucin
Ahora, Silverlight admite los enlaces en tiempo de ejecucin tanto en Visual Basic como en C#. Visual Basic
admite los enlaces en tiempo de ejecucin para las variables de tipo Object. C# admite los enlaces en
tiempo de ejecucin para las variables de tipo dynamic. De este modo, resulta ms fcil trabajar con los
objetos recuperados del DOM HTML o de las API de automatizacin.
Para que se admitan los enlaces en tiempo de ejecucin a los elementos del DOM HTML, la clase
ScriptObject implementa ahora la interfaz IDynamicMetaObjectProvider. Para que se admitan los enlaces en
tiempo de ejecucin a las API de automatizacin, se han agregado al marco de Silverlight la clase
AutomationFactory y clases relacionadas.
Multimedia
Cmara web y micrfono
Ahora, es posible capturar la entrada de origen del dispositivo de audio o de vdeo del usuario. El mtodo
CaptureImageAsync habilita un escenario de captura de pantalla simple y el mtodo VideoBrush.SetSource
habilita un escenario de reproduccin de vdeo simple. En escenarios ms avanzados, se puede obtener
acceso a los datos de audio o vdeo sin formato para procesarlos en formatos de archivo. Para las capturas
de cmara web y de micrfono, se usa una metfora de receptor para establecer una clase de agente de
escucha y, para obtener una captura, se requiere el permiso del usuario del cliente para obtener acceso al
dispositivo de captura.
DRM para escenarios sin conexin

Silverlight
Hay varias caractersticas nuevas integradas en la administracin de derechos digitales (DRM) de Silverlight
que se pueden utilizar para implementar escenarios sin conexin, como compras, descargas, alquileres y
suscripciones.
Varias transformaciones
Ahora, se puede utilizar la clase CompositeTransform para aplicar varias transformaciones al mismo objeto,
como sesgos y giros. Esta clase aplica varias transformaciones en un orden de preferencia y, en general, se
presta mejor para la aplicacin de varias transformaciones a un objeto que la clase TransformGroup.
Redes
Multidifusin
El espacio de nombres System.Net.Sockets ha agregado compatibilidad con los clientes de multidifusin
UDP. De este modo, los clientes de red podrn aprovechar las aplicaciones de multidifusin que usen ms
eficazmente los recursos de la red.
Recuperar la directiva de seguridad de sockets a travs de HTTP
En el caso de una solicitud de conexin mediante System.Net.Sockets, una aplicacin puede optar por
recuperar el archivo de directivas de los sockets a travs del protocolo HTTP en el puerto TCP 80 en lugar
del protocolo TCP personalizado en el puerto 943. Esto permite a los servidores HTTP que ya ejecutan
servicios HTTP autorizar las conexiones mediante sockets de las aplicaciones de Silverlight sin tener que
implementar un nuevo servicio TCP en el servidor ni abrir un puerto a travs de un firewall para el puerto
943. El archivo de directivas de los sockets se recupera a travs de HTTP usando como host la direccin IP
resuelta que es el destino de la conexin de socket. Esto da lugar a una directiva autoritativa en el nivel de
equipo para el destino que es necesaria para los recursos del equipo, como los sockets. En cambio, el
archivo de directivas que usan las clases HTTP y WebClient en el espacio de nombres System.Net se
recupera del dominio de host que es el destino de la solicitud HTTP. El protocolo HTTP permite aislar los
recursos segn el dominio a travs del encabezado Host.
Directiva de seguridad flexible para aplicaciones de confianza
El espacio de nombres System.Net.Sockets incluye compatibilidad con las restricciones de directivas de
seguridad flexibles que se aplican a las aplicaciones de confianza de ejecucin fuera del explorador que se
comunican mediante System.Net.Sockets.
Procesamiento de HTTP de cliente
Se han agregado varias caractersticas que se pueden usar cuando se opta por el procesamiento de HTTP de
cliente para las llamadas de conexin de red:
El encabezado Referer se enva con todas las solicitudes
Compatibilidad con la autenticacin bsica y NTLM
Compatibilidad con el almacenamiento en cach
Capacidad para habilitar o deshabilitar el almacenamiento en bfer de secuencias de las solicitudes
de lectura y escritura
El lmite de conexiones simultneas aumenta de 2 a 6
Impresin
Ahora, es posible imprimir la interfaz de usuario de una aplicacin de Silverlight mediante la clase
PrintDocument. PrintDocument permite mostrar al usuario un cuadro de dilogo de impresin e imprimir la
aplicacin o un elemento UIElement de la aplicacin.
Interfaz de usuario
Arrastrar y colocar
Silverlight 4 incluye varias API para admitir operaciones de arrastrar y colocar. Se puede seleccionar una lista
de archivos en aplicaciones fuera del rea de contenido de Silverlight, por ejemplo, Mis documentos en
Microsoft Windows. A continuacin, se puede arrastrar la lista de archivos seleccionada al rea de contenido
de Silverlight, controlar los eventos de colocacin en un elemento de destino concreto y, a continuacin,

Silverlight
procesar la lista de archivos mediante la informacin especificada por FileInfo, incluido el acceso al
contenido de los archivos a travs de secuencias. Para habilitarlo, hay que agregar el evento Drop as como
los eventos y propiedades relacionados a la clase UIElement base. Las clases de soporte, como
DragEventArgs, tambin van incluidas.
Acceso al Portapapeles
Silverlight 4 incluye varias API para admitir el acceso al objeto Clipboard. Se puede obtener o establecer la
informacin de texto Unicode en un objeto Clipboard compartido. Observe que ese acceso requiere el
permiso del usuario y se limita a los datos de texto Unicode. Hay restricciones adicionales, las cuales se
describen en el tema referente a Clipboard.
Eventos que se producen al hacer clic con el botn secundario del mouse
Silverlight 4 agrega los eventos MouseRightButtonDown y MouseRightButtonUp a la clase UIElement base.
Ahora, las aplicaciones pueden controlar los eventos que se producen al hacer clic con el botn secundario
del mouse y cambiar el comportamiento. De forma predeterminada, cuando el usuario hace clic con el
botn secundario en una aplicacin de Silverlight, se abre el cuadro de dilogo de configuracin de
Silverlight.
Comandos
En Silverlight 4, ButtonBase e Hyperlink admiten las propiedades Command y CommandParameter. La
propiedad Command puede hacer referencia a una implementacin de ICommand que procede del origen
de datos de un modelo de vista, a travs de {Binding}. El sistema de entrada de Silverlight interpretar el
comando en tiempo de ejecucin.
Estilos implcitos
Ahora, Style puede establecerse implcitamente. Los estilos implcitos permiten aplicar un estilo concreto a
todos los elementos de un tipo determinado.
Direccin de flujo de derecha a izquierda
Ahora, es posible establecer la direccin del contenido y del diseo de cada control de modo que fluya de
la derecha a la izquierda. Esto permite desarrollar aplicaciones de Silverlight en idiomas como el hebreo y el
rabe. La direccin de flujo se establece mediante la propiedad FlowDirection.
Compatibilidad con pantalla completa
Ahora, Silverlight permite a las aplicaciones permanecer en modo de pantalla completa cuando est activa
otra aplicacin.
Cambios en la API de elementos base
Adems de las caractersticas anteriores, los siguientes cambios realizados en DependencyObject, UIElement
y FrameworkElement pueden ser interesantes para los escenarios de la interfaz de usuario:
Ahora, la propiedad FrameworkElement.Cursor puede establecerse con las API del sistema de
propiedades.
FrameworkElement tiene un evento Unloaded.
Los eventos de texto para los editores de mtodos de entrada se admiten en el nivel de UIElement
de modo que se pueda aprovechar el enrutamiento.
Las llamadas al mtodo SetValue son ms coherentes con el comportamiento equivalente de WPF,
sobre todo en el caso de animaciones en ejecucin.
XAML
Silverlight 4 incluye un nuevo analizador de XAML como parte del runtime de Silverlight. El nuevo
analizador de XAML en Silverlight proporciona:
Mayor compatibilidad con el lenguaje XAML escrito originalmente para WPF.
Mayor compatibilidad con el lenguaje XAML definido en la especificacin [MS XAML].

Silverlight
Permite a las herramientas y otros consumidores de XAML integrar de manera ms predecible la

experiencia en tiempo de diseo del lenguaje XAML en Silverlight.
Para optimizar la compatibilidad con las aplicaciones de Silverlight 3, el runtime de Silverlight 4 incluye el
analizador de XAML de Silverlight 3. El analizador de XAML de Silverlight 3 se utiliza para cargar el XAML de
aplicaciones que tienen especficamente Silverlight 3 como destino. El nuevo analizador carga el XAML de
las aplicaciones cuyo destino es Silverlight 4. Los dos analizadores existen en paralelo.
Hay algunas diferencias entre el XAML de Silverlight y el XAML de WPF.
Data
Enlace de datos
Ahora, el enlace de datos de Silverlight admite las siguientes caractersticas:
Enlace a instancias de DependencyObject.
Enlace a indizadores de String.
Capacidad para especificar las opciones de formato de String a travs de la propiedad
StringFormat.
Capacidad para especificar los valores de presentacin predeterminados a travs de las
propiedades TargetNullValue y FallbackValue.
Capacidad para agrupar los elementos de coleccin a travs de la propiedad GroupDescriptions de
la clase CollectionViewSource.
Compatibilidad con la interfaz ICollectionViewFactory, que permite a las colecciones de entidades
de datos proporcionar implementaciones personalizadas de ICollectionView a las clases DataGrid y
CollectionViewSource.
Compatibilidad con una validacin compleja de varias propiedades de objetos enlazados que
implementan la interfaz IDataErrorInfo o INotifyDataErrorInfo. Esto incluye compatibilidad con estas
interfaces por parte del motor de enlaces y los controles de la interfaz de usuario, como DataGrid.
Una nueva clase DataServiceCollection(Of T) proporciona enlaces simplificados para los datos devueltos por
Servicios de datos de WCF. Esta clase hereda de la clase ObservableCollection(Of T) para actualizar
automticamente los datos enlazados cuando se producen cambios en los datos de los controles enlazados.
Servicios de datos de WCF
Se ha agregado la siguiente funcionalidad al cliente de Servicios de datos de WCF en esta versin de
Silverlight:
Una nueva clase DataServiceCollection(Of T) proporciona enlaces simplificados de los datos de los
servicios de datos a los controles de Silverlight. Esta clase hereda de la clase
ObservableCollection(Of T) para actualizar automticamente los datos enlazados cuando se
producen cambios en los datos de los controles enlazados.
Ahora, el cliente de Servicios de datos de WCF en Silverlight admite la ejecucin fuera del
explorador y la ejecucin entre dominios.
El cliente de Servicios de datos de WCF admite la siguiente nueva funcionalidad de Open Data Protocol
(OData) en esta versin de Silverlight:
Un servicio OData puede devolver nicamente el nmero total de los recursos representados por
un URI o incluir esta informacin referente al recuento de filas junto con los datos de los recursos
en una sola respuesta. El cliente de Servicios de datos de WCF para Silverlight se ha actualizado de
modo que se pueda obtener acceso a esta informacin referente al recuento de filas que va
incluida en la respuesta a una consulta de la aplicacin.
Un servicio de datos se puede configurar de modo que los recursos solicitados se devuelvan como
un conjunto de respuestas paginadas. El cliente de Servicios de datos de WCF para Silverlight se ha
actualizado de modo que permita administrar esas respuestas paginadas.

Silverlight
Ahora, los resultados de consulta devueltos por un servicio OData pueden proyectarse en tipos
definidos arbitrariamente. El cliente de Servicios de datos de WCF para Silverlight se ha actualizado
de modo que se admita la proyeccin mediante la clusula select (Select en Visual Basic) en una
consulta LINQ.
El cliente de Servicios de datos de WCF para Silverlight se ha actualizado de modo que sea posible
obtener y establecer las propiedades binarias como una secuencia de un servicio OData compatible
con los recursos multimedia.
Modelo de aplicaciones
Servicios RIA de WCF
Los servicios RIA de WCF simplifican el desarrollo de soluciones de n niveles para aplicaciones de Internet
enriquecidas (RIA), como las aplicaciones de Silverlight. Uno de los problemas comunes al desarrollar
soluciones RIA de n niveles es la coordinacin de la lgica de aplicacin entre el nivel intermedio y el nivel
de presentacin. Los servicios RIA resuelven este problema ya que proporcionan componentes de marco de
trabajo, herramientas y servicios que hacen que la lgica de aplicacin en el servidor est disponible para el
cliente de RIA sin tener que duplicar manualmente esa lgica de programacin. Los servicios RIA funcionan
con Silverlight 4 pero estn disponibles como una instalacin independiente.
Extensibilidad de la navegacin
Es posible extender la navegacin de Silverlight para admitir la resolucin arbitraria de los identificadores
URI. Por ejemplo, se pueden implementar extensiones de navegacin para la redireccin de los
identificadores URI, la generacin de pginas dinmicas y la descarga a peticin de pginas del servidor.
Las clases NavigationService y Frame tambin proporcionan un mtodo Refresh. Este mtodo resulta til en
el caso de usar extensiones de navegacin que pueden proporcionar contenido diferente para el mismo
identificador URI segn las interacciones con el usuario en una pgina determinada. Por ejemplo, esto
habilita algunos escenarios de navegacin con pginas que requieren la autenticacin del usuario.
Dynamic Language Runtime
Dynamic Language Runtime (DLR) es un nuevo entorno en tiempo de ejecucin que agrega a CLR un
conjunto de servicios para lenguajes dinmicos. Para admitir DLR, se ha agregado el nuevo espacio de
nombres System.Dynamic a .NET Framework y se han extendido los rboles de expresin con nuevos tipos
que representan el flujo de control, como LoopExpression y TryExpression.
Principal
Clases de coleccin
La nueva interfaz ISet(Of T) permite la abstraccin de los conjuntos. Los conjuntos son colecciones que
tienen elementos nicos y operaciones especficas. La clase HashSet(Of T), que ahora est disponible para
las aplicaciones basadas en Silverlight, implementa la interfaz ISet(Of T).
Tuplas
Silverlight 4 proporciona la clase Tuple para crear objetos de tupla que contienen datos estructurados.
Tambin proporciona clases de tupla genricas que tienen de uno a siete parmetros de tipo para
representar singletons, pares, triples, cudruplos, etc. Para admitir objetos de tupla con nueve o ms
componentes, hay una clase de tupla genrica que tiene siete parmetros de tipo y un octavo parmetro de
cualquier tipo de tupla.
Analizar y dar formato a los intervalos de tiempo
Para admitir un formato que tiene en cuenta la referencia cultural, ahora la estructura TimeSpan implementa
la interfaz IFormattable e incluye nuevas sobrecargas de los mtodos ToString, Parse, TryParse, ParseExact y
TryParsExact. Sus mtodos de formato y de anlisis tambin admiten cadenas de formato estndar y
personalizado.
Otras caractersticas bsicas
En la lista siguiente, se describen las nuevas capacidades y mejoras que se han agregado a Silverlight.
Algunas de ellas estn basadas en sugerencias de los clientes.

Silverlight
El nuevo mtodo String.IsNullOrWhiteSpace indica si una cadena es nula, est vaca o consta solo
de caracteres de espacio en blanco. Se han agregado nuevas sobrecargas a los mtodos String.Join
y String.Concat, que concatenan los miembros de colecciones
System.Collections.Generic.IEnumerable(Of T).
El mtodo String.Concat permite concatenar todos los elementos de una coleccin enumerable sin
convertir primero los elementos en cadenas.
El mtodo StringBuilder.Clear permite borrar con mayor facilidad una instancia de StringBuilder.
El nuevo mtodo Enum.HasFlag determina si uno o ms campos o marcas de bits estn
establecidos en un valor de enumeracin. El mtodo Enum.TryParse devuelve un valor booleano
que indica si una cadena o un valor entero se pudo analizar correctamente.
Las aplicaciones de confianza pueden utilizar las nuevas sobrecargas del mtodo Path.Combine que
permiten combinar rutas de acceso a archivos.
Los nuevos mtodos de enumeracin de archivos pueden mejorar el rendimiento de las
aplicaciones de confianza que obtienen acceso a directorios o que iteran por las lneas de archivos
de gran tamao. Solo se puede obtener acceso a los directorios y archivos ubicados en Mis
documentos.
Ahora puede habilitar la inicializacin diferida para cualquier tipo personalizado ajustando el tipo
dentro de una clase System.Lazy(Of T).
La nueva sobrecarga del mtodo Monitor.Enter(Object, Boolean) toma una referencia booleana y la
establece de forma atmica en true solo si se entra correctamente en el monitor.
Ahora, la estructura System.Guid contiene los mtodos TryParse y TryParseExact.
Silverlight Designer
En Visual Studio 2010, se han realizado varias mejoras del diseador para ayudar a crear aplicaciones de
Silverlight. En Visual Studio 2008, la compatibilidad del diseador con los proyectos de Silverlight era
limitada. Ahora, en Visual Studio 2010, se pueden realizar tareas, como seleccionar y colocar elementos con
el mouse en la superficie de diseo as como establecer propiedades en la ventana Propiedades.
Compatibilidad con la plataforma Windows Phone

Ahora, Silverlight es compatible con la serie Windows Phone 7 en Community Technology Preview (CTP).
1.2. Gua Bsica de Silverlight

En este tema se proporciona una introduccin a las caractersticas principales para desarrollar una aplicacin
basada en Silverlight. Se incluyen los pasos comunes para crear una aplicacin basada en Silverlight con
ejemplos de cdigo para que empiece a familiarizarse con la escritura de cdigo.
Requisitos previos
Puede ejecutar todos los ejemplos de este tema sin necesidad de instalar nada, salvo el motor en tiempo de
ejecucin de Silverlight 4. Sin embargo, si desea compilar o modificar los ejemplos, necesitar Silverlight
Tools y un proyecto de trabajo de Silverlight.
En este tema se usa la API administrada para Silverlight. Tambin puede desarrollar aplicaciones basadas en
Silverlight utilizando la API de JavaScript para Silverlight.
Integrar Silverlight en aplicaciones

Una aplicacin basada en Silverlight es el contenido cargado por el complemento Silverlight en una pgina
HTML. El complemento Silverlight puede rellenar la pgina HTML completa o simplemente parte del
espacio. De forma predeterminada, el proyecto de Visual Studio permite al complemento ocupar el 100%
del ancho y del alto de la pgina.
Si solamente desea usar Silverlight para parte de la aplicacin, es posible que desee realizar llamadas en la
pgina HTML desde el cdigo de Silverlight y viceversa.
XAML
XAML es un lenguaje de marcado declarativo que puede usar para definir los elementos de la interfaz de
usuario de la aplicacin basada en Silverlight. Al crear un nuevo proyecto de Visual Studio, se crea

Silverlight
automticamente un archivo Page.xaml. En el archivo de XAML, puede crear objetos y definir sus
propiedades mediante etiquetas y atributos XML.
A continuacin se muestra una instruccin XAML simple que crea un rectngulo rojo.
<Rectangle Fill="Red" Width="150" Height="100"/>
En el ejemplo anterior, se generan unos resultados similares a la siguiente ilustracin.
Puede crear todas las interfaces de usuario en XAML, usar la superficie de diseo de Visual Studio o puede
usar Microsoft Expression Blend para disear la aplicacin. Expression Blend es una herramienta de
diseador con una superficie de diseo WYSIWYG que sirve para crear aplicaciones basadas en Silverlight.
Expression Blend genera un archivo de XAML que es posible modificar directamente. Tambin es posible
enlazar eventos y escribir cdigo subyacente con Expression Blend.
Diseo
Al crear una aplicacin basada en Silverlight, una de las primeras decisiones que tendr que tomar ser
cmo organizar la interfaz de usuario. Silverlight proporciona 3 paneles de diseo al usuario. El panel
predeterminado es Grid, que es el panel de diseo ms flexible y eficaz.
Contenedor Descripcin
Canvas Coloque los elementos secundarios en posiciones absolutas en el espacio x,y.
Coloque los elementos secundarios en posiciones relativas entre s en pilas horizontales o
StackPanel
verticales.
Grid Coloque los elementos secundarios en filas y columnas.
En el ejemplo siguiente, se coloca un elemento Rectangle en la celda 1,1 de una cuadrcula. La cuadrcula
usa un ndice de base cero, de modo que el rectngulo se muestra en la celda inferior derecha.
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/>
</Grid>
Controles
Los controles de Silverlight permiten hospedar contenido u otros controles y pueden disearse de modo
que muestren los cambios de estado del usuario. Los controles varan en funcionalidad de elementos que

Silverlight
permiten la interaccin del usuario, como Button o TextBox, a elementos que admiten un diseo complejo
de la informacin, como DataGrid.
Silverlight incluye plantillas predeterminadas para cada control que afectan al aspecto del control. No
obstante, es posible crear plantillas personalizadas para cambiar el aspecto y el comportamiento visual de
todos los controles.
En el ejemplo siguiente se toma el ejemplo anterior y se agrega un botn a la celda 0,0 de la cuadrcula.
<ColumnDefinition/>
<ColumnDefinition/>
<RowDefinition/>
<RowDefinition/>
<Button Height="25" Width="100" Grid.Column="0" Grid.Row="0"/>
<Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/>
</Grid>
Agregar lgica de cdigo

De forma predeterminada, el proyecto de Visual Studio incluye un archivo de cdigo, que tambin se
denomina archivo de cdigo subyacente. El archivo de cdigo contiene uno de los lenguajes administrados
admitidos por Silverlight a travs de Common Language Runtime (CLR), como C# o Visual Basic.
Para el nombre del archivo de cdigo subyacente se toma la cadena Page.xaml y se anexa el tipo de
lenguaje (por ejemplo, Page.xaml.cs). El archivo de cdigo subyacente es el lugar donde puede aplicarse
lgica a los objetos de XAML. Es posible crear objetos de interfaz de usuario en el cdigo y agregarlos al
rbol de elementos visibles. Adems, puede obtenerse acceso desde XAML a las clases creadas en el archivo
de cdigo subyacente (y en cualquier archivo de cdigo incluido en el proyecto). Por ejemplo, puede definir
sus propios controles y, a continuacin, crear instancias de ellos en XAML.
En el ejemplo siguiente se agrega un controlador de eventos Click que cambiar el color del rectngulo a
azul.
En XAML, agregue el evento Click a Button y un atributo x:Name a Rectangle. x:Name permite hacer
referencia al rectngulo en el archivo de cdigo subyacente.
<Button Height="25" Width="100" Grid.Column="0" Grid.Row="0" Click="Button_Click"/>
<Rectangle x:Name="rect1" Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/>
En el archivo de cdigo subyacente, defina el controlador de eventos Click.

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
rect1.Fill = New SolidColorBrush(Colors.Blue)
End Sub

Silverlight
Lenguajes dinmicos
Silverlight Tools para Visual Studio incluye Dynamic Language Runtime (DLR), que permite a los usuarios de
lenguajes dinmicos, como Python y Ruby, escribir aplicaciones basadas en Silverlight. Los lenguajes
dinmicos se empaquetan como cdigo fuente, no se compilan en ensamblados, y el cdigo puede
generarse y compilarse en tiempo de ejecucin. Resultan apropiados para un estilo de desarrollo flexible e
interactivo. Silverlight incluye tres lenguajes dinmicos: IronPython, IronRuby y JScript administrado.
Grficos
Silverlight proporciona muchas opciones para agregar caractersticas visuales interesantes a la aplicacin.
Puede usar dibujos, formas, rutas y geometras complejas. Las reas definidas por geometras pueden
rellenarse con efectos, como imgenes, degradados de color o clips de vdeo, mediante el uso de pinceles.
Puede transformar grficos y otros objetos en la pantalla (por ejemplo, girarlos o inclinarlos). Incluso puede
aplicar efectos 3D.
Puede agregar imgenes y efectos de imagen a la aplicacin. Silverlight tambin incluye Deep Zoom, que
permite hacer zoom y panormicas con facilidad de imgenes de gran detalle.
En el ejemplo siguiente el rectngulo se rellena con un pincel de degradado lineal.
<Rectangle x:Name="rect1" Width="150" Height="100" Grid.Column="1" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Offset="0" Color="LightBlue"/>
<GradientStop Offset="0.4" Color="Blue"/>
<GradientStop Offset="0.8" Color="Purple"/>
<GradientStop Offset="1.0" Color="Lavender"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Multimedia y animacin
Adems de grficos estticos, puede agregar animaciones, audio y vdeo a la aplicacin para hacerla ms
dinmica e interactiva.

Silverlight
En el ejemplo siguiente se aumenta y se reduce el tamao del rectngulo del ejemplo anterior hasta que se
hace clic en el botn Detener.
<ColumnDefinition/>
<ColumnDefinition/>
<RowDefinition/>
<RowDefinition/>
<Grid.Resources>
<Storyboard x:Name="AnimateRectangle">
<DoubleAnimation Storyboard.TargetName="rect1"
Storyboard.TargetProperty="Height"
From="0" To="100" AutoReverse="True" Duration="0:0:02"
RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="rect1"
Storyboard.TargetProperty="Width"
From="0" To="100" AutoReverse="True" Duration="0:0:04"
RepeatBehavior="Forever"/>
</Storyboard>
</Grid.Resources>
<Button Height="25" Width="100"
Grid.Column="0" Grid.Row="0"
Content="Stop"
Click="Button_Click"/>
<Rectangle x:Name="rect1" Width="150" Height="100" Grid.Column="1" Grid.Row="1" Loaded="OnLoaded">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Offset="0" Color="LightBlue"/>
<GradientStop Offset="0.4" Color="Blue"/>
<GradientStop Offset="0.8" Color="Purple"/>
<GradientStop Offset="1.0" Color="Lavender"/>
</Rectangle.Fill>
</Rectangle>
<Button Height="25" Width="100"
Grid.Column="0" Grid.Row="1"
Content="Start"
Click="Button_Click_1"/>
</Grid>
Private Sub OnLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)

AnimateRectangle.Begin()
End Sub

AnimateRectangle.Pause()
End Sub
Private Sub Button_Click_1(ByVal sender As Object, ByVal e As RoutedEventArgs)

AnimateRectangle.[Resume]()
End Sub
Data
Muchas aplicaciones basadas en Silverlight trabajan con datos. Puede mostrar conjuntos de datos utilizando
controles como DataGrid y ListBox. Para rellenar la interfaz de usuario, puede usar Enlace de datos. Si enlaza
la interfaz de usuario al objeto de datos, las actualizaciones del objeto se propagarn automticamente a la
interfaz de usuario.
Los datos incluidos en la aplicacin pueden proceder de varios orgenes, como una fuente RSS, pero suelen
estar en formato XML. Silverlight incluye XmlReader y LINQ para analizar los datos XML. LINQ resulta ms
adecuado cuando se analizan fragmentos de datos ms pequeos.
Redes
Silverlight proporciona varias caractersticas para comunicarse en la nube. La clase WebClient controla la
descarga de contenido en el cliente. Tambin puede usar WebClient para enviar y recibir mensajes XML sin
formato. Las aplicaciones basadas en Silverlight tambin pueden obtener acceso a servicios Web, como
Windows Communication Foundation (WCF), SOAP y ASP.NET AJAX.

Silverlight
Ejecutar la aplicacin de Silverlight fuera del explorador

Adems de distribuir la aplicacin basada en Silverlight en lnea, tambin puede configurarla para que los
usuarios puedan instalarla desde un sitio web y, despus, ejecutarla en su equipo fuera del explorador web.
1.3. Arquitectura de Silverlight

En este tema se describen la arquitectura y los componentes esenciales de Microsoft Silverlight. Silverlight
es no solo un lienzo atractivo donde mostrar a los usuarios finales contenidos web y multimedia
enriquecidos e interactivos. Tambin es una plataforma eficaz y, a la vez, ligera, donde desarrollar
aplicaciones porttiles, multiplataforma en red que integran datos y servicios de numerosos orgenes.
Adems, Silverlight permite generar interfaces de usuario que mejorarn de manera significativa la
experiencia del usuario final tpico, en comparacin con las aplicaciones web tradicionales.
Aunque Silverlight parece simple y de tamao compacto cuando se considera como un entorno en tiempo
de ejecucin del lado cliente, la plataforma de desarrollo de Silverlight integra diversas caractersticas y
tecnologas complejas, que pone a disposicin de los programadores. Los programadores necesitan
conocimientos prcticos de la arquitectura de la plataforma para poder crear aplicaciones efectivas basadas
en Silverlight.
Nota:
Silverlight admite dos modelos de programacin: la API de JavaScript para Silverlight y la API administrada
para Silverlight. La API administrada se basa en un subconjunto de .NET Framework. Muchas de las
caractersticas que se mencionan en este artculo son nicamente compatibles con la API administrada.
Plataforma de Silverlight
La plataforma de Silverlight en su conjunto se compone de dos partes principales, adems de un
componente de instalador y actualizacin, tal y como se describe en la siguiente tabla.
Componente Descripcin
Componentes y servicios orientados a la interfaz de usuario y la interaccin con el
usuario, incluidos los datos proporcionados por el usuario, controles de interfaz de
Marco de trabajo
usuario ligeros para su uso en las aplicaciones web, reproduccin de elementos
de presentacin
multimedia, administracin de derechos digitales, enlaces de datos; y caractersticas de
bsico
presentacin, incluidos grficos vectoriales, texto, animaciones e imgenes. Tambin
incluye el lenguaje XAML para especificar el diseo.
Subconjunto de .NET Framework que contiene componentes y bibliotecas, que incluyen
integracin de datos, controles de Windows extensibles, funciones de red, bibliotecas de
clases base, recoleccin de elementos no utilizados y CLR (Common Language Runtime).
Algunas partes de .NET Framework para Silverlight se implementan con la aplicacin.

.NET Framework
Estas "bibliotecas de Silverlight" son ensamblados que no se incluyen en el motor en
para Silverlight
tiempo de ejecucin de Silverlight, sino que se distribuyen en el SDK de Silverlight.
Cuando se utilizan bibliotecas de Silverlight en la aplicacin, se empaquetan con esta
ltima y se descargan al explorador. Incluyen las de nuevos controles de interfaz de
usuario, XLINQ, distribucin (RSS/Atom), serializacin XML y DLR (Dynamic Language
Runtime).
Componente de Control de instalacin y actualizacin que simplifica el proceso de instalar la aplicacin
instalador y para los usuarios noveles y, a continuacin, proporciona actualizaciones automticas de
actualizacin bajo impacto.
En la ilustracin siguiente se muestran estos componentes de la arquitectura de Silverlight, junto con los
componentes y servicios relacionados.

Silverlight
Arquitectura de Silverlight
El conjunto combinado de herramientas, tecnologas y servicios que se incluyen en la plataforma de

Silverlight encierra un valor concreto: facilita a los programadores la tarea de crear aplicaciones enriquecidas
e interactivas en red. Aunque no cabe duda de que es posible generar este tipo de aplicaciones mediante
las herramientas y tecnologas web de hoy, el trabajo de los programadores se ve ralentizado por las
numerosas dificultades tcnicas, tales como plataformas incompatibles, protocolos y formatos de archivo
dispares, y diversidad de exploradores web que presentan las pginas y administran los scripts de manera
diferente. Una aplicacin web enriquecida que se ejecuta perfectamente en una combinacin de sistema y
explorador puede funcionar de manera muy distinta, e incluso no funcionar en absoluto, en otro sistema u
otro explorador. Con la gran variedad actual de herramientas, protocolos y tecnologas, constituye un
esfuerzo titnico y, con frecuencia, econmicamente prohibitivo, generar una aplicacin que puede
proporcionar al mismo tiempo las ventajas siguientes:
Capacidad para crear la misma experiencia del usuario en la totalidad de exploradores y
plataformas, de tal forma que la aplicacin presente la misma apariencia y el mismo
funcionamiento en todos ellos.
Integracin de datos y servicios procedentes de diversas ubicaciones de red en una misma
aplicacin mediante las clases y funcionalidades conocidas de .NET Framework.
Una interfaz de usuario rica en elementos multimedia, atractiva y accesible.
Silverlight facilita a los desarrolladores la labor de crear este tipo de aplicaciones, porque supera
muchas de las incompatibilidades actuales entre las tecnologas y proporciona, dentro de una
misma plataforma, las herramientas necesarias para crear aplicaciones enriquecidas,
multiplataforma e integradas.
Componentes de presentacin bsicos

Las caractersticas de presentacin bsicas de la plataforma Silverlight, mostradas en la seccin e ilustracin
anteriores, se describen en la tabla siguiente.
Caracterstica Descripcin
Administra datos de entrada procedentes de distintos dispositivos de
Entrada
hardware, como los de dibujo, el teclado y el mouse, y otros.
Representacin de la interfaz
Representa grficos vectoriales y de mapa de bits, animaciones y texto.
de usuario

Silverlight
Permite la reproduccin y administracin de varios tipos de archivos de audio

Multimedia
y vdeo, como los archivos .WMP y .MP3.
Permite acercar imgenes de alta resolucin y realizar un movimiento
Deep Zoom
panormico alrededor de las mismas.
Admite controles extensibles que se pueden personalizar aplicando estilos y
Controles
plantillas.
Diseo Permite la colocacin dinmica de los elementos de la interfaz de usuario.
Permite la vinculacin de objetos de datos y elementos de la interfaz de
Enlace de datos
usuario.
DRM Permite la administracin de derechos digitales de los recursos multimedia.
XAML Proporciona un analizador para el marcado XAML.
Los programadores pueden interactuar con este marco de trabajo de presentacin utilizando XAML para
especificar los detalles de presentacin. XAML constituye el punto primario de interaccin entre .NET
Framework y la capa de la presentacin. Los programadores pueden manipular la capa de presentacin
mediante programacin con cdigo administrado.
.NET Framework para Silverlight.

En la tabla siguiente se describe una lista parcial de las caractersticas de .NET Framework para Silverlight
mostradas en la ilustracin anterior.
Admite las caractersticas de LINQ (Language-Integrated Query) y de LINQ to XML,
que facilitan el proceso de integrar datos procedentes de orgenes dispares y
Data
trabajar con ellos. Tambin admite el uso de las clases de serializacin y XML para
administrar los datos.
Un conjunto de bibliotecas de .NET Framework que proporcionan las funciones de
Biblioteca de clases
programacin esenciales, como la administracin de cadenas, expresiones
base
regulares, entrada y salida, reflexin, colecciones y globalizacin.
Proporciona caractersticas para simplificar el acceso a los servicios y datos
Windows remotos. Esto incluye un objeto de explorador, un objeto de solicitud y respuesta
Communication HTTP, compatibilidad con solicitudes HTTP entre dominios, compatibilidad con
Foundation (WCF) fuentes de distribucin RSS/Atom as como compatibilidad con los servicios JSON,
POX y SOAP.
CLR (Common Proporciona administracin de memoria, recoleccin de elementos no utilizados,
Language Runtime) comprobacin de seguridad de tipos y control de excepciones.
Controles de WPF Proporciona un conjunto enriquecido de controles, como son Button, Calendar,
(Windows Presentation CheckBox, DataGrid, DatePicker, HyperlinkButton, ListBox, RadioButton y
Foundation) ScrollViewer.
Admite la compilacin y ejecucin dinmicas de lenguajes de scripting como
DLR (Dynamic JavaScript y IronPython para programar aplicaciones basadas en Silverlight. Incluye
Language Runtime) un modelo conectable que aporta compatibilidad con otros lenguajes para su uso
con Silverlight.
.NET Framework para Silverlight es un subconjunto de la plataforma .NET Framework completa. Proporciona
los fundamentos del desarrollo robusto y orientado a objetos para tipos de aplicaciones (como las de
Internet) que tradicionalmente no contaban con este tipo de recursos.
Los desarrolladores pueden interactuar con la capa de .NET Framework para Silverlight escribiendo cdigo
administrado en C# y Visual Basic. Los desarrolladores de .NET Framework tambin pueden tener acceso a
la capa de presentacin creando sus aplicaciones en Visual Studio o Microsoft Expression Blend.
Caractersticas de programacin adicionales de Silverlight

Silverlight proporciona varias caractersticas adicionales que ayudan a los programadores a crear
aplicaciones enriquecidas e interactivas, incluidas las descritas en la tabla siguiente.

Silverlight
Proporciona acceso seguro del cliente de Silverlight al sistema de archivos del

Almacenamiento
equipo local. Permite el almacenamiento local y el almacenamiento en cach de
aislado
datos aislados para un usuario determinado.
Programacin Un subproceso de trabajo de segundo plano lleva a cabo tareas de programacin,
asincrnica mientras la aplicacin queda libre para interactuar con el usuario.
Administracin de Proporciona un cuadro de dilogo Abrir archivo seguro, a fin de facilitar el proceso
archivos de crear cargas de archivo seguras.
Permite a los programadores de .NET Framework manipular directamente los
Interaccin entre elementos de la interfaz de usuario en el DOM HTML de una pgina web. Los
HTML y cdigo programadores web tambin pueden utilizar JavaScript para efectuar llamadas
administrado directas al cdigo administrado y tener acceso a los objetos, propiedades, eventos y
mtodos que admiten el uso de scripts.
Serializacin Proporciona soporte tcnico para la serializacin de los tipos CLR a JSON y XML.
Proporciona la clase Application y herramientas de compilacin para crear paquetes
Empaquetar .xap. El paquete .xap contiene la aplicacin y el punto de entrada para que se ejecute
el control del complemento Silverlight.
Las clases XmlWriter y XmlReader simplifican el trabajo con los datos XML de los
Bibliotecas XML servicios Web. La caracterstica XLinq permite a los desarrolladores consultar los
datos XML directamente en los lenguajes de programacin de .NET Framework.
Herramientas y tecnologas relacionadas

Las aplicaciones de Microsoft siguientes incluyen caractersticas especiales para el desarrollo en Silverlight:
Microsoft Expression Blend. Esta herramienta se puede utilizar para crear y modificar la capa de
presentacin de una aplicacin; para ello, permite manipular el lienzo y los controles XAML, trabajar
con grficos y programar la capa de presentacin mediante un lenguaje dinmico, como JavaScript.
Visual Studio. Visual Studio 2010 proporciona compatibilidad de diseo visual para crear
aplicaciones de Silverlight. Para construir las interfaces de usuario de las aplicaciones, arrastre los
controles del Cuadro de herramientas y establezca las propiedades en la ventana Propiedades.
Tambin puede editar directamente XAML en la vista XAML.
Dado que las aplicaciones basadas en Silverlight se ejecutan en un entorno de tiempo de ejecucin en el
equipo cliente, no es necesario que haya ninguna aplicacin concreta instalada en el servidor. Sin embargo,
puede que los programadores observen que su capacidad de crear aplicaciones enriquecidas que integran
en el servidor servicios y datos procedentes de diversos orgenes mejora con la integracin de los tipos
siguientes de servicios y aplicaciones de servidor en sus aplicaciones basadas en Silverlight:
ASP.NET AJAX. Incluye un conjunto de controles, servicios y bibliotecas para crear aplicaciones ricas
e interactivas basadas en web.
Servicios de Microsoft Windows Communication Foundation (WCF).
Servidores de Internet, incluidos Microsoft Internet Information Services (IIS) y el servidor web
Apache.
Aplicaciones y servicios basados en Internet, como Microsoft ASP.NET, PHP, servicios de
transmisin multimedia por secuencias de Windows, servicios de Windows Live y otros servicios
Web abiertos.
1.4. Sistemas operativos y exploradores compatibles

Las aplicaciones basadas en Silverlight son multiplataforma y se ejecutan en la mayora de los exploradores
web modernos.
1.5. Asegurar que las aplicaciones de Silverlight funcionan con Silverlight 4

De Silverlight 3 a Silverlight 4, se han realizado varios cambios en el runtime de Silverlight y Silverlight Tools.
Para estos cambios, se aplican los siguientes principios:

Silverlight
La mayora de las aplicaciones de Silverlight 3 funcionarn con Silverlight 4 sin ningn cambio.
Cuando se requieren cambios importantes, Silverlight intentar mantener la compatibilidad con el
comportamiento anterior y con el comportamiento nuevo mediante un modo quirks.
No obstante, es posible que algunos cambios realizados en los componentes de Silverlight generen un error
en las aplicaciones basadas en Silverlight anteriores (tiempo de compilacin, tiempo de carga de XAML o
posiblemente tiempo de diseo) o hagan que dichas aplicaciones tengan un comportamiento distinto.
En este tema, se describen los cambios realizados en Silverlight 4 con respecto a Silverlight 3. No se
describen las nuevas caractersticas ni mejoras de Silverlight 4
Este tema contiene las siguientes secciones:
Cambios en el analizador de XAML En esta seccin, se describen los cambios realizados en el
analizador de XAML de Silverlight 4.
Cambios importantes desde Silverlight 3 En esta seccin, se describen los cambios que podran
interrumpir las aplicaciones escritas para Silverlight 3 que los usuarios ejecutan en el runtime de
Silverlight 4, incluso cuando el manifiesto de aplicacin tiene como destino Silverlight 3.
Comportamiento en modo quirks En esta seccin, se describen las diferencias de
comportamiento del runtime o de su API que son especficas de la versin. Estas diferencias de
comportamiento se basan en la versin del runtime que la aplicacin tiene como destino. En
muchas ocasiones, los cambios representan correcciones de errores que se han introducido en
Silverlight 4, pero el comportamiento de Silverlight 3 sigue siendo accesible como un modo quirks
especfico, que se utiliza nicamente cuando la aplicacin tiene como destino un runtime de
Silverlight 3. Esto es as por si la lgica de la aplicacin se basa en el comportamiento de
Silverlight 3.
Cambios importantes en la actualizacin En esta seccin, se describen los cambios que se aplican
cuando se recompila una aplicacin de Silverlight 3 y el destino previsto es Silverlight 4.
Cambios importantes desde la versin Beta de Silverlight 4 En esta seccin, se describen los
cambios que se aplican nicamente a las aplicaciones compiladas especficamente para la versin
Beta de Silverlight 4, que es la ltima versin pblica del runtime de Silverlight. No hay modo
quirks para el comportamiento de la versin Beta de Silverlight 4.
Cambios en el analizador de XAML

Silverlight 4 incluye un analizador de XAML actualizado. Para mantener la compatibilidad, el runtime de
Silverlight 4 tambin incluye el analizador de XAML original de Silverlight 3 y lo utiliza para analizar el
cdigo XAML de cualquier aplicacin que tenga como destino Silverlight 3. Esto significa que si el destino
sigue siendo Silverlight 3, cualquier comportamiento de XAML original que haya funcionado para
Silverlight 3 seguir funcionando, siempre y cuando el comportamiento de XAML no interfiera con los
cambios importantes especficos que se describen en la seccin "Cambios importantes en la actualizacin".
Esto tiene un resultado similar a un modo quirks para la carga de XAML.
Si se actualiza un proyecto de Silverlight que tiene como destino Silverlight 3 de modo que su destino pase
a ser Silverlight 4, es posible que haya que realizar cambios en el cdigo XAML. Si se actualiza un proyecto
de la versin Beta de Silverlight 4, es posible que haya que realizar cambios en el cdigo XAML. El
comportamiento del analizador de XAML de la versin Beta de Silverlight 4 es en gran medida similar al del
analizador de XAML de Silverlight 3.
Las diferencias de comportamiento de XAML que pueden afectar al cdigo XAML de la aplicacin son
demasiado extensas como para enumerarlas aqu, por lo que estn documentadas en otros temas.
Cambios importantes desde Silverlight 3

Los cambios descritos en esta seccin podran interrumpir las aplicaciones de Silverlight 3. En realidad,
muchos de estos cambios son correcciones de errores. No obstante, si ha agregado soluciones alternativas
a una aplicacin de Silverlight 3 para estos errores, es posible que tenga que quitarlas para que la aplicacin
funcione correctamente cuando se ejecute en el runtime de Silverlight 4.

Silverlight
Excepcin AmbiguousMatchException del analizador de XAML cuando una

propiedad de la aplicacin est en conflicto con una nueva propiedad de
Silverlight 4
El analizador de XAML de Silverlight (en concreto, el analizador de XAML en paralelo que administra la
compatibilidad) produce una excepcin AmbiguousMatchException si se establece una propiedad en XAML
y hay dos propiedades diferentes con el mismo nombre sencillo. Esto puede suceder si una posible
coincidencia de propiedad y nombre es miembro de la clase base y la otra es miembro de la clase derivada.
En el momento de compilar la aplicacin en el ncleo de Silverlight 3, quizs solo exista la propiedad
definida por la aplicacin. Sin embargo, si una versin posterior de Silverlight (por ejemplo, Silverlight 4)
agrega una propiedad con el mismo nombre sencillo y esa propiedad existe en las definiciones de miembro
del runtime bsico que heredan a travs de la nueva definicin de clase base, el analizador de XAML
considerar que el nombre de la propiedad es ambiguo.
Por ejemplo, una aplicacin de Silverlight 3 podra derivar de TextBox y declarar una nueva propiedad
accesible a travs de XAML denominada Watermark en la clase personalizada. En Silverlight 3, TextBox no
tiene una propiedad denominada Watermark, por lo que el XAML de la aplicacin se analiza en Silverlight 3
sin ningn tipo de ambigedad de nombres. Sin embargo, la definicin de TextBox en las bibliotecas
bsicas de Silverlight 4 introduce una propiedad denominada Watermark, por lo que el proceso de
bsqueda en XAML de Silverlight 3 de un nombre de propiedad simple da lugar a ambigedad cuando se
realiza en el runtime bsico de Silverlight 4.
Este problema afecta nicamente al uso de XAML; el uso de propiedades en cdigo no es ambiguo. El
problema surge nicamente si hay una relacin de subclase/superclase entre los dos tipos que definen la
propiedad. Por ejemplo, la propiedad MyButton.Watermark no sera un problema porque MyButton no es
una subclase de TextBox.
Este problema afecta solamente a las aplicaciones compiladas en Silverlight 2 y Silverlight 3. Las aplicaciones
de Silverlight 4 utilizan un nuevo analizador de XAML que es capaz de resolver correctamente esta variante
de la ambigedad de nombres. Este mismo problema con el analizador de XAML surge en un verdadero
runtime de Silverlight 3; si una aplicacin de Silverlight 2 define y utiliza un nombre de propiedad que se
agreg en Silverlight 3, se produce una excepcin AmbiguousMatchException.
En la siguiente seccin figuran las propiedades que se han agregado en Silverlight 4 a las clases base
comunes (DependencyObject, UIElement, FrameworkElement, Control y subclases de Control en
System.Windows.dll). Cada una de ellas representa un nombre de propiedad que podra dar lugar a una
ambigedad de nombres en una subclase.
FrameworkElement.FlowDirection
FrameworkElement.Unloaded
API para arrastrar y colocar (AllowDrop, DragEnter, DragLeave, DragOver, Drop)
API de manipulacin (ManipulationCompleted, ManipulationDelta, ManipulationStarted)
UIElement.MouseRightButtonDown , UIElement.MouseRightButtonUp
API del Editor de mtodos de entrada (IME) (TextInput, TextInputStart, TextInputUpdate)
Diversas API de control de texto (BaselineOffset en varios tipos relacionados con texto,
TextBox.InputScope, TextBox.Watermark, ButtonBase.Command, ButtonBase.Command Parameter)
Selector.SelectedValue , Selector.SelectedValuePath
Las aplicaciones que detecten este problema debern recompilarse en Silverlight 4; una vez recompiladas,
usarn el nuevo analizador de XAML y se podrn resolver correctamente.
Ahora, al activar o desactivar el modo de pantalla completa, se vuelve a
ejecutar la prueba de posicionamiento
Ahora, al activar o desactivar el modo de pantalla completa, se vuelve a ejecutar la prueba de
posicionamiento. De este modo, los controles situados debajo del mouse antes de la activacin o
desactivacin podrn actualizar el estado de MouseOver.
Cuando se activa o se desactiva el modo de pantalla completa, el puntero del mouse probablemente
"saltar" a otra ubicacin debido a un cambio en el tamao del complemento Silverlight. Al salir del modo
de pantalla completa, el puntero del mouse podra estar fuera del complemento. Anteriormente, no se
mostraba ningn mensaje para notificar a los controles que el puntero del mouse ya no est sobre los
controles. Ahora, despus de activarse o desactivarse el modo de pantalla completa, se generar un evento

Silverlight
del mouse para que se vuelva a ejecutar la prueba de posicionamiento y para que los controles puedan
cambiar su estado si es necesario.
Ahora, al cambiar las propiedades DisplayMemberPath e ItemTemplate de
ItemControl, se vuelven a crear todos los contenedores
En Silverlight 3, establecer las propiedades DisplayMemberPath e ItemTemplate de una plantilla de
elementos, como en el siguiente cdigo, no tena ningn efecto una vez finalizada la medicin de ListBox.
<ListBox x:Name="lb" ItemTemplate="{StaticResource lbItem}">
lb.ItemTemplate = lbItemTemplate;
lb.DisplayMemberPath = itemDisplayPath;
En Silverlight 4, este cdigo invalidar todos los contenedores realizados y los volver a crear incluso
despus de su medicin.
Orgenes de BitmapImage compartidos
Cuando dos controles BitmapImage comparten el mismo origen de BitmapImage y no tienen establecido un
valor explcito de Width/Height (es decir, usan un tamao natural), el segundo control Image no representa
su BitmapImage en Silverlight 3. Este comportamiento se ha corregido en Silverlight 4 y, ahora, ambos
controles Image debern representar correctamente su contenido.
IronPython 2.0.2 y versiones anteriores
Silverlight 4 no funciona con versiones anteriores de IronPython; es necesario actualizar a la versin
IronPython 2.0.3 o posterior, que se puede descargar desde http://ironpython.codeplex.com/.
Microsoft.Jscript.Compiler.dll / Microsoft.Jscript.Runtime.dll
Silverlight 4 no funciona con Microsoft.Jscript.Compiler.dll / Microsoft.Jscript.Runtime.dll, que tambin se
conocen como "DLR Jscript" y a veces como "Jscript administrado". La ltima versin experimental de DLR
Jscript se public como parte de la versin Alfa de Dynamic Languages SDK 0.4.0. Esta caracterstica se ha
eliminado porque no era totalmente funcional. Vea http://dlr.codeplex.com/Thread/View.aspx?
ThreadId=58121 para obtener informacin detallada. (DLR JScript no debe confundirse con la API de
JavaScript basada en explorador para Silverlight que es ms comn y sigue funcionando.)
DRM y clientes con SO en particiones FAT32
En Silverlight 3, DRM funciona correctamente en los sistemas de cliente donde el sistema operativo est
instalado en una unidad o particin FAT32. (Esta situacin se da para un nmero reducido de sistemas
operativos Windows XP que no usan deliberadamente los valores predeterminados de la instalacin o
conversin del SO.)
En Silverlight 4, las caractersticas de DRM ya no funcionan en los sistemas de cliente donde el sistema
operativo est instalado en una unidad o particin FAT32.
Para solucionarlo, se recomienda realizar una conversin a NTFS.
Cambios en modo quirks

El equipo de Silverlight tena la intencin de corregir varios errores de Silverlight 3 en Silverlight 4. Sin
embargo, al corregir algunos de estos errores, es posible que se interrumpan algunas aplicaciones de
Silverlight 3. Para evitarlo, el equipo de Silverlight ha resuelto estos cambios potencialmente problemticos
creando un "modo quirks" para el comportamiento en tiempo de ejecucin. Un cambio en modo quirks
representa el caso en que el runtime de Silverlight 4 bifurca su comportamiento si detecta que la aplicacin
tiene como destino Silverlight 3. De este modo, Silverlight 4 pasa a ser "compatible con el error" como
runtime. Sin embargo, es posible que haya que revisar el comportamiento en modo quirks si se recompila la
aplicacin para Silverlight 4.
Si el valor de RuntimeVersion de una aplicacin es Silverlight 3, el runtime se ejecutar en modo quirks. En
modo quirks, el runtime recurre al comportamiento de Silverlight 3 asociado a los cambios en modo quirks
y, en estos casos, se comporta como si fuese literalmente un runtime de Silverlight 3 no actualizado.
El runtime de Silverlight 4 detecta si la aplicacin est diseada para Silverlight 3 a travs de la propiedad
RuntimeVersion. El valor de RuntimeVersion se establece como un atributo en el manifiesto
AppManifest.xaml del archivo XAP:

Silverlight
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" EntryPointAssembly="ElevatorSilverlight"
EntryPointType="ElevatorSilverlight.App"
RuntimeVersion="3.0.31005.0">
<Deployment.Parts>
<AssemblyPart x:Name="ElevatorSilverlight" Source="ElevatorSilverlight.dll" />
</Deployment.Parts>
</Deployment>
RuntimeVersion refleja la versin de compilacin de Silverlight que haba en el equipo del desarrollador
cuando se compil la aplicacin.
Si se compila la aplicacin con las herramientas de Silverlight 4 y se elige especficamente Silverlight 3 como
destino, se podr invocar el modo quirks como si se hubiera compilado la aplicacin con las herramientas
de Silverlight 3.
Control correcto de los espacios en blanco con etiquetas Span y contenedores
El objeto TextBlock en Silverlight 3 (y RichTextArea en la versin Beta de Silverlight 4) tena un error en la
composicin de <Span> o <Run> porque el espacio en blanco en el XAML (normalmente para dar formato)
se utilizaba en realidad como contenido. A veces, esto requera limitar las lneas nuevas en el origen de
XAML y daba lugar a un XAML poco legible para el usuario. Este comportamiento est en modo quirks para
Silverlight 3, como parte del comportamiento ms exhaustivo del analizador de XAML que se describe en
Diferencias en el procesamiento de XAML entre Silverlight 3 y Silverlight 4.
Los contenedores de texto en Silverlight 4 aceptan contenido de texto y crean ejecuciones implcitas en el
modelo de objetos para cualquier contenido de texto de "innertext". Esto es necesario para generar un
espacio en blanco entre los elementos de texto separados por CRLF. Por ejemplo:
<Run>Some</Run>
<Run>Text</Run>
Se transforma en:
<Run>Some</Run><Run> </Run><Run>Text</Run>
Las condiciones para recortar los espacios en blanco iniciales y finales se han ampliado en Silverlight 4.
Anteriormente, se recortaban los espacios en blanco iniciales para los elementos Run implcitos, a menos
que el elemento Run fuese precedido por un elemento Run explcito. En Silverlight 4, se recortan los
espacios en blanco iniciales a menos que el elemento Run implcito vaya precedido por un elemento de
texto explcito que NO sea un elemento Run (por ejemplo, Span, InlineUIContainer, Hyperlink) o un
elemento Run explcito.
Ahora, el mtodo Clear del control Panel llama a InvalidateMeasure
En Silverlight 4, cuando se invoca el mtodo Clear de una coleccin de elementos Panel, se llama al mtodo
InvalidateMeasure. De este modo, se activar un efecto sobre el diseo en el paso siguiente. En Silverlight 3,
una llamada a Clear seguir sin tener ningn efecto sobre el diseo de Panel.
Ahora, VirtualizingStackPanel.MouseWheelUp y VirtualizingStackPanel.Morse
WheelDown producen un desplazamiento de tres lneas
En las aplicaciones compiladas de Silverlight 3, los mtodos MouseWheelDown y MouseWheelUp seguirn
produciendo un desplazamiento de una lnea. Sin embargo, en las aplicaciones de Silverlight 4, estos
mtodos producen un desplazamiento de tres lneas.
Ahora, ImageBrush.ImageSource devuelve el objeto ImageSource en lugar de
UriSource
En las aplicaciones de Silverlight 3, ImageBrush.ImageSource devuelve el valor de UriSource de su
ImageSource (una cadena). Esto coincide con el comportamiento original de JavaScript en Silverlight 1.0.
En Silverlight 4, se devuelve el objeto ImageSource real, que puede ser un objeto WriteableBitmap o
BitmapImage.
Ahora, cambiar el valor base durante una animacin funciona segn lo previsto
En Silverlight 3, si se llamaba al mtodo SetValue en una propiedad durante una animacin activa, el
resultado se aplicaba solamente a ese paso. El mtodo SetValue cambiaba correctamente ese valor pero, en
el siguiente paso de la animacin activa, la animacin sobrescriba el valor establecido. En muchas

Silverlight
ocasiones, pareca que no haba cambiado nada visualmente (el cambio al nuevo valor se realizaba tan
rpidamente que el usuario no lo perciba). La llamada al mtodo SetValue no cambiaba el valor base de la
animacin (resultado de GetAnimationBaseValue). Cuando se detena la animacin, el valor base se
restableca en el valor que la propiedad tena antes del inicio de la animacin y omita el mtodo SetValue.
En Silverlight 4, si el valor de una propiedad cambia durante una animacin activa, la llamada al mtodo
SetValue modificar el valor base de la animacin. Cuando se detiene la animacin, esta utilizar el nuevo
valor base. Esto se corresponde con el comportamiento en WPF. (Observe que las animaciones HoldEnd no
se ven necesariamente afectadas por este cambio.)
ReadLocalValue devuelve el valor local durante una animacin
En Silverlight 3, cuando se anima una propiedad y la animacin se est ejecutando, una llamada al mtodo
ReadLocalValue devuelve el valor animado.
En Silverlight 4, una llamada al mtodo ReadLocalValue devolver el valor local. Esto se corresponde con el
comportamiento en WPF. Si desea obtener el valor animado, llame al mtodo GetValue.
No se invocan los establecedores duplicados en un estilo cuando todos hacen
referencia a la misma propiedad adjunta
En Silverlight 3, era posible utilizar varios objetos StyleSetter para establecer dos veces la misma propiedad
adjunta. En algunos escenarios se utilizaba esta caracterstica.
En Silverlight 4, este comportamiento ya no est habilitado. No es un error de sintaxis establecer dos veces
la misma propiedad adjunta en Setters. Sin embargo, el subsistema de estilos de Silverlight invocar
solamente el LTIMO objeto Setter que haga referencia a la propiedad adjunta; los dems establecedores
no sern operativos. Esto se corresponde con el comportamiento en WPF.
Zoom del explorador y Content.Resized
En Silverlight 4, si una aplicacin enlaza el evento Resized, se aplicar automticamente un zoom a la vista
del rea de contenido de Silverlight cuando cambie el nivel de zoom del explorador. Si una aplicacin de
Silverlight 4 desea deshabilitar el zoom automtico del explorador, deber establecer explcitamente el valor
de la propiedad EnableAutoZoom en false.
En Silverlight 3, se supona que las aplicaciones que realizaban escuchas de Resized se encargaban ellas
mismas del zoom del explorador y deshabilitaban el zoom automtico del explorador. Por consiguiente, en
modo quirks, no hay ningn comportamiento de zoom asociado al evento Resized cuando la aplicacin
tiene Silverlight 3 como destino.
Cambios en la API de MEF
A continuacin, se describen los cambios especficos que se han realizado en la API de Managed Extension
Framework (MEF) y que estn presentes en los componentes de MEF de Silverlight (ensamblado
System.ComponentModel.Composition y ensamblados relacionados).
PartCreator<T> pasa a denominarse ExportFactory<T> y se ha movido a System.
ComponentModel.Composition.Initialization.dll
PartInitializer pasa a denominarse CompositionInitializer
CompositionHost.InitializeContainer pasa a denominarse CompositionHost.Initialize
PackageCatalog se ha reemplazado por DeploymentCatalog
Comparaciones de cadenas y CultureInfo
Algunas API de comparacin de cadenas de las clases String y Char usan una lgica diferente para el modo
en que obtienen el objeto CultureInfo en vigor, segn si la aplicacin se ejecuta en Silverlight 3 o en
Silverlight 4. Esto se aplica nicamente a los casos en los que una sobrecarga no pasa ningn objeto
CultureInfo concreto. El comportamiento est en modo quirks, por lo que las aplicaciones de Silverlight 3 no
tienen que corregirlo. En la tabla siguiente se indican las diferencias entre las API.
API Silverlight 3 Silverlight 4

EndsWith Ordinal CurrentCulture
IndexOf Ordinal CurrentCulture

Silverlight
LastIndexOf Ordinal CurrentCulture

StartsWith Ordinal CurrentCulture
ToLower InvariantCulture CurrentCulture
ToUpper InvariantCulture CurrentCulture
ToLower InvariantCulture CurrentCulture
ToUpper InvariantCulture CurrentCulture
Rellenar ItemsControl con IList, IList<T>

En Silverlight 3, si se rellena un control ItemsControl con una interfaz IList o IList<T>, el relleno se realiza
con un enumerador. En Silverlight 4, el relleno se realiza con un indizador dedicado (y Count).
Cambios importantes en la actualizacin

Si se actualiza un proyecto de modo que tenga como destino el runtime de Silverlight 4, en muchas
ocasiones es necesario resolver primero los problemas de esta categora para poder recompilar la
aplicacin. Asimismo, es posible que haya que revisar la lgica de la aplicacin, que puede estar basada en
un comportamiento en modo quirks. Para obtener ms informacin, vea la anterior seccin "Cambios en
modo quirks".
Cambios en los proyectos
Si se actualiza un proyecto de Silverlight que tiene como destino Silverlight 3 de modo que su destino pase
a ser Silverlight 4, es posible que haya que realizar algunos cambios en la estructura del proyecto. Puede
que tambin haya que realizar cambios en los archivos y recursos utilizados por el proyecto. En algunos
casos, esto es debido a que se trata de un comportamiento permitido en modo quirks de Silverlight 3 pero
que ya no est permitido al cambiar el destino a Silverlight 4.
Se han movido varios tipos del SDK de Silverlight al runtime bsico
Se han movido los siguientes tipos del SDK de Silverlight al runtime bsico:
System.ComponentModel.IEditableCollectionView
System.ComponentModel.NewItemPlaceholderPosition
System.Windows.Data.CollectionViewGroup
System.Windows.Data.PropertyGroupDescription
Ensamblado anterior: System.Windows.Data.dll
Nuevo ensamblado: System.Windows.dll
Las aplicaciones existentes de Silverlight 3 deben seguir funcionando como siempre porque el ensamblado
de cliente System.Windows.Data.dll suele distribuirse en el archivo XAP. Si se compila una aplicacin
mediante las herramientas de Silverlight 4 y el destino es Silverlight 4, la aplicacin utilizar las clases de las
bibliotecas en tiempo de ejecucin bsicas.
Adems, entre la versin Beta de Silverlight 4 y Silverlight 4, algunas API (no todas) del espacio de nombres
System.Windows.Navigation se han movido de System.Windows.Controls.Navigation.dll al ensamblado
bsico System.Windows.dll. Las API que estn ahora en System.Windows son: NavigatedEventHandler,
NavigatingCancelEventArgs, NavigatingCancelEventHandler, NavigationEvent Args y NavigationMode.
Se ha corregido la navegacin mediante teclado para TabControl
Silverlight 3
En el modelo de navegacin mediante teclado para TabControl, al [p]resionar la tecla FLECHA ARRIBA, se
activaba el control TabItem siguiente y, al presionar la tecla FLECHA ABAJO, se activaba el control TabItem
anterior. Esto provoca un comportamiento poco intuitivo cuando el valor de TabStripPlacement est
establecido en Left o en Right. En este caso, al presionar la tecla FLECHA ARRIBA, se activaba el control
TabItem situado debajo del control TabItem activo y, al presionar la tecla FLECHA ABAJO, se activaba el
control TabItem situado encima del control TabItem activo. Este comportamiento se mantiene en las
aplicaciones de Silverlight 3; el control TabControl est en el ensamblado System.Windows.Controls.dll, que
es una biblioteca de cliente que en muchas ocasiones est empaquetada en el archivo XAP.

Silverlight
Silverlight 4
Al presionar la tecla FLECHA ARRIBA en Silverlight 4, se activa el control TabItem anterior (es decir, el
situado encima del control TabItem activo en modo de diseo vertical cuando el valor de TabStripPlacement
es Left o Right). Al presionar la tecla FLECHA ABAJO, se activa el control TabItem siguiente (es decir, el
situado debajo del control TabItem activo en modo de diseo vertical). Este es el comportamiento
actualizado si se hace referencia o se distribuye el ensamblado System.Windows.Controls.dll de Silverlight 4.
Ahora, los controles tienen compatibilidad integrada con MouseWheel
En Silverlight 4, los siguientes controles tienen compatibilidad integrada con los eventos MouseWheel:
ListBox
TextBox
ComboBox
ScrollViewer
Calendar
DatePicker
DataGrid
En Silverlight 3, no hay compatibilidad integrada con MouseWheel.
Si se actualizan aplicaciones de Silverlight 3 a Silverlight 4, es posible quitar cualquier control especfico
anterior de los eventos de la rueda del mouse en el nivel de la aplicacin o quizs en el DOM HTML. Esto
podra aplicarse a cualquiera de los siguientes controles: ListBox, TextBox, ComboBox y ScrollViewer.
Nota:
Hay tambin controles compatibles con MouseWheel que no figuran aqu porque no existan en
Silverlight 3. Un ejemplo de ello es RichTextBox. Compruebe en las pginas de referencia de cada control si
hay reemplazos de OnMouseWheel u otras observaciones referentes al control del evento MouseWheel.
Los objetos DataGridCell y el foco de automatizacin cuando cambia el elemento

vigente en DataGrid
En Silverlight 4, los objetos DataGridCell reciben el foco de automatizacin cuando cambia el elemento
vigente en el control DataGrid y el foco ya no permanece en el propio control DataGrid.
Informacin ms detallada: originalmente, los clientes de automatizacin de la interfaz de usuario no
obtenan informacin sobre la celda que tena el foco porque los objetos DataGridCell no son controles que
puedan recibir el foco (cualquier intento de invocar Focus devuelve false). Esto no ha cambiado. Los
controles DataGridCell siguen siendo objetos que no pueden recibir el foco en la interfaz de usuario. Sin
embargo, en Silverlight 4, reciben el foco de automatizacin cuando cambia el elemento vigente en el
control DataGrid. Ahora, cuando se presiona la tecla de tabulacin para entrar en un control DataGrid y se
utilizan las teclas de direccin para cambiar el elemento vigente, el foco de automatizacin se mover a los
elementos del mismo nivel de cada celda para que los clientes de automatizacin de la interfaz de usuario
puedan recibir informacin especfica de las propiedades de automatizacin de las celdas. Anteriormente, el
foco de automatizacin permaneca en el control DataGrid; este sigue siendo el comportamiento en
Silverlight 3, basndose en el ensamblado System.Windows.Controls.Data.dll de Silverlight 3.
Se ha refactorizado el ensamblado System.ServiceModel.PollingDuplex.dll
Si anteriormente haca referencia al ensamblado System.ServiceModel.PollingDuplex.dll, despus de
actualizar un proyecto a Silverlight 4, deber agregar manualmente una referencia al ensamblado
System.ServiceModel.Extensions.dll. Se ha refactorizado el ensamblado original y se han movido algunas
clases al nuevo ensamblado.
Cambios importantes desde Silverlight 4 Beta

Si ha creado aplicaciones basadas en la versin Beta de Silverlight 4, debe saber que se han realizado varios
cambios importantes entre la versin Beta de Silverlight 4 y Silverlight 4, los cuales se describen en las
siguientes secciones.
El nombre RichTextArea ha cambiado a RichTextBox
El nombre RichTextArea ha cambiado a RichTextBox. El espacio de nombres de CLR y la ubicacin del
ensamblado siguen siendo los mismos.

Silverlight
Cambios en la API de DRM

A partir de la versin Beta de Silverlight 4, se han realizado cambios en algunas API relacionadas con DRM.
ANTES
public class DomainAcquirer
{
public void DomainJoinAsyncCancel();
public void DomainLeaveAsyncCancel();
public event EventHandler<DomainOperationCompletedEventArgs> DomainOperationCompleted;
}
public class LicenseAcquirer
{
public void AcquireLicenseAsyncCancel();
public string CustomData;
}
public class MediaLicense
{
public DateTime ExpirationDate;
}
public enum ContentKeyType
{
AES128Bit,
Cocktail
}
DESPUS
public class DomainAcquirer
{
public void CancelAsync();
public event EventHandler<DomainJoinCompletedEventArgs> DomainJoinCompleted;
public event EventHandler<DomainLeaveCompletedEventArgs> DomainLeaveCompleted;
}
public class LicenseAcquirer
{
public void CancelAsync();
public string ChallengeCustomData;
}
public class MediaLicense
{
public Nullable<DateTimeOffset> ExpirationDate;
}
public enum ContentKeyType
{
Aes128Bit,
Cocktail
}
El nombre TextSelection.SetPropertyValue ha cambiado a TextSelection.Apply

PropertyValue
Si tiene cdigo relacionado con RichTextArea/RichTextBox que da formato a un texto seleccionado
mediante TextSelection.SetPropertyValue, deber cambiar este cdigo para llamar al mtodo Text
Selection.ApplyPropertyValue.
INotifyDataErrorInfo y DataErrorsChangedEventArgs se han movido a System.
Windows.dll
Se han agregado INotifyDataErrorInfo y DataErrorsChangedEventArgs a la versin Beta de Silverlight 4. Estos
tipos se han movido de System.dll a System.Windows.dll en Silverlight 4. Si usa estos tipos, deber
recompilar los proyectos y es posible que tenga que ajustar los ensamblados de referencia.
Cambio en la firma de WebBrowser.ScriptNotify
public event NotifyEventHandler ScriptNotify;
ha cambiado a:
public event EventHandler<NotifyEventArgs> ScriptNotify;
Asimismo, WebBrowser.LoadCompleted utiliza ahora un delegado ms especfico: LoadCompleted

EventHandler. Se podra seguir utilizando un objeto EventHandler y la aplicacin se compilara igual, pero es
posible que las aplicaciones deseen realizar una actualizacin para poder recibir los datos de evento que la
clase NavigationEventArgs proporciona.

Silverlight
Cambio en la API de NotificationWindow

En la API de NotificationWindow:
public bool Visible { get; }
public event EventHandler<EventArgs> Closed;
ha cambiado a:
public Visibility Visibility { get; }
public event EventHandler Closed;
Cambios en las API para la proteccin de la cmara web y de la salida

Se han realizado varios cambios en las API relacionadas con la proteccin de la cmara web y de la salida.
Ahora, las colecciones de los dispositivos de captura de audio y vdeo as como los formatos
compatibles devuelven una coleccin inmutable en forma de ReadOnlyCollection<T>. Esto afecta a
todas las llamadas a los mtodos GetAvailableAudioCaptureDevices y GetAvailableVideo
CaptureDevices, o a VideoCaptureDevice.
El nombre Connectors ha cambiado a VideoOutputConnectors y la coleccin devuelta es inmutable:
ReadOnlyCollection<VideoOutputConnector>.
El uso de minsculas y maysculas ha cambiado en varias enumeraciones:
VGA -> Vga
DVI -> Dvi
HDMI -> Hdmi
LVDS -> Lvds
SDI -> Sdi
UDIExternal -> UdiExternal
UDIInternal -> UdiInternal
El nombre CanEnableHDCP ha cambiado a CanEnableHdcp y CanEnableCGMSA ha cambiado a

CanEnableCgmsa.
Ahora, VideoFormat.Height se denomina VideoFormat.PixelHeight y VideoFormat.Width se
denomina VideoFormat.PixelWidth.
WaveFormatType.PCM pasa a denominarse WaveFormatType.Pcm.
ContentKeyType.AES128Bit pasa a denominarse ContentKeyType.Aes128Bit.
Se ha actualizado el modelo de uso de AsyncCaptureImage al modelo asincrnico estndar basado
en eventos de .NET. En Silverlight 4, se llama al mtodo CaptureImageAsync y se controla el evento
CaptureImageCompleted. La imagen deseada es el valor de la propiedad Result de los datos del
evento y, al igual que antes, es un objeto WriteableBitmap.
// Old usage
void CallbackFunc(WriteableBitmap img) { //... }
myCaptureSource.AsyncCaptureImage(CallbackFunc);
// New usage.
void CallbackFunc(object sender, CaptureImageCompletedEventArgs args) {//...}
myCaptureSource.ImageCaptureCompleted += CallbackFunc;
myCaptureSource.ImageCaptureAsync();
Cambios en la API de la interoperabilidad COM

Los tipos utilizados para la interoperabilidad COM en Silverlight 4 se han movido a un nuevo espacio de
nombres y sus nombres han cambiado.
namespace System.Windows.Interop
{
public sealed class ComAutomationEvent
public sealed class ComAutomationEventArgs : EventArgs
public delegate void ComAutomationEventHandler(object sender, ComAutomationEventArgs e)
public static class ComAutomationFactory
}
Ha cambiado a:
namespace System.Runtime.InteropServices.Automation
{
public sealed class AutomationEvent
public sealed class AutomationEventArgs : EventArgs

Silverlight
public static class AutomationFactory
}
Ahora, el valor predeterminado de RichTextBox.TextWrapping es Wrap

El valor predeterminado de TextWrapping es TextWrapping.Wrap en Silverlight 4. Anteriormente, su valor
predeterminado era TextWrapping.NoWrap.
Cambio de comportamiento cuando se establecen enlaces en XAML y el destino
es DependencyObject
En Silverlight 4, los enlaces establecidos en XAML en una propiedad de dependencia de un objeto
DependencyObject adjuntarn un objeto BindingExpression a las propiedades en lugar de establecer
objetos Binding. En Silverlight 3, el destino de un enlace tena que ser un objeto FrameworkElement, por lo
que no se daba este caso. Los enlaces a las propiedades de dependencia de DependencyObject se
agregaron en la versin Beta de Silverlight 4.
Este cambio NO afectar al usuario si se cumple cualquiera de las siguientes condiciones:
La aplicacin se ha compilado para o tiene como destino Silverlight 3
El objeto de destino es un FrameworkElement (la mayora de los objetos que se usan en los enlaces
relacionados con la interfaz de usuario son clases derivadas de FrameworkElement)
La propiedad de destino es una propiedad de CLR en lugar de una propiedad de dependencia
Antes del cambio:
<local:MyDependencyObject MyProperty="{Binding MyItem}" />
De este modo, se establece MyProperty en un objeto Binding con la ruta de acceso MyItem.
Despus del cambio:
<local:MyDependencyObject MyProperty="{Binding MyItem}" />
De este modo, se adjunta un objeto BindingExpression a la propiedad MyProperty que escucha la ruta de
acceso MyItem (es similar a una llamada al mtodo SetBinding). Las aplicaciones de Silverlight 4 que deseen
establecer el comportamiento de un objeto Binding debern convertir la propiedad de destino en una
propiedad de CLR en lugar de una DependencyProperty. Esto es coherente con el comportamiento de
FrameworkElement.
Ahora, HtmlBrush se denomina WebBrowserBrush
Es necesario cambiar a WebBrowserBrush todas las referencias a HtmlBrush. El espacio de nombres de CLR y
la ubicacin del ensamblado siguen siendo los mismos.
Se ha cambiado el nombre de los estados visuales de ListBoxItem
Se ha cambiado el nombre de dos de los estados visuales de ListBoxItem.
El estado visual Loaded en la versin Beta de Silverlight 4 se denomina ahora AfterLoaded.
El estado visual Unloaded en la versin Beta de Silverlight 4 se denomina ahora BeforeUnloaded.
Este cambio afectar al usuario si ha escrito plantillas para los controles de elementos que incluyan estos
estados visuales. Es necesario cambiar las plantillas de modo que incluyan los nuevos nombres de estado. Es
posible que este cambio tambin afecte al usuario si ha escrito lgica de VisualStateManager que utilice los
nombres de estado definidos por ItemsControl.
Los nuevos nombres de estado se reflejan en los atributos de CLR del tipo ListBoxItem. Estos estados no
existan en el control ListBoxItem de Silverlight 3.
No se admiten enlaces en un establecedor de estilo
En la versin Beta de Silverlight 4, se permitan sintcticamente los enlaces en un establecedor de estilo
(valor de Setter.Property) (aunque no funcionaban segn lo esperado en comparacin con usos
equivalentes en WPF).
En Silverlight 4, se han bloqueado sintcticamente los enlaces en un establecedor de estilo. Este fue tambin
el caso en Silverlight 3.

Silverlight
Cambios en la API de CultureNotFoundException

La siguiente API exista en la excepcin CultureNotFoundException de la versin Beta de Silverlight 4, pero
ya no existe en Silverlight 4.
public CultureNotFoundException(string message, int invalidCultureId, Exception innerException);
public CultureNotFoundException(string paramName, int invalidCultureId, string message);
public virtual Nullable`1<int> InvalidCultureId { get; }
Cambios en la API de Contract.ContractFailed

System.Diagnostics.Contracts.Contract.ContractFailed exista en la versin Beta de Silverlight 4, pero ya no
existe en Silverlight 4. Tambin se ha quitado ContractFailedEventArgs.
Cambios en la API de Action y Func (T5+)
.NET Framework incluye varias aridades de los delegados Func y Action. Este importante cambio afecta
especialmente a los Action y Func de Silverlight que tienen al menos 5 parmetros de entrada (el nombre
de parmetro T5 existe), los cuales tambin son nuevos para .NET Framework 4. Todos esos delegados
estaban en el ensamblado System.Core de las versiones Beta y RC de Silverlight 4. Ahora, estn en mscorlib.
Si ha utilizado estos delegados en la versin Beta o RC, deber recompilar utilizando bits de la versin RTM
de Silverlight 4.
1.6. Common Language Runtime

Common Language Runtime es la base de .NET Framework. Es responsable de administrar la ejecucin del
cdigo en tiempo de ejecucin y proporciona servicios bsicos como compilacin, administracin de
memoria y de subprocesos, ejecucin de cdigo, cumplimiento de seguridad de tipos y comprobacin de la
seguridad de cdigo. Los compiladores tienen como destino Common Language Runtime, que define los
tipos de datos bsicos disponibles para los programadores de aplicaciones. Dado que proporciona un
entorno administrado para la ejecucin de cdigo, Common Language Runtime mejora la productividad del
programador y contribuye al desarrollo de aplicaciones slidas.
En este tema se proporciona informacin general sobre las caractersticas siguientes de Common Language
Runtime:
Administracin de la memoria.
Sistema de tipos comunes.
Administracin de la memoria
El recolector de elementos no utilizados de Common Language Runtime administra la asignacin y
liberacin de la memoria de una aplicacin. Esto significa que los programadores no tienen que escribir
cdigo para realizar tareas de administracin de memoria al programar aplicaciones administradas. La
administracin automtica de la memoria puede eliminar problemas frecuentes, como olvidar liberar un
objeto y causar una prdida de memoria, o intentar tener acceso a la memoria de un objeto que ya se ha
liberado.
Cuando se inicializa un nuevo proceso, el motor en tiempo de ejecucin reserva una regin contigua de
espacio de direcciones para el proceso. Este espacio de direcciones reservado se denomina montn
administrado. El montn administrado mantiene un puntero a la direccin a la que se asignar el siguiente
objeto del montn. Inicialmente, este puntero se establece en la direccin base del montn administrado.
Todos los tipos de referencia se asignan en el montn administrado. Cuando una aplicacin crea el primer
tipo de referencia, se le asigna memoria en la direccin base del montn administrado. Cuando la aplicacin
crea el siguiente objeto, el recolector de elementos no utilizados le asigna memoria en el espacio de
direcciones que sigue inmediatamente al primer objeto. Siempre que haya espacio de direcciones
disponible, el recolector de elementos no utilizados contina asignando espacio a los objetos nuevos de
este modo.
La asignacin de memoria desde el montn administrado es ms rpida que la asignacin de memoria no
administrada. Como el tiempo de ejecucin asigna memoria a los objetos agregando un valor a un puntero,
este mtodo es casi tan rpido como la asignacin de memoria desde la pila. Adems, puesto que los
nuevos objetos que se asignan consecutivamente se almacenan uno junto a otro en el montn
administrado, la aplicacin puede tener un acceso muy rpido a los objetos.

Silverlight
Adems de asignar memoria, el motor de optimizacin del recolector de elementos no utilizados determina
cul es el mejor momento para realizar una recoleccin, segn las asignaciones que se estn realizando.
Cuando el recolector de elementos no utilizados lleva a cabo una recoleccin, libera la memoria de los
objetos que ya no usa la aplicacin.
Sistema de tipos comunes

Como es el motor en tiempo de ejecucin, en lugar de un compilador del lenguaje individual, el que define
los tipos base disponibles, la productividad del programador mejora. Los programadores pueden crear
aplicaciones en el lenguaje que prefieran y seguir sacando todo el provecho del motor en tiempo de
ejecucin, la biblioteca de clases y los componentes escritos en otros lenguajes por otros colegas. Siempre
que el compilador de lenguaje tenga como destino .NET Framework y Common Language Runtime, se
puede tener acceso a los componentes desarrollados con dicho compilador desde aplicaciones
desarrolladas en otros lenguajes. El sistema de tipos comunes ayuda a comprender el objetivo de
independencia del lenguaje; los programadores se pueden centrar en desarrollar una aplicacin en su
lenguaje de opcin, y utilizar bibliotecas y componentes sin tener en cuenta el lenguaje en el que se
escribieron.
El sistema de tipos comunes admite dos categoras generales de tipos de datos:
Tipos de valor
Los tipos de valor contienen directamente sus datos y las instancias de los tipos de valor se asignan
en la pila o insertadas en una estructura. Los tipos de valor pueden ser integrados (implementados
por el motor en tiempo de ejecucin), definidos por el usuario o enumeraciones.
Tipos de referencia
Los tipos de referencia guardan una referencia a la direccin en memoria del valor y se asignan en
el montn. Los tipos de referencia pueden ser tipos autodescriptivos, de puntero o de interfaz. El
tipo de un tipo de referencia se puede determinar a partir de los valores de los tipos
autodescriptivos. Los tipos autodescriptivos se dividen en matrices y tipos de clase. Los tipos de
clase son clases definidas por el usuario, tipos de valor a los que se ha aplicado la conversin
boxing y delegados.
Las variables que son tipos de valor tienen, cada una, su propia copia de los datos y, por lo tanto, las
operaciones en una variable no afectan a las dems. Las variables que son tipos de referencia pueden hacer
referencia al mismo objeto y, por lo tanto, las operaciones en una variable pueden afectar al mismo objeto
al que hace referencia otra variable.
Salvo las interfaces, todos los tipos se derivan del tipo base System.Object.
1.7. Compatibilidad con WPF

Silverlight ofrece un subconjunto de la funcionalidad proporcionada por Windows Presentation Foundation
(WPF) y permite compilar aplicaciones completas para Internet de sencilla implementacin e instalacin
rpida. Un objetivo adicional de Silverlight es permitir transferir la experiencia de desarrollo de .NET
Framework a Silverlight y viceversa. Tambin debera poder llevar las aplicaciones Silverlight al escritorio,
reutilizando el XAML principalmente. En este tema se explican algunas de las diferencias entre las
caracterstica principales de WPF y Silverlight.
Caractersticas de WPF no incluidas en Silverlight

Documento dinmico
No hay compatibilidad con Documento dinmico en Silverlight.
Recursos dinmicos
Silverlight no admite los recursos dinmicos. Todas las referencias de recursos a recursos con clave en XAML
son estticas.
Varios
Adems de las caractersticas previamente mencionadas, las siguientes se admiten en WPF pero no en
Silverlight:

Silverlight
Propiedad TileMode para objetos TileBrush.

Atributo ValueConversion.
Lista ITyped, InstanceFactory o BindingList(T).
Administracin de documentacin electrnica (EDM).
Clase base MarkupExtension.
Caractersticas de WPF con compatibilidad limitada en Silverlight

Enlace de datos
Los fundamentos de Silverlight y el enlace de datos de WPF son los mismos. Sin embargo, algunas
caractersticas del enlace de datos se proporcionan en WPF pero no en Silverlight. Silverlight permite enlazar
el objeto DependencyProperty de un elemento FrameworkElement (y, en algunos casos, un objeto
DependencyObject) a cualquier objeto de CLR. Silverlight no proporciona lo siguiente:
Conjuntos de datos.
ICustomTypeDescriptor , IListSource o IBindingList.
Enlace directo a datos XML o enlace XPath.
(La alternativa recomendada consiste en usar la API System.Xml.Linq para objetos de negocios
XML.)
Enlace BindingMode.OneWayToSource.
Notificacin discreta de las actualizaciones de origen y de destino con las propiedades
NotifyOnSourceUpdated o NotifyOnTargetUpdated dedicadas (y eventos relacionados) en un
enlace.
Adems, Silverlight no admite algunas de las opciones de enlace admitidas por WPF. Silverlight proporciona
convertidores de valores y compatibilidad con la validacin de datos. Proporciona compatibilidad con la
interfaz INotifyDataErrorInfo, que WPF no admite.
Desencadenadores
WPF (en concreto, .NET Framework 3.5) utiliza el concepto de desencadenadores. Los desencadenadores
permiten realizar cambios en las propiedades o iniciar acciones cuando se producen eventos o se realizan
cambios en las propiedades. La compatibilidad de Silverlight con los desencadenadores se limita a usar el
objeto EventTrigger para el evento Loaded y la accin BeginStoryboard. Sin embargo, el modelo
VisualStateManager permite usar los desencadenadores de la misma manera que en las versiones anteriores
de XAML de WPF.
Eventos enrutados
En WPF se introdujo el concepto de eventos enrutados, donde varios controladores pueden controlar un
evento en el rbol de elementos en lugar de simplemente el objeto que inici el evento.
Silverlight incluye el concepto de eventos enrutados para un subconjunto pequeo de eventos. Sin
embargo, Silverlight no permite crear un nuevo evento enrutado. Adems, Silverlight no incluye eventos
Preview ni control de clases para los eventos enrutados. El cdigo de usuario de Silverlight puede volver a
controlar un evento enrutado ya marcado como controlado, pero solo mediante cdigo.
Comandos
WPF introdujo el concepto de ejecucin de comandos. Solo algunas clases de Silverlight 4 admiten la
infraestructura de comandos. ButtonBase e Hyperlink proporcionan las propiedades Command y
CommandParameter. Silverlight no proporciona bibliotecas de comandos como parte del runtime ni
comportamientos integrados especficos de los tipos bsicos o los controles del SDK de Silverlight que
interactan con los comandos. Sin embargo, el sistema de entrada de Silverlight interpreta los comandos.
Desde la perspectiva del diseo, se pretende que las implementaciones de los comandos existan como un
componente del propio origen de datos, como parte de una relacin con un modelo de vista. Los comandos
se enlazan a las propiedades Command a travs de un enlace al mismo origen que genera los datos de la
interfaz de usuario visible.
Grficos 3D

Silverlight
Silverlight incluye compatibilidad limitada con el dibujo 3D.

Propiedades de dependencia
WPF y Silverlight tienen sistemas de propiedad similares que utilizan el concepto de propiedad de
dependencia. Puede definir una propiedad de dependencia personalizada, pero existen diferencias
importantes.
rboles visuales y lgicos
A diferencia de WPF, Silverlight no incluye el concepto de rboles visuales y lgicos independientes y
accesibles en tiempo de ejecucin. Adems, Silverlight tiene la API LogicalTreeHelper. Silverlight
proporciona la clase VisualTreeHelper en caso de que necesite navegar por los objetos representados en el
rbol de objeto.
En WPF, todos los elementos visuales derivan de la clase Visual, que no existe en Silverlight. Sin embargo, en
otras clases base de Silverlight, hay un subconjunto de funciones similares a las de Visual.
Objetos freezable
Silverlight no incluye objetos Freezable en su modelo de objetos.
API tctil
Silverlight 4 admite algunas de las API de multitoque de WPF. Sin embargo, se registra el cliente de
Silverlight 4 en su conjunto para los mensajes de entrada tctil y los eventos multitoque se controlan a
travs de una clase de servicio Touch en el nivel del cliente. En cambio, WPF admite en el nivel de elementos
los eventos multitoque de la clase UIElement. Asimismo, la versin de multitoque en Silverlight 4 no
proporciona ningn control de gestos nativo ni control de manipulaciones/inercias. Si necesita esa
compatibilidad en Silverlight 4, deber controlar los mensajes sin formato e implementar esta funcionalidad.
Igual caracterstica, enfoque diferente

Representacin de subpxeles
WPF y Silverlight permiten la representacin de subpxeles. Sin embargo, en algunos casos, la
representacin de subpxeles puede dar lugar a texto, imgenes y objetos borrosos cuando se aplica el
suavizado al objeto. WPF controla los problemas de representacin de subpxeles utilizando una
caracterstica llamada ajuste de pxeles, que ajusta las lneas al pxel del dispositivo ms cercano. En
Silverlight se introduce el concepto de redondeo del diseo, que redondea las dimensiones de los objeto al
entero ms cercano. Esta caracterstica se puede desactivar estableciendo el marcador UseLayoutRounding
en false. Silverlight tambin tiene una propiedad TextHintingMode para reemplazar determinadas
optimizaciones de la presentacin de texto de modo que den mejor resultado si el texto cambia de posicin
o se anima dinmicamente.
Impresin
La compatibilidad de impresin en Silverlight est diseada para permitir a los usuarios imprimir un
UIElement que est contenido en la aplicacin Silverlight, lo que vara sustancialmente de la impresin
centrada en documento de WPF.
Procesamiento de XAML
Hay algunas diferencias en el procesamiento de XAML entre WPF y Silverlight.
Compatibilidad de ejecucin fuera del explorador
WPF tiene un modelo de implementacin de XBAP que se ejecuta en un explorador. Silverlight utiliza una
tcnica de implementacin diferente, en la que se puede configurar una aplicacin de modo que se ejecute
fuera del explorador despus de instalarla desde una pgina web host. Adems, la aplicacin de ejecucin
fuera del explorador puede solicitar permisos elevados, por lo que puede obtener acceso a caractersticas
que no son accesibles para el espacio aislado predeterminado de una XBAP de WPF.
Caractersticas nicas de Silverlight

Deep Zoom

Silverlight
En Silverlight se presenta la caracterstica Deep Zoom, que permite ampliar y reducir imgenes o
colecciones de imgenes de alta-resolucin.
Compatibilidad de controles en Silverlight y en WPF

En la tabla siguiente se muestra la compatibilidad de los controles en Silverlight y en WPF.
Nota:
Los controles del Kit de herramientas de Silverlight se actualizan peridicamente.
Control Silverlight o WPF Disponible para Silverlight
AccessText WPF No est disponible
AdornedElementPlaceholder WPF No est disponible
AdornerDecorator WPF No est disponible
AutoCompleteBox Silverlight SDK de Silverlight
Border Ambos Motor en tiempo de ejecucin
BulletChrome WPF No est disponible
BulletDecorator WPF No est disponible
Button Ambos Motor en tiempo de ejecucin
ButtonChrome WPF No est disponible
Calendar Ambos SDK de Silverlight
Canvas Ambos Motor en tiempo de ejecucin
CheckBox Ambos Motor en tiempo de ejecucin
ClassicBorderDecorator WPF No est disponible
ComboBox Ambos Motor en tiempo de ejecucin
ComboBoxItem Ambos Motor en tiempo de ejecucin
ContentControl Ambos Motor en tiempo de ejecucin
ContentPresenter Ambos Motor en tiempo de ejecucin
ContextMenu WPF No est disponible
Control Ambos SDK de Silverlight
DataPager Silverlight SDK de Silverlight
DataGrid Ambos SDK de Silverlight
DatePicker Ambos SDK de Silverlight
Decorator WPF No est disponible
DescriptionViewer Silverlight SDK de Silverlight
DockPanel Ambos Kit de herramientas de Silverlight
DocumentPageView WPF No est disponible
DocumentReference WPF No est disponible
DocumentViewer WPF No est disponible
Ellipse Ambos Motor en tiempo de ejecucin
Expander Ambos Kit de herramientas de Silverlight
FixedPage WPF No est disponible
FlowDocumentPageViewer WPF No est disponible
FlowDocumentReader WPF No est disponible
FlowDocumentScrollViewer WPF No est disponible
Frame Ambos SDK de Silverlight
FrameworkElement Ambos Motor en tiempo de ejecucin
Glyphs Ambos Motor en tiempo de ejecucin
Grid Ambos Motor en tiempo de ejecucin
GridSplitter Ambos SDK de Silverlight
GridViewColumnHeader WPF No est disponible
GridViewHeaderRowPresenter WPF No est disponible

Silverlight
GridViewRowPresenter WPF No est disponible

GroupBox WPF No est disponible
GroupItem WPF No est disponible
HeaderedContentControl Ambos Kit de herramientas de Silverlight
HeaderedItemsControl Ambos SDK de Silverlight
Hyperlink Ambos Motor en tiempo de ejecucin
HyperlinkButton Silverlight Motor en tiempo de ejecucin
Image Ambos Motor en tiempo de ejecucin
InkCanvas WPF No est disponible
InkPresenter Ambos Motor en tiempo de ejecucin
ItemsControl Ambos Motor en tiempo de ejecucin
ItemsPresenter Ambos Motor en tiempo de ejecucin
Label Ambos SDK de Silverlight
Line Ambos Motor en tiempo de ejecucin
ListBox Ambos Motor en tiempo de ejecucin
ListBoxChrome WPF No est disponible
ListBoxItem Ambos Motor en tiempo de ejecucin
ListView WPF No est disponible
ListViewItem WPF No est disponible
MediaElement Ambos Motor en tiempo de ejecucin
Menu WPF No est disponible
MenuItem WPF No est disponible
MultiScaleImage Silverlight Motor en tiempo de ejecucin
NavigationWindow WPF No est disponible, pero vea Frame
NumericUpDown Silverlight Kit de herramientas de Silverlight
Page Ambos SDK de Silverlight
PageContent WPF No est disponible
PageFunction WPF No est disponible
PasswordBox Ambos Motor en tiempo de ejecucin
Path Ambos Motor en tiempo de ejecucin
Polygon Ambos Motor en tiempo de ejecucin
Polyline Ambos Motor en tiempo de ejecucin
Popup Ambos Motor en tiempo de ejecucin
ProgressBar Ambos Motor en tiempo de ejecucin
RadioButton Ambos Motor en tiempo de ejecucin
Rectangle Ambos Motor en tiempo de ejecucin
RepeatButton Ambos Motor en tiempo de ejecucin
ResizeGrip WPF No est disponible
Ribbon WPF No est disponible
RibbonWindow WPF No est disponible
RichTextBox Ambos Motor en tiempo de ejecucin
ScrollBar Ambos Motor en tiempo de ejecucin
ScrollChrome WPF No est disponible
ScrollContentPresenter Ambos Motor en tiempo de ejecucin
ScrollViewer Ambos Motor en tiempo de ejecucin
Separator WPF No est disponible
Slider Ambos Motor en tiempo de ejecucin
StackPanel Ambos Motor en tiempo de ejecucin

Silverlight
StatusBar WPF No est disponible

StatusBarItem WPF No est disponible
SystemDropShadowChrome WPF No est disponible
TabControl Ambos SDK de Silverlight
TabItem Ambos SDK de Silverlight
TabPanel WPF SDK de Silverlight
TextBlock Ambos Motor en tiempo de ejecucin
TextBox Ambos Motor en tiempo de ejecucin
Thumb Ambos Motor en tiempo de ejecucin
TickBar WPF No est disponible
ToggleButton Ambos Motor en tiempo de ejecucin
ToolBar WPF No est disponible
ToolBarOverflowPanel WPF No est disponible
ToolBarPanel WPF No est disponible
ToolBarTray WPF No est disponible
ToolTip Ambos Motor en tiempo de ejecucin
Track WPF No est disponible
TreeView Ambos SDK de Silverlight
TreeViewItem Ambos SDK de Silverlight
UniformGrid WPF No est disponible
UserControl Ambos Motor en tiempo de ejecucin
ValidationSummary Silverlight SDK de Silverlight
ViewBox Ambos Motor en tiempo de ejecucin
Viewport3D WPF No est disponible, pero vea PlaneProjection
VirtualizingStackPanel Ambos Motor en tiempo de ejecucin
WebBrowserBrush Silverlight Motor en tiempo de ejecucin
WebBrowser Ambos Motor en tiempo de ejecucin
Window Ambos Runtime (solo de ejecucin fuera del explorador)
WindowsFormsHost WPF No est disponible
WrapPanel Ambos Kit de herramientas de Silverlight
Otras diferencias con respecto a la API

En la tabla siguiente se enumeran algunas de las diferencias de la API entre Silverlight y WPF.
API Silverlight o WPF Disponible para Silverlight

MediaSampleAttributeKeys Silverlight Motor en tiempo de ejecucin
MediaSourceAttributesKeys Silverlight Motor en tiempo de ejecucin
MediaStreamAttributeKeys Silverlight Motor en tiempo de ejecucin
MediaStreamDescription Silverlight Motor en tiempo de ejecucin
MediaStreamSample Silverlight Motor en tiempo de ejecucin
MediaStreamSource Silverlight Motor en tiempo de ejecucin
MediaStreamSourceDiagnosticKind Silverlight Motor en tiempo de ejecucin
MediaStreamType Silverlight Motor en tiempo de ejecucin
1.8. Diferencias de Silverlight en Windows y Macintosh

Aunque Silverlight suele ser una solucin multiplataforma, hay algunas diferencias arquitectnicas bsicas
entre Microsoft Windows y Macintosh que debe tener en cuenta como desarrollador de Silverlight.
Diferencias funcionales
Modo de ventanas

Silverlight
En Windows, puede mostrar un rea de contenido de Silverlight hospedada en un explorador en modo de

ventanas o en modo sin ventanas. En Windows, el valor predeterminado es el modo de ventanas.
En Macintosh, no hay ningn modo de ventanas. El modo siempre es sin ventanas cualquiera que sea el
valor de Windowless.
Eventos de entrada
Varios eventos de entrada tienen comportamientos diferentes dependiendo de la plataforma. Por ejemplo,
algunas diferencias de comportamiento se deben a diferencias fsicas o lgicas en los dispositivos de
entrada. Otras se deben a las diferencias en las capas de hospedaje de complementos para el explorador.
Silverlight 4 presenta compatibilidad con la entrada de clic con el botn secundario a travs de los eventos
MouseRightButtonUp y MouseRightButtonDown. Los usuarios de Macintosh podran no tener un
dispositivo con un botn secundario fsico del mouse. Sin embargo, los usuarios de Macintosh normalmente
pueden generar un equivalente al clic con botn secundario presionando la tecla Control y haciendo clic
con el mouse. Silverlight procesa esta entrada como un clic con el botn secundario y genera los eventos
MouseRightButtonUp y MouseRightButtonDown.
Nota:
Si est controlando la entrada de teclado (como con los eventos KeyUp y KeyDown) y casos de proceso con
teclas modificadoras, debe tener en cuenta que se podra presionar la tecla Control en Macintosh para
generar el equivalente al clic con botn secundario.
Para el control de teclado general, hay dos conjuntos de teclas. Hay un conjunto de teclas que es un comn
entre todas las plataformas compatibles y otro conjunto que vara segn la plataforma. Una tecla de
plataforma se notifica como un PlatformKeyCode. Las teclas modificadoras (se obtienen a travs de la
propiedad Keyboard.Modifiers) pueden variar segn la plataforma.
Silverlight 4 permite arrastrar una lista de archivos desde fuera del complemento Silverlight a un elemento
de destino en el rea de contenido de Silverlight. Esta caracterstica se expone a travs de eventos de
entrada, como el evento Drop de la clase UIElement. Debido a las limitaciones en el modelo de entrada de
Safari para los complementos hospedados, solo puede habilitar esta caracterstica en Safari mediante una
solucin alternativa o correcciones de compatibilidad (shim) de scripting HTML. No puede habilitar esta
caracterstica en Firefox.
Aplicaciones con ejecucin fuera del explorador
Las aplicaciones con ejecucin fuera del explorador se ejecutan de manera idntica en Windows y en
Macintosh, pero necesitan pasos de desinstalacin diferentes. En Windows, los usuarios desinstalan una
aplicacin mediante Programas y caractersticas en el Panel de control. O bien, pueden hacer clic con el
botn secundario en la aplicacin y seleccionar la opcin de desinstalacin. En Macintosh, los usuarios
desinstalan una aplicacin arrastrndola hacia la papelera.
Las aplicaciones de confianza pueden integrarse con funcionalidad nativa que difiere dependiendo del
sistema operativo host. Por ejemplo, en Windows, las aplicaciones de confianza pueden interoperar con las
API de Automatizacin a travs de la clase AutomationFactory.
Depuracin
Puede depurar aplicaciones basadas en Silverlight en equipos Macintosh estableciendo una sesin de
depuracin remota desde un equipo que est ejecutando Windows con Visual Studio instalado.
Diferencias en el comportamiento de la API de biblioteca de CLR

En la tabla siguiente se enumeran las diferencias de comportamiento de los tipos y mtodos de las
bibliotecas de clases de .NET Framework cuando una aplicacin basada en Silverlight se ejecuta en Windows
y en Macintosh.
Caracterstica de .NET
Comportamiento de Windows Comportamiento de Macintosh
Framework
Convierte Char a minsculas usando En Mac OS v10.4 y en versiones
Char.ToLower(Char, CultureInfo) las convenciones de la referencia anteriores, convierte Char a
cultural especificada. minsculas usando las convenciones

Silverlight
de la referencia cultural actual.

En Mac OS v10.4 y en versiones
Convierte Char a maysculas usando
anteriores, convierte Char a
Char.ToUpper(Char, CultureInfo) las convenciones de la referencia
maysculas usando las convenciones
cultural especificada.
de la referencia cultural actual.
Puesto que no se admite el tipo de
datos Decimal, la representacin de
Devuelve una representacin de cadena de un valor Decimal puede
Decimal.ToString cadena coherente con otros tipos ser diferente de las representaciones
integrales. de cadena de los dems tipos
numricos de .NET Framework
admitidos por Mac OS X.
Devuelve el smbolo de infinito
Double.NegativeInfinity.ToString Devuelve la cadena -Infinity. precedido por un signo negativo (-
).
Double.PositiveInfinity.ToString Devuelve la cadena Infinity. Devuelve el smbolo de infinito ().

Devuelve el smbolo de infinito
Single.NegativeInfinity.ToString Devuelve la cadena -Infinity. precedido por un signo negativo (-
).
Single.PositiveInfinity.ToString Devuelve la cadena Infinity. Devuelve el smbolo de infinito ().
datos Single, la representacin de
Devuelve una representacin de cadena de un valor Single puede ser
Single.ToString cadena coherente con otros tipos de diferente de las representaciones de
punto flotante. cadena de los dems tipos
datos UInt16, la representacin de
Devuelve una representacin de cadena de un valor UInt16 puede ser
UInt16.ToString cadena coherente con otros tipos diferente de las representaciones de
integrales. cadena de los dems tipos
Los objetos CultureInfo distintos de Los objetos CultureInfo distintos de
CultureInfo.InvariantCulture CultureInfo.InvariantCulture
Propiedades recuperan sus datos de Windows. El recuperan sus datos de Mac OS X. El
System.Globalization. CultureInfo valor de las propiedades de una valor de las propiedades de una
referencia cultural determinada referencia cultural determinada
puede variar incluso entre distintas puede variar incluso entre distintas

Silverlight
versiones de Windows. versiones de Mac OS X.

Si el parmetro name no identifica Si el parmetro name no identifica
Constructor una referencia cultural vlida, el una referencia cultural vlida, el
CultureInfo.CultureInfo constructor inicia una excepcin constructor devuelve una referencia
ArgumentException. a la referencia cultural actual.
CultureInfo.DisplayName
Puesto que la informacin sobre los Puesto que la informacin sobre los
CultureInfo.EnglishName nombres de las referencias culturales nombres de las referencias culturales
se recupera de Windows, el valor de se recupera de Mac OS X, el valor de
CultureInfo.Name estas propiedades puede variar estas propiedades puede variar
segn las versiones de Windows. segn las versiones de Mac OS X.
CultureInfo.NativeName
Siempre devuelve una coma (,), con
Devuelve una cadena definida por el
TextInfo.ListSeparator independencia de la referencia
objeto CultureInfo.
cultural.
Si el usuario intenta asignar nombre
Si el usuario intenta asignar nombre
a un archivo usando caracteres no
a un archivo usando caracteres no
vlidos como ">", "<" o "|", se
System.Windows.Controls. vlidos como ">", "<" o "|",
producir una excepcin
SaveFileDialog aparecer una ventana emergente
System.ArgumentException con el
con un mensaje de error "El nombre
mensaje "Caracteres no vlidos en la
de archivo no es vlido".
ruta de acceso".
2. Introduccin a Silverlight
En los temas de esta seccin se ofrece informacin detallada para comenzar a desarrollar aplicaciones
basadas en Silverlight. Se incluye informacin sobre herramientas de desarrollo, el modo de crear un
proyecto bsico en Visual Studio y vnculos a ejemplos de cdigo fuente.
2.1. Herramientas de Silverlight

Puede crear aplicaciones basadas en Silverlight utilizando los conocimientos que ya tiene y las herramientas
con las que ya est familiarizado. En este tema se describen varias herramientas que puede usar cuando
desarrolle aplicaciones para Silverlight 4.
Instalar Silverlight 4 Tools para Visual Studio 2010

Si no tiene experiencia con el desarrollo en Silverlight 4, la manera ms rpida de ponerse al da es instalar
Visual Studio 2010 o Visual Web Developer 2010 Express e instalar Silverlight 4 Tools para Visual Studio
2010.
Nota:
De forma predeterminada, Visual Studio 2010 incluye compatibilidad con Silverlight 3.
Para instalar Silverlight 4 Tools para Visual Studio 2010

1. Instale Visual Studio 2010 o Visual Web Developer 2010 Express.
2. Instale Silverlight 4 Tools para Visual Studio 2010.
En la siguiente ilustracin, se muestra un ejemplo de las plantillas de proyecto de Silverlight.

Silverlight
Al instalar Silverlight 4 Tools para Visual Studio 2010, aparecer la opcin para elegir Silverlight 4
como destino. En la siguiente ilustracin se muestra la opcin Silverlight 4 en el cuadro de dilogo
Nueva aplicacin de Silverlight.
Al crear un nuevo proyecto de Silverlight, ver un gran nmero de las herramientas y ventanas con
las que ya se ha familiarizado en Visual Studio.

Silverlight
Silverlight 4 Tools para Visual Studio 2010

Silverlight 4 Tools for Visual Studio 2010 RC es un complemento para Visual Studio 2010 o Visual Web
Developer 2010 Express que proporciona varias caractersticas para crear aplicaciones en Silverlight. Cuando
se instala Silverlight 4 Tools, se instalan los componentes siguientes.
Silverlight 4 developer runtime
SDK de Silverlight 4
Actualizaciones a Visual Studio para admitir las caractersticas de Silverlight 4
Tema sobre Servicios RIA de WCF
A diferencia del runtime de Silverlight que instalan los usuarios finales, el runtime para desarrolladores que
se instala con Silverlight 4 Tools incluye mensajes de error que pueden ser tiles para depurar.
SDK de Silverlight 4
El Kit de desarrollo de software (SDK) de Silverlight 4 incluye varios componentes que ayudan a crear
aplicaciones de Silverlight. El SDK de Silverlight 4 se incluye en la instalacin de Silverlight 4 Tools, pero
tambin lo puede instalar por separado. De forma predeterminada, el SDK de Silverlight 4 se instala en la
carpeta %ProgramFiles%\Microsoft SDKs\Silverlight. El SDK de Silverlight 4 contiene los elementos
siguientes.
Licencia de usuario. El documento de licencia incluye las condiciones del SDK de Silverlight 4.
Bibliotecas de Silverlight. El SDK de Silverlight 4 incluye bibliotecas de cliente y servidor. Las
bibliotecas de Silverlight no forman parte del complemento Silverlight. Las bibliotecas de cliente
incluyen las extensiones y los controles de usuario de Silverlight. Las bibliotecas de servidor
incluyen los controles de servidor de Silverlight. Para conocer las condiciones de uso, consulte la
licencia de usuario del SDK de Silverlight 4.
Herramientas. Incluye ensamblados de referencia, componentes de compilacin y herramientas
para compilar y empaquetar aplicaciones de Silverlight.
Otras herramientas de Silverlight

A medida que avanza con el desarrollo en Silverlight, es posible que le resulten tiles otras herramientas. En
la tabla siguiente se indican algunas de ellas.
Herramienta Descripcin
Expression Blend es una herramienta para diseadores (y programadores) que
permite crear grficos, disear animaciones y generar experiencias de usuario.
Expression Blend Expression Blend utiliza XAML y el mismo sistema de proyectos que Visual Studio.
Esto permite que diseadores y programadores compartan los mismos archivos y
colaboren.
Deep Zoom Composer es una herramienta que permite preparar imgenes de alta
resolucin para usarlas con la caracterstica Deep Zoom. La nueva tecnologa Deep
Deep Zoom Zoom de Silverlight permite al usuario acercar y alejar las imgenes de manera fluida.
Composer Deep Zoom Composer permite al usuario crear archivos de composicin Deep Zoom
que controlan la experiencia de aplicar el zoom y, luego, exportar los archivos
necesarios para su implementacin con Silverlight.
Silverlight.js es un archivo auxiliar de JavaScript que se proporciona en el SDK de
Silverlight. Puede llamar a las funciones definidas en este archivo para inicializar
Silverlight.js instancias del complemento Silverlight en una pgina web. Silverlight.js tambin
contiene las funciones de utilidad para determinar la versin instalada del cliente del
complemento.
Este archivo de aplicacin auxiliar de JavaScript opcional incluye la funcin
Silverlight.supported
Silverlight.supportedUserAgent, que determina si el explorador del usuario admite
UserAgent.js
Silverlight.
2.2. Silverlight Designer para Visual Studio 2010

Silverlight
Silverlight Designer para Visual Studio 2010 proporciona compatibilidad con el diseo visual para crear
aplicaciones de Silverlight y de Windows Presentation Foundation (WPF). Para construir las interfaces de
usuario de las aplicaciones, arrastre los controles del Cuadro de herramientas y establezca las propiedades
en la ventana Propiedades. Tambin puede editar directamente XAML en la vista XAML. En la ilustracin
siguiente se muestran Silverlight Designer y algunas de sus ventanas auxiliares.
La primera vez que se inicia Silverlight Designer, las ventanas Cuadro de herramientas, Orgenes de datos y
Esquema del documento se contraen en el lado izquierdo de Visual Studio. Si se muestran y anclan las
pestaas a la izquierda, se ve la vista anterior, lo cual resulta til para usar la superficie de diseo.
Vista de diseo
La vista de diseo proporciona una superficie de diseo visual para compilar los controles de Silverlight y
para el diseo de las aplicaciones. Muestra una presentacin del XAML que hay actualmente en la vista
XAML. Cuando se cambian los controles en la superficie de diseo, la vista XAML se actualiza para reflejar
los cambios. La vista de diseo proporciona muchas caractersticas para organizar los controles de la pgina
de la aplicacin de Silverlight. En la siguiente ilustracin se muestran algunas de las caractersticas de la vista
Diseo.
Vista de diseo
Zoom
El control Zoom permite controlar el tamao de la superficie de diseo. Puede hacer zoom desde 10% hasta
20x.
Panormica
Cuando se aplica el zoom a la superficie de diseo y aparece una barra de desplazamiento horizontal o
vertical, puede aplicar la panormica para ver las partes de la superficie de diseo que estn fuera de la
pantalla. Mantenga presionada la barra espaciadora y, a continuacin, arrastre la superficie de diseo para
aplicar la panormica.

Silverlight
Ajustar a la vista
El botn Ajustar a la vista permite ajustar el tamao de la superficie de diseo a la pantalla disponible en la
vista de diseo. Esto resulta til si ha hecho zoom para acercarse o alejarse mucho.
Rales de la cuadrcula
Los rales de la cuadrcula se usan para administrar las filas y columnas en un control Grid. Puede crear y
eliminar columnas y filas, y puede ajustar el alto y el ancho relativos.
Lneas de la cuadrcula
Las lneas de la cuadrcula se usan para controlar el ancho y alto de las columnas y filas de un objeto Grid.
Para agregar una nueva columna o fila, haga clic en los rales situados encima y a la izquierda de Grid.
Indicadores de lnea de cuadrcula
Un indicador de lnea de cuadrcula aparece como un tringulo en el ral de la cuadrcula. Al arrastrar un
indicador de lnea de cuadrcula o la propia lnea de cuadrcula, el ancho o el alto de las columnas o filas
adyacentes se actualiza al mover el mouse.
Icono de desplazamiento
Un icono de desplazamiento aparece en la parte superior izquierda de un control de panel seleccionado y
permite mover el panel. Haga clic en el icono de desplazamiento y arrastre el control hacia la posicin
deseada en la superficie de diseo.
Asas de ajuste de tamao
Las asas de ajuste de tamao aparecen en los controles seleccionados y permiten cambiar el tamao del
control. Cuando se cambia el tamao de un control, normalmente aparecen valores de ancho y alto para
ayudar a ajustar el tamao del control con exactitud.
Lneas del margen
Los mrgenes representan la cantidad de espacio fijo comprendido entre el borde de un control y el borde
de su contenedor. Establezca los mrgenes de un control haciendo clic en las lneas del margen.
Cdigos auxiliares de margen
Un cdigo auxiliar de margen aparece en un control seleccionado cuando su margen se establece en 0.
Haga clic en el cdigo auxiliar de margen para establecer una distancia del margen respecto del borde
correspondiente del contenedor.
Lneas de ajuste
Las guas de alineacin ayudan a alinear los controles entre s. Si estn habilitadas, al arrastrar un control en
relacin con otros controles, las guas de alineacin aparecen cuando los bordes y el texto de algunos
controles estn alineados horizontal o verticalmente.
Barra de informacin
La barra de informacin aparece en la parte superior de la vista de diseo y muestra informacin sobre
cmo presentar los problemas en dicha vista. En algunos casos, puede hacer clic en la barra de informacin
para obtener informacin adicional sobre el problema.
Barra de tamao
Al mover el puntero del mouse sobre un ral de la cuadrcula para un control Grid que tiene dos o ms
columnas o filas, aparece la barra de tamao fuera del ral. La barra de tamao permite establecer las
opciones de tamao fijo, proporcional y automtico para las filas y las columnas de Grid.
Etiqueta de tamao de raz
La etiqueta de tamao de raz aparece en la parte inferior derecha de la ventana en la vista de diseo
cuando la ventana est seleccionada. Dicha etiqueta permite alternar el tamao raz de la ventana entre
automtico y fijo.
Vista XAML

Silverlight
El lenguaje XAML proporciona un vocabulario declarativo, basado en XML, para especificar la interfaz de
usuario de una aplicacin. Silverlight Designer proporciona una vista XAML y una vista de diseo
sincronizada del marcado XAML que presenta la aplicacin. La vista XAML incluye IntelliSense, formato
automtico, resaltado de sintaxis y navegacin por etiquetas. En la siguiente ilustracin, se muestra la vista
XAML.
Vista XAML
Barra de vista en dos paneles

La barra de vista en dos paneles permite controlar los tamaos relativos de la vista de diseo y la vista
XAML. Tambin puede intercambiar las vistas, especificar si la vista en dos paneles es horizontal o vertical y
contraer cualquiera de las vistas.
IntelliSense de extensiones de marcado
Adems de IntelliSense de lenguaje estndar, la vista XAML admite IntelliSense para extensiones de
marcado. Al escribir una llave de apertura ({) en la vista XAML, IntelliSense muestra las extensiones de
marcado disponibles. Al seleccionar una extensin de marcado en la lista, IntelliSense muestra los atributos
disponibles.
Explorador de etiquetas
El explorador de etiquetas aparece bajo la vista XAML y permite moverse a cualquier etiqueta primaria de la
etiqueta actualmente seleccionada en la vista mencionada. Al mover el puntero del mouse sobre una
etiqueta en el explorador de etiquetas, se muestra una vista previa en miniatura de ese elemento.
Zoom
El control Zoom permite controlar el tamao de la vista XAML. Puede usar el zoom desde 20% hasta 400%.
Propiedades (Ventana)
La ventana Propiedades permite establecer los valores de las propiedades en los controles en la vista de
diseo. En la siguiente ilustracin se muestra un ejemplo de la ventana Propiedades.

Silverlight
Ventana Propiedades
La parte superior de la ventana Propiedades tiene varias opciones. Para cambiar el nombre del control
seleccionado actualmente, coloque el cursor en el cuadro Nombre y escriba el nombre. En la esquina
superior derecha se muestra una vista previa en miniatura del control seleccionado actualmente. Para
enumerar las propiedades por categora o alfabticamente, haga clic en el botn Por categoras o
Alfabtico. Para ordenar las propiedades por origen, haga clic en el botn Ordenar por origen de
propiedad. Para ver la lista de eventos de un control, haga clic en el botn Eventos. Para buscar una
propiedad, empiece a escribir el nombre de esta en el cuadro Buscar. La ventana Propiedades muestra las
propiedades que coinciden con su bsqueda cuando escribe.
A la derecha del nombre de la propiedad, en la primera columna, aparece un marcador de propiedad. El
marcador de propiedad indica si se ha aplicado a la propiedad un recurso o enlace de datos. Al hacer clic en
el marcador de propiedad, puede abrir el generador de enlace de datos o el selector de recursos.
Generador de enlace de datos
El generador de enlace de datos permite crear enlaces de datos sin necesidad de escribir cdigo XAML.
Puede crear enlaces a los recursos, contextos de datos y propiedades de los elementos. Tambin puede
aplicar convertidores de valores. En la ilustracin siguiente, se muestra el generador de enlaces de datos.
Generador de enlace de datos
Selector de recursos
El selector de recursos permite buscar recursos y asignarlos a las propiedades en la ventana Propiedades.
Tambin puede extraer los valores codificados de forma rgida a los recursos para promover la reutilizacin.
En la ilustracin siguiente, se muestra el selector de recursos.

Silverlight
Selector de recursos
Editor de pinceles
El editor de pinceles permite crear muchos tipos distintos de pinceles en la ventana Propiedades. En la
ilustracin siguiente, se muestra el editor de pinceles.
Editor de pinceles
Ventana Orgenes de datos

Es posible integrar rpidamente datos en la aplicacin de Silverlight mediante la ventana Orgenes de datos.
En la ilustracin siguiente, se muestra un ejemplo de la ventana Orgenes de datos.
Ventana Orgenes de datos

Silverlight
Una vez establecida una conexin de datos, puede arrastrar las tablas de datos a la superficie de diseo y se
generarn automticamente lgica de negocios y enlaces de datos. Se puede enlazar a un objeto, conjunto
de datos de ADO.NET, Entity Data Model o servicio.
Esquema del documento (Ventana)

La ventana Esquema del documento proporciona una vista jerrquica de un documento XAML. Puede usar
la ventana Esquema del documento para obtener una vista previa y para seleccionar o eliminar elementos
XAML. En la ilustracin siguiente, se muestra un ejemplo de la ventana Esquema del documento.
Esquema del documento (Ventana)
Ayuda para la creacin de aplicaciones y controles

Para obtener ms informacin sobre cmo crear aplicaciones y controles de Silverlight, vea los siguientes
temas.
Descripcin Tema
Crear una nueva biblioteca de clases o aplicacin de
Cmo: Crear un nuevo proyecto de Silverlight
Silverlight con Visual Studio.
Utilizar controles en una pgina. Introduccin a los controles
Crear controladores de eventos para controles. Introduccin a los controles
Manipular el diseo de las aplicaciones de Silverlight. Alineacin en Silverlight Designer
Enlazar datos con el diseador. Enlace de datos en Silverlight Designer
Extensibilidad de WPF Designer
Crear una experiencia en tiempo de diseo para los
controles de Silverlight. Ejemplos de la extensibilidad de WPF Designer y
Crear aplicaciones y controles de WPF. WPF Designer
2.3. Cmo: Crear un nuevo proyecto de Silverlight

Los archivos de proyecto de Silverlight son archivos de texto que puede crear y modificar utilizando
herramientas diferentes. Por ejemplo, puede usar Visual Studio 2010 y Expression Blend para crear
proyectos de Silverlight o modificar proyectos existentes.
En este tema se describe cmo usar Visual Studio 2010 para crear y compilar un nuevo proyecto de
aplicacin de Silverlight o un proyecto de biblioteca de clases de Silverlight. Tambin se describe cmo
agregar un ensamblado de bibliotecas de Silverlight a un proyecto. Necesita los componentes siguientes
para llevar a cabo estos pasos:
Silverlight versin 4.
Silverlight 4 Tools para Visual Studio 2010.
Visual Studio 2010.
Proyecto de aplicacin de Silverlight

Un proyecto de aplicacin de Silverlight se crea utilizando la plantilla de proyecto Aplicacin de Silverlight.
Utilice los pasos siguientes para crear un nuevo proyecto de aplicacin de Silverlight.
Para crear un nuevo proyecto de aplicacin de Silverlight
1. Inicie Visual Studio 2010.

Silverlight
2. En el men Archivo, haga clic en Nuevo y, a continuacin, en Proyecto.

Aparecer el cuadro de dilogo Nuevo proyecto.
3. En el recuadro Plantillas instaladas, expanda el nodo Visual C# o Visual Basic y seleccione
Silverlight.
4. En la lista de plantillas, seleccione Aplicacin de Silverlight. En la siguiente ilustracin, se muestra
un ejemplo de las plantillas de proyecto de Silverlight.
5. Especifique un nombre y una ubicacin para la aplicacin y, a continuacin, haga clic en Aceptar.
Aparecer el cuadro de dilogo Nueva aplicacin de Silverlight, tal y como se muestra en la
siguiente ilustracin.
6. Seleccione un mtodo para hospedar la aplicacin de Silverlight.

a. Desactive la casilla Hospedar la aplicacin de Silverlight en un nuevo sitio web si no
desea usar un sitio web para hospedar la aplicacin de Silverlight. En su lugar, se generar
una pgina de prueba HTML para hospedar la aplicacin.
b. Active la casilla Hospedar la aplicacin de Silverlight en un nuevo sitio web si desea
agregar un sitio web ASP.NET o un proyecto de aplicacin web ASP.NET independiente a
su solucin para hospedar la aplicacin de Silverlight. Si selecciona esta opcin, tambin
debe especificar las opciones Nuevo nombre de proyecto web y Nuevo tipo de
proyecto web.
7. En la lista desplegable Versin de Silverlight, seleccione la versin de Silverlight de destino.

Silverlight
8. Haga clic en el botn OK.

9. Para generar el proyecto de aplicacin de Silverlight, en el men Generar, haga clic en Generar
solucin.
10. Para depurar el proyecto de aplicacin de Silverlight, en el men Depurar, hace clic en Iniciar
depuracin.
11. Para ejecutar el proyecto de aplicacin de Silverlight, en el men Depurar, haga clic en Iniciar sin
depurar.
Archivos de proyecto de aplicacin de Silverlight
Un proyecto de aplicacin de Silverlight contiene la configuracin, las referencias de ensamblado y los
archivos de cdigo siguientes:
AppManifest.xml
Este es el archivo de manifiesto de aplicacin que se exige para generar el paquete de la aplicacin.
No debe modificarlo.
AssemblyInfo.cs o AssemblyInfo.vb
Este archivo contiene los metadatos de nombre y versin que se incrustan en el ensamblado
generado.
Archivo .xap
Este es el paquete de aplicacin de Silverlight. Se genera cuando se genera el proyecto de
aplicacin de Silverlight. Un paquete de aplicacin es un archivo zip comprimido con la extensin
.xap que contiene todos los archivos que se requieren para iniciar la aplicacin.
Un proyecto de aplicacin de Silverlight contiene referencias a los ensamblados siguientes:
o mscorlib.dll
o System.dll
o System.Core.dll
o System.Net.dll
o System.Windows.dll
o System.Windows.Browser.dll
o System.Xml.dll
Archivos MainPage
La clase MainPage se utiliza para crear la interfaz de usuario para la aplicacin de Silverlight. La
clase MainPage se deriva de UserControl. Puede implementar la clase MainPage utilizando
MainPage.xaml para el marcado XAML, y MainPage.xaml.cs o MainPage.xaml.vb para el cdigo
subyacente.
Archivos de aplicacin
Una aplicacin de Silverlight requiere la clase App para mostrar la interfaz de usuario. La clase App
se implementa utilizando App.xaml y App.xaml.cs o App.xaml.vb. El complemento Silverlight crea
instancias de la clase App una vez creado el paquete de aplicacin (archivo .xap).
Pgina de prueba
Si no se activa la casilla Hospedar la aplicacin de Silverlight en un nuevo sitio web en el cuadro
de dilogo Nueva aplicacin de Silverlight, se genera una nica pgina HTML (TestPage.html)
para hospedar la aplicacin.
Archivos de aplicacin para proyectos web de Silverlight

Silverlight
Si activa la casilla Hospedar la aplicacin de Silverlight en un nuevo sitio web en el cuadro de dilogo
Nueva aplicacin de Silverlight, se crea y se agrega a la solucin de Silverlight un sitio web ASP.NET. El
sitio web contiene los archivos siguientes:
Silverlight.js
Un archivo auxiliar de JavaScript que contiene funciones para inicializar instancias de complemento
Silverlight y funciones para determinar la versin instalada del cliente del complemento.
Archivo HTML
Un archivo HTML que se utiliza para configurar y crear instancias del complemento Silverlight, que
descarga y ejecuta la aplicacin de Silverlight. El nombre de este archivo es una concatenacin del
nombre del proyecto de aplicacin de Silverlight y el texto "TestPage.html".
Archivo .aspx
Archivo .aspx que es la pgina web de inicio predeterminada. El nombre de este archivo es una
concatenacin del nombre del proyecto de aplicacin de Silverlight y el texto "TestPage.aspx".
Web.config
Archivo de configuracin del sitio web
Proyecto de biblioteca de clases de Silverlight

Un proyecto de biblioteca de clases de Silverlight se crea utilizando la plantilla de proyecto Biblioteca de
clases de Silverlight. Utilice los pasos siguientes para crear un nuevo proyecto de biblioteca de clases de
Silverlight.
Para crear un nuevo proyecto de biblioteca de clases de Silverlight
1. Inicie Visual Studio 2010.
2. En el men Archivo, haga clic en Nuevo y, a continuacin, en Proyecto.
3. En el recuadro Plantillas instaladas, expanda el nodo Visual C# o Visual Basic y seleccione
Silverlight.
4. En la lista de plantillas, seleccione Biblioteca de clases de Silverlight.
5. Especifique un nombre y una ubicacin para la biblioteca de clases y, a continuacin, haga clic en
Aceptar.
Aparecer el cuadro de dilogo Agregar biblioteca de clases de Silverlight.
6. En la lista desplegable Versin de Silverlight, seleccione la versin de Silverlight de destino y haga
clic en Aceptar.
Archivos de proyecto de biblioteca de clases de Silverlight
El proyecto de biblioteca de clases de Silverlight contiene la configuracin, las referencias de ensamblado y
los archivos de cdigo siguientes:
AssemblyInfo.cs o AssemblyInfo.vb
Este archivo contiene los metadatos de nombre y versin que se incrustan en el ensamblado
generado.
Un proyecto de biblioteca de clases de Silverlight contiene referencias a los ensamblados
siguientes:
o mscorlib.dll
o System.dll
o System.Core.dll
o System.Net.dll
o System.Windows.dll
o System.Windows.Browser.dll
o System.Xml.dll

Silverlight
Class1.cs o Class1.vb
El archivo de cdigo para una clase nica denominada Class1.
Agregar un ensamblado de biblioteca de Silverlight

Al instalar Silverlight 4 Tools para Visual Studio 2010, se instalan los ensamblados bsicos de Silverlight en
tiempo de ejecucin, as como el SDK de Silverlight. El SDK de Silverlight incluye ensamblados de bibliotecas
de Silverlight, organizados en bibliotecas de cliente y servidor.
Los pasos siguiente muestran cmo agregar una referencia a un ensamblado de biblioteca de Silverlight.
Para agregar una referencia al ensamblado System.Windows.Forms.
1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el proyecto de
Silverlight y seleccione Agregar referencia.
2. Aparecer el cuadro de dilogo Agregar referencia.
3. En la ficha de .NET, seleccione la referencia que desea agregar.
4. Por ejemplo, seleccionara System.Windows.Controls.Data para utilizar el control DataGrid en su
proyecto.
5. Haga clic en Aceptar.
6. La referencia que agreg aparecer en el nodo References.
Nota:
Para excluir el ensamblado al que se hace referencia en el paquete de la aplicacin, seleccione la referencia
de ensamblado y, a continuacin, en la ventana Propiedades, establezca Copia local en Falso. Esto es til
cuando se desear recuperar el ensamblado a peticin.
Para utilizar el ensamblado en XAML, tiene que especificar una asignacin del espacio de nombres XML.
Para agregar una asignacin de espacio de nombres XML
1. Abra MainPage.xaml.
2. En la etiqueta de apertura <UserControl>, agregue el marcado para declarar un espacio de
nombres. Por ejemplo, agregara el siguiente marcado para utilizar DataGrid.
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
3. Para utilizar el elemento en XAML, prefije el nombre con el nombre especificado en la asignacin
del espacio de nombres XML. Por ejemplo, en XAML, el elemento DataGrid se parecera a lo
siguiente:
<sdk:DataGrid></sdk:DataGrid>
2.4. Tutorial: Crear por primera vez una aplicacin de Silverlight

En este tutorial se muestra cmo empezar a programar en Silverlight y Visual Studio creando una aplicacin
simple. En este tutorial se muestran los conceptos siguientes.
Crear un diseo dinmico mediante los controles StackPanel y Grid.
Agregar controles bsicos y controles del SDK de Silverlight.
Agregar un controlador de eventos.
Agregar lgica de cdigo.
Requisitos previos
Necesita los componentes siguientes para completar este tutorial:
Visual Studio 2010.
Crear un proyecto de Silverlight

Silverlight
El primer paso es crear un proyecto de Silverlight.

Para crear un proyecto de Silverlight
1. Cree un nuevo proyecto de aplicacin de Silverlight denominado HelloSilverlight en Visual Basic o
Visual C#. Desactive la casilla Hospedar la aplicacin de Silverlight en un nuevo sitio web.
2. Abra el Explorador de soluciones y observe que hay un archivo App.xaml y un archivo
MainPage.xaml.
App.xaml permite especificar recursos y cdigo aplicables a toda la aplicacin. MainPage.xaml
define una pgina, similar a una pgina de un sitio web.
3. En el Explorador de soluciones, expanda el nodo MainPage.xaml.
El archivo MainPage.xaml.vb o MainPage.xaml.cs es el archivo de cdigo subyacente donde se
escribe el cdigo administrado. Este modelo es similar al que se utiliza en ASP.NET.
4. Si el archivo MainPage.xaml an no est abierto, haga doble clic en l en el Explorador de
soluciones.
En el centro de Visual Studio, debe ver un rea rectangular blanca. Esta rea se llama la vista de
diseo. Puede arrastrar controles desde el cuadro de herramientas y colocar elementos para crear
su diseo.
La vista de diseo siguiente es la vista XAML. La vista XAML es el lugar donde puede agregar el
XAML para crear el diseo. A medida que realiza cambios en la vista XAML, la vista de diseo se
actualiza automticamente. IntelliSense se muestra para ayudarle a trabajar en la vista XAML, y
muestra lneas onduladas para indicar los errores.
Definir el diseo de cuadrcula

De forma predeterminada, los proyectos de Silverlight incluyen Grid. Grid permite crear un diseo de tipo
tabla similar a una tabla de HTML. En esta seccin se describe cmo crear un diseo Grid. En una seccin
posterior, aprender a hacer el diseo dinmico.
Para definir el diseo de cuadrcula
1. En la vista XAML, localice el elemento Grid.
2. En la etiqueta Grid de apertura, cambie el color Background reemplazando "Blanco" con otro color.
A medida que escribe, debe ver una ventana de IntelliSense con una lista de colores donde elegir.
Al especificar un color, la vista de diseo se actualiza con el nuevo color.

Silverlight
3. En la etiqueta de apertura de Grid, agregue la propiedad ShowGridLines y establzcala en True, tal

y como se muestra en el XAML siguiente.
<Grid x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">
Esta propiedad especifica que se agreguen lneas para identificar las filas y columnas de Grid. Esta
caracterstica de depuracin resulta de gran utilidad a la hora de crear los diseos de Grid.
4. Dentro del elemento Grid, agregue el siguiente cdigo XAML para definir tres filas y dos columnas.
<RowDefinition Height="40"/>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="325"/>
</Grid>
En la vista de diseo, ve que aparecen lneas que identifican las filas y columnas.
5. Presione F5 o haga clic en el botn de barra de herramientas Iniciar depuracin para ejecutar la
aplicacin.
El explorador se abrir y ver lneas de puntos que indican el Grid que defini, como se muestra en
la siguiente ilustracin.
6. Cierre el explorador para regresar a Visual Studio.
Agregar controles
Silverlight incluye varios controles para ayudarle a mostrar los datos y obtener los datos introducidos por el
usuario. En esta seccin se describe cmo agregar controles TextBlock, TextBox, StackPanel, Calendar y
Button al diseo de Grid.
Para agregar controles
1. Abra la ventana Cuadro de herramientas, si an no est abierta.

Silverlight
2. En el cuadro de herramientas, arrastre un control TextBlock justo detrs de la etiqueta de cierre

</Grid.ColumnDefinitions> en la vista XAML.
El marcado <TextBlock /> se agregar a la vista XAML.
3. En la etiqueta de apertura TextBlock, agregue la siguiente propiedad Text.
<TextBlock Text="Name:"></TextBlock>
4. Detrs del control TextBlock denominado Name, agregue otro control de tipo TextBlock con
Text="Date:".
5. Detrs del control TextBlock denominado Date, agregue otro control de tipo TextBlock con
Text="Message:".
En la vista de diseo, puede ver que los elementos TextBlock se superponen entre s en la primera
celda. Para colocar los controles TextBlock en celdas Grid, debe especificar las propiedades
Grid.Row y Grid.Column.
6. En la etiqueta de apertura del control TextBlock Name, agregue las propiedades siguientes.
Grid.Row="0" Grid.Column="0"
Tenga en cuenta que las propiedades se denominan Grid.Row y Grid.Column en lugar de

simplemente Row y Column. Grid incluye las propiedades Row y Column, pero no se incluyen en la
clase TextBlock. Sin embargo, puede "adjuntar" las propiedades de Fila y Columna de Grid a
TextBlock. Grid.Row y Grid.Column son propiedades especiales denominadas propiedades adjuntas.
Las propiedades adjuntas son un concepto que usar en XAML.
7. En la etiqueta de apertura del control de tipo TextBlock denominado Date, agregue las propiedades
siguientes.
8. En la etiqueta de apertura del control de tipo TextBlock denominado Message, agregue las
propiedades siguientes.
9. Agregue la siguiente propiedad ColumnSpan adjunta al control de tipo TextBlock denominado

Message para permitir que el texto abarque ambas columnas.
Grid.ColumnSpan="2"
En la vista de diseo, los elementos TextBlock se colocan ahora en las celdas adecuadas.
10. En el cuadro de herramientas, arrastre un control TextBox Message justo detrs del mensaje
TextBlock en la vista XAML.
11. En la etiqueta de apertura, defina las propiedades siguientes.
<TextBox Text="Your Name" Grid.Row="0" Grid.Column="1"></TextBox>
Observe que TextBox rellena toda la celda Grid. Rellena la celda porque las propiedades
VerticalAlignment y HorizontalAlignment estn establecidas en "Stretch" (ajustada) de forma
predeterminada.

Silverlight
12. En la etiqueta de apertura de TextBox, establezca la propiedad Width en 150.

Width="150"
Observe que TextBox est centrado en la celda Grid cell.

13. En la etiqueta de apertura de TextBox, establezca la alineacin a la izquierda agregando la siguiente
propiedad HorizontalAlignment.
HorizontalAlignment="Left"
14. Debajo del control TextBox denominado Your Name, arrastre un control StackPanel desde el
cuadro de herramientas hasta la vista XAML.
StackPanel es un control til para apilar los elementos vertical u horizontalmente. En la celda de la
cuadrcula de Grid situada bajo el control Name de tipo TextBox, apilar dos controles
verticalmente.
15. En la etiqueta de apertura del control de tipo StackPanel, agregue las propiedades siguientes.
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical">
</StackPanel>
16. En el cuadro de herramientas, arrastre un control Calendar al interior del elemento StackPanel en la
vista XAML.
Al agregar el control Calendar, observar que el nombre de la etiqueta es algo diferente del de los
dems controles. Lleva el prefijo "sdk:". El control Calendar no forma parte de los controles bsicos
de Silverlight y se implementa en un ensamblado diferente. El control Calendar forma parte del SDK
de Silverlight. Para usar los controles del SDK de Silverlight, debe agregar un espacio de nombres
XML y una referencia al ensamblado. Al arrastrar un control del SDK de Silverlight hasta la vista
XAML o de diseo, se agrega automticamente un espacio de nombres XML al principio del archivo
MainPage.xaml, en la etiqueta <UserControl>. Tal y como se puede ver en el siguiente marcado, el
espacio de nombres sdk utiliza un identificador URI concreto, lo cual se describe en Prefijos y
asignaciones para las bibliotecas de Silverlight.
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
17. En la etiqueta de apertura del Calendar, establezca las propiedades siguientes.

Estableciendo SelectionMode en SingleDate se especifica que solo se permita la seleccin de una
fecha.
Observe el uso del prefijo sdk: para asociar el elemento Calendar al espacio de nombres del SDK
declarado en el paso anterior.
<sdk:Calendar SelectionMode="SingleDate" HorizontalAlignment="Left"></sdk:Calendar>
18. En el cuadro de herramientas, arrastre un control Button justo detrs del control Calendar, pero
dentro del elemento StackPanel en la vista XAML.
Puesto que la propiedad Orientation del control StackPanel est establecida en Vertical, el control
de tipo Button aparecer bajo el control Calendar.

Silverlight
19. En la etiqueta de apertura del control Button, establezca las propiedades Width, Height,
HorizontalAlignment y Content.
<Button Width="75" Height="25" HorizontalAlignment="Left" Content="OK"></Button>
Un control Button no incluye ninguna propiedad Text, pero s que incluye una propiedad Content.
El control Button tiene una propiedad Content porque realmente pueden agregarse otros
elementos como contenido de Button, tales como imgenes u otros controles.
20. En el men Archivo, haga clic en Guardar todo.
Llegados a este punto, podemos decir que se han agregado todos los controles. El cdigo XAML
ser similar al siguiente.
<UserControl
x:Class="HelloSilverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="300">
<ColumnDefinition Width="325"/>
<TextBlock Text="Name:" Grid.Row="0" Grid.Column="0"></TextBlock>
<TextBlock Text="Date:" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock Text="Message:" Grid.Row="2" Grid.Column="0"
Grid.ColumnSpan="2"></TextBlock>
<TextBox Text="Your Name" Grid.Row="0" Grid.Column="1"
Width="150" HorizontalAlignment="Left"></TextBox>
<sdk:Calendar SelectionMode="SingleDate"
HorizontalAlignment="Left"></sdk:Calendar>
<Button Width="75" Height="25"
HorizontalAlignment="Left" Content="OK"></Button>
</StackPanel>
</Grid>
</UserControl>
21. Presione F5 o haga clic en Iniciar depuracin para ejecutar la aplicacin.

En la ilustracin siguiente se muestra un ejemplo de la ventana del explorador. Puede escribir texto
en el control de tipo TextBox y puede seleccionar fechas en el control de tipo Calendar, pero el
control de tipo Button no es operativo ya que no se le ha agregado todava cdigo.
Agregar cdigo

Silverlight
Los archivos de cdigo subyacente permiten agregar lgica a los elementos definidos mediante XAML. Para
obtener acceso a los controles y a otros elementos mediante programacin, es necesario asignar un nombre
a los elementos. En esta seccin se describe cmo asignar un nombre a los elementos en XAML, cmo
agregar un controlador de eventos y cmo agregar lgica al archivo de cdigo subyacente.
Para agregar cdigo
1. En la vista XAML, busque el control Message de tipo TextBlock .
2. En la etiqueta de apertura del control Message de tipo TextBlock, agregue la siguiente propiedad
Name message1.
x:Name="message1"
El atributo x:Name identifica de forma nica un control.

3. Del mismo modo, asigne un nombre al control TextBox name1, al control Calendar cal1 y al control
Button okButton.
x:Name="name1"
x:Name="cal1"
x:Name="okButton"
4. En la etiqueta de apertura del control OK de tipo Button, escriba Click y, a continuacin, presione
TAB.
Deber aparecer una ventana de IntelliSense, tal y como se muestra en la ilustracin siguiente.
5. Haga doble clic en <Nuevo controlador de eventos>.

El nombre predeterminado del controlador de eventos Click aparece en XAML
(Click="okButton_Click") y se crea un controlador de eventos en el archivo de cdigo subyacente.
6. Haga clic con el botn secundario en Click="okButton_Click" y, en el men contextual, seleccione
Navegar al controlador de eventos, tal y como se muestra en la ilustracin siguiente.
Se abrir MainPage.xam.vb o MainPage.xaml.cs y el cursor se colocar en el controlador de eventos

okButton_Click.
7. Agregue el cdigo siguiente al controlador de eventos okButton_Click.
Private Sub okButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Dim dateString As String
If cal1.SelectedDate Is Nothing Then
dateString = "<date not selected>"
Else
dateString = cal1.SelectedDate.ToString()
End If
message1.Text = "Hi " & name1.Text & vbCrLf & _
"Selected Date: " & dateString
End Sub

9. Escriba su nombre en el cuadro Name, seleccione una fecha en Calendar y, a continuacin, haga clic
en Aceptar.
Se mostrar su nombre y la fecha seleccionada. En la ilustracin siguiente se muestra un ejemplo
de la ventana del explorador.

Silverlight
Hacer el diseo dinmico

El diseo actual es fijo. Silverlight incluye varias opciones para hacer los diseos dinmicos. En esta seccin
se describen las tcnicas para hacer el diseo ms dinmico.
Para hacer el diseo dinmico
1. En el elemento Grid.RowDefinitions de MainPage.xaml, cambie los valores de Height por los
siguientes.
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" MinHeight="220"/>
El ajuste de tamao Auto indica que el tamao viene determinado por el contenido. El ajuste de
tamao Star (*) indica que el tamao es una proporcin ponderada del espacio restante.
2. En el elemento Grid.ColumnDefinitions, cambie los valores de Width por los siguientes.
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
3. Agregue la siguiente propiedad Margin a los controles de tipo TextBlock Name, Date y Message.
El siguiente cdigo indica que se agregue un margen de 10 pxeles a izquierda y derecha, y un
margen de 5 pxeles arriba y abajo.
Margin="10,5,10,5"
4. Agregue la siguiente propiedad Margin a TextBox, Calendar y Button.

Margin="0,5,0,5"
5. Agregue la siguiente propiedad FontSize al control Message de tipo TextBlock para aumentar el
tamao de la fuente.
FontSize="20"

El cdigo XAML ser similar al siguiente.

<UserControl
x:Class="HelloSilverlight.MainPage"

Silverlight
mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="300">
<RowDefinition Height="*" MinHeight="220"/>
<ColumnDefinition Width="*"/>
<TextBlock Text="Name:" Grid.Row="0" Grid.Column="0" Margin="10,5,10,5"></TextBlock>
<TextBlock Text="Date:" Grid.Row="1" Grid.Column="0" Margin="10,5,10,5"></TextBlock>
<TextBlock x:Name="message1" Text="Message:" Grid.Row="2" Grid.Column="0"
Grid.ColumnSpan="2" Margin="10,5,10,5" FontSize="20"></TextBlock>
<TextBox x:Name="name1" Text="Your Name" Grid.Row="0" Grid.Column="1"
Width="150" HorizontalAlignment="Left" Margin="0,5,0,5"></TextBox>
<sdk:Calendar x:Name="cal1" SelectionMode="SingleDate"
HorizontalAlignment="Left" Margin="0,5,0,5"></sdk:Calendar>
<Button Click="okButton_Click" x:Name="okButton" Width="75" Height="25"
HorizontalAlignment="Left" Content="OK" Margin="0,5,0,5"></Button>
</StackPanel>
</Grid>
</UserControl>

8. Cambie el tamao de la ventana del explorador y observe el comportamiento.
9. Haga clic en el control de tipo Button denominado OK.
Observe que la tercera fila de la cuadrcula de tipo Grid aumenta de alto para dar cabida al texto,
tal y como se muestra en la ilustracin siguiente.
2.5. Tutorial: Crear un reloj en Silverlight mediante Expression Blend o Visual

Studio
En Silverlight, los elementos de la interfaz de usuario se crean mediante el lenguaje de marcado extensible
(XAML). Para escribir XAML, se puede utilizar una herramienta de diseo visual, como Expression Blend, o se
puede usar Visual Studio. En este tutorial, se muestra cmo crear un reloj simple en Silverlight mediante
Expression Blend y Visual Studio. En la ilustracin siguiente se muestra el reloj que crear.

Silverlight
Si se utiliza Expression Blend, los grficos se crearn visualmente en el diseador. Si se utiliza Visual Studio,
los grficos se crearn mediante cdigo XAML. Una vez creados los grficos que componen la apariencia
del reloj, se agregarn animaciones y lgica para que el reloj funcione.
Requisitos previos
Expression Blend 4 (opcional).
Visual Studio 2010.
Silverlight 4.
Crear el reloj mediante Expression Blend

Expression Blend acelerar la creacin de la aplicacin basada en Silverlight, sobre todo durante la fase de
diseo de los grficos y la disposicin. En esta seccin, va a crear el reloj mediante Expression Blend.
El reloj est compuesto de los elementos grficos que se muestran en la ilustracin siguiente.
Estos grficos se crean con elementos simples organizados en un control Grid. Todos los grficos circulares,
incluidos los grficos de la cara de reloj, el borde exterior, el bisel y la sombra, se crean con elementos
Ellipse, mientras que las manecillas del reloj se crean con elementos Rectangle.
Para crear un nuevo proyecto de aplicacin de Silverlight en Expression Blend
1. Inicie Expression Blend. Si aparece el formulario de inicio, haga clic en Cerrar.
2. En el men Archivo, haga clic en Nuevo proyecto.
3. En el recuadro Tipos de proyecto, seleccione Silverlight.
4. En la lista de proyectos, seleccione Aplicacin de Silverlight.

Silverlight
5. En el cuadro Nombre, escriba SilverlightClock.

6. En la lista Lenguaje, seleccione Visual Basic o Visual C#.
7. En la lista Versin, seleccione 4.0.
8. Haga clic en Aceptar para crear el proyecto.
A continuacin, va a establecer el tamao de la mesa de trabajo.
9. En el panel Objetos y escala de tiempo, seleccione [UserControl].
10. En el panel Propiedades, en Diseo, establezca el valor de Ancho y de Alto en 400.
Ya ha cambiado el tamao de la mesa de trabajo.

En este momento dispone de un proyecto vaco. Si presiona F5 para ejecutar la aplicacin, solo ver
una pgina web en blanco.
Los grficos del reloj estn compuestos de capas de formas superpuestas, que crean el aspecto general de
un reloj. Para crear el reloj, deber construirlo capa por capa, comenzando por la capa inferior, que es la
sombra del reloj.
Para crear la sombra del reloj
1. En el panel Herramientas, haga clic con el botn secundario en la herramienta Rectngulo y haga
clic en Elipse.

Silverlight
2. En la mesa de trabajo, dibuje una elipse de unos 330 pxeles de ancho y de alto. Mientras dibuja,
presione la tecla MAYS para mantener el ancho y el alto iguales.
3. Si necesita cambiar la posicin de la elipse, en el panel Herramientas, haga clic en la herramienta
Seleccin y cambie la elipse de posicin.
A continuacin, va a cambiar las propiedades de la elipse.

4. En el panel Propiedades, en el cuadro Nombre, establezca el nombre de la elipse en
shadowEllipse.
5. En el panel Propiedades, en Pinceles, haga clic en Relleno y, a continuacin, haga clic en Pincel
de color slido.
6. En el Editor de colores, establezca el color en negro.
7. En Apariencia, establezca Opacidad en 30%.
Ahora, la elipse tiene un relleno de color negro semitransparente que proporcionar el efecto de
sombra.
A continuacin, va a crear el borde exterior del reloj. Dado que el borde exterior tiene el mismo tamao que
la elipse de sombra, podr crearlo copiando simplemente la elipse de sombra.
Para crear el borde exterior del reloj
1. En el panel Herramientas, haga clic en la herramienta Seleccin.
2. En la mesa de trabajo, haga clic en la elipse de sombra para asegurarse de que est seleccionada.
3. En el men Edicin, seleccione Copiar o presione CTRL+C.
4. En el men Edicin, seleccione Pegar o presione CTRL+V.
Aparecer una nueva elipse denominada shadowEllipse_Copy justo encima de la elipse de sombra.
5. En el panel Propiedades, establezca el nombre en outerRimEllipse.

Silverlight
A continuacin, va a rellenar outerRimEllipse con un degradado simple. Crear un degradado en

Expression Blend es un proceso que consiste en varios pasos.
6. En el panel Objetos y escala de tiempo, asegrese de que est seleccionada la elipse
outerRimEllipse.
7. En el panel Propiedades, en Apariencia, establezca el valor de Opacidad en 100%.

8. En el panel Propiedades, en Pinceles, haga clic en Relleno y, a continuacin, haga clic en Pincel
de degradado.
9. En la barra de degradado del Editor de colores, haga clic en el punto de degradado izquierdo y
establezca su color en #FFE4E5F4.
10. Haga clic en el punto de degradado derecho y establezca su color en #FFC0C0C0.
A continuacin, va a cambiar la direccin del degradado lineal para que fluya de la parte superior
izquierda a la parte inferior derecha (en lugar de fluir de izquierda a derecha sobre la elipse).
11. En el panel Herramientas, haga clic en la herramienta Degradado.
Aparecer una flecha vertical en la elipse outerRimEllipse.

12. Mueva el puntero del mouse junto a la punta o la cola de la flecha hasta que el puntero se
convierta en un icono de giro.
13. Gire la flecha de modo que la direccin del degradado lineal vaya desde la parte superior izquierda
hasta la parte inferior derecha.
14. En el panel Propiedades, en Pinceles, arrastre el punto de degradado derecho hacia la izquierda
para concentrar el degradado en el lado izquierdo.
La direccin del degradado se muestra en la ilustracin siguiente.

Silverlight

16. Arrastre la elipse outerRimEllipse ligeramente hacia la parte superior izquierda para ver la sombra.
Ver un pequeo fragmento de shadowEllipse en la parte inferior derecha que crea un efecto de
sombra.
A continuacin, va a crear el bisel del reloj. La elipse que va a usar para crear el bisel es similar a
outerRimEllipse, pero algo ms pequea.
Para crear el bisel del reloj
1. Seleccione la elipse outerRimEllipse.
2. Cree una copia de outerRimEllipse y pguela.
3. En el panel Propiedades, establezca el nombre de la copia de outerRimEllipse en bevelEllipse.
A continuacin, va a rellenar bevelEllipse con un degradado lineal. Dado que bevelEllipse es una
copia de outerRimEllipse, ya tendr aplicado un degradado.
5. En el panel Propiedades, en Pinceles, haga clic en el punto de degradado izquierdo y establezca
su color en #FF2F2F32.
6. Haga clic en el punto de degradado derecho y establezca su color en #FFE4E5F4.
7. Arrastre el punto de degradado derecho hacia la derecha hasta que sea del 100%.

Silverlight
Este degradado fluye en la misma direccin que el degradado aplicado a outerRimEllipse. Sin
embargo, el degradado de bevelEllipse pasa de oscuro en la parte superior izquierda a claro en la
parte inferior derecha, que es lo contrario de lo que ocurre con el degradado aplicado a
outerRimEllipse. En la ilustracin siguiente, se muestra el degradado.
A continuacin, crear la cara del reloj. La elipse que va a usar para crear la cara es similar a bevelEllipse,
pero algo ms pequea.
Para crear la cara del reloj
1. Seleccione la elipse bevelEllipse.
2. Cree una copia de bevelEllipse y pguela.
3. En el panel Propiedades, establezca el nombre de la copia de bevelEllipse en faceEllipse.
5. En el panel Propiedades, en Pinceles, haga clic en Relleno, haga clic en Pincel de color slido y, a
continuacin, establezca el color en negro.
Observe que, al agregar esta elipse, el bisel se vuelve visible.
A continuacin, va a crear la elipse central del reloj.

Para crear la elipse central del reloj
1. En el panel Herramientas, haga clic en la herramienta Elipse.
2. Dibuje una elipse pequea en el centro de la cara del reloj. No se preocupe si no est colocada
exactamente en el centro.
3. En el panel Propiedades, establezca el nombre en centerEllipse.
4. En el panel Propiedades, en Pinceles, seleccione Trazo, seleccione Pincel de color slido y, a
continuacin, establezca el color en verde.

Silverlight
5. En el panel Propiedades, en Apariencia, establezca el valor de StrokeThickness en 8.

A continuacin, va a colocar la elipse en el centro de la cara del reloj.
7. En el panel Objetos y escala de tiempo, seleccione centerEllipse.
8. Mientras presiona la tecla CTRL, seleccione faceEllipse para seleccionar tanto centerEllipse como
faceEllipse.
9. En el men Objeto, haga clic en Alinear y, a continuacin, haga clic en Centros horizontales.
La elipse centerEllipse est alineada horizontalmente.
10. En el men Objeto, haga clic en Alinear y, a continuacin, haga clic en Centros verticales.
La elipse centerEllipse est alineada verticalmente.
A continuacin, crear las manecillas del reloj.

Para crear las manecillas del reloj

Silverlight
1. En el panel Herramientas, haga clic con el botn secundario en la herramienta Elipse y haga clic
en la herramienta Rectngulo.
2. En la cara del reloj, dibuje un rectngulo grande y estrecho que represente la posicin de las 12 en
punto.
3. En el panel Propiedades, establezca el nombre en secondHand.
4. En el panel Propiedades, en Pinceles, haga clic en Relleno, haga clic en Pincel de color slido y, a
continuacin, establezca el color en rojo.
5. En el panel Propiedades, en Diseo, establezca el valor de Ancho en 5 y el valor de Alto en 80.
6. En el panel Objetos y escala de tiempo, seleccione secondHand, presione la tecla CTRL y, a
continuacin, seleccione faceEllipse.
7. En el men Objeto, haga clic en Alinear y, a continuacin, haga clic en Centros horizontales.
9. En el panel Objetos y escala de tiempo, haga clic en secondHand para seleccionar el rectngulo
secondHand.
10. En la esquina inferior izquierda de la mesa de trabajo, haga clic en la flecha Zoom para acercar el
rectngulo secondHand.
En el paso siguiente, va a cambiar el punto central del rectngulo al centro de la cara del reloj. Ms
adelante, animar las manecillas del reloj alrededor del centro del reloj.
11. Arrastre el punto central del rectngulo secondHand hasta el centro de la cara del reloj.
Si es necesario, puede cambiar el punto central en el panel Propiedades. Expanda Transformar,

haga clic en la pestaa Punto central y, a continuacin, cambie los valores de X e Y.

Silverlight
12. Cree un segundo rectngulo que represente el minutero con las siguientes propiedades.
o Nombre = minuteHand
o Relleno, Pincel de color slido, verde
o Ancho = 9, Alto = 80
o Alinear centros horizontalmente
o Punto central establecido en el centro de la cara del reloj
13. Cree un tercer rectngulo que represente el horario con las siguientes propiedades.
o Nombre = hourHand
o Relleno, Pincel de color slido, verde
o Ancho = 11, Alto = 60
o Alinear centros horizontalmente
o Punto central establecido en el centro de la cara del reloj
Cuando termine, las manecillas del reloj estarn una encima de la otra.
En la siguiente seccin, va a agregar animaciones para que las manecillas giren alrededor del reloj.
Esto lo har animando la propiedad Angle del elemento RotateTransform que se aplica a la
manecilla del reloj. Dado que la animacin deber tener como destino la transformacin
RotateTransform correcta, tendr que asignar un nombre a los elementos RotateTransform
aplicados a cada una de las manecillas del reloj. No se puede cambiar el nombre de los elementos
RotateTransform en la interfaz de usuario de Expression Blend, por lo que habr que hacerlo en
cdigo XAML.
14. En la esquina superior derecha de la mesa de trabajo, haga clic en la pestaa Vista XAML o Vista
en dos paneles.

Silverlight
Ahora podr ver el marcado XAML de todos los objetos que ha creado en el diseador. Las
manecillas del reloj se crean con elementos Rectangle.
15. Busque el rectngulo secondHand en el cdigo XAML.
16. Modifique el rectngulo secondHand agregando un elemento Rectangle.RenderTransform y un
elemento RotateTransform denominado secondHandTransform, tal y como se muestra en el
siguiente cdigo XAML.

<Rectangle x:Name="secondHand" ...>
<Rectangle.RenderTransform>
<RotateTransform x:Name="secondHandTransform"/>
</Rectangle.RenderTransform>
</Rectangle>
17. Modifique el rectngulo minuteHand y asigne al elemento RotateTransform el nombre minuteHand

Transform.

<Rectangle x:Name="minuteHand" ...>
<RotateTransform x:Name="minuteHandTransform"/>
</Rectangle>
18. Modifique el rectngulo hourHand y asigne al elemento RotateTransform el nombre

hourHandTransform.

<Rectangle x:Name="hourHand" ...>
<RotateTransform x:Name="hourHandTransform"/>
</Rectangle>
19. En la esquina superior derecha, haga clic en la pestaa Vista de diseo para mostrar la vista de
diseo.
20. Guarde el proyecto.
Una vez llegado a este punto, ya ha creado todos los grficos del reloj. A continuacin, va a aplicar
animaciones a las transformaciones de giro de las manecillas del reloj. Estas animaciones de giro harn que
las manecillas del reloj giren alrededor del centro del reloj (tal y como se espera que hagan las manecillas
del reloj). Controlando el tiempo de las animaciones, puede hacer que las manecillas giren alrededor del
reloj en sincronizacin con la hora actual del equipo.
Para agregar animaciones a las manecillas del reloj
1. Muestre el panel Proyectos.
2. Asegrese de que est seleccionado MainPage.xaml.
3. Haga clic en la pestaa Vista XAML o Vista en dos paneles para mostrar el cdigo XAML.
4. Despus del elemento inicial UserControl, escriba el cdigo siguiente para agregar animaciones a
las manecillas del reloj.
<UserControl.Resources>
<Storyboard x:Name="clockStoryboard">

<DoubleAnimation x:Name="hourAnimation"
Storyboard.TargetName="hourHandTransform"
Storyboard.TargetProperty="Angle"

Silverlight
Duration="12:0:0" RepeatBehavior="Forever" To="360"/>

<DoubleAnimation x:Name="minuteAnimation"
Storyboard.TargetName="minuteHandTransform"
Duration="1:0:0" RepeatBehavior="Forever" To="360" />

<DoubleAnimation x:Name="secondAnimation"
Storyboard.TargetName="secondHandTransform"
</Storyboard>
</UserControl.Resources>
Este marcado define un objeto Storyboard que contiene las animaciones que animan las manecillas
del reloj. Todas estas animaciones hacen referencia a la propiedad Angle de la correspondiente
transformacin de la manecilla del reloj. La propiedad Duration de cada animacin se establece
dependiendo de la velocidad deseada de la animacin. Por ejemplo, para la transformacin del
horario, la duracin de la animacin se establece en 12 horas, que es el tiempo que tarda la
manecilla de la hora en recorrer el reloj completamente. RepeatBehavior para todas las animaciones
se establece en "Forever". Por consiguiente, cuando la animacin se completa (la manecilla da una
vuelta completa al reloj), vuelve a empezar de nuevo y se repite indefinidamente.
Para iniciar el objeto Storyboard, va a usar el evento Loaded para llamar al mtodo Begin del objeto
Storyboard.
5. Busque el elemento Grid y agregue el siguiente atributo Loaded.
De este modo, se especifica que se debe llamar al controlador de eventos SetAndStartClock cuando
se carga la aplicacin.
<Grid x:Name="LayoutRoot" Background="White" Loaded="SetAndStartClock">
A continuacin, va a agregar el controlador de eventos.

6. En el panel Proyectos, expanda el nodo MainPage.xaml y haga doble clic en el archivo de cdigo
subyacente MainPage.xaml.vb o MainPage.xaml.cs.
El archivo de cdigo subyacente se abre en el editor de cdigo.
7. En la clase MainPage, agregue el siguiente mtodo SetAndStartClock, que inicia el objeto
Storyboard.
Private Sub SetAndStartClock(ByVal sender As Object, ByVal e As EventArgs)
' Start the storyboard.
clockStoryboard.Begin()
End Sub
9. Haga clic en el men Proyecto y, a continuacin, haga clic en Ejecutar proyecto para compilar y
ejecutar la aplicacin. (Tambin puede presionar F5 para ejecutar la aplicacin.)
Se abrir el explorador web y el reloj comenzar a funcionar. Observe que el segundero se est
moviendo alrededor del reloj. Las otras manecillas tambin se estn moviendo, pero lo estn
haciendo tan despacio que no es perceptible.
Aunque las manecillas del reloj se estn moviendo a la velocidad esperada, el reloj no est ajustado en la
hora actual. Para ajustar el reloj, deber agregar cierta lgica.
Para establecer el reloj en la hora actual
1. Cierre el explorador y abra MainPage.xaml.vb o MainPage.xaml.cs.
2. En lugar del procedimiento de SetAndStartClock, escriba el cdigo que figura a continuacin.
Con este cdigo, se establecen las manecillas del reloj en la hora actual.
' The current date and time.
Dim currentDate As Date = DateTime.Now
' Find the appropriate angle (in degrees) for the hour hand
' based on the current time.
Dim hourangle As Double = (((CType(currentDate.Hour, Single) / 12) * 360) + (currentDate.Minute / 2))

Silverlight
' The same as for the minute angle.
Dim minangle As Double = ((CType(currentDate.Minute, Single) / 60) * 360)
' The same for the second angle.
Dim secangle As Double = ((CType(currentDate.Second, Single) / 60) * 360)
' Set the beginning of the animation (From property) to the angle
' corresponging to the current time.
hourAnimation.From = hourangle
' Set the end of the animation (To property)to the angle
' corresponding to the current time PLUS 360 degrees. Thus, the
' animation will end after the clock hand moves around the clock
' once. Note: The RepeatBehavior property of the animation is set
' to "Forever" so the animation will begin again as soon as it completes.
hourAnimation.To = (hourangle + 360)
' Same as with the hour animation.
minuteAnimation.From = minangle
minuteAnimation.To = (minangle + 360)
secondAnimation.From = secangle
secondAnimation.To = (secangle + 360)
End Sub
3. Ejecute la aplicacin.
Ahora, las manecillas del reloj deben sealar la hora actual.
Crear el reloj mediante Visual Studio

En lugar de utilizar Expression Blend, se pueden crear los grficos del reloj directamente en XAML. En esta
seccin del tutorial, se muestra cmo crear el mismo reloj mediante Visual Studio.
El reloj est compuesto de los elementos grficos que se muestran en la ilustracin siguiente.
Estos grficos se crean con elementos simples organizados en un control Grid. Todos los grficos circulares,
incluidos los grficos de la cara de reloj, el borde exterior, el bisel y la sombra, se crean con elementos
Ellipse, mientras que las manecillas del reloj se crean con elementos Rectangle.
Para crear un nuevo proyecto de aplicacin de Silverlight en Visual Studio 2008
1. Inicie Visual Studio.
2. Cree un nuevo proyecto de aplicacin de Silverlight denominado SilverlightClock en Visual Basic o
Visual C#.
3. En el cuadro de dilogo Nueva aplicacin de Silverlight, desactive la casilla Hospedar la
aplicacin de Silverlight en un nuevo sitio web y, en la lista Versin de Silverlight, seleccione
Silverlight 4.
Los grficos del reloj se componen de capas de formas superpuestas, que crean la apariencia general de un
reloj. Para crear el reloj, deber construirlo capa por capa, comenzando por la capa inferior, que es la
sombra del reloj.
Para crear la sombra del reloj
2. Reemplace el XAML existente por el siguiente XAML para crear la sombra del reloj.
<UserControl x:Class="SilverlightClock.MainPage"

Silverlight
mc:Ignorable="d"
Height="400" Width="400">
<Grid x:Name="LayoutRoot">

<Ellipse Fill="#FF000000" Height="330" Margin="42,42,28,28"
Opacity="0.3" Width="330" />
</Grid>
</UserControl>
En la ilustracin siguiente se muestran los resultados.
Observe que el relleno se establece en negro y la opacidad se establece en 0,3 (30%). Esto hace que
el relleno de la elipse sea semitransparente, como una sombra. El ancho, el alto y el margen son
arbitrarios. Estas propiedades simplemente especifican el tamao y la posicin del crculo dentro
del control Grid.
Nota:
El lenguaje de procedimientos utilizado (por ejemplo, Visual Basic, C# o JavaScript) no afecta a la
mayor parte del marcado XAML en las aplicaciones de Silverlight.
A continuacin, va a crear el borde exterior del reloj.

Para crear el borde exterior del reloj
En MainPage.xaml, despus de la elipse de sombra, agregue el siguiente cdigo XAML para crear el
borde exterior del reloj.

<Ellipse Height="330" Margin="35,35,35,35" Stroke="#FF000000" Width="330" >
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
<GradientStop Color="#FFE4E5F4" />
<GradientStop Color="#FFC0C0C0" Offset="0.254"/>
</Ellipse.Fill>
</Ellipse>
La elipse de sombra est colocada ligeramente hacia la parte inferior derecha de modo que solo se
ve un fragmento de esa elipse. Esto produce un efecto de sombra. Adems, observe que se ha
aplicado un degradado lineal a la elipse del borde exterior. Este degradado lineal sirve para crear
un efecto de luz procedente de la parte superior izquierda de la elipse.
A continuacin, agregar el bisel del reloj.

Silverlight
Para crear el bisel del reloj

En MainPage.xaml, despus de la elipse del borde exterior, agregue el siguiente cdigo XAML para
crear el bisel del reloj.

<Ellipse Height="290" Margin="55,55,55,55" Width="290" Stroke="#FF000000">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
<GradientStop Color="#FF2F2F32"/>
<GradientStop Color="#FFE4E5F4" Offset="0.987"/>
</Ellipse.Fill>
</Ellipse>
Esta elipse tiene un tamao ligeramente inferior que la elipse utilizada para crear el borde exterior y
se encuentra directamente sobre la elipse del borde exterior. Adems, esta elipse tambin tiene
aplicado un degradado lineal, pero este degradado pasa de oscuro en la parte superior izquierda a
claro en la parte inferior derecha.
A continuacin, crear la cara del reloj.
Para crear la cara del reloj
En MainPage.xaml, despus de la elipse del bisel, agregue el siguiente cdigo XAML para crear la
cara del reloj.

Stroke="#FF000000" Width="270" />
La cara del reloj es simplemente una elipse rellena de negro, de tamao ligeramente inferior al de
la elipse del bisel y colocada directamente sobre las dems elipses. Observe tambin que, al
agregar esta elipse, el bisel se vuelve visible.
A continuacin, va a crear la elipse central y las manecillas del reloj.

Para crear la elipse central y las manecillas del reloj
En MainPage.xaml, despus de la elipse de la cara, agregue el siguiente cdigo XAML para crear la
elipse central y las manecillas del reloj.

Stroke="#FF008000" StrokeThickness="8" VerticalAlignment="Top"
Width="30" />

<Rectangle x:Name="secondHand" Fill="#FFFF0000" Height="80"

Silverlight
Margin="198,90,197,0" RenderTransformOrigin="0.45,1.34"
Stroke="#FF000000" VerticalAlignment="Top" Width="5" >
<RotateTransform x:Name="secondHandTransform"/>
</Rectangle>

<Rectangle x:Name="minuteHand" Fill="#FF008000" Height="80"
<RotateTransform x:Name="minuteHandTransform"/>
</Rectangle>

<Rectangle x:Name="hourHand" Fill="#FF008000" Height="60"
<RotateTransform x:Name="hourHandTransform"/>
</Rectangle>
En la ilustracin siguiente se muestran los resultados. El segundero, minutero y horario aparecen

superpuestos en esta ilustracin.
En el cdigo anterior, el minutero, el horario y el segundero comparten los mismos valores para las
propiedades que determinan la posicin (por ejemplo, Margin). No obstante, las manecillas difieren
entre s en lo que se refiere al tamao y/o color (por ejemplo, el horario es el ms grueso porque
tiene el valor StrokeThickness ms elevado).
Observe que todas las manecillas tienen aplicada una transformacin RotateTransform. Esta
transformacin permite girar el ngulo de la manecilla. En la seccin siguiente, animar el ngulo
de esta transformacin, que har que las manecillas del reloj se muevan para mostrar la hora. Cada
uno de los elementos RotateTransform tiene un nombre (por ejemplo,
x:Name="hourHandTransform"). De este modo, puede asociar una animacin a la transformacin.
Adems, tenga en cuenta que todas las manecillas tienen un valor RenderTransformOrigin. Esta
propiedad se usa para especificar el punto del lienzo con respecto al que todas las
transformaciones son relativas. Puesto que va a girar las manecillas alrededor del centro del reloj, el
valor de la propiedad RenderTransform para todas las manecillas se proporciona como centro de la
cara del reloj.
Una vez llegado a este punto, ya ha creado todos los grficos del reloj. A continuacin, va a aplicar
animaciones a las transformaciones de giro de las manecillas del reloj. Estas animaciones de giro harn que
las manecillas del reloj giren alrededor del centro del reloj (tal y como se espera que hagan las manecillas
del reloj). Controlando el tiempo de las animaciones, puede hacer que las manecillas giren alrededor del
reloj en sincronizacin con la hora actual del equipo.
Para agregar animaciones a las manecillas del reloj
1. En MainPage.xaml, despus del elemento inicial UserControl, escriba el cdigo siguiente para
agregar animaciones a las manecillas del reloj.
<Storyboard x:Name="clockStoryboard">

<DoubleAnimation x:Name="hourAnimation"
Storyboard.TargetName="hourHandTransform"

Silverlight

<DoubleAnimation x:Name="minuteAnimation"
Storyboard.TargetName="minuteHandTransform"

<DoubleAnimation x:Name="secondAnimation"
Storyboard.TargetName="secondHandTransform"
</Storyboard>
Este marcado define un objeto Storyboard que contiene las animaciones que animan las manecillas
del reloj. Todas estas animaciones de Storyboard hacen referencia a la propiedad Angle de la
transformacin de la manecilla del reloj correspondiente. La propiedad Duration de cada animacin
se establece dependiendo de la velocidad deseada de la animacin. Por ejemplo, para la
transformacin del horario, la duracin de la animacin se establece en 12 horas, que es el tiempo
que tarda la manecilla de la hora en recorrer el reloj completamente. RepeatBehavior para todas las
animaciones se establece en "Forever". Por consiguiente, cuando la animacin se completa (la
manecilla da una vuelta completa al reloj), vuelve a empezar de nuevo y se repite indefinidamente.
Para iniciar el objeto Storyboard, use el evento Loaded a fin de llamar al mtodo Begin del objeto
Storyboard.
2. En el elemento Grid, agregue el siguiente atributo Loaded.
De este modo, se especifica que se debe llamar al controlador de eventos SetAndStartClock cuando
se carga la aplicacin.
<Grid x:Name="LayoutRoot" Loaded="SetAndStartClock">
A continuacin, va a agregar el controlador de eventos.

3. En el Explorador de soluciones, expanda MainPage.xaml y abra el archivo de cdigo subyacente
MainPage.xaml.vb o MainPage.xaml.cs.
4. En la clase MainPage, agregue el siguiente mtodo SetAndStartClock, que inicia el objeto
Storyboard.
End Sub
6. En el men Depurar, haga clic en Iniciar depuracin o presione F5 para ejecutar la aplicacin.
Se abrir el explorador web y el reloj comenzar a funcionar. Observe que el segundero se est
moviendo alrededor del reloj. Las otras manecillas tambin se estn moviendo, pero lo estn
haciendo tan despacio que no es perceptible.
Aunque las manecillas del reloj se estn moviendo a la velocidad esperada, el reloj no est ajustado en la
hora actual. Para ajustar el reloj, deber agregar cierta lgica.
Para establecer el reloj en la hora actual
1. Cierre el explorador y abra MainPage.xaml.vb o MainPage.xaml.cs.
2. En lugar del procedimiento de SetAndStartClock, escriba el cdigo que figura a continuacin.
Con este cdigo, se establecen las manecillas del reloj en la hora actual.
' The current date and time.
Dim currentDate As Date = DateTime.Now
' Find the appropriate angle (in degrees) for the hour hand
' based on the current time.
Dim hourangle As Double = (((CType(currentDate.Hour, Single) / 12) * 360) + (currentDate.Minute / 2))
' The same as for the minute angle.

Silverlight
Dim minangle As Double = ((CType(currentDate.Minute, Single) / 60) * 360)
' The same for the second angle.
Dim secangle As Double = ((CType(currentDate.Second, Single) / 60) * 360)
' Set the beginning of the animation (From property) to the angle
' corresponging to the current time.
hourAnimation.From = hourangle
' Set the end of the animation (To property)to the angle
' corresponding to the current time PLUS 360 degrees. Thus, the
' animation will end after the clock hand moves around the clock
' once. Note: The RepeatBehavior property of the animation is set
' to "Forever" so the animation will begin again as soon as it completes.
hourAnimation.To = (hourangle + 360)
minuteAnimation.From = minangle
minuteAnimation.To = (minangle + 360)
secondAnimation.From = secangle
secondAnimation.To = (secangle + 360)
End Sub
3. Ejecute la aplicacin.
Ahora, las manecillas del reloj deben sealar la hora actual.
Conclusin
En este tutorial, ha aprendido a hacer lo siguiente en Silverlight:
Disear grficos vectoriales superpuestos que simulan el aspecto de un reloj real.
Usar degradados para crear sombreado y profundidad.
Usar animaciones para agregar funcionalidad al reloj.
Usar cdigo para ajustar la hora correcta del reloj.
Obtenga informacin sobre cmo utilizar Expression Blend y Visual Studio para crear aplicaciones
de Silverlight.
2.6. Ejemplos de Silverlight

En la documentacin de Silverlight se incluyen ejemplos de cdigo en diferentes formatos:
Ejemplos de cdigo tradicionales que figuran en los temas. El usuario puede copiar y pegar estos
ejemplos en sus propios proyectos o en proyectos nuevos para experimentar con ellos.
Vnculos a ejemplos dinmicos en lnea. Los ejemplos dinmicos ayudan a comprender plenamente
las caractersticas interactivas o animadas.
Vnculos a descargas de ejemplos. Estas descargas se proporcionan para obtener ejemplos ms
complejos que son difciles de reproducir copiando los fragmentos de cdigo en proyectos nuevos.
2.6.1. Ejemplo del editor de texto de Silverlight

En este tema, se proporciona informacin general sobre un ejemplo del editor de texto de Silverlight. Con
este ejemplo, se puede escribir y modificar texto enriquecido as como realizar varias operaciones. Algunas
de estas operaciones son: dar formato a texto, insertar imgenes, insertar calendarios, insertar cuadrculas
de datos, mostrar texto de derecha a izquierda, imprimir y obtener acceso al Portapapeles. Este ejemplo se
basa en el nuevo control RichTextBox de Silverlight 4. Adems, muestra algunas de las otras caractersticas
nuevas de Silverlight 4. En la ilustracin siguiente, se muestra cmo se representa este ejemplo:

Silverlight
Requisitos previos
Se necesitan los siguientes componentes para compilar el Editor de texto de Silverlight:
Silverlight 4.
Visual Studio 2010.
Interfaz de usuario del editor de texto de Silverlight

La interfaz de usuario del editor de texto de Silverlight consta, en lneas generales, de las tres secciones
siguientes:
Un control Grid denominado LayoutRoot que ocupa todo el explorador. Tiene el logotipo de
Silverlight y el rea de ejemplo. El rea de ejemplo consta de las siguientes secciones:
Un control Grid denominado ToolBarGrid que hospeda la barra de herramientas horizontal. La
barra de herramientas tiene un conjunto de botones que permite realizar varias operaciones en el
control RichTextBox.
Un control Grid denominado RTBGrid que hospeda el editor de texto enriquecido. El editor utiliza
un control RichTextBox en el que se puede escribir y modificar contenido enriquecido.
Barra de herramientas
La barra de herramientas se hospeda en un control Grid denominado ToolBarGrid. El control ToolBarGrid
tiene dos filas y siete columnas. La primera fila no tiene ningn elemento secundario y se utiliza para
agregar relleno a la segunda fila. En la segunda fila se hospedan los botones de la barra de herramientas.
Cada columna hospeda una seccin de la barra de herramientas, por ejemplo, Portapapeles, Fuente, etc.
Considere una seccin de la barra de herramientas como ejemplo. La segunda columna del control
ToolBarGrid (Grid.Column = 1) hospeda la seccin Fuente de la barra de herramientas. Esta seccin consta
de siete controles. En la siguiente tabla, se muestran los elementos de la seccin Fuente y el control que se
utiliza para crear cada elemento.

Silverlight
Elemento Control usado

Nombre de fuente ComboBox
Tamao de fuente ComboBox
Formato de negrita Button
Formato de cursiva Button
Formato de subrayado Button
Color de fuente ComboBox
Ttulo de la seccin TextBlock
La posicin de los controles ComboBox usados para crear el nombre de fuente y el tamao de fuente se
define estableciendo un valor de margen adecuado. La posicin de los controles Button y del control
ComboBox para el color de fuente se determina utilizando un diseo de StackPanel con orientacin
horizontal. La posicin del control TextBlock para el ttulo de la seccin se define con un valor de margen
adecuado. En el siguiente XAML, se muestra la seccin Fuente de la barra de herramientas.

<ComboBox x:Name="cmbFonts" ...
<ComboBoxItem Content="Arial" ...
<ComboBoxItem Content="Arial Black" ...
...
</ComboBox>
<ComboBox x:Name="cmbFontSizes"
<ComboBoxItem Content="8" Tag="8"/>
<ComboBoxItem Content="9" Tag="9"/>
...
</ComboBox>
<StackPanel Grid.Column="1" Grid.Row="1" ...

<Button x:Name="btnBold" ...
<Button x:Name="btnItalic" ...
<Button x:Name="btnUnderline" ...
<ComboBox x:Name="cmbFontColors" ...
<ComboBoxItem Tag="FFFF0000">
<ComboBoxItem Tag="FF008000">
...
</ComboBox>
</StackPanel>
Editor
El editor se hospeda en un control Grid denominado RTBGrid. En la siguiente tabla, se muestran los
elementos secundarios de RTBGrid.
Elemento
Nombre Descripcin
secundario
Rectangle Se utiliza como borde alrededor del control RichTextBox.
RichTextBox rtb Se utiliza para escribir y modificar contenido enriquecido.
Canvas highlightCanvas Se utiliza al hacer clic en el botn Resaltar de la barra de herramientas.
Se utiliza para que se muestre el cdigo XAML al hacer clic en el botn
XAML de la barra de herramientas. Este control TextBox est oculto de
TextBox xamlTB
forma predeterminada y se muestra nicamente cuando se hace clic en el
botn XAML de la barra de herramientas.
En el siguiente cdigo XAML, se muestra RTBGrid.

<Grid Name="RTBGrid" Grid.Row="1">
<Rectangle Fill="White" Margin="0,1,1,0">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="1" Direction="371" BlurRadius="7" Opacity="0.345"/>
</Rectangle.Effect>
</Rectangle>
<RichTextBox x:Name="rtb" AllowDrop="True" BorderBrush="{x:Null}" Margin="8,10,0,8"
MouseRightButtonDown="rtb_MouseRightButtonDown" MouseRightButtonUp="rtb_MouseRightButtonUp" Drop="rtb_Drop"
MouseMove="rtb_MouseMove" DragEnter="rtb_DragEnter" DragLeave="rtb_DragLeave" TextWrapping="Wrap"
Style="{StaticResource RichTextBoxStyle1}" VerticalScrollBarVisibility="Auto" FontSize="20" />
<Canvas x:Name="highlightCanvas" IsHitTestVisible="False" Margin="8,10,0,8"/>
<TextBox x:Name="xamlTb" IsTabStop="False" FontSize="20" FontFamily="Lucida Console" TextWrapping="Wrap"
VerticalScrollBarVisibility="Auto" Visibility="Collapsed"/>
</Grid>

Silverlight
Caractersticas del editor de texto de Silverlight

El ejemplo del editor de texto de Silverlight permite realizar varias operaciones de edicin de texto
enriquecido que se implementan con algunas de las nuevas caractersticas de Silverlight 4. En las siguientes
secciones, se explican estas caractersticas.
Inicializacin
Cuando se ejecuta el ejemplo del editor de texto de Silverlight, se carga con un contenido inicial. Este
contenido se almacena con formato XAML en el archivo sample.sav. El archivo sample.sav se agrega como
recurso al proyecto y se carga mediante la propiedad RichTextBox.Xaml. En el ejemplo siguiente, se muestra
cmo se carga el archivo .sav.
//Initialize the RichTextBox. The intial text is saved as XAML inthe Hamlet.docx file.
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
rtb.Xaml = XElement.Load("/RichNotepad;component/sample.sav").ToString();
}
Portapapeles
Es posible cortar, copiar o pegar un texto seleccionado en el editor mediante los botones Cortar, Copiar o
Pegar situados en la seccin Portapapeles de la barra de herramientas. Esto se implementa mediante el
nuevo objeto Clipboard de Silverlight 4, tal y como se muestra en el siguiente cdigo.
//Cut the selected text
private void btnCut_Click(object sender, RoutedEventArgs e)
{
Clipboard.SetText(rtb.Selection.Text);
rtb.Selection.Text = "";
ReturnFocus();
}
//Copy the selected text
private void btnCopy_Click(object sender, RoutedEventArgs e)
{
ReturnFocus();
}
//paste the text
private void btnPaste_Click(object sender, RoutedEventArgs e)
{
rtb.Selection.Text = Clipboard.GetText();
ReturnFocus();
}
Men contextual
Asimismo, es posible cortar, copiar y pegar un texto seleccionado mediante un men contextual. El men
contextual aparece cuando se hace clic con el botn secundario del mouse en el editor. Los eventos que se
producen al hacer clic con el botn secundario del mouse son una caracterstica nueva de Silverlight 4. En la
siguiente ilustracin se muestra el men contextual.
El men contextual se implementa mediante el control Popup. La lgica del men contextual se encuentra
fundamentalmente en los archivos ContextMenu.cs y RTBContextMenu.cs del proyecto.
ContextMenu es una clase abstracta que proporciona la funcionalidad bsica para crear, mostrar y cerrar un
men contextual. Es posible derivar de esta clase base para crear cualquier men contextual que se desee.
La clase ContextMenu proporciona las siguientes funcionalidades:
Define un mtodo abstracto denominado GetContent.
La clase derivada debe implementar el mtodo GetContent para crear el contenido deseado del
men contextual. El mtodo GetContent devuelve un objeto FrameworkElement que tiene el
contenido del men contextual.

Silverlight
//Abstract function that the child class needs to implement to return the framework element that needs to be displayed
in the popup window.
protected abstract FrameworkElement GetContent();
Crea y muestra el men contextual.

La lgica para crear y mostrar el men contextual se aplica en el mtodo Show de la clase
ContextMenu. En el mtodo Show, se crea una instancia de un control Popup y se establece su
tamao en el ancho y el alto del ejemplo. El objeto FrameworkElement devuelto por el mtodo
GetContent se agrega como elemento secundario del control Popup. El mtodo Show toma como
parmetro la ubicacin donde debe mostrarse el men contextual. Esta ubicacin se establece
como margen del objeto FrameworkElement en el control emergente. En el siguiente cdigo, se
muestra cmo se implementa el mtodo Show.
//Intiialize and show the popup window. This is the public method to call, to display the ContextMenu at the desired
location.
public void Show(Point location)
{
if (_isShowing)
throw new InvalidOperationException();
_isShowing = true;
_location = location;
ConstructPopup();
_popup.IsOpen = true;
}
Cierra el men contextual.

Proporciona un controlador de eventos para que se cierre el men contextual cuando se hace clic
fuera del mismo.
La clase RTBContextMenu se deriva de la clase ContextMenu y realiza las siguientes operaciones:
Implementa el mtodo GetContent definido en la clase ContextMenu. El mtodo GetContent crea y
devuelve un objeto FrameworkElement. A continuacin, se utiliza este objeto en el mtodo Show
de la clase ContextMenu para crear el men contextual. En el siguiente cdigo, se muestra el
mtodo GetContent implementado por la clase RTBContextMenu.
//Construct the context menu and return the parent FrameworkElement.
protected override FrameworkElement GetContent()
{
Border border = new Border() { BorderBrush = new SolidColorBrush(Color.FromArgb(255, 167,171,176)),
BorderThickness = new Thickness(1), Background = new SolidColorBrush(Colors.White) };
border.Effect = new DropShadowEffect() { BlurRadius = 3, Color = Color.FromArgb(255, 230, 227, 236) };
Grid grid = new Grid() { Margin = new Thickness(1) };
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(25) });
grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(105) });
grid.Children.Add(new Rectangle() { Fill = new SolidColorBrush(Color.FromArgb(255, 233, 238, 238)) });
grid.Children.Add(new Rectangle() { Fill = new SolidColorBrush(Color.FromArgb(255, 226, 228, 231)),
HorizontalAlignment = HorizontalAlignment.Right, Width = 1 });
//cut
Button cutButton = new Button() { Height = 22, Margin = new Thickness(0, 0, 0, 0), HorizontalAlignment =
HorizontalAlignment.Stretch, VerticalAlignment = VerticalAlignment.Top, HorizontalContentAlignment =
HorizontalAlignment.Left };
cutButton.Style = Application.Current.Resources["ContextMenuButton"] as Style;
cutButton.Click += cut_MouseLeftButtonUp;
Grid.SetColumnSpan(cutButton, 2);
StackPanel sp = new StackPanel() { Orientation = Orientation.Horizontal };
Image cutImage = new Image() { HorizontalAlignment = HorizontalAlignment.Left, Width = 16, Height = 16, Margin
= new Thickness(1, 0, 0, 0) };
cutImage.Source = new BitmapImage(new Uri("/RichNotepad;component/images/cut.png",
UriKind.RelativeOrAbsolute));
sp.Children.Add(cutImage);
TextBlock cutText = new TextBlock() { Text = "Cut", HorizontalAlignment = HorizontalAlignment.Left, Margin = new
Thickness(16, 0, 0, 0) };
sp.Children.Add(cutText);
cutButton.Content = sp;
grid.Children.Add(cutButton);
//copy
Button copyButton = new Button() { Height = 22, Margin = new Thickness(0, 24, 0, 0), HorizontalAlignment =
copyButton.Style = Application.Current.Resources["ContextMenuButton"] as Style;
copyButton.Click += copy_MouseLeftButtonUp;
Grid.SetColumnSpan(copyButton, 2);

Silverlight
sp = new StackPanel() { Orientation = Orientation.Horizontal };
Image copyImage = new Image() { HorizontalAlignment = HorizontalAlignment.Left, Width = 16, Height = 16,
Margin = new Thickness(1, 0, 0, 0) };
copyImage.Source = new BitmapImage(new Uri("/RichNotepad;component/images/copy.png",
sp.Children.Add(copyImage);
TextBlock copyText = new TextBlock() { Text = "Copy", HorizontalAlignment = HorizontalAlignment.Left, Margin =
new Thickness(16, 0, 0, 0) };
sp.Children.Add(copyText);
copyButton.Content = sp;
grid.Children.Add(copyButton);
//paste
Button pasteButton = new Button() { Height = 22, Margin = new Thickness(0, 48, 0, 0), HorizontalAlignment =
pasteButton.Style = Application.Current.Resources["ContextMenuButton"] as Style;
pasteButton.Click += paste_MouseLeftButtonUp;
Grid.SetColumnSpan(pasteButton, 2);
sp = new StackPanel() { Orientation = Orientation.Horizontal };
Image pasteImage = new Image() { HorizontalAlignment = HorizontalAlignment.Left, Width = 16, Height = 16,
Margin = new Thickness(1, 0, 0, 0) };
pasteImage.Source = new BitmapImage(new Uri("/RichNotepad;component/images/paste.png",
sp.Children.Add(pasteImage);
TextBlock pasteText = new TextBlock() { Text = "Paste", HorizontalAlignment = HorizontalAlignment.Left, Margin =
new Thickness(16, 0, 0, 0) };
sp.Children.Add(pasteText);
pasteButton.Content = sp;
grid.Children.Add(pasteButton);
border.Child = grid;
return border;
}
Controla el evento MouseLeftButtonUp para las operaciones de cortar, copiar y pegar cuando se
hace clic en los correspondientes botones del men contextual. En el siguiente cdigo, se muestran
los controladores de eventos para las operaciones de cortar, copiar y pegar.
//handle the cut, copy and paste actions when the appropriate button on the context menu is clicked.
void cut_MouseLeftButtonUp(object sender, RoutedEventArgs e)
{
rtb.Selection.Text = "";
Close();
}
void copy_MouseLeftButtonUp(object sender, RoutedEventArgs e)
{
Close();
}
void paste_MouseLeftButtonUp(object sender, RoutedEventArgs e)
{
rtb.Selection.Text = Clipboard.GetText();
Close();
}
Fuente
El ejemplo del editor de texto de Silverlight permite aplicar a un texto seleccionado los formatos de negrita,
cursiva, subrayado, tipo de fuente, tamao de fuente y color de fuente. Para usar un formato de fuente, se
aplica el mtodo TextSelection.ApplyPropertyValue al texto seleccionado en el control RichTextBox con la
propiedad de dependencia y el valor de propiedad apropiados. En la siguiente tabla, se resumen la
propiedad de dependencia y el valor de propiedad que se pueden usar para aplicar el formato de fuente.
Formato de Propiedad de
Valor de propiedad
fuente dependencia
Se usa la propiedad FontWeights.Bold para aplicar el formato de
negrita al texto seleccionado. Se usa
Negrita FontWeightProperty
la propiedad FontWeights.Normal para quitar el formato de
negrita del texto seleccionado.
Se usa la propiedad FontStyles.Italic para aplicar el formato de
cursiva al texto seleccionado.
Cursiva FontStyleProperty
Se usa la propiedad FontStyles.Normal para quitar el formato de
cursiva del texto seleccionado.

Silverlight
Se usa la propiedad TextDecorations.Underline para aplicar el

formato de subrayado al texto seleccionado.
Subrayado TextDecorationsProperty
Se establece el valor de TextDecorationsProperty en null para
quitar el formato de subrayado del texto seleccionado.
Se utiliza un objeto FontFamily creado con el nombre de fuente
Tipo de fuente FontFamilyProperty
deseado para especificar la fuente.
Tamao de Se utiliza un valor de tipo double para especificar el tamao de
FontSizeProperty
fuente fuente.
Color de Se utiliza un objeto SolidColorBrush para especificar el color
ForegroundProperty
fuente deseado.
En el siguiente cdigo, se muestra cmo se aplica el formato de fuente en el ejemplo del editor de texto de
Silverlight.
RichNotepadSnippets#Font1, Font2
Insertar
Es posible insertar elementos como imgenes, hipervnculos, cuadrculas de datos y calendarios en el
ejemplo del editor de texto de Silverlight.
El botn Insertar imagen permite insertar una imagen en la ubicacin actual del editor. Primero, se crea la
imagen con un objeto Image que apunta a un identificador URI que especifica la ubicacin de la imagen. A
continuacin, se inserta la imagen en el control RichTextBox mediante un objeto InlineUIContainer. En este
ejemplo, se inserta una imagen denominada desert.jpg que se almacena como un recurso del proyecto. Sin
embargo, es posible insertar cualquier otra imagen pasando el identificador URI adecuado.
En el siguiente cdigo, se muestra cmo se inserta una imagen.
'Insert an image into the RichTextBox
Private Sub btnImage_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim container As InlineUIContainer = New InlineUIContainer
container.Child = MainPage.createImageFromUri(New Uri("/RichNotepad;component/images/Desert.jpg",
UriKind.RelativeOrAbsolute), 200, 150)
rtb.Selection.Insert(container)
'ReturnFocus()
End Sub
Private Shared Function createImageFromUri(ByVal URI As Uri, ByVal width As Double, ByVal height As Double) As Image
Dim img As Image = New Image
img.Stretch = Stretch.Uniform
img.Width = width
img.Height = height
Dim bi As BitmapImage = New BitmapImage(URI)
img.Source = bi
img.Tag = bi.UriSource.ToString
Return img
End Function
El proceso para insertar cualquier otro objeto UIElement en un control RichTextBox es igual que el proceso
que se ha descrito para insertar un control Image. En este ejemplo, se utiliza el mismo proceso para insertar
objetos DataGrid y Calendar.
El botn Insertar hipervnculo permite insertar hipervnculos en el editor. Para insertar un hipervnculo, se
utiliza el elemento Hyperlink. Se usa la propiedad NavigateUri para especificar el identificador. Cuando se
hace clic en el botn Insertar hipervnculo, aparece el cuadro de dilogo Insertar direccin URL, tal y
como se muestra en la siguiente ilustracin.

Silverlight
El cuadro de dilogo Insertar direccin URL es un control ChildWindow que permite escribir la Direccin
URL de destino y una Descripcin de la direccin URL del hipervnculo. En el siguiente cdigo, se muestra
cmo se implementa la insercin del hipervnculo.
//Insert a hyperlink
private void btnHyperlink_Click(object sender, RoutedEventArgs e)
{
InsertURL cw = new InsertURL(rtb.Selection.Text);
cw.HasCloseButton = false;
//Hook up an event handler to the Closed event on the ChildWindows cw.

cw.Closed += (s, args) =>
{
if (cw.DialogResult.Value)
{
Hyperlink hyperlink = new Hyperlink();
hyperlink.TargetName = "_blank";
hyperlink.NavigateUri = new Uri(cw.txtURL.Text);
if (cw.txtURLDesc.Text.Length > 0)
hyperlink.Inlines.Add(cw.txtURLDesc.Text);
else
hyperlink.Inlines.Add(cw.txtURL.Text);
rtb.Selection.Insert(hyperlink);
ReturnFocus();
}
};
cw.Show();
}
Cuando se hace clic en el botn Aceptar o Cancelar del cuadro de dilogo Insertar direccin URL, se
valida el valor de Direccin URL de destino. Esta validacin se realiza en el controlador de eventos Closing.
La validacin se realiza en el evento Closing en lugar del evento Closed porque, de este modo, se mantiene
abierto el cuadro de dilogo si se produce un error de validacin. Si el identificador URI es vlido, se crea un
nuevo objeto Hyperlink y se inserta en la seleccin actual del control RichTextBox.
Imprimir
Es posible imprimir el contenido del editor mediante el botn Imprimir. La impresin es una nueva
caracterstica de Silverlight 4. Cuando se hace clic en el botn Imprimir, se muestra el cuadro de dilogo
Vista previa de impresin. Este cuadro de dilogo Vista previa de impresin es un objeto ChildWindow
que tiene una imagen del contenido que se va a imprimir. En la ilustracin siguiente, se muestra el cuadro
de dilogo Vista previa de impresin.
Esta imagen se crea con un objeto WriteableBitmap que toma el objeto RichTextBox como parmetro. A
continuacin se muestran el cdigo XAML para crear el cuadro de dilogo Vista previa de impresin y el
cdigo para crear la imagen WriteableBitmap.

<sdk:ChildWindow x:Class="RichNotepad.PrintPreview"
Width="400" Height="300"
Title="Print Preview" FontFamily="Calibri" FontSize="16">
<Grid x:Name="LayoutRoot" Margin="2">
<RowDefinition />
<RowDefinition Height="Auto" />
<Border BorderThickness="0.5" BorderBrush="#666" Background="White">
<ScrollViewer>
<Image x:Name="previewImage" Stretch="Uniform" />
</ScrollViewer>
</Border>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23"
HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="Print" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right"
Margin="0,12,79,0" Grid.Row="1" />
</Grid>
</sdk:ChildWindow>
public void ShowPreview(RichTextBox rtb)

{
WriteableBitmap image = new WriteableBitmap(rtb, null);
previewImage.Source = image;
}
Cuando se hace clic en el botn Aceptar del cuadro de dilogo Vista previa de impresin, su contenido se
imprime mediante el objeto PrintDocument, tal y como se muestra en el siguiente cdigo.
//Print the document
private void btnPrint_Click(object sender, RoutedEventArgs e)
{
PrintPreview cw = new PrintPreview();
cw.ShowPreview(rtb);
cw.HasCloseButton = false;
//Hook up a handler to the Closed event before displaying the PrintPreview window by calling the Show() method.
cw.Closed += (t, a) =>
{
if (cw.DialogResult.Value)
{
PrintDocument theDoc = new PrintDocument();
theDoc.PrintPage += (s, args) =>
{
args.PageVisual = rtb;
args.HasMorePages = false;
};
theDoc.EndPrint += (s, args) =>
{
MessageBox.Show("The document printed successfully", "Text Editor", MessageBoxButton.OK);
};
theDoc.Print("Silverlight 4 Text Editor");
ReturnFocus();
}
};
cw.Show();
}
Display
El ejemplo del editor de texto de Silverlight admite el diseo de derecha a izquierda, que es una nueva
caracterstica de Silverlight 4. Se incluye por motivos de compatibilidad con idiomas como el rabe y el
hebreo. En la siguiente ilustracin, se muestra el ejemplo del editor de texto de Silverlight en el diseo de
derecha a izquierda.

Silverlight
El botn de alternancia Direccin del texto sirve para pasar del diseo de izquierda a derecha al diseo de
derecha a izquierda, y viceversa. En el siguiente cdigo, se muestra cmo se usa el objeto FlowDirection
para este propsito.
//Set the flow direction
public void btnRTL_Checked(object sender, RoutedEventArgs e)
{
//Set the button image based on the state of the toggle button.
if(btnRTL.IsChecked.Value)
btnRTL.Content = MainPage.createImageFromUri(new Uri("/RichNotepad;component/images/rtl.png",
UriKind.RelativeOrAbsolute), 30, 32);
else
btnRTL.Content = MainPage.createImageFromUri(new Uri("/RichNotepad;component/images/ltr.png",
ApplicationBorder.FlowDirection = (ApplicationBorder.FlowDirection == System.Windows.FlowDirection.LeftToRight) ?
System.Windows.FlowDirection.RightToLeft : System.Windows.FlowDirection.LeftToRight;
ReturnFocus();
}
El botn de alternancia Modo de edicin o vista para pasar del modo de edicin al estado de solo lectura
del editor, y viceversa. De forma predeterminada, el editor est en modo de edicin. En el siguiente cdigo,
se muestra cmo se implementa el modo de edicin o de solo lectura.
//Make the RichTextBox read-only
public void btnRO_Checked(object sender, RoutedEventArgs e)
{
rtb.IsReadOnly = !rtb.IsReadOnly;
//Set the button image based on the state of the toggle button.
if (rtb.IsReadOnly)
btnRO.Content = MainPage.createImageFromUri(new Uri("/RichNotepad;component/images/view.png",
else
btnRO.Content = MainPage.createImageFromUri(new Uri("/RichNotepad;component/images/edit.png",
ReturnFocus();
}
Para especificar el modo de solo lectura, se establece la propiedad IsReadOnly de RichTextBox en true. Los
elementos de la interfaz de usuario y los hipervnculos de un control RichTextBox estn activos nicamente
en modo de solo lectura. Por ejemplo, pueden responder a entradas y recibir el foco nicamente cuando
estn en modo de solo lectura.
Resaltar
Cuando se activa el botn de alternancia Resaltar, se resalta toda la lnea en la que se encuentra el puntero
del mouse. En la ilustracin siguiente, se muestra un ejemplo del resaltado.

Silverlight
En el siguiente cdigo, se muestra cmo se implementa el resaltado mediante la clase TextPointer.

public void btnHighlight_Checked(object sender, RoutedEventArgs e)
{
if (btnHighlight.IsChecked.Value)
{
TextPointer tp = rtb.ContentStart;
TextPointer nextTp = null;
Rect nextRect = Rect.Empty;
Rect tpRect = tp.GetCharacterRect(LogicalDirection.Forward);
Rect lineRect = Rect.Empty;
int lineCount = 1;
while (tp != null)
{
nextTp = tp.GetNextInsertionPosition(LogicalDirection.Forward);
if (nextTp != null && nextTp.IsAtInsertionPosition)
{
nextRect = nextTp.GetCharacterRect(LogicalDirection.Forward);
// this occurs for more than one line
if (nextRect.Top > tpRect.Top)
{
if (m_selectionRect.Count < lineCount)
m_selectionRect.Add(lineRect);
else
m_selectionRect[lineCount - 1] = lineRect;
lineCount++;
m_selectionRect.Add(nextRect);
lineRect = nextRect;
}
else if (nextRect != Rect.Empty)
{
if (tpRect != Rect.Empty)
lineRect.Union(nextRect);
else
lineRect = nextRect;
}
}
tp = nextTp;
tpRect = nextRect;
}
if (lineRect != Rect.Empty)
{
m_selectionRect.Add(lineRect);
else
m_selectionRect[lineCount - 1] = lineRect;
}
while (m_selectionRect.Count > lineCount)
{
m_selectionRect.RemoveAt(m_selectionRect.Count - 1);
}
}
else
{
if (highlightRect != null)
{
highlightRect.Visibility = System.Windows.Visibility.Collapsed;
}
}
}

Silverlight
Cuando se activa el botn de alternancia del resaltado, el controlador de eventos enumera el contenido del
control RichTextBox y crea un rectngulo que delimita cada lnea. Los rectngulos se agregan a una lista. En
los siguientes pasos, se muestra cmo se crea la lista de todos los rectngulos.
1. Obtenga un objeto TextPointer que apunte al comienzo del contenido del control RichTextBox
mediante la propiedad ContentStart.
2. Obtenga el rectngulo delimitador del primer carcter mediante el mtodo GetCharacterRect.
3. Obtenga el rectngulo delimitador de la primera lnea. Para ello, se enumera el contenido mediante
el mtodo GetNextInsertionPosition. Obtenga el objeto TextPointer en cada posicin. Compruebe si
ha pasado a la lnea siguiente; para ello, compare las coordenadas de los puntos Top de los
rectngulos que se han obtenido mediante el comienzo del objeto TextPointer de la lnea y el
objeto TextPointer actual. Si pasa a la lnea siguiente, cree el rectngulo de la lnea actual y
agrguelo a la lista antes de iniciar la misma enumeracin para la lnea siguiente.
4. Repita el paso anterior hasta que se procesen todas las lneas.
Ya tiene una lista de los rectngulos correspondientes a cada una de las lneas del contenido.
Para determinar qu lnea se va a resaltar, el cdigo realiza una prueba de posicionamiento para la posicin
actual del mouse con respecto a la lista de rectngulos en el controlador de eventos MouseMove del
control RichTextBox. El cdigo resalta una lnea mostrando un rectngulo en el control Canvas denominado
highlightCanvas.
XAML
El botn XAML sirve para mostrar el marcado XAML del contenido del editor. Para ello, se usa la propiedad
RichTextBox.Xaml. En el siguiente cdigo, se ilustra cmo mostrar el XAML mediante la propiedad Xaml.
'Set the xamlTb TextBox with the current XAML of the RichTextBox and make it visible. Any changes to the XAML made
'in xamlTb is also reflected back on the RichTextBox. Note that the Xaml string returned by RichTextBox.Xaml will
'not include any UIElement contained in the current RichTextBox. Hence the UIElements will be lost when you
'set the Xaml back again from the xamlTb to the RichTextBox.
Public Sub btnMarkUp_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs)
If btnMarkUp.IsChecked.Value Then
xamlTb.Visibility = System.Windows.Visibility.Visible
xamlTb.IsTabStop = True
xamlTb.Text = rtb.Xaml
Else
rtb.Xaml = xamlTb.Text
xamlTb.Visibility = System.Windows.Visibility.Collapsed
xamlTb.IsTabStop = False
End If
End Sub
Cuando se hace clic en el botn XAML, el marcado XAML se muestra en un control TextBox denominado
xamlTb. El valor predeterminado de la propiedad Visibility de xamlTb es Collapsed y cambia a Visible
cuando se hace clic en el botn XAML. Si se realizan cambios en el marcado XAML de xamlTb, dichos
cambios se reflejan en el contenido del control RichTextBox. Observe que la cadena XAML devuelta por la
propiedad Xaml no incluye ningn objeto UIElement que se encuentre en el control RichTextBox. Por
consiguiente, se perdern los objetos UIElement cuando se pase de nuevo de la vista XAML al control
RichTextBox.
Archivo
Cuando se hace clic en el botn Nuevo archivo, se borra el contenido existente del control RichTextBox. En
el siguiente cdigo, se muestra el proceso para crear un nuevo archivo.
//Clears the contents of the existing file.
private void btnNew_Click(object sender, RoutedEventArgs e)
{
rtb.Blocks.Clear();
}
Es posible abrir un archivo existente mediante el botn Abrir archivo. En el siguiente cdigo, se muestra el
proceso de abrir un archivo existente.
//Opens an existing file
private void btnOpen_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog ofd = new OpenFileDialog();

Silverlight
ofd.Multiselect = false;
ofd.Filter = "Saved Files|*.sav|All Files|*.*";
if (ofd.ShowDialog().Value)
{
FileInfo fi = ofd.File;
StreamReader r = fi.OpenText();
rtb.Xaml = r.ReadToEnd();
r.Close();
}
}
Cuando se hace clic en el botn Abrir archivo, se crea un objeto OpenFileDialog que se muestra mediante
el mtodo ShowDialog. Se trata del cuadro de dilogo Abrir archivo estndar de Windows, que se puede
usar para seleccionar el archivo que se desea abrir. El archivo seleccionado se abre como StreamReader y su
contenido se asigna a la propiedad Xaml del control RichTextBox.
Es posible guardar el archivo existente mediante el botn Guardar archivo. Si el control RichTextBox
contiene objetos UIElement, estos no se guardan durante la operacin de guardar. No es posible guardar
los objetos UIElement porque la propiedad Xaml del control RichTextBox incluye nicamente contenido de
texto y el marcado asociado. En el siguiente cdigo, se muestra cmo se guarda el contenido actual.
//Saves the existing file
private void btnSave_Click(object sender, RoutedEventArgs e)
{
string ContentToSave = rtb.Xaml;
//Check if the file contains any UIElements
var res = from block in rtb.Blocks
from inline in (block as Paragraph).Inlines
where inline.GetType() == typeof(InlineUIContainer)
select inline;
//If the file contains any UIElements, it will not be saved
if (res.Count() != 0)
{
MessageBox.Show("Saving documents with UIElements is not supported");
return;
}
SaveFileDialog sfd = new SaveFileDialog();
sfd.DefaultExt = ".sav";
sfd.Filter = "Saved Files|*.sav|All Files|*.*";
if (sfd.ShowDialog().Value)
{
using (FileStream fs = (FileStream)sfd.OpenFile())
{
System.Text.UTF8Encoding enc = new System.Text.UTF8Encoding();
byte[] buffer = enc.GetBytes(ContentToSave);
fs.Write(buffer, 0, buffer.Length);
fs.Close();
}
}
}
Primero, el cdigo enumera el contenido del control RichTextBox y comprueba si hay objetos UIElement. Si
el control RichTextBox contiene objetos UIElement, finaliza la operacin de guardar y se muestra un cuadro
de mensaje. Si el control RichTextBox solo tiene elementos de texto, se crea un control SaveFileDialog que
se muestra mediante el mtodo ShowDialog. Se trata del cuadro de dilogo Guardar archivo estndar de
Windows, que se puede usar para guardar un archivo. El contenido del control RichTextBox se recupera
como una cadena mediante la propiedad Xaml y, a continuacin, se escribe en un objeto FileStream.
Arrastrar y colocar
Es posible abrir archivos de texto y de Office Word en el ejemplo del editor de texto de Silverlight
arrastrndolos hasta el rea de contenido. Esta caracterstica se implementa mediante la nueva caracterstica
de arrastrar y colocar de Silverlight 4. En el cdigo siguiente, se muestra el mtodo de control del evento
Drop.
private void rtb_Drop(object sender, System.Windows.DragEventArgs e)
{
VisualStateManager.GoToState(this, "Normal", true);
//the Drop event passes in an array of FileInfo objects for the list of files that were selected and drag-dropped onto the
RichTextBox.
if (e.Data == null)
{
ReturnFocus();
return;

Silverlight
}
//This checks if the dropped objects are files and if not, return.
IDataObject f = e.Data as IDataObject;
if (f == null)
{
ReturnFocus();
return;
}
object data = f.GetData(DataFormats.FileDrop);
FileInfo[] files = data as FileInfo[];
if (files == null)
{
ReturnFocus();
return;
}
//Walk through the list of FileInfo objects of the selected and drag-dropped files and parse the .txt and .docx files
//and insert their content in the RichTextBox.
foreach (FileInfo file in files)
{
if (file == null)
{
continue;
}
if (file.Extension.Equals(".txt"))
{
ParseTextFile(file);
}
else if (file.Extension.Equals(".docx"))
{
ParseDocxFile(file);
}
}
ReturnFocus();
}
En el controlador de eventos Drop (rtb_Drop), la lista de objetos FileInfo de los archivos colocados en el
control RichTextBox se pasa en el argumento del evento. El controlador de eventos rtb_Drop enumera los
objetos FileInfo y analiza los archivos .txt y .docx. Se omiten los archivos con otras extensiones. Las
funciones ParseTxtFile y ParseDocxFile (que no se muestran en este tema) toman el objeto FileInfo, lo
analizan y agregan su contenido al control RichTextBox.
2.6.2. Ejemplo de lnea de negocio

En este tema, se proporciona informacin general sobre un ejemplo de lnea de negocios denominada Issue
Tracker que se compila con algunas de las nuevas caractersticas centradas en datos de Silverlight 4. El
ejemplo Issue Tracker permite crear problemas nuevos, abrir problemas existentes y editar problemas en
una base de datos. Con Issue Tracker, tambin se muestran algunas de las caractersticas de creacin de
informes incluidas en Silverlight.
Requisitos previos
Para compilar el ejemplo Issue Tracker, se requieren los siguientes componentes:
Silverlight 4.
Visual Studio 2010.
Kit de herramientas de Silverlight
Servicios RIA de WCF
Kit de herramientas de Servicios RIA de WCF
Caractersticas de Silverlight en Issue Tracker

En el ejemplo Issue Tracker, se usan algunas de las nuevas caractersticas de Silverlight, el Kit de
herramientas de Silverlight y los servicios RIA de WCF. En la tabla siguiente se resumen estas caractersticas:
Caracterstica Dnde se usa en IssueTracker? Ms informacin

RichTextBox Se utiliza para escribir la descripcin del Informacin general sobre

Silverlight
problema y los pasos de reproduccin. el control RichTextBox
RichTextBox
Se utiliza para mostrar las tendencias de los Kit de herramientas de
Grficos
problemas en la pgina Informes. Silverlight
Se utiliza para personalizar la apariencia de la Kit de herramientas de
Temas
aplicacin. Silverlight
Se utiliza para validar los datos
Validacin de datos proporcionados por el usuario en los diversos INotifyDataErrorInfo
campos de un problema.
Se utiliza para asociar acciones a los botones
Comandos Guardar y Crear que se utilizan para guardar ICommand
y crear problemas o incidencias.
FileInfo
Se utiliza para agregar archivos a un problema

Arrastrar y colocar Drop
arrastrndolos y colocndolos en el problema.
DragEventArgs
Se utiliza para vincular la aplicacin de
Documentacin de los
Servicios RIA de WCF Silverlight a la base de datos en la aplicacin
servicios RIA de WCF
ASP.NET.
Los temas que se utilizan para personalizar la
Kit de herramientas de
ContextMenu apariencia de la aplicacin se muestran en un
Silverlight
men contextual.
Imprimir
Se utiliza para imprimir los informes sobre las
Impresin
tendencias de los errores.
PrintDocument
Se utiliza para enlazar a datos la propiedad
DataBinding: compatibilidad con SelectedValue de algunos cuadros
SelectedValue
el selector combinados, como el cuadro combinado
Estado.
DataBinding: para especificar los Se utiliza para establecer el valor de
FallbackValue
valores de presentacin presentacin predeterminado de algunos
predeterminados de un control controles, como el cuadro combinado
TargetNullValue
enlazado a datos Abierto por.
DataBinding: para agrupar los Se utiliza para agrupar las plataformas de un
GroupDescriptions
elementos de una coleccin problema por tipo de procesador.
Se utiliza para mostrar el texto con formato en
DataBinding: formato de cadena el bloque de texto donde se muestra el StringFormat
identificador del problema.
Informacin general de Issue Tracker

El ejemplo Issue Tracker tiene los siguientes componentes:
Una aplicacin de Silverlight denominada IssueTracker, que es la aplicacin cliente. Este proyecto
constituye el nivel de presentacin donde se pueden crear, actualizar y mostrar problemas.
Un proyecto de servidor ASP.NET denominado IssueTracker.Web que hospeda la base de datos
back-end y el cdigo de nivel medio.
Un vnculo de servicios RIA de WCF que permite al cliente obtener acceso a los datos del servidor.
Aplicacin cliente IssueTracker
El cliente IssueTracker es una aplicacin de Silverlight que permite realizar las siguientes funciones:
Crear un nuevo problema y especificar varios atributos, como el ttulo del problema, la prioridad, la
gravedad, la descripcin y el usuario asignado.

Silverlight
Actualizar y guardar los cambios realizados en los problemas existentes.

Ver todos los problemas, o bien los problemas que el usuario tiene asignados.
Ver e imprimir informes sobre las tendencias de los errores.
Adjuntar archivos a un problema mediante la funcionalidad de arrastrar y colocar.
Validar los datos proporcionados por el usuario.
Personalizar la apariencia de la aplicacin usando el tema adecuado del men contextual.
La interfaz de usuario del ejemplo Issue Tracker se divide en una barra de herramientas de navegacin y una
vista que depende de la opcin seleccionada en dicha barra de herramientas. La barra de herramientas de
navegacin se implementa mediante un elemento StackPanel que tiene objetos HyperlinkButton para los
elementos de men. A continuacin figuran los elementos de men:
Inicio
New Issue (Problema nuevo)
All Issues (Todos los problemas)
My Issue (Mi problema)
Reports (Informes)
Al hacer clic en cualquiera de estos elementos de men, se cargar la vista correspondiente. En el siguiente
cdigo XAML, se muestra cmo el elemento de men New Issue se implementa mediante un control
HyperlinkButton.
<HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}" NavigateUri="/NewIssue" TargetName="ContentFrame"
Content="new issue" />
Para personalizar la apariencia del ejemplo Issue Tracker, se puede usar el men contextual que aparece
cuando se hace clic con el botn secundario del mouse en cualquier punto del ejemplo. Este
comportamiento se implementa mediante los controles Themes y ContextMenu, que estn disponibles en el
Kit de herramientas de Silverlight.
El ejemplo tambin tiene un indicador de ocupacin que aparece cuando el cliente IssueTracker est
comunicando con el servicio IssueTracker.Web. Este comportamiento se implementa mediante el control
BusyIndicator, que tambin est incluido en el Kit de herramientas de Silverlight.
Aplicacin IssueTracker.Web ASP.NET
IssueTracker.Web es una aplicacin ASP.NET que hospeda una base de datos denominada
IssueTrackerData.mdf y la lgica de nivel medio que administra la interaccin entre la aplicacin cliente
IssueTracker y la base de datos.
En la siguiente tabla, se muestran las diversas tablas que se incluyen en esta base de datos.
Nombre de la tabla Descripcin

Almacena los atributos que estn asociados a los problemas. Cada atributo consta
Atributos
de un par nombre-valor.
Almacena el nombre de archivo y los datos de archivo que se cargan para un
Files (Archivos)
problema concreto.
Almacena la lista de problemas y los detalles asociados, como la prioridad y la
Problemas
gravedad.
Plataformas Almacena la lista de plataformas permitidas, como Windows 7 o Windows Vista.
Resolutions
Almacena la lista de tipos de resolucin, como Fixed (Fijo) o Duplicate (Duplicado).
(Resoluciones)
Almacena la lista de estados que se pueden asociar a un problema; por ejemplo,
Statuses (Estados)
Activo, Resuelto o Cerrado.
Almacena la lista de usuarios permitidos que pueden crear y modificar los
Usuarios
problemas.

Silverlight
Para crear un vnculo de servicios RIA entre el servidor y el cliente de Silverlight, se necesita un modelo de
entidad que represente las tablas y las columnas presentes en la base de datos. Un modelo de entidad
representa las tablas y las columnas como tipos de CLR (las tablas se representan como clases; las columnas
y las asociaciones de clave externa se representan como propiedades). En este proyecto, se usa el modelo
de entidad LINQ to SQL, representado por el archivo IssueTrackerData.Dbml.
Una vez elegido el modelo de entidad, se puede crear un vnculo de servicios RIA agregando una clase
LinqToSqlDomainService(Of TContext) al servidor. Para ello, se utiliza el cuadro de dilogoque permite
agregar una nueva clase de servicio de dominio. En este cuadro de dilogo, se pueden seleccionar los tipos
(que representan las tablas) del modelo de entidad que se van a incluir en el servicio de dominio. Hay que
activar la casilla que permitehabilitar la edicin para que pueda haber un enlace de datos bidireccional entre
el cliente y el servidor. La clase de servicio de dominio para este proyecto es la clase
IssueTrackerDomainService. Al crear el servicio de dominio, se generan automticamente los mtodos para
consultar, actualizar y eliminar filas en todas las tablas asociadas. Adems, hace que los mismos mtodos
estn disponibles en el proyecto de cliente de Silverlight como la clase IssueTrackerDomainContext. Se
modifican estos mtodos para personalizar el resultado de las consultas.
Consultar y mostrar problemas

Se puede utilizar el cliente de Silverlight para ver todos los problemas incluidos en la base de datos o solo
los problemas que el usuario tiene asignados. Se puede utilizar la pgina All Issues (Todos los problemas)
para ver todos los problemas incluidos en la base de datos. Esta pgina est implementada en el archivo
AllIssues.xaml. El archivo AllIssues.xaml es un control Page que consta de un control DataGrid en el que se
muestran todos los problemas incluidos en la base de datos y de un control de usuario denominado
IssueEditor en el que se muestran los detalles del problema seleccionado en DataGrid. La pgina tambin
tiene botones para Guardar y Cancelar.
El control DataGrid se enlaza a la consulta GetIssues mediante el control DomainDataSource de los servicios
RIA, tal y como se muestra en el siguiente cdigo XAML.
<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding ElementName=issueDomainDataSource, Path=Data}" ...
...
<riaControls:DomainDataSource AutoLoad="True" Height="0" Name="issueDomainDataSource"
QueryName="GetIssuesQuery" Width="0" DomainContext="{StaticResource issueTrackerData}" />
...
La consulta GetIssues se genera automticamente en el archivo IssueTrackerDomainService.cs cuando se

crea el servicio de dominio. De forma predeterminada, la consulta devuelve todos los valores de todas las
columnas de la tabla Issue. Es posible modificar esta consulta para incluir los datos en otras tablas a las que
hacen referencia claves externas de la tabla Issues. Por ejemplo, ChangedByID, que es una clave externa de
la tabla Issues, hace referencia a UserID de la tabla Users. Por consiguiente, la fila a la que hace referencia el
valor de ChangedByID tambin se incluye en la consulta GetsIssues. En el cdigo siguiente, se muestra la
consulta GetIssues.
public IQueryable<Issue> GetIssues()
{
var loadOptions = new DataLoadOptions();
loadOptions.LoadWith<Issue>((i) => i.Files);
loadOptions.LoadWith<File>((f) => f.Data);
loadOptions.LoadWith<File>((f) => f.FileName);
loadOptions.LoadWith<Issue>((i) => i.AssignedTo);
loadOptions.LoadWith<Issue>((i) => i.Attributes);
loadOptions.LoadWith<Issue>((i) => i.ChangedBy);
loadOptions.LoadWith<Issue>((i) => i.IssueType);
loadOptions.LoadWith<Issue>((i) => i.OpenedBy);
loadOptions.LoadWith<Issue>((i) => i.Platform);
loadOptions.LoadWith<Issue>((i) => i.Resolution);
loadOptions.LoadWith<Issue>((i) => i.Status);
DataContext.LoadOptions = loadOptions;
return this.DataContext.Issues;
}
La pgina My Issues (Mis problemas) es similar a la pgina All Issues (Todos los problemas), salvo la
consulta GetMyIssues que se utiliza para rellenar DataGrid. La consulta GetMyIssues filtra los problemas
asignados al usuario actual.

Silverlight
Al seleccionar un problema en el control DataGrid, el control IssueEditor se rellena con los detalles del
problema seleccionado. El problema seleccionado se pasa como DataContext al control IssueEditor, tal y
como se muestra en el siguiente XAML.
<my:IssueEditor Grid.Row="2" DataContext="{Binding Data.CurrentItem, ElementName=issueDomainDataSource}"
x:Name="issueEditor1" />
IssueEditor es un control de usuario que se utiliza para ver y actualizar los detalles de un problema. El
control IssueEditor se utiliza para ver y actualizar los problemas en la pgina All Issues (Todos los
problemas), ver y actualizar los problemas asignados al usuario en la pgina My Issues (Mis problemas), y
crear un nuevo problema en la pgina New Issue (Nuevo problema). El control IssueEditor se compone de
un gran nmero de controles de Silverlight que estn enlazados a varias columnas y las muestran en la tabla
Issues. En las siguientes secciones, se describe cmo se implementan las reas de ttulo del problema,
estado, usuario al que se asigna el problema y plataforma del control IssueEditor.
Ttulo del problema
El ttulo del problema se muestra en un control TextBox que est enlazado a la columna Title
correspondiente al problema seleccionado en la tabla Issues, tal y como se muestra en el siguiente XAML.
<TextBox Name="textBox4" Grid.Column="1" Text="{Binding Path=Title, Mode=TwoWay, NotifyOnValidationError=True}"
VerticalAlignment="Center" />
Status
El estado del problema se muestra en un control ComboBox. Los elementos del control ComboBox estn
enlazados a la tabla Status y la propiedad SelectedValue del control ComboBox est enlazada al estado del
problema seleccionado. En el siguiente XAML, se muestra cmo se implementa.
<ComboBox DisplayMemberPath="Name" ItemsSource="{Binding Status, Source={StaticResource issueTrackerData}}"
Name="comboBox7" SelectedValue="{Binding StatusID, Mode=TwoWay}" SelectedValuePath="StatusID" ...
Usuario al que se asigna el problema

El valor de esta rea es el nombre de la persona a la que se asigna el problema. Este valor se muestra en un
control ComboBox que est enlazado a la tabla Users. A continuacin, la informacin de usuario que se
obtiene de la tabla Users se muestra con el formato "idDeUsuario-Nombre Apellido" mediante un objeto
DataTemplate. La propiedad SelectedValue del control ComboBox est enlazada al usuario que tiene
asignado el problema seleccionado. En el siguiente XAML, se muestra cmo se implementa.
<ComboBox ItemTemplate="{StaticResource UserItemTemplate}"
ItemsSource="{Binding Users, Source={StaticResource issueTrackerData}}" SelectedValue="{Binding AssignedToID,
Mode=TwoWay, TargetNullValue=Active}" SelectedValuePath="UserId" ...
...
<DataTemplate x:Key="UserItemTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding UserId}" />
<TextBlock Text=" - " />
<TextBlock Text="{Binding FirstName}" />
<TextBlock Text=" " />
<TextBlock Text="{Binding LastName}" />
</StackPanel>
</DataTemplate>
Plataforma
La informacin de plataforma contiene opciones de sistema operativo, explorador e idioma que se pueden
asociar a un problema. La informacin de plataforma se muestra en un control DataGrid que est enlazado
a la tabla Platforms de la base de datos, tal y como se muestra en el siguiente XAML.
<sdk:DataGrid Name="dataGrid3" IsReadOnly="True" ItemsSource="{Binding Source={StaticResource platformViewSource}}"
SelectedItem="{Binding Platform, Mode=TwoWay}" ...
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Header="Operating System" Width="*" SortMemberPath="OSVersion">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="{Binding OS}" />
<TextBlock Text="{Binding OSVersion}" />
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>

Silverlight
</sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn Header="Browser" Width="*" SortMemberPath="BrowserVersion">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Center">
<TextBlock Text="{Binding Browser}" />
<TextBlock Text="{Binding BrowserVersion}" />
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTextColumn Header="Language" Width="SizeToCells" Binding="{Binding Language}" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
La informacin de plataforma se agrupa por nombre de procesador. Este comportamiento se implementa

mediante un objeto CollectionViewSource, tal y como se muestra en el siguiente XAML.
<CollectionViewSource x:Key="platformViewSource" Source="{Binding Platforms, Source={StaticResource issueTrackerData}}"
d:DesignSource="{d:DesignInstance my:Platform, CreateList=True, IsDesignTimeCreatable=True}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="Processor" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
Crear y actualizar problemas

Se puede utilizar la pgina New Issue (Nuevo problema) para crear un nuevo problema. La pgina New
Issue incluye el control IssueEditor, que permite escribir detalles del problema que se va a crear. Los
diversos controles de Silverlight incluidos en el control IssueEditor se caracterizan por un enlace de datos
bidireccional para que se puedan guardar en la base de datos los cambios realizados en el cliente. Para
crear y guardar un nuevo problema, escriba sus detalles y, a continuacin, haga clic en el botn Submit
(Enviar). Este botn est asociado a una propiedad Command denominada AddIssue, tal y como se muestra
en el siguiente XAML.
<Button Content="Submit" Command="{Binding AddIssue, Source={StaticResource issueTrackerData}}"
CommandParameter="{StaticResource newIssue}" ...
La propiedad Command est enlazada al comando AddIssue, que es del tipo ICommand. La clase AddIssue
implementa la interfaz ICommand, tal y como se muestra en el siguiente cdigo.
private class AddIssueCommand : ICommand
{
...
#region ICommand Members
public bool CanExecute(object parameter)
{
return parameter != null && parameter is Issue && !dc.IsLoading && !dc.IsSubmitting;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
...
dc.Issues.Add(parameter as Issue);
(parameter as IEditableObject).EndEdit();
dc.SubmitChanges();
}
#endregion
}
Se usa el mtodo CanExecute para comprobar si el comando AddIssue puede ejecutarse en este momento.
Mediante este mtodo, se comprueba si hay alguna operacin de carga o de envo en curso en el vnculo de
servicios RIA. El mtodo Execute llama al mtodo EndEdit del nuevo problema, agrega el problema a la tabla
Issues y enva los cambios pendientes al vnculo de los servicios RIA.
Para realizar cambios y actualizar un problema existente, haga clic en el botn Save (Guardar) que figura en
las pginas All Issues (Todos los problemas) y My Issues (Mis problemas). El botn Save est asociado a
una propiedad Command denominada SaveChanges, tal y como se muestra en el siguiente XAML.
<Button Content="Save" Command="{Binding SaveChanges, Source={StaticResource issueTrackerData}}"
CommandParameter="{Binding Data.CurrentItem, ElementName=issueDomainDataSource}" ...
La clase SaveChanges implementa la interfaz ICommand, tal y como se muestra en el siguiente cdigo.

Silverlight
private class SaveChangesCommand : ICommand
{
...
#region ICommand Members
public bool CanExecute(object parameter)
{
return dc.HasChanges && !dc.IsLoading && !dc.IsSubmitting;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
...
if (parameter is Entity)
{
(parameter as IEditableObject).EndEdit();
}
dc.SubmitChanges();
}
#endregion
}
Se invoca el mtodo CanExecute para comprobar si el comando SaveChanges puede ejecutarse en este
momento. Con este mtodo, se comprueba si hay que guardar algn cambio y si hay alguna operacin de
carga o de envo en curso en el vnculo de servicios RIA. El mtodo Execute invoca el mtodo EndEdit del
problema actual y enva los cambios pendientes al vnculo de servicios RIA.
Validacin y control de errores

En el ejemplo Issue Tracker, se valida la entrada de datos en tres controles de la interfaz de usuario. A
continuacin, se describe la validacin que se lleva a cabo:
Se valida que la prioridad de un problema no sea menor que su gravedad (es decir, el valor
numrico de la prioridad no es mayor que el de la gravedad).
Si la prioridad de un problema es mayor que su gravedad, se mostrar un error de validacin en
dos puntos de la interfaz de usuario. Se mostrar un mensaje de error junto al control ComboBox
correspondiente a la prioridad y en un control ValidationSummary situado en la parte inferior del
control IssueEditor.
Se valida que el ttulo de un problema no figure en el ttulo de otro problema.
Si el ttulo de un problema figura en el ttulo de otro problema, se muestran errores de validacin
junto al control ComboBox correspondiente a la prioridad y en un control ValidationSummary
situado en la parte inferior del control IssueEditor.
La clase Issue implementa la interfaz INotifyDataErrorInfo para validar las condiciones de error anteriores. La
interfaz INotifyDataErrorInfo proporciona un evento ErrorsChanged, el mtodo GetErrors y una propiedad
HasErrors. El control ValidationSummary y los controles correspondientes a la prioridad, la gravedad y el
ttulo usan estas API para implementar la validacin de los errores.
Validacin del ttulo
Tal y como se ha mencionado, aparece un error de validacin cuando el ttulo de un problema figura en el
ttulo de otro problema. En el ejemplo IssueTracker, se realiza una consulta para comprobar si el ttulo del
problema actual es un subconjunto de alguno de los problemas incluidos en la base de datos. Este
comportamiento se implementa en la clase IssueTrackerDomainService, tal y como se muestra en el
siguiente cdigo.
public Issue[] GetSimilarIssues(string issueTitle)
{
return (from i in this.DataContext.Issues where i.Title.Contains(issueTitle) && !i.Title.Equals(issueTitle)select i).ToArray();
}
Si la consulta anterior devuelve problemas, se genera una cadena de error, se agrega dicha cadena a una
lista de errores y se provoca el evento ErrorsChanged. Esto queda reflejado en el ejemplo de cdigo
siguiente.
partial void OnTitleChanged()
{
...
var data = new IssueTrackerDomainContext();

Silverlight
var getRelated = data.Load(data.GetSimilarIssuesQuery(this.Title));
...
if (getRelated.Entities.Count() > 0)
{
StringBuilder sb = new StringBuilder();
sb.Append("Warning: The following issues may be related to this one: ");
foreach (var issue in getRelated.Entities)
{
sb.AppendFormat("{0}, ", issue.IssueID);
}
sb.Remove(sb.Length - 2, 2);
AddValidationError("Title", sb.ToString());
}
}
Para que el control TextBox correspondiente al ttulo controle este evento ErrorsChanged, se debe
establecer la propiedad NotifyOnValidationError en true, tal y como se muestra en el siguiente XAML.
<TextBox Text="{Binding Path=Title, Mode=TwoWay, NotifyOnValidationError=True}" ...
El mtodo GetErrors devuelve una lista IEnumerable con los mensajes de error que existen para un campo
determinado. La propiedad HasErrors indica si hay algn error asociado a la clase Issue. En el ejemplo de
cdigo siguiente, se muestra cmo la clase Issue implementa el mtodo GetErrors y la propiedad HasErrors.
public System.Collections.IEnumerable GetErrors(string propertyName)
{
if (errors != null && errors.ContainsKey(propertyName))
return errors[propertyName];
return null;
}
public bool HasErrors
get
{
return (from errorList in errors.Values where (from e in errorList where !(e is string && ((string)e).StartsWith("Warning: "))
select e).Count() > 0 select errorList).Count() > 0;
}
}
Validacin de la prioridad y de la gravedad

Se muestra un error de validacin si la prioridad de un problema es menor que su gravedad. En el siguiente
cdigo, se muestra cmo se implementa esta validacin.
private void CheckPriorityAndSeverity()
{
if (this.Priority > this.Severity)
{
AddValidationError("Priority", priSevError);
AddValidationError("Severity", priSevError);
}
else
{
RemoveValidationError("Priority", priSevError);
RemoveValidationError("Severity", priSevError);
}
}
Para que se provoque el evento ErrorsChanged, se establece en true la propiedad NotifyOnValidationError

del control ComboBox correspondiente a la prioridad y a la gravedad.
3. Modelos de aplicacines y programacin

La mayora de las aplicaciones basadas en Silverlight se escriben en cdigo administrado y usan el modelo
de aplicaciones de Silverlight. Sin embargo, tiene la opcin de utilizar un modelo de programacin
simplificado.
Silverlight proporciona los dos modelos siguientes para el desarrollo de aplicaciones:
La API administrada para Silverlight, que usa cdigo que se ejecuta en Common Language Runtime
(CLR) para Silverlight. Puede usar la API administrada con lenguajes compilados como Visual Basic y
C#, o lenguajes dinmicos como IronPython e IronRuby.
La API de JavaScript para Silverlight, que usa cdigo JavaScript que interpreta el explorador.

Silverlight
Estos modelos de programacin son distintos porque no se pueden utilizar al mismo tiempo dentro de una
instancia nica del complemento Silverlight. Sin embargo, puede implementar una pantalla de presentacin
que utilice la API de JavaScript y, a continuacin, pasar a la API administrada cuando la aplicacin se ha
cargado.
La API administrada proporciona significativamente ms funcionalidad que la API de JavaScript y es el tema
tratado en la mayor parte de la documentacin de Silverlight. Las aplicaciones que utilizan la API
administrada tienen acceso a una versin ligera de .NET Framework. La API de JavaScript, sin embargo, solo
tiene acceso al ncleo de presentacin de Silverlight y al motor del explorador de JavaScript.
La programacin administrada y el modelo de aplicaciones

La API administrada permite empaquetar ensamblados administrados y archivos de recursos en los archivos
empaquetados de la aplicacin (.xap). El complemento Silverlight es responsable de cargar un paquete de
aplicacin y extraer su contenido.
Un paquete de aplicacin debe contener un ensamblado con una clase derivada de Application. La clase
Application encapsula la interaccin entre la aplicacin y el complemento Silverlight. Por ejemplo, permite
mostrar una interfaz de usuario dentro de la pgina web en que se hospeda. Adems, proporciona eventos
de duracin de la aplicacin y administracin de recursos.
La documentacin de Silverlight utiliza el trmino modelo de aplicaciones para hacer referencia a la
aplicacin que empaqueta y a la funcionalidad comn encapsulada por la clase Application. El modelo de
aplicaciones ayuda a desarrollar aplicaciones simples y complejos, aplicaciones extensibles que pueden
compartir los recursos de una red.
Los temas sobre el modelo de aplicaciones proporcionan orientacin para el diseo de aplicaciones para
habilitar escenarios comunes, como la carga de recurso a peticin, la indicacin del progreso de la descarga
y la navegacin.
La API administrada
Puede utilizar el marcado XAML para encapsular los diseos de interfaz de usuario en la API administrada y
la API de JavaScript. Con la API administrada, sin embargo, puede factorizar el cdigo de la aplicacin en
varios archivos XAML y archivos de cdigo subyacente.
Cuando el complemento Silverlight carga los archivos XAML, crea un rbol de objetos que el cdigo
subyacente puede manipular. El cdigo de la aplicacin administrada tambin puede manipular el Modelo
de objetos de documento HTML (DOM) a travs del puente HTML.
La API de JavaScript
La API de JavaScript es el modelo que estuvo disponible en Silverlight versin 1.0 y se mantiene para la
compatibilidad con versiones anteriores y para habilitar escenarios determinados.
En la API de JavaScript, el complemento Silverlight carga una pgina XAML nica, en lugar de un paquete de
aplicacin. Este XAML puede incluir referencias URI a recursos del servidor, como imgenes y vdeos. El
complemento Silverlight usa el XAML para crear un rbol de objetos que puede manipular mediante
programacin utilizando JavaScript en la pgina HTML en que se hospeda.
La API de JavaScript no proporciona ningn modelo de aplicaciones capaz de admitir aplicaciones
complejas con navegacin interna. Sin embargo, habilita escenarios para los que la API administrada es
demasiado prolija, como las pantallas de presentacin. Tambin puede implementar la navegacin bsica
cargando nuevas pginas de XAML en el complemento Silverlight o cargando las nuevas pginas web en el
explorador.
JavaScript y el HTML DOM

La API administrada y la API de JavaScript permiten utilizar JavaScript en la pgina HTML en que se hospeda
para integrar Silverlight con el Modelo de objetos de documento HTML (DOM).
En la API de JavaScript, debe implementar la mayora de la funcionalidad de la aplicacin utilizando
JavaScript interpretado por el explorador, que puede interactuar con el DOM directamente. En la API
administrada, el cdigo de JavaScript y el cdigo DOM interactan con el complemento Silverlight y el
modelo de aplicaciones utilizando el puente HTML.

Silverlight
Uso de varios complementos Silverlight en una pgina web

Una razn para usar la caracterstica Puente HTML es crear pginas web que integren Silverlight con otro
contenido basado en HTML. Tambin se puede usar el DOM HTML para integrar varias aplicaciones basadas
en Silverlight en una sola pgina. Sin embargo, en este caso, Silverlight proporciona compatibilidad
integrada para la comunicacin entre los distintos complementos Silverlight, lo que se conoce como
mensajera local.
La mensajera local permite enviar mensajes de una aplicacin basada en Silverlight a otra que se ejecuta en
el mismo equipo. Esto permite crear contenido de Silverlight que abarque varios complementos, como una
animacin que se desplace de una pancarta a una barra lateral.
Uso de Silverlight fuera del explorador

Silverlight proporciona compatibilidad integrada para ejecutar aplicaciones administradas fuera del
explorador. Despus de configurar una aplicacin para la compatibilidad con la ejecucin fuera del
explorador, los usuarios pueden instalarla desde su pgina web host. Despus de la instalacin, los usuarios
pueden ejecutar la aplicacin sin un explorador o incluso sin conexin de red. Puede configurar las
aplicaciones para la compatibilidad con la ejecucin fuera del explorador sin modificar el cdigo de
aplicacin. Como alternativa, puede implementar otro tipo de compatibilidad adicional con el modo de
ejecucin fuera del explorador, como el almacenamiento en cach sin conexin y las actualizaciones
automticas.
Tambin puede usar el complemento Silverlight en otros entornos. Sin embargo, en este caso no hay
ningn tipo de compatibilidad integrada. La manera ms fcil de integrar Silverlight con otra tecnologa es
hospedar el complemento Silverlight dentro de un control de explorador. A continuacin, puede hospedar
el control de explorador dentro de la otra tecnologa. Las opciones de hospedaje ms complejas implican el
uso de cdigo no administrado e interfaces COM. Si necesita la funcionalidad de Silverlight en una
aplicacin de escritorio, debera considerar el uso de Windows Presentation Foundation (WPF).
3.1. Modelo de aplicaciones

El modelo de aplicaciones de Silverlight proporciona la siguiente funcionalidad para las aplicaciones
administradas:
Un sistema de activacin, que permite al complemento Silverlight descargar el paquete de la
aplicacin y los ensamblados de biblioteca externos que la aplicacin necesite durante el inicio.
Una clase Application, que encapsula los servicios requeridos normalmente por las aplicaciones
basadas en Silverlight, como la notificacin de los eventos de ciclo de vida y una interfaz para el
complemento Silverlight.
Un sistema de extensibilidad de aplicacin, que encapsula los servicios adicionales que necesitan
algunas aplicaciones, como una capa de acceso a datos personalizada.
Un sistema de administracin de recursos, que incluye referencias y mecanismos de reserva de los
identificadores URI, cargas de recursos a peticin, uso compartido de estilos y plantillas y
compatibilidad con la globalizacin.
Estas caractersticas permiten implementar estructuras de aplicacin correctamente factorizadas que
proporcionan un equilibrio entre el tiempo de inicio y la disponibilidad de los recursos.
Por ejemplo, se puede implementar una aplicacin que proporcione acceso inmediato a un pequeo
conjunto inicial de pginas pero que descargue las otras pginas a peticin. Asimismo, se puede
proporcionar una descarga inicial de gran tamao y mostrar una pantalla de presentacin para mantener la
capacidad de respuesta. Si se proporciona una descarga inicial grande, se pueden reducir los tiempos de
descarga subsiguientes mediante el almacenamiento en cach de biblioteca de aplicaciones. Por ltimo, se
puede implementar un sistema de navegacin personalizado como servicio de extensin de la aplicacin.
Estructura de aplicacin
El sistema de activacin de Silverlight permite especificar los ensamblados y archivos de recursos que se
deben incluir con la aplicacin. El sistema de compilacin incluye los archivos especificados en un paquete
de aplicacin, que es un archivo zip comprimido con la extensin .xap.

Silverlight
Puede reducir el tamao del paquete de la aplicacin mediante el almacenamiento en cach de biblioteca
de aplicaciones. En este caso, los ensamblados configurados para el almacenamiento en cach se
comprimen en archivos zip independientes. Estos ensamblados se denominan ensamblados ExternalPart.
Este paquete incluye un archivo de manifiesto que identifica todos los ensamblados que la aplicacin puede
utilizar. Se incluyen:
Los ensamblados del paquete de la aplicacin.
Los ensamblados ExternalPart, que se descargan en el inicio y posteriormente se almacenan en
cach.
Los ensamblados que se podran descargar despus del inicio.
Como mnimo, el paquete de la aplicacin debe incluir tambin el ensamblado con la clase de aplicacin, de
la que el complemento Silverlight crea instancias. Cuando la aplicacin se inicia, puede realizar tareas como
mostrar una interfaz de usuario o recuperar recursos adicionales.
El usuario debe decidir qu ensamblados y archivos de recursos va a implementar en el paquete de la
aplicacin, como ensamblados ExternalPart, o cules se van a recuperar despus del inicio. Uno de los flujos
de trabajo ms comunes es incluir todo en el paquete de aplicacin y, a continuacin, medir los tiempos de
descarga e inicio cuando aumenta el tamao de la aplicacin. Cuando el retraso se incrementa de manera
significativa, se debe considerar la posibilidad de proporcionar una pantalla de presentacin, mediante el
almacenamiento en cach de biblioteca de aplicaciones, y recuperar algunos archivos despus del inicio.
Servicios de aplicacin
La clase Application proporciona servicios en las categoras siguientes:
Eventos Startup y Exit de la aplicacin.
Interaccin con el complemento Silverlight y la pgina web del host.
Administracin de recursos.
Control de excepciones centralizado.
Todas las aplicaciones basadas en Silverlight deben incluir una clase nica derivada de Application.
Normalmente, la clase de aplicacin agregar los recursos de aplicacin basados en XAML y controlar el
evento Startup para proporcionar una interfaz de usuario. El complemento Silverlight muestra la interfaz de
usuario en su rea de cliente tal y como se configura en la pgina web del host.
Se puede utilizar el evento Startup para inicializar la aplicacin y su interfaz de usuario. Por ejemplo, se
puede especificar el estado inicial de la aplicacin basndose en los parmetros de configuracin del
complemento Silverlight, los parmetros de direccin URL o los valores de usuario recuperados del
almacenamiento aislado.
Tambin se puede utilizar el evento Startup para iniciar la descarga asincrnica de ensamblados y archivos
de recursos adicionales. La clase Application proporciona un mtodo auxiliar para extraer los recursos del
paquete de ensamblados o los archivos zip descargados.
Servicios de extensin de aplicacin

La clase Application permite agregar ms servicios mediante su propiedad ApplicationLifetimeObjects. Se
puede llevar a cabo en el XAML de la aplicacin o con cdigo de procedimiento, en el constructor de la
aplicacin.
La propiedad ApplicationLifetimeObjects es una lista de objetos que implementan IApplicationService y,
opcionalmente, IApplicationLifetimeAware. Estas dos interfaces proporcionan acceso a varias etapas de la
duracin de la aplicacin. IApplicationService permite inicializar y limpiar los servicios.
IApplicationLifetimeAware extiende IApplicationService y permite implementar dependencias ms complejas
entre los servicios, y entre los servicios y el cdigo de aplicacin.
Recursos
Silverlight admite los siguientes tipos de recursos:

Silverlight
Recursos XAML, como estilos y plantillas que varios elementos de la interfaz de usuario pueden
compartir.
Archivos de recursos, como imgenes y vdeos a los que se puede hacer referencia mediante un
identificador URI. Los archivos de recursos se pueden incrustar en los ensamblados, incluir por
separado en el paquete de aplicacin o recuperar de la red.
Cadenas de recursos y otros valores incrustados en los ensamblados o proporcionados a travs de
ensamblados satlite localizados.
En general, el trmino archivo de recursos puede hacer referencia a cualquier archivo que complemente el
ensamblado de la aplicacin. Pueden ser archivos de datos o ensamblados de biblioteca que contienen
otros tipos de recursos, como cadenas localizadas o archivos XAML.
A algunos archivos de recursos, como las imgenes, se puede hacer referencia mediante un identificador
URI. Este identificador URI puede ser absoluto para recuperar archivos de cualquier ubicacin de Internet o
puede ser relativo. Silverlight utiliza un mecanismo de reserva para los identificadores URI relativos de modo
que se puede cambiar la ubicacin de implementacin de algunos archivos sin tener que cambiar el cdigo.
Algunos tipos de archivo, como archivos zip y ensamblados, se pueden recuperar nicamente desde el sitio
de origen mediante una operacin de descarga asincrnica. Se puede utilizar la clase Application para
extraer los recursos de los archivos zip y la clase AssemblyPart para cargar los ensamblados.
Navegacin
Silverlight proporciona varias opciones para navegar dentro de la aplicacin o a recursos ajenos a la
aplicacin.
Para la navegacin dentro de la aplicacin, se usan los controles Page y Frame. El marco acta como
contenedor de controles de pgina, y facilita la navegacin a las pginas. Cada pgina incluye contenido, y
se pueden agregar cuantas pginas sean necesarias para representar el contenido para el usuario. En
cualquier momento, el marco muestra el contenido de una sola pgina. Para la navegacin a recursos
externos, se pueden proporcionar hipervnculos normales en la interfaz de usuario o se puede incluir la
navegacin mediante programacin a travs del DOM HTML.
Pantallas de presentacin
Silverlight proporciona compatibilidad con las pantallas de presentacin de modo que se puede
personalizar la experiencia predeterminada durante la descarga y el inicio de las aplicaciones administradas.
La pantalla de presentacin predeterminada muestra una simple animacin giratoria despus de un
pequeo retraso.
Si el paquete de aplicacin requiere un tiempo de descarga e inicio significativo, quizs desee reemplazar la
pantalla de presentacin predeterminada con otra en la que se muestra el progreso de la descarga. La
pantalla de presentacin tambin se puede utilizar para describir la aplicacin o proporcionar instrucciones,
crditos o avisos de exencin de responsabilidad.
Las pantallas de presentacin de Silverlight se implementan mediante la API de JavaScript. De este modo, el
complemento Silverlight puede mostrar inmediatamente la pantalla de presentacin, incluso antes de que
se cargue el motor en tiempo de ejecucin administrado de Silverlight. La pantalla de presentacin se
puede cambiar mediante programacin utilizando en la pgina web del host cdigo JavaScript interpretado
por el explorador.
3.1.1. Estructura de aplicacin

Al crear una aplicacin basada en Silverlight mediante la API administrada, el proceso de compilacin
genera un paquete de aplicacin. Un paquete de aplicacin es un archivo ZIP (comprimido mediante el
algoritmo Deflate) que tiene una extensin de archivo .xap. Este archivo normalmente contiene los
ensamblados y recursos de la aplicacin principal. Tambin contiene un manifiesto generado en la
compilacin que describe la aplicacin y especifica todos los ensamblados necesarios para el inicio. Estos
ensamblados pueden ser internos o externos al paquete de la aplicacin.
Al incrustar el complemento Silverlight en una pgina web, se especifica el paquete de aplicacin que el
complemento debe descargar. El complemento utiliza un archivo de manifiesto incluido en el paquete de

Silverlight
aplicacin para identificar la clase de aplicacin de la que se va a crear una instancia. Esta clase se conoce
como el punto de entrada de la aplicacin y debe derivarse de la clase Application.
Si se usa el almacenamiento en cach de biblioteca de aplicaciones, el manifiesto tambin indica qu
ensamblados necesarios son externos al paquete de la aplicacin. El complemento recuperar todos esos
archivos. En el caso de las aplicaciones adaptadas, el complemento recuperar tambin los ensamblados
satlite especficos de la referencia cultural para todos los ensamblados internos y externos necesarios. La
clase Application proporciona un evento Startup que se puede controlar para inicializar la aplicacin y su
interfaz de usuario. La clase Application tambin proporciona otros servicios de aplicacin que normalmente
son necesarios. Por ejemplo, se puede utilizar esta clase para extraer los archivos de recursos del paquete de
aplicacin o de archivos zip descargados.
El proceso a travs del cual se descargan los archivos de inicio de la aplicacin y se crea una instancia de la
clase de aplicacin se conoce como sistema de activacin de Silverlight. El sistema de activacin permite
especificar una descarga inicial mnima de uno o ms paquetes para optimizar el almacenamiento en cach.
Despus de la activacin, la aplicacin puede recuperar a peticin otros ensamblados de biblioteca y
archivos de recursos adicionales.
En este tema se describe la estructura del paquete de aplicacin. Tambin explica las opciones para
implementar los archivos en el paquete de aplicacin, como elementos necesarios pero externos, o como
archivos a peticin.
Paquete de aplicacin
Un paquete de aplicacin contiene los archivos siguientes:
Un archivo AppManifest.xaml, que identifica los ensamblados empaquetados y el punto de entrada
de la aplicacin.
Un ensamblado de aplicacin, que incluye la clase de aplicacin.
Cero o ms ensamblados de biblioteca.
Cero o ms archivos de recursos separados, como imgenes o archivos de vdeo.
El archivo AppManifest.xaml lo suele generar el proceso de compilacin y utiliza marcado XAML para
declarar un objeto Deployment para la aplicacin.
En el archivo AppManifest.xaml, el elemento Deployment incluye los atributos siguientes:
Un atributo RuntimeVersion para identificar la versin requerida de Silverlight.
Los atributos EntryPointAssembly y EntryPointType para identificar el punto de entrada de la
aplicacin.
El elemento Deployment tambin incluye un elemento secundario de la propiedad Deployment.Parts que
tiene un elemento AssemblyPart secundario para cada ensamblado incluido en el paquete de aplicacin.
Si se usa el almacenamiento en cach de biblioteca de aplicaciones, el elemento Deployment tambin
podra incluir un elemento de propiedad Deployment.ExternalParts secundario. Este elemento est presente
si se han agregado referencias a ensamblados de biblioteca configurados para el uso con el
almacenamiento en cach de biblioteca de aplicaciones. El elemento de propiedad
Deployment.ExternalParts tiene un elemento ExtensionPart secundario para cada paquete de biblioteca
externo.
El paquete de aplicacin debe incluir un archivo AppManifest.xaml y un ensamblado de aplicacin de punto
de entrada. Todos los dems componentes de la aplicacin se pueden implementar como archivos
empaquetados, archivos ExternalPart o archivos a peticin.
Los archivos empaquetados son archivos que se incluyen en el paquete de aplicacin. Normalmente, se
incluyen los archivos principales que la aplicacin requiere al iniciarse o que deben estar disponibles de
inmediato para evitar retrasos despus del inicio. Tambin se pueden incluir los recursos compartidos, como
imgenes, que se pueden incrustar en ensamblados o proporcionar como archivos independientes en el
paquete de aplicacin.
Los archivos ExternalPart son archivos zip que contienen uno o ms ensamblados necesarios en el inicio de
la aplicacin. Normalmente son ensamblados de biblioteca que tienen menos probabilidades de cambiar

Silverlight
que los archivos principales de la aplicacin. Es posible mejorar la eficacia del almacenamiento en cach en
los equipos de los usuarios si estos archivos se factorizan en descargas independientes.
Los archivos a peticin son los archivos que se implementan en un servidor, normalmente en la misma
ubicacin que el paquete de aplicacin. La aplicacin puede recuperar estos archivos despus de la
activacin. Segn el tipo y el tamao de los archivos, hay varias opciones para recuperar los archivos a
peticin. Por ejemplo, se pueden utilizar referencias de URI directas para recuperar archivos de imagen, o
bien, se pueden iniciar descargas asincrnicas para recuperar ensamblados de biblioteca o archivos zip. Para
obtener ms informacin, consulte la seccin siguiente.
En el diagrama siguiente se resumen la estructura del paquete de aplicacin y las opciones de
implementacin de los archivos de aplicacin.
Implementacin de archivos empaquetados, como elementos externos o

a peticin
Normalmente, todos los archivos de la aplicacin se implementan en el paquete de aplicacin hasta que el
tiempo de descarga e inicio ya no es aceptable. Esta decisin depende de los requisitos de la aplicacin. Por
ejemplo, se puede optar por incluir tantos archivos como sea posible en el paquete de aplicacin para
mejorar la capacidad de respuesta despus del inicio. En este caso, se puede mantener la capacidad de
respuesta durante la descarga inicial mediante una pantalla de presentacin.
Es posible reducir el tamao del paquete de la aplicacin mediante el almacenamiento en cach de
biblioteca de aplicaciones. Sin embargo, esto no reduce el tiempo de descarga inicial, sino que en realidad
puede aumentarlo debido al mayor nmero de solicitudes de red. La ventaja del almacenamiento en cach
de biblioteca de aplicaciones es que se puede cambiar el cdigo de la aplicacin sin que sea necesario que
los visitantes de retorno descarguen los ensamblados de biblioteca no modificados.
En algunos casos, el complemento Silverlight no cargar los paquetes de aplicacin de gran tamao. Al
crear aplicaciones grandes, se debe minimizar el tamao del paquete de aplicacin; para ello, se puede
recurrir al almacenamiento en cach de biblioteca de aplicaciones o a la recuperacin de algunos archivos a
peticin.
Si decide no incluir algunos archivos en el paquete de aplicacin, dispone de varias opciones para volver a
implementarlos.
Los archivos ms fciles de volver a implementar son los archivos a los que se hace referencia mediante un
identificador URI relativo, como imgenes o archivos de vdeo. Cuando el complemento Silverlight detecta
un identificador URI relativo en el cdigo o XAML, busca primero en el paquete de aplicacin. Si el
complemento no encuentra el archivo en el paquete de aplicacin, buscar en el servidor host. Esto significa

Silverlight
que se puede mover cualquier archivo al que se haga referencia mediante un identificador URI relativo sin
tener que cambiar el cdigo.
Muchos tipos de archivo no admiten el uso de un identificador URI para hacer referencia a ellos y requieren
un procesamiento especial si se opta por volver a implementarlos como archivos a peticin. Por ejemplo, si
se vuelve a implementar un ensamblado de biblioteca, se debe agregar cdigo que lo recupere a peticin y
lo cargue en el dominio de aplicacin. En este caso, aunque todava se debe hacer referencia al ensamblado
en el proyecto de aplicacin, el valor Copia local se establece en Falso. De esta forma, se evita que en la
compilacin se agregue el ensamblado al paquete de aplicacin o que se solicite en el inicio como un
ensamblado ExternalPart.
Tambin se puede optar por sacar del paquete de aplicacin varios archivos de recursos relacionados para
recuperarlos a peticin como una sola descarga. Para ello, es preciso agruparlos en un archivo zip, que se
implementa en el servidor. A continuacin, se debe agregar cdigo que recupere el archivo zip a peticin y
extraiga su contenido.
3.1.1.1. Cmo: Usar el almacenamiento en cach de biblioteca de aplicaciones

El almacenamiento en cach de biblioteca de aplicaciones puede ayudar a mejorar el rendimiento en el
inicio cuando los usuarios vuelven a visitar un sitio web.
Cuando se usa el almacenamiento en cach de biblioteca de aplicaciones, Silverlight empaqueta algunos
ensamblados como elementos externos al paquete de la aplicacin (el archivo .xap). El manifiesto del
paquete de la aplicacin especifica los ensamblados necesarios en el inicio, e indica si son internos o
externos con respecto al paquete de la aplicacin.
Cuando un usuario visita una pgina web por primera vez, el complemento Silverlight descarga el paquete
de la aplicacin y todos los elementos externos necesarios. Estos archivos se agregan a la memoria cach
del explorador para que se puedan reutilizar en las posteriores visitas.
Todos los archivos descargados estn sujetos a la configuracin de almacenamiento en cach del servidor y
del explorador. En una configuracin tpica, los archivos se descargan solo si no estn en la memoria cach
o si son ms nuevos que las versiones almacenadas en cach.
Los ensamblados de la biblioteca tienen muchas menos probabilidades de cambiar que los ensamblados de
la aplicacin. Por lo tanto, tiene sentido almacenarlos en cach como archivos independientes. De este
modo, si cambia el cdigo de la aplicacin pero no el cdigo de la biblioteca, muchos visitantes que
regresen descargarn solo el archivo .xap.
Silverlight proporciona muchas bibliotecas con el SDK de Silverlight que no forman parte del tiempo de
ejecucin. Estas bibliotecas se preconfiguran para el uso con el almacenamiento en cach de biblioteca de
aplicaciones. En Visual Studio, estas bibliotecas se encuentran en la pestaa .NET del cuadro de dilogo
Agregar referencia junto con los ensamblados en tiempo de ejecucin. Tambin estn accesibles desde la
carpeta SDK de Silverlight. De forma predeterminada, el SDK de Silverlight se instala en la carpeta
%ProgramFiles%\Microsoft SDKs\Silverlight. Tambin puede configurar sus propios ensamblados para
admitir el almacenamiento en cach de biblioteca de aplicaciones.
El almacenamiento en cach de la biblioteca de aplicaciones solo afecta a los ensamblados que su
aplicacin necesita en el inicio. Si su aplicacin carga algunos ensamblados a peticin, siempre los recupera
del servidor y nunca de la memoria cach del explorador.
En los procedimientos siguientes se explica cmo habilitar y usar el almacenamiento en cach de biblioteca
de aplicaciones, as como el modo de configurar sus propios ensamblados para el almacenamiento en
cach.
Para habilitar el almacenamiento en cach de biblioteca de aplicaciones
1. En el Explorador de soluciones, seleccione el proyecto de aplicacin de Silverlight para el que
desea habilitar el almacenamiento en cach de biblioteca de aplicaciones.
2. En el men Proyecto, seleccione Propiedades de nombre de proyecto.
Aparecer el diseador de proyectos.

Silverlight
3. En la pestaa Silverlight, seleccione Reducir el tamao de XAP mediante el almacenamiento en

cach de biblioteca de aplicaciones.
Nota:
No se puede usar el almacenamiento en cach de biblioteca de aplicaciones y la compatibilidad
con la ejecucin fuera del explorador en la misma aplicacin. Las aplicaciones de ejecucin fuera
del explorador requieren que todos los ensamblados de inicio residan en el paquete de la
aplicacin.
4. Agregue una referencia a un ensamblado de la biblioteca en el SDK de Silverlight o a cualquier

ensamblado acompaado por un archivo de asignacin nombreCortoDelEnsamblado.extmap.xml
vlido.
En consecuencia, tendrn lugar las acciones siguientes:
o La referencia del ensamblado se agrega al proyecto con el valor True para Copia local.
Este valor indica que el ensamblado se requiere en el inicio, y es el mismo valor utilizado
por los ensamblados empaquetados.
o Al compilar el proyecto, se empaqueta el ensamblado en un archivo zip independiente y se
genera un elemento ExtensionPart en el manifiesto de aplicacin.
o Cuando el complemento Silverlight carga el paquete de la aplicacin, comprueba si en el
manifiesto hay elementos ExtensionPart y descarga todos los archivos correspondientes. Si
la aplicacin implementa una pantalla de presentacin, continuar ejecutndose hasta que
se carguen todos los elementos externos.
Para configurar un ensamblado para el uso con el almacenamiento en cach de
biblioteca de aplicaciones
1. Cree un archivo de asignacin en la misma ubicacin que su ensamblado. Este archivo debe tener
el mismo nombre que el ensamblado, pero la extensin de nombre de archivo .dll se reemplaza con
".extmap.xml". Por ejemplo, el ensamblado del SDK de Silverlight System.Json.dll tiene un archivo
de asignacin que se denomina System.Json.extmap.xml.
2. Agregue los datos de configuracin al archivo de asignacin tal y como se muestra en el ejemplo
siguiente, reemplazando los valores del elemento de ensamblado para que coincidan con los de su
ensamblado.
<?xml version="1.0"?>
<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<assembly>
<name>System.Json</name>
<version>2.0.5.0</version>
<publickeytoken>31bf3856ad364e35</publickeytoken>
<relpath>System.Json.dll</relpath>
<extension downloadUri="System.Json.zip" />
</assembly>
</manifest>
Los elementos name, publickeytoken y version deben coincidir con los metadatos correspondientes
del ensamblado. El elemento relpath indica el nombre de archivo del ensamblado. Por ltimo, el
elemento extension indica el nombre del elemento externo empaquetado a travs del atributo
downloadUri.
El valor de atributo downloadUri se usa para rellenar la propiedad ExtensionPart.Source del
manifiesto de aplicacin, como se muestra en el fragmento de manifiesto siguiente.
<Deployment.ExternalParts>
<ExtensionPart Source="System.Json.zip" />
</Deployment.ExternalParts>
3. Si el valor downloadUri es un nombre de archivo, Visual Studio proporciona la compatibilidad

siguiente cuando se agrega una referencia al ensamblado:
o El sistema de compilacin empaqueta el ensamblado en un archivo zip que tiene el
nombre de archivo especificado. Este archivo se copia en el directorio de salida junto al
archivo .xap.

Silverlight
o Si agrega referencias a ms de un ensamblado con el mismo nombre de archivo

downloadUri, el sistema de compilacin los comprime todos en un archivo zip nico.
o No se agrega la extensin .zip automticamente. Aunque el archivo empaquetado es un
archivo ZIP, se pueden usar las extensiones de nombre de archivo que requiera el servidor.
Si downloadUri es un URI absoluto, el sistema de compilacin no empaquetar el ensamblado. En
su lugar, es usted quien debe comprimir el ensamblado e implementarlo en el URI especificado.
Esto es til para crear un nico repositorio de bibliotecas que usen varias aplicaciones. Sin
embargo, debera tener en cuenta los problemas siguientes al usar un valor downloadUri absoluto.
o Si el URI se encuentra en un dominio diferente al archivo .xap, el dominio debe tener un
archivo de directivas entre dominios en su carpeta raz.
o Recuerde que un URI es un identificador nico global que puede hacer referencia a un
archivo de ensamblado muy concreto. Esto significa que se puede y se debe usar un URI
diferente para las distintas versiones de los ensamblados. Adems, debera seguir
manteniendo cada URI y ensamblado especficos de la versin que cree al implementar las
nuevas versiones de ensamblado en los URI actualizados. Esto le ayudar a evitar los
problemas que pueden surgir cuando un archivo .xap compilado con una versin de
Silverlight intenta cargar una biblioteca compilada con otra versin.
Para probar el almacenamiento en cach de biblioteca de aplicaciones en Visual
Studio
1. Descargue e instale un monitor de trfico de HTTP como Fiddler. Esto le permitir ver las solicitudes
y respuestas HTTP, as como comprobar que los archivos almacenados en memoria cach no se
descargan.
2. Active las caractersticas de Windows siguientes:
o Internet Information Services (IIS)
o Compatibilidad con la configuracin de IIS 6 y metabase de IIS
o ASP.NET
o Autenticacin de Windows
Se requiere IIS porque el servidor de desarrollo de Visual Studio no permite el almacenamiento en
cach en sus encabezados de respuesta HTTP.
3. Ejecute Visual Studio en el contexto de una cuenta de administrador.
4. En la solucin que contiene su proyecto Silverlight, incluya un proyecto web para pruebas.
5. Configure el proyecto web para que use IIS y habilite la supervisin de localhost del monitor de
trfico de HTTP. (Por ejemplo, Fiddler proporciona una direccin URL de proxy que se puede usar
para reemplazar "localhost" en un valor Direccin URL de inicio).
6. Realice las acciones siguientes y observe el trfico de HTTP resultante:
o Ejecute la aplicacin en Visual Studio.
o Presione F5 en el explorador para recargar la pgina.
o Abra la direccin URL de la pgina en otra ventana del explorador.
o Recompile la solucin en Visual Studio y, a continuacin, recargue la pgina en el
explorador.
Despus de la descarga inicial, las solicitudes adicionales del paquete de aplicacin y los archivos
de biblioteca no generan trfico de descarga adicional. En su lugar, se usan las copias en cach
para las solicitudes. Sin embargo, al recompilar la aplicacin, se detectan los cambios y se
descargan copias nuevas.
3.1.1.2. Cmo: Cargar ensamblados a peticin

Silverlight
En el cdigo de ejemplo siguiente se muestra cmo recuperar un ensamblado del servidor del host a
peticin y, a continuacin, cargarlo en el dominio de aplicacin.
En este ejemplo se utiliza la clase WebClient para iniciar una descarga asincrnica del ensamblado en
respuesta a un clic del mouse del usuario. Cuando se completa la descarga, se utiliza la clase AssemblyPart
para cargar el ensamblado.
En este ejemplo se supone que se agreg una referencia al ensamblado en el proyecto de aplicacin. El
ensamblado debe tener tambin en Copia local el valor False para que no se implemente en el paquete de
la aplicacin.
Puede emplear esta tcnica para cargar ensamblados a los que no se hace referencia en su proyecto de
aplicacin. En este caso, sin embargo, debe usar la reflexin para crear instancias de los tipos a partir del
ensamblado cargado.
Ejemplo
En el ejemplo siguiente se carga un ensamblado denominado SilverlightLibrary.dll cuando el usuario hace
clic en un bloque de texto. En este ejemplo se usa un URI relativo para cargar el ensamblado desde la
misma ubicacin que el archivo XAP de la aplicacin.
<UserControl x:Class="SilverlightApplication.HomePage"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="SandyBrown">
<StackPanel x:Name="stackPanel">
<TextBlock>Page from Host Application</TextBlock>
<TextBlock
MouseLeftButtonUp="TextBlock_MouseLeftButtonUp"
Cursor="Hand">
Click Here to Display a UI from the Library Assembly
</TextBlock>
</StackPanel>
</Grid>
</UserControl>
Imports SilverlightLibrary
Partial Public Class HomePage

Inherits UserControl
Public Sub New()
InitializeComponent()
End Sub
Private Sub TextBlock_MouseLeftButtonUp(ByVal sender As Object, _

ByVal e As MouseButtonEventArgs)
' Download an "on-demand" assembly.
Dim wc As New WebClient()
AddHandler wc.OpenReadCompleted, AddressOf wc_OpenReadCompleted
wc.OpenReadAsync(New Uri("SilverlightLibrary.dll", UriKind.Relative))
End Sub
Private Sub wc_OpenReadCompleted(ByVal sender As Object, _

ByVal e As OpenReadCompletedEventArgs)
If (e.[Error] Is Nothing) AndAlso (e.Cancelled = False) Then
' Convert the downloaded stream into an assembly that is
' loaded into current AppDomain.
Dim assemblyPart As New AssemblyPart()
assemblyPart.Load(e.Result)
DisplayPageFromLibraryAssembly()
End If
End Sub
Private Sub DisplayPageFromLibraryAssembly()

' Create an instance of the Page class in the library assembly.
Dim page As New Page()
' Display the new Page.
Me.stackPanel.Children.Add(page)
End Sub
End Class
3.2. API administrada para Silverlight

Silverlight
La API de Silverlight define su conjunto de objetos como rboles de objetos que permiten rellenar el
contenido inicial de una aplicacin basada en Silverlight mediante la carga de XAML y el ajuste del rbol de
objetos en tiempo de ejecucin. En la API administrada, la interaccin con el rbol de objetos de Silverlight
se define con cdigo administrado. Mediante el CLR, el cdigo administrado se compila para convertirlo en
un ensamblado. El ensamblado suele contener, adems, el marcado XAML para la aplicacin basada en
Silverlight. El cdigo administrado puede admitir el modelo de aplicaciones de Silverlight, y se le puede
llamar en respuesta a eventos de duracin de objetos o de eventos iniciados por el usuario. Tambin puede
utilizar el cdigo administrado para escribir clases de soporte, para definir objetos de datos y para muchos
otros escenarios de aplicacin. Tambin puede utilizar DLR en lugar del CLR, lo que se explica en Lenguajes
dinmicos en Silverlight.
Caractersticas de la API administrada

El cdigo administrado es extensible
Anteriormente en Silverlight 1.0, y con la API de JavaScript en la actualidad (con independencia de la versin
del cliente), no se admite la definicin de un elemento de interfaz de usuario verdaderamente
personalizado. Puede componerse un elemento, cargarlo a continuacin varias veces desde el mismo XAML
de definicin, y asignar las mismas funciones que la compatibilidad de cdigo, pero este enfoque no admite
una extensibilidad a gran escala. Con la API administrada, la extensibilidad consiste simplemente en derivar
de una clase o control existente que admita que admite una funcionalidad bsica til, y quizs en definir
tambin algunos elementos de compatibilidad, como una nueva plantilla de control, controladores de
eventos especficos de la clase actualizados, etc. Extender el cdigo administrado es un concepto bsico de
la programacin administrada y basada en .NET Framework. No existe un tema concreto dedicado a esta
cuestin en la documentacin de Silverlight, pero encontrar tiles los temas siguientes:
Common Language Runtime
Personalizacin de controles
XAML y clases personalizadas
Objetos y propiedades de dependencia personalizados
rboles de objetos
El concepto de rbol de objetos existe en la API de JavaScript, pero manipular el rbol en ese modelo
resulta un poco limitado por la ausencia de una tcnica de construccin de objetos. En la API administrada,
puede llamar a constructores de las clases y realizar adiciones al rbol sin tener que utilizar el analizador
XAML como intermediario. De hecho, puede construir grandes partes del rbol sin utilizar nada ms que
cdigo, llamando a los constructores en sucesin y agregando los objetos al rbol de objetos partiendo
desde la raz y trabajando con varias propiedades "secundarias".
Clases de cdigo subyacente y clases parciales administradas
La tcnica principal para definir una interfaz de usuario en Silverlight consiste en definir los elementos en el
marcado XAML. Esto puede incluir el uso de estilos y plantillas, que tambin se definen en marcado XAML.
En muchos casos, es necesario incluir el marcado en los diversos archivos XAML que se integran con el
modelo de aplicaciones de Silverlight. Para definir la interaccin necesaria para la aplicacin, lo habitual es
definir controladores de eventos que respondan a los eventos de duracin de objetos o a eventos iniciados
por el usuario para los objetos definidos en XAML. En la API administrada, deber someterse a un paso de
compilacin de marcado como parte de la compilacin cada pgina XAML donde se requiera el control de
eventos, o donde el XAML est pensado como contenido del elemento raz. El paso de compilacin del
marcado proporciona los enlaces necesarios para la interaccin en tiempo de ejecucin con el rbol de
objetos que se crea al cargar la pgina XAML. Estos enlaces incluyen los controladores de eventos, as como
referencias para cualquier objeto al que se asigne una propiedad Name o un atributo x:Name en el marcado
XAML. En la arquitectura de Silverlight, el marcado XAML no se compila en su totalidad. Gran parte de la
creacin de rbol de objetos procedente del marcado XAML para la interfaz de usuario se difiere hasta que
la pgina XAML se carga realmente en tiempo de ejecucin en una aplicacin y se procesa mediante el
analizador XAML de Silverlight. Estos conceptos se explican en Clases de cdigo subyacente y clases
parciales con ms detalle.
Interaccin formalizada con el DOM
En la API de JavaScript, es posible hacer referencia de manera informal desde el scripting de Silverlight a los
objetos o variables del DOM HTML, porque el script se interpreta mediante el mismo motor de script de

Silverlight
explorador y, potencialmente, podra existir en el mismo mbito. En la API administrada, existe una
separacin ms formal, el cdigo administrado lo utilizan las bibliotecas bsicas de Silverlight y su CLR, no el
explorador. Para interactuar con el DOM de la API administrada, puede utilizar una serie de caractersticas
que se denominan en ocasiones colectivamente Puente HTML, o puente del DOM HTML. Algunas de estas
formas son:
Interfaces API que exponen al cdigo administrado las partes utilizadas con frecuencia del DOM
(por ejemplo, el objeto Document).
Medios que pueden hacer que los tipos administrados admitan script desde el DOM.
Tcnicas de conversin para la generacin de tipos administrados desde objetos o valores de
JavaScript cuyas referencias se calculan.
Interfaces API que especficamente expongan la representacin de objetos del complemento
Silverlight en el DOM.
3.2.1. Arboles de objetos de Silverlight

En Silverlight, es posible hacer referencia a objetos del rbol de objetos de Silverlight en tiempo de
ejecucin, ya sea en cdigo administrado o JavaScript. En este tema se describe cmo trabajar con el rbol
de objetos en la API administrada de Silverlight.
Requisitos previos
En este tema se supone que el usuario ha ledo Informacin general sobre XAML y Arquitectura de
Silverlight.
Arboles de objetos
Un rbol de objetos es una conceptualizacin del modo en que se relacionan entre s los objetos que se
crean y existen en el contenido de Silverlight en tiempo de ejecucin. Las relaciones se basan en el principio
de que los objetos tienen propiedades y, muchas veces, el valor de la propiedad es otro objeto que a su vez
tambin tiene propiedades. El rbol de objetos tiene bifurcaciones porque algunas de estas propiedades
son propiedades de coleccin y contienen ms de un objeto; tambin tiene una raz porque la arquitectura
debe hacer referencia en ltima instancia a un nico objeto que es el punto de conexin de los conceptos
que se encuentran fuera del rbol de objetos (como el host del explorador o el complemento Silverlight que
muestra el contenido).
Aunque realmente hay un nico rbol de objetos desde el punto de vista conceptual, la API de Silverlight no
expone al usuario el rbol completo. Gran parte de la estructura del rbol de objetos son realmente detalles
de implementacin. En lugar de ello, el usuario dispone de propiedades especficas de objetos que influyen
en los valores secundarios de puntos determinados del rbol y que pueden informar acerca del elemento
primario (en la mayora de los casos, el eje primario es de solo lectura porque los rboles suelen generarse
de la raz hacia arriba, ya sea en cdigo o a travs del proceso de anlisis de XAML). Por ejemplo, un Panel
tiene una propiedad Children que establece los objetos secundarios. FrameworkElement tiene Parent para
notificar el elemento primario. Estas dos API se encuentran en clases base, de modo que estn disponibles
en un gran nmero de objetos de Silverlight.
En Silverlight, un concepto de rbol relacionado es el rbol visual. El rbol visual puede conceptualizarse
como una representacin editada o filtrada del rbol de objetos ms grande. El filtro que se aplica es que
solo los objetos que tienen una implicacin de representacin estn presentes en el rbol visual. Por
ejemplo, una clase de una coleccin no formara parte del rbol visual sino que, en lugar de ello, el rbol
visual abstrae las colecciones en un concepto de "elementos secundarios". Sin embargo, el rbol visual
tambin puede incluir objetos que no son inmediatamente visibles si se considera que el marcado XAML de
origen cargado es una aproximacin del rbol de objetos. Esto se debe a que el rbol visual tambin
notifica objetos que son partes compuestas de controles que proceden de una plantilla de control aplicada
o de diccionarios de recursos. El rbol visual se usa internamente para el proceso de representacin de
Silverlight, pero tener conocimientos sobre el rbol visual suele ser importante en determinados escenarios,
como a la hora de escribir o reemplazar una plantilla de control o en el anlisis de una instancia del control
en tiempo de ejecucin, una vez aplicada la plantilla. Para estos escenarios, Silverlight proporciona la API

Silverlight
VisualTreeHelper, que permite examinar el rbol visual de un modo ms generalizado de lo que podra
hacerse con las propiedades del elemento primario y de los elementos secundarios especficos del objeto.
El concepto de rbol visual tambin existe en WPF y, en Silverlight, el concepto de rbol visual es similar.
Una diferencia notable, sin embargo, es que WPF tambin proporciona una concepcin o filtro adicional del
rbol de objetos, que recibe el nombre de rbol lgico. El concepto de rbol lgico es relevante para
determinados comportamientos del sistema de propiedades. Silverlight no expone este rbol lgico a travs
de una clase auxiliar. En Silverlight, existen algunos de los comportamientos relevantes de las propiedades
(aunque no todos), pero sin una API auxiliar para obtener acceso a ellos, el concepto de rbol lgico no
resulta til en Silverlight y, por lo tanto, no se describe en la documentacin. Una implicacin de
compatibilidad secundaria derivada de la omisin del rbol lgico es que el comportamiento de la
propiedad FrameworkElement.Parent es diferente en Silverlight versin 4 y, realmente, esta notificando el
rbol visual primario.
Arboles de objetos y marcado XAML

Si comparase el rbol de objetos al que se obtiene acceso a travs de la API de Silverlight y la forma de
rbol del marcado XAML, no coincidiran exactamente, nodo por nodo. Esto se debe a que el XAML est
diseado para el marcado y la facilidad de uso durante la definicin del marcado. Por ejemplo, el XAML
incluye el concepto de elemento de propiedad, que proporciona las instrucciones para establecer una
propiedad si se encuentra un elemento anidado dentro de otro. En el rbol de objetos, esto se parecera a
una propiedad en un objeto establecido por otro objeto. A la inversa, el XAML tambin incluye el concepto
de propiedad de contenido, donde la propiedad que se establece ni siquiera se nombra explcitamente en el
marcado. Y el XAML incluye una serie de sintaxis que pueden crear objetos basados en valores de cadena
de atributos o proporcionar referencias a objetos que ya existen pero que se definen en otro lugar del
marcado XAML o que son completamente externos al marcado. Independientemente de estas incoherencias
menores, al definir una interfaz de usuario en XAML, se est definiendo la estructura aproximada del rbol
de objetos final de Silverlight en tiempo de ejecucin.
Hacer referencia a propiedades de objetos

Independientemente de cmo obtenga una referencia a un objeto del rbol de objetos de Silverlight, las
propiedades de la API administrada se exponen directamente a travs de una notacin object.property
relacionada con el concepto bsico de las propiedades CLR de .NET. Bajo muchas de las propiedades de
Silverlight 2 subyace el concepto de una propiedad de dependencia. Las propiedades de dependencia y el
sistema de propiedades introducen otras posibilidades de sintaxis para obtener acceso a las propiedades
adems de mediante object.property pero, aparte de para las propiedades adjuntas, se utilizan con menos
frecuencia y no se describen en este tema.
Propiedades adjuntas del rbol de objetos
Silverlight admite el concepto de propiedad adjunta. Desde la perspectiva del rbol de objetos, una
propiedad adjunta es una propiedad que puede asociarse a cualquier objeto del rbol, independientemente
del tipo de objeto que sea (aunque en la implementacin de Silverlight, ese objeto debe ser al menos un
objeto de dependencia). Los valores de las propiedades adjuntas existen en el rbol de objetos, pero si se
obtiene acceso a ellos mediante cdigo, es necesario usar una sintaxis distinta de la simple notacin
object.property.
Recursos y plantillas del rbol de objetos

Silverlight admite un concepto de recurso denominado diccionario de recursos. Un diccionario de recursos
se usa para especificar valores de propiedades que requieren valores de subpropiedades sustanciales.
El escenario ms comn para ResourceDictionary es definir los elementos ResourceDictionary en XAML y, a
continuacin, usar los recursos definidos como valores de propiedades a travs de atributos XAML y la
extensin de marcado StaticResource. En algunos casos, el recurso puede compartirse. Por ejemplo, puede
definir un LinearGradientBrush que contenga varios puntos de degradado en un ResourceDictionary que, a
continuacin, puede aplicar a varias propiedades de Brush (potencialmente en la interfaz de usuario que
existe en diferentes pginas) en su diseo visual.
Las plantillas funcionan mediante un concepto algo diferente (ya se definan en diccionarios de recursos de
nivel de pgina o aplicacin, en generic.xaml, o se inserten). La plantilla propiamente dicha es un objeto,
pero la plantilla, potencialmente, se aplica varias veces al rbol visual. Una vez aplicada, los elementos de la

Silverlight
plantilla suelen usar un TemplateBinding, que permite aplicar la plantilla y establecer valores concretos que
se incluyen en el objeto de plantilla.
Recorrer el rbol de objetos

Recorrer el rbol de objetos (lo que coloquialmente se denomina "recorrer el rbol") es una tcnica comn
en los modelos de objetos. Recorrer el rbol significa usar propiedades que hacen referencia a objetos
secundarios (normalmente colecciones) o a relaciones primarias con un objeto contenedor (esto se realiza
normalmente desde el interior de una coleccin y devuelve la propia coleccin). Como descripcin general
del proceso, se llama a una sucesin de propiedades secundarias y propiedades primarias, o quizs a
mtodos auxiliares, para navegar por los ejes del rbol de objetos hasta recuperar un valor que contenga el
objeto que se estaba buscando.
Como regla general, debe ser capaz de construir el contenido en XAML para Silverlight, de modo que no
necesite consultar mucho la estructura del rbol. Para evitar la necesidad de recorrer el rbol, asigne a los
elementos un valor del atributo x:Name / Name en el marcado XAML que los crea. De esta forma, se crear
una referencia inmediata que estar disponible en la clase que el marcado compila a partir del XAML, que es
una tcnica para obtener los objetos mucho menos propensa a errores que recorrer el rbol.
Alternativamente, si est creando objetos a travs de constructores de cdigo en lugar de mediante la carga
de XAML, debe poder construir el cdigo de modo que incluya variables o campos privados definidos para
mantener una referencia de objeto en tiempo de ejecucin, ya sea en una clase o almacenados como
variables en el nivel de aplicacin.
Sin embargo, hay casos en lo que no es posible o no resulta prctico asignar un nombre a un objeto y
mantener una referencia de objeto en el mbito. Un escenario de este tipo sera si agrega contenido
dinmico proporcionado por el usuario o mediante el enlace de datos y no puede predecir el nmero de
elementos agregados o la estructura del rbol de objetos en tiempo de ejecucin. Otro escenario sera
examinar una plantilla aplicada para un control o una seccin compuesta de un control.
Precaucin:
En general, Silverlight admite el concepto de cambio de aspecto visual o, de otro modo, redefinicin del
estilo o de la plantilla de un control. Concretamente, si es autor de un control y est escribiendo el cdigo
de soporte del control, puede ser peligroso suponer una estructura de rbol determinada. Puesto que la
mayora de los controles admiten una plantilla que puede establecerse (independientemente de que haya
habilitado puntos de extensin ms concretos, como estilos de subpartes), el rbol visual en tiempo de
ejecucin podra ser diferente de lo que sera si lo crease con la plantilla predeterminada aplicada.
Lgica try-catch para recorrer colecciones de "elementos secundarios" y otras

colecciones
Si su requisito para recorrer el rbol de objetos implica buscar objetos que representan colecciones que no
se representaran como parte del rbol visual, es posible que necesite escribir funciones especializadas que
intenten buscar las API que coinciden con modelos de nomenclatura determinados o el modelo de objetos
de una clase determinada.
En general, suele ser posible recorrer el rbol de objetos varios niveles hacia abajo (alejndose de la raz)
siempre y cuando se conozcan los puntos en los que los objetos contenidos tendrn colecciones. Puede que
tenga que usar tcnicas try/catch o equivalentes para detectar esto, comprobando si Children existe y si
Count es distinto de cero (aqu, Children y Count son marcadores de posicin y no API literales; Children y
Count son nombres comunes para estos tipos de propiedades segn las instrucciones de nomenclatura de
.NET, pero las propiedades reales pueden tener nombres diferentes que dependen del objeto y de su
modelo de objetos). Algunas colecciones del modelo de objetos global de Silverlight estn incluidas en
propiedades que no se denominan Children. Si sabe que est recorriendo una determinada propiedad de
coleccin que no se denomina Children, debe tener esto en cuenta en su lgica.
Usar VisualTreeHelper
VisualTreeHelper es una clase de utilidad que puede resultar til para recorrer el rbol de objetos. El
concepto de rbol visual se explic anteriormente en la seccin "rboles de objetos" de este tema.
Dado que puede actuar sobre el rbol visual en tiempo de ejecucin y recorrer las partes de plantilla, esta
puede ser una tcnica til para examinar la composicin de la plantilla. Si lo desea, puede examinar una

Silverlight
coleccin de elementos secundarios que podra rellenarse mediante un enlace de datos o donde el cdigo
de la aplicacin no conozca totalmente la naturaleza global del rbol de objetos en tiempo de ejecucin .
Para hacer esto, tendra que recorrer el rbol a travs de GetChild, utilizando GetChildrenCount como
determinante de si el nodo de rbol es un elemento nico o una coleccin de "elementos secundarios" que
debe recorrer en iteracin por recuento.
Recorrer el contenido de la plantilla

Otra tcnica adems de VisualTreeHelper que resulta de gran utilidad para recorrer el contenido de la
plantilla es GetTemplateChild. Suele ser necesario usar GetTemplateChild o recorrer el contenido de la
plantilla porque el comportamiento de FindName se rige por el concepto de un mbito de nombres. En este
caso, el contenido de la plantilla tiene un mbito de nombres deliberadamente independiente del resto del
rbol de objetos, porque las plantillas se comparten y, de otro modo, se produciran conflictos de nombres
cuando la plantilla se aplicase ms de una vez. GetTemplateChild busca los objetos por sus valores x:Name
del mbito de nombres de la plantilla, trabajando desde el mbito de rbol de objetos ms grande del
Control determinado donde se aplica la plantilla.
Objetos de Silverlight y DOM HTML

Hay tambin otro modelo de objetos disponible para el scripting de contenido HTML: Document Object
Model (DOM) HTML. Sin embargo, DOM no identifica el contenido cargado por un complemento Silverlight
como parte completa de DOM.
API de JavaScript
Para obtener ms informacin sobre los rboles de objetos utilizando la API de JavaScript, vea API de
JavaScript para Silverlight.
3.2.2. Clases de cdigo subyacente y clases parciales

Cdigo subyacente es un trmino utilizado para describir el cdigo que se une a la clase parcial de la pgina
XAML cuando se compila por marcado para una aplicacin. En este tema se describen los requisitos para las
clases de cdigo subyacente, los requisitos para los controladores de eventos definidos en cdigo
subyacente y la finalidad de los mecanismos relacionados con el cdigo subyacente, como el mtodo
InitializeComponent.
Requisitos generales
Si se compila por marcado una pgina XAML de una aplicacin administrada (accin de
compilacin Pgina, con MSBuild:MarkupCompilePass1 como valor de Herramienta
personalizada), el elemento raz de la pgina debe declarar un atributo x:Class. Como reserva,
puede haber nicamente el archivo de cdigo subyacente (un archivo DependentUpon con la
accin de compilacin Compilar); vea la nota en la siguiente seccin.
Requisitos de las clases de cdigo subyacente y clases parciales

La clase parcial debe derivarse del tipo de clase utilizado como elemento raz.
Nota:
Si bien no se recomienda, se puede dejar en blanco la derivacin en la definicin de clase parcial
del cdigo subyacente si el marcado declar x:Class. Esto se puede hacer nicamente si la pgina
no tiene controladores de eventos ni ninguna otra lgica basada en cdigo. El resultado compilado
supondr que la raz de la pgina es la clase base de la clase parcial aunque no se especifique
(porque la parte correspondiente al marcado de la clase parcial s especifica implcitamente la clase
base a travs de su etiqueta de elemento raz).
La clase parcial debe ser pblica. Este requisito se debe a que la clase parcial definida a travs del
marcado x:Class es pblica cuando se compila por marcado, por lo que la clase parcial del cdigo
debe usar el mismo acceso para que se una a la clase parcial del marcado.
Se puede optar por omitir un espacio de nombres, siempre y cuando esto se corresponda con la
forma en que se declar x:Class.
Requisitos de los controladores de eventos

Silverlight
Los controladores de eventos que se escriban deben ser mtodos de instancia definidos por la
clase parcial dentro del espacio de nombres identificado por x:Class. No se puede calificar el
nombre de un controlador de eventos para indicar a un procesador XAML que lo busque en otro
mbito de clase. Tampoco se puede utilizar un mtodo esttico como controlador de eventos.
Los controladores de eventos no necesitan ser pblicos; pueden ser privados o internos.
Generalmente, se recomienda escribir controladores de eventos no pblicos.
El controlador de eventos debe coincidir con el delegado del evento apropiado. Observe que
algunos eventos utilizan controladores genricos con datos de evento restringidos. En estos casos,
utilice la restriccin de los datos de evento que se indique en la firma de evento.
Los controladores de eventos se pueden compartir para el mismo evento en diferentes objetos. Si
el delegado lo permite, tambin se puede compartir el mismo controlador para diferentes tipos de
evento. Sin embargo, en este caso, la lgica del controlador de eventos debe utilizar los valores de
sender y/o de OriginalSource para distinguir los orgenes de los eventos.
En el caso concreto del lenguaje Visual Basic, se puede utilizar la palabra clave Handles especfica
del lenguaje para asociar los controladores a instancias y eventos en la declaracin del controlador,
en lugar de adjuntarlos a los atributos en XAML. Sin embargo, esta tcnica tiene algunas
limitaciones porque Handles no admite todas las caractersticas especficas del sistema de eventos,
como algunos escenarios de eventos enrutados.
Caractersticas de las clases parciales

Si examina la clase parcial que se crea a partir de las plantillas de proyecto de Silverlight, ver que comienza
con cdigo creado por plantilla de un constructor que llama al mtodo InitializeComponent. En general, no
es el usuario quien escriba InitializeComponent. Los destinos de Silverlight generan InitializeComponent
mediante cdigo cuando se compila por marcado la pgina asociada al cdigo subyacente. El mtodo
InitializeComponent generado por cdigo se puede examinar en la carpeta obj del proyecto una vez
finalizada la compilacin. Para ello, busque un archivo en cuyo nombre aparezca .g.. .g. se encuentra entre el
nombre y la extensin del nombre de archivo correspondiente al archivo de cdigo subyacente. Abra este
archivo y examine la definicin de InitializeComponent.
La principal finalidad de InitializeComponent es conectar los campos que contienen referencias a
cada uno de los objetos que se crean al compilar el XAML por marcado. Estos campos permiten
que el cdigo en el cdigo subyacente haga referencia en tiempo de ejecucin a cualquier objeto
que tenga un atributo Name / x:Name en el elemento de objeto que define el objeto en XAML. Sin
la capacidad de recuperar los objetos por su nombre, habra que recorrer el rbol de objetos de
Silverlight desde los puntos de entrada, como sender, los controladores de eventos o RootVisual
para buscar objetos concretos.
InitializeComponent tambin inicializa la representacin del rea de contenido de Silverlight
cuando se utiliza la clase como RootVisual.
En la API administrada, es el objeto Application el que controla lo que se muestra en el rea de contenido
de Silverlight. Para ello, debe poder establecer su propiedad RootVisual en una instancia de una clase
UIElement. Por lo tanto, normalmente se necesita declarar x:Class en cualquier raz de pgina XAML que se
vaya a cargar como contenido de una aplicacin basada en Silverlight administrada para que RootVisual
pueda hacer referencia a la clase, incluso si no hay cdigo subyacente en esa pgina.
3.2.3. Modelos de programacin de Silverlight, XAML y DOM HTML

Las aplicaciones basadas en Silverlight que utilizan el complemento Silverlight en un host del explorador
exponen su funcionalidad a travs de un DOM (Document Object Model) basado en explorador, as como
un modelo de programacin especfico de Silverlight que incluye el concepto de rbol de objetos. Cuando
utilice el modelo de programacin de Silverlight, podr elegir entre tres variaciones de la API: JavaScript
interpretado por el explorador, cdigo administrado o lenguajes dinmicos interpretados por DLR (Dynamic
Language Runtime). En este tema se describe la relacin entre el DOM y cada posible variacin de la API, as
como la forma en que las distintas API y modelos de aplicaciones usan el marcado XAML.
Modelo de objetos de documento

Silverlight
El DOM (Document Object Model) es un concepto de programacin independiente de la plataforma y del

lenguaje. Un DOM proporciona una representacin estructurada de un documento, como una pgina web,
as como un modo definido de obtener acceso y manipular la estructura, el estilo y el contenido del
documento. Los exploradores que pueden hospedar el motor en tiempo de ejecucin de Silverlight como
complemento implementan un DOM HTML que expone los elementos de la pgina HTML, incluido el
complemento Silverlight.
El estndar relativo al DOM de World Wide Web Consortium (W3C) constituye la base del DOM
implementado en los exploradores ms utilizados. Sin embargo, la mayora de los exploradores ofrecen
otras extensiones adems del estndar de W3C. Por consiguiente, los programadores deben ser conscientes
de estas diferencias para crear contenido que sea compatible con todas las plataformas. Los DOM de
explorador que se muestran en la tabla siguiente pueden tener acceso a Silverlight.
DOM Descripcin
Gecko DOM (Mozilla, Firefox, versin 6 y Gecko es el componente de software que controla el anlisis de
posteriores de Netscape y otros HTML, el diseo de pginas, el modelo de objetos de documento y
exploradores basados en Mozilla) la representacin de la aplicacin completa.
El DOM de HTML dinmico (DHTML) ofrece a los autores acceso
directo y programable a los componentes individuales de sus
DHTML DOM (Internet Explorer)
documentos web, desde elementos individuales hasta
contenedores.
Despus de crear el complemento Silverlight (normalmente con una etiqueta HTML object, puede recuperar
una referencia a la instancia del complemento en el DOM HTML haciendo referencia a su identificador (ID).
En el ejemplo de JavaScript siguiente se muestra cmo recuperar los identificadores (ID) del complemento
Silverlight utilizando el mtodo document.getElementById.
var plugin_1 = document.getElementById("SLPlugin_1");
El modelo de programacin de Silverlight

La API de Silverlight define su conjunto de objetos como rboles de objetos que permiten rellenar el
contenido inicial de una aplicacin basada en Silverlight mediante la carga de XAML y el ajuste del rbol de
objetos en tiempo de ejecucin. El rbol de objetos de Silverlight se expone a travs del complemento
Silverlight, que se crea como una instancia del complemento en una pgina web. Silverlight usa el modelo
de complementos COM para Microsoft Internet Explorer y el modelo de complementos de la API de
Netscape para otros exploradores. Puede programar para Silverlight utilizando la API administrada o la API
de JavaScript; en la mayora de escenarios se usar la API administrada.
El cdigo XAML y el rbol de objetos de Silverlight

Al proporcionar contenido para el complemento Silverlight, como se declar inicialmente mediante el
parmetro source de la etiqueta object (y como se control posteriormente mediante el modelo de
aplicaciones de Silverlight si se us la API administrada), se estn definiendo elementos XAML en marcado
que tienen una estructura de rbol jerrquica, con un elemento raz. El XAML analizado crea el rbol de
objetos inicial para Silverlight.
API administrada
En el ejemplo siguiente se crea una jerarqua de marcado que contiene la raz del elemento UserControl y
objetos secundarios Canvas y TextBlock. Este ejemplo es especficamente para la API administrada y
representa la clase de punto de entrada designada de un paquete XAP y el manifiesto de aplicacin para
una aplicacin basada en Silverlight.
<UserControl x:Class="SilverlightApplication1.Page"
>
<StackPanel>
<Rectangle
Fill="PowderBlue" />
<TextBlock
Foreground="Teal" FontFamily="Verdana" FontSize="18" FontWeight="Bold"
Text="Sample Output" />
</StackPanel>

Silverlight
</UserControl>
En el caso de la API administrada, antes de que se analice el XAML, un compilador de marcado lo compila
en el equipo del programador.
Cuando el XAML se carga y se analiza en tiempo de ejecucin en el cliente, el analizador crea un rbol de
objetos a partir del marcado. El rbol de objetos tendr un objeto UserControl como raz. De hecho, incluir
una instancia de una subclase UserControl concreta: la clase Page a la que se hace referencia en el atributo
x:Class del elemento raz.
Al interactuar con la aplicacin basada en Silverlight en tiempo de ejecucin, se usa la API administrada de
Silverlight para obtener acceso a la clase Page. Tambin es posible extenderse ms all de la raz Page del
rbol de objetos inmediato y obtener acceso al objeto Application. Application proporciona acceso a los
distintos aspectos de una aplicacin basada en Silverlight que se desea conservar incluso aunque se
reemplace toda la pgina metafrica de la interfaz de usuario que se muestra en el rea de contenido de
Silverlight. Application incluye recursos de nivel de aplicacin, acceso al paquete que contiene los
componentes de la aplicacin y objetos que se conectan al DOM HTML.
XAML dinmico
Para algunos escenarios de API administradas, se puede cargar XAML dinmico, es decir, un archivo XAML
que se incluye como contenido en un paquete de Silverlight XAP o bien al que se obtiene acceso mediante
una direccin URL. Este XAML no puede declarar x:Class ni utilizar cdigo subyacente. Ejemplos de
escenarios de esta situacin son los diccionarios de recursos combinados, los recursos especficos del
usuario o las cadenas de contenido de Load. La relacin de este XAML dinmico con el resto del rbol de
objetos depende del escenario exacto y no se describe aqu.
API de JavaScript
En el ejemplo siguiente se crea una jerarqua de marcado que contiene el objeto raz Canvas. Este ejemplo
est especficamente diseado para la API de JavaScript y representa un archivo XAML individual
proporcionado por el mismo servidor que la pgina HTML donde se hospeda Silverlight. En este caso, el
archivo XAML no se empaqueta ni se compila con un compilador de marcado.
<StackPanel
>
<Rectangle
Fill="PowderBlue" />
<TextBlock
Foreground="Teal" FontFamily="Verdana" FontSize="18"
FontWeight="Bold"
Text="Sample Output" />
</StackPanel>
Este XAML tambin define una interfaz de usuario bsica. De hecho, es visualmente idntico al ejemplo
anterior. Cuando se analiza este XAML, el analizador crea un rbol de objetos a partir del marcado. Este
rbol de objetos tendr StackPanel como elemento raz.
Al interactuar con la aplicacin basada en Silverlight en tiempo de ejecucin, no se obtiene acceso
inmediato al rbol de objetos completo. Se tiene acceso a la variable que podra haberse creado para hacer
referencia al complemento de Silverlight en el DOM pero, de lo contrario, el acceso al modelo de
programacin suele realizarse a travs del sender de un controlador de eventos. Este sender es un objeto
que est incluido dentro del rbol de objetos y que es accesible para cualquier API de Silverlight. Pero
sender no suele ser accesible para el DOM HTML; el DOM se detiene en el nivel de la etiqueta object del
host.
La API de JavaScript usa cualquier referencia Name / x:Name en tiempo de ejecucin, pero su nico uso
inicial es actuar como destinos de las llamadas a FindName. Solo despus de haber llamado a FindName
tendr un objeto real en el rbol de objetos; antes, el nombre de un objeto es simplemente una cadena, y
no un objeto. Por convencin, suele usarse un nombre de variable idntico a la cadena utilizada para Name
y esta convencin le resultar de gran utilidad si alguna vez tiene que migrar cdigo subyacente de
JavaScript a cdigo subyacente administrado utilizando el mismo XAML.
Hosts que no son un explorador

Silverlight
Silverlight no tiene que hospedarse necesariamente en un explorador. Tambin es posible implementar una
aplicacin basada en Silverlight fuera del explorador, o escribir un marco de host alternativo. En estos casos,
puede que no est disponible el DOM completo y ni sus posibilidades de scripting.
3.3. API de JavaScript para Silverlight

En algunos casos, la API de JavaScript para Silverlight es necesaria o es ms adecuada que la API
administrada. En este tema se analizan estos casos y se proporcionan vnculos para obtener ms
informacin sobre la API de JavaScript en Silverlight.
Requisitos previos
Debe leer el tema Modelos de aplicacines y programacin y entender las diferencias bsicas entre la API
administrada y la API de JavaScript. Tambin debe conocer el DOM HTML y saber cmo los modelos de
programacin y el rbol de objetos de Silverlight se relacionan con el DOM del explorador.
Consideraciones sobre el modelo de programacin

La API de JavaScript para Silverlight es el modelo de programacin que estaba disponible en la versin 1.0
de Silverlight. Utiliza un subconjunto pequeo de los objetos que estn actualmente disponibles en
Silverlight 2, ms unos cuantos objetos especficos de la API de JavaScript. Las consideraciones sobre el
subconjunto tambin afectan a qu objetos se pueden definir en cdigo XAML. El analizador XAML de
Silverlight solo crea objetos del rbol de objetos para este subconjunto, porque el rbol de objetos se crea
tomando como base la implementacin de cdigo nativo fija que subyace a la API de JavaScript. En otras
palabras, las consideraciones sobre limitacin y subconjunto aplicables a la API de JavaScript para Silverlight
son mucho ms importantes que el lenguaje que se elija para escribir la lgica del cdigo subyacente; la
opcin modelo de programacin/API que se elija determina los objetos que estn disponibles para su uso
en la aplicacin.
Si ya ha desarrollado para Silverlight 1.0, probablemente est familiarizado con la API de JavaScript para
Silverlight. La API de JavaScript es similar a programar para DOM HTML y, de hecho, se ejecuta en el motor
de scripting del explorador como scripting para DOM, pero el modelo de Silverlight se extiende en el rbol
de objetos que se crea cuando se carga una pgina XAML como contenido para el complemento Silverlight.
Esto permite controlar eventos en objetos concretos que se definan en XAML, obtener o establecer valores
de propiedades o ejecutar mtodos de objeto en tiempo de ejecucin, modificar la estructura del rbol de
objetos creado en XAML en tiempo de ejecucin, etc.
Por lo que se refiere a la arquitectura, la API de JavaScript se habilita en un complemento Silverlight
abriendo una ruta en el rbol de objetos de Silverlight, encapsulando las llamadas de scripting y pasndolas
al objeto de complemento de forma nativa. En Internet Explorer el encapsulado se realiza mediante
llamadas a IDispatch::Invoke; otros exploradores utilizan paradigmas de encapsulado diferentes
dependiendo de la arquitectura del complemento y del scripting.
Escenarios para utilizar la API de JavaScript

Pantallas de presentacin
Una pantalla de presentacin es un rea de contenido inicial que se puede mostrar al usuario mientras se
carga otro contenido. En lo referente a diseo y finalidad, una pantalla de presentacin tiene interfaz de
usuario y requisitos de interactividad relativamente bajos. Los objetivos principales de una pantalla de
presentacin son los siguientes:
Mostrar un objeto visual interesante.
Proporcionar al usuario informacin de que la aplicacin (o el host del explorador) sigue
funcionando como se esperaba y la descarga est progresando.
Proporcionar informacin concreta sobre el progreso de la descarga.
Las dos primeras funciones se pueden realizar totalmente en XAML, sin ningn cdigo subyacente.
Proporcionar el progreso de la descarga exige una API relativamente mnima que obtenga informacin del
nivel de red que realiza la descarga. Por estas razones, la mejor forma de implementar una pantalla de
presentacin es utilizando la API de JavaScript y cargando una pgina XAML (compatible con cdigo
subyacente de script) para SplashScreenSource. La API de JavaScript puede cargar la pantalla de

Silverlight
presentacin sin activar el CRL y los ensamblados relacionados de Silverlight, con lo que se acorta el tiempo
de inicio.
Contenido y mantenimiento de aplicaciones de la poca de Silverlight 1.0
El complemento Silverlight 2 admite un modo de compatibilidad para aplicaciones escritas en la poca de
Silverlight 1.0. En particular, el complemento se puede inicializar tomando como base la cadena de era de
Silverlight 1.0 para la application pasada al elemento object, una versin de "1.0" pasada a Silverlight.js para
su inicializacin, o ambas cosas. En general, los sitios que se escribieron originalmente para Silverlight 1.0
deberan continuar funcionando en clientes que dispongan del complemento Silverlight 2.
Nota:
Si utiliza Silverlight.js para la inicializacin, debe considerar la posibilidad de actualizar el archivo
Silverlight.js utilizado en la implementacin original, porque puede haber habido actualizaciones de la
lgica de script que se encarga de las cadenas de agente para distintos exploradores y otros cambios
tcnicos producidos desde la versin Silverlight 1.0.
Silverlight 2 sigue siendo compatible con la API de JavaScript proporcionando a JavaScript el acceso al rbol
de objetos y admitiendo un valor Source que especifique una nica pgina XAML. Si tiene una aplicacin de
la poca de Silverlight 1.0 y simplemente agrega algunas mejoras o caractersticas concretas, el proceso de
toma de decisiones comerciales y tcnicas podra determinar que lo mejor es introducir las nuevas
caractersticas en la base de cdigo existente y continuar utilizando la API de JavaScript.
Nivel de experiencia del programador
Si tiene amplia experiencia con JavaScript, la mejor manera de sacar partido a sus conocimientos sera
continuar usando la API de JavaScript. Sin embargo, muchas caractersticas que se encuentran en
Silverlight 2 requieren la API administrada y no estn disponibles para JavaScript.
Otras consideraciones
Si el uso que realiza del contenido de Silverlight en una pgina HTML mayor tiene requisitos relativamente
mnimos o si utiliza ampliamente DOM HTML para integrar muchas reas de contenido HTML diferentes y
otros complementos o controles en una sola pgina, el proceso de toma de decisiones podra determinar
que la API de JavaScript proporciona la solucin de integracin ms rentable.
Documentacin de la API de JavaScript

La mayora de la documentacin para Silverlight 4 abarca la API administrada. Por ejemplo, si desea obtener
ms informacin sobre animaciones, podra ver el tema Informacin general sobre animaciones, que
contiene ejemplos de XAML que son prcticamente iguales para ambas API. Pero el tema tambin contiene
ejemplos de cdigo administrado y trata algunos escenarios especficos de cdigo administrado. Sin
embargo, puede aprender los conceptos con independencia del lenguaje empleado en los ejemplos de
cdigo.
Para la API de JavaScript, esta documentacin contiene un conjunto completo de temas de referencia para
todos los objetos, propiedades, mtodos, eventos y enumeraciones que estn disponibles para la API de
JavaScript. En estos temas de referencia se proporciona la sintaxis para XAML y JavaScript, listas de
miembros para los objetos y ejemplos de cdigo que utilizan XAML con JavaScript para el cdigo
subyacente (y, ocasionalmente, solo JavaScript). A continuacin se ofrecen puntos de entrada tiles en la
referencia de la API de JavaScript para Silverlight:
Referencia de la API de JavaScript para Silverlight
o Referencia de objetos
o Referencia de mtodos
o Referencia de propiedades
o Referencia de eventos
o Referencia de enumeraciones
Nueva API de JavaScript para la versin 2 de Silverlight
Silverlight versin 2 proporciona nuevos objetos, adicionales al conjunto de objetos de Silverlight 1.0, que
se pueden utilizar en la API de JavaScript. Esto se ha habilitado porque estos objetos tienen una
implementacin nativa que se expone de la misma manera que la de los objetos de la versin 1.0. Puede

Silverlight
crear estos objetos creando instancias de XAML y, seguidamente, script para el rbol de objetos. Para
utilizar estos objetos, el cliente que ejecuta la aplicacin basada en Silverlight tambin debe ser un cliente
de Silverlight versin 2.
Los objetos adicionales para la API de JavaScript se incluyen en la API de JavaScript para la documentacin
de Silverlight (as como las propiedades, los mtodos, los eventos y las enumeraciones). Estos se
documentan en un nivel bsico. Los nuevos objetos y miembros llevan anotada una seccin de informacin
de versin en las pginas de referencia, mientras que los objetos y los miembros existentes en la versin 1.0
no tienen una seccin de informacin de versin.
Caractersticas tcnicas de la API de JavaScript

La API de JavaScript tiene algunas caractersticas tcnicas que son diferentes de la API administrada y que se
extienden por varios elementos de la API de JavaScript. Para obtener ms informacin, vea los temas
siguientes:
XAML y conceptos relacionados con XAML en la API de JavaScript para Silverlight
Propiedades y propiedades adjuntas en la API de JavaScript
Utilizar XAML insertado
Controlar eventos de Silverlight mediante JavaScript
Anexo de referencia de la API de JavaScript
JavaScript y la distincin entre maysculas y minsculas
En los nombres de objetos, mtodos y propiedades de JavaScript no se distinguen maysculas de
minsculas cuando se procesan por IDispatch o mecanismos paralelos que exponen la API de JavaScript de
Silverlight al motor de script del explorador donde se hospedan. Por consiguiente, se puede combinar el
uso de una mayscula inicial en el valor de atributos de eventos XAML y una minscula en la definicin real
del mtodo, si se desea. Sin embargo, en el texto descriptivo de los ttulos y la sintaxis de la documentacin
de Silverlight, se normaliza generalmente el uso de maysculas y minsculas de los objetos, propiedades,
mtodos, eventos, enumeraciones y valores de enumeracin, usando mayscula para los caracteres iniciales
y algunos caracteres internos (lo que se denomina a veces "convencin Pascal del uso de maysculas"). Esto
se realiza por dos razones:
El cdigo XAML distingue maysculas de minsculas, porque aplica reglas XML. La sintaxis XAML y
el scripting equivalente se suelen presentar en una sola pgina, por lo que surgi la necesidad de
normalizar el uso de maysculas como se aplica en XAML. En los ttulos que se ven en la
documentacin de Silverlight se usa el formato de maysculas y minsculas correcto para los
atributos y elementos de objetos XAML.
La API administrada considera que todos los miembros distinguen maysculas de minsculas, y usa
la convencin Pascal. La presentacin de la referencia de JavaScript con un uso de maysculas y
minsculas equivalente permite una ruta de migracin ms limpia.
Observe que el cdigo de ejemplo de JavaScript que se proporciona en la documentacin de Silverlight se
aparta en ocasiones de esa convencin y sigue la convencin de estilo de codificacin utilizada
generalmente en JavaScript, cuya prctica es usar una minscula inicial (convencin Camel de maysculas y
minsculas).
3.3.1. XAML y conceptos relacionados con XAML en la API de JavaScript para

Silverlight
Si usa la API de JavaScript para Silverlight, el procesamiento de XAML y otros comportamientos
relacionados con XAML difieren considerablemente en algunas reas. Se hace referencia a los controladores
de eventos como inclusiones de script de nivel HTML en lugar de clases parciales. Adems, XAML es
arquitectnicamente la tcnica de creacin de instancias principal para la API de JavaScript para Silverlight y,
por tanto, las definir con frecuencia como pginas XAML o fragmentos XAML, teniendo acceso a
continuacin a los objetos creados con FindName. En este tema se explican el comportamiento de XAML y
algunas tcnicas importantes para crear o tener acceso a objetos desde XAML usando la API de JavaScript.
Controladores de eventos en XAML para la API de JavaScript

Silverlight
En XAML, la API que se usa (administrada o de JavaScript) afecta a la tcnica de especificacin de los
controladores de eventos. La API es mutuamente excluyente en un nivel de pgina XAML. La seal por la
que se usa la API es la presencia o ausencia del atributo x:Class en el elemento raz de una pgina XAML. Si
existe x:Class, la pgina usa la API administrada. Si x:Class no est presente, la pgina usa la API de
JavaScript.
En el ejemplo de XAML siguiente se muestra cmo agregar un controlador para el evento Loaded para
Canvas, que en este ejemplo es la raz de un archivo de XAML. La ausencia de x:Class en esta raz indica el
uso de la API de JavaScript. La resolucin del nombre de funcin se aplaza por tanto al tiempo de ejecucin.
En tiempo de ejecucin, cuando se produce el evento, se comprueba el mbito de scripting de JavaScript en
busca de un miembro denominado "onLoaded" y se ejecuta dicha funcin.
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Loaded="onLoaded" />
La funcin denominada onLoaded se define en un archivo de JavaScript. Este archivo de JavaScript est
asociado al HTML de la pgina de hospedaje a travs del parmetro src de la etiqueta <SCRIPT> del HTML.
Esto es necesario porque se trata del host del explorador que realmente est interpretando el script; el
complemento Silverlight es solamente un intermediario en el procesamiento de la API de JavaScript y no
proporciona el motor de scripts real. No hay nada en el XAML que deba hacer referencia a un archivo de
JavaScript concreto; solo es pertinente en el explorador y en el DOM.

<script type="text/javascript" src="eventfunctions.js">
...
</script>
El rbol de objetos y FindName

En la API de JavaScript, el rbol de objetos inicial siempre se construye analizando XAML. Excepto en
algunos usos de conversin de tipos, que pueden analizar las cadenas, cargar el cdigo XAML constituye la
nica manera de "construir" un objeto en la API de JavaScript. Una vez construido el rbol, suele ser
necesario interactuar con l. Para ello, se necesita una referencia de objeto de scripting a uno de los objetos
del rbol.
La mejor manera de establecer este tipo de referencia es asignar un atributo x:Name o Name a cualquier
elemento de objeto del cdigo XAML donde piensa hacer referencia a ese objeto en tiempo de ejecucin.
En la API de JavaScript, el nombre es conceptualmente una cadena, no un objeto. Sin embargo, cadena de
nombre se utiliza para recuperar el objeto real mediante una llamada subsiguiente a FindName en cualquier
cdigo de tiempo de ejecucin. FindName existe en la API de tal forma que puede llamar a FindName para
casi cualquier objeto en la API de JavaScript, inclusive para el objeto que representa el complemento
Silverlight. En general, ver que la primera lnea o lneas de una funcin de usuario escrita para una API de
JavaScript para Silverlight efecta llamadas a FindName para obtener las referencias de objeto, y que, a
continuacin, el resto de la funcin opera con esos objetos.
Aunque no haya ningn objeto con nombre, puede entrar en el rbol de objetos en tiempo de ejecucin
mediante la propiedad Root en el complemento Silverlight. Esto devuelve el objeto que es la raz del XAML
cargado.
Adems, cualquier controlador de eventos adjuntado a un objeto Silverlight tiene acceso a un valor sender
de un evento. Este valor sender y el controlador de eventos pertinente suelen estar adjuntados de forma
que sender es el objeto con el que se debe interactuar. En caso contrario, sender proporciona igualmente un
objeto cmodo desde el que se puede llamar a FindName.
El rbol de objetos y CreateFromXaml

El contenido de Silverlight en la pgina web se organiza como una jerarqua de objetos en una estructura de
rbol. El objeto simple situado en el extremo superior de la estructura es el objeto raz y corresponde a la
raz del archivo XAML que se carga como Source del complemento Silverlight. El objeto raz es normalmente
un objeto Canvas, porque Canvas puede contener otros objetos como TextBlock o MediaElement.
(Silverlight 1.0 admita nicamente Canvas como raz; si utiliza una API de JavaScript con clientes Silverlight
4, puede utilizar otros objetos UIElement como raz.)
Para agregar dinmicamente contenido XAML a la estructura de rbol despus de la carga inicial del XAML
source, primero se crea el fragmento XAML mediante el mtodo CreateFromXaml. En este punto, el

Silverlight
fragmento XAML que se crea est desconectado del rbol de objetos de Silverlight. Esto significa que el
fragmento todava no se representa. Sin embargo, incluso antes de agregarlo al rbol de objetos, puede
modificar las propiedades de los objetos en el fragmento XAML. Los mtodos de los objetos no se pueden
invocar antes de conectar el rbol.
Despus de haber creado un conjunto de objetos desconectado del fragmento XAML, por lo general suele
ser conveniente agregarlo al rbol de objetos de Silverlight activo. El fragmento se puede agregar como un
objeto secundario a un objeto primario, o bien puede establecer un valor de la propiedad de un objeto.
Cuando el fragmento forma parte del rbol de objetos de Silverlight, se representan los objetos del
fragmento XAML. Dependiendo de la extensin del cdigo XAML proporcionado como informacin para
CreateFromXaml, puede crear un objeto Silverlight nico, como TextBlock, o bien un rbol complejo de
objetos de Silverlight.
Hay varios requisitos para agregar dinmicamente contenido de XAML al rbol de objetos de Silverlight:
Debe haber contenido XAML existente asociado al complemento Silverlight. No se puede utilizar
CreateFromXaml para reemplazar el rbol de contenido completo; debe conservar el elemento raz
original por lo menos. Si desea reemplazar todo el rbol, puede establecer Source, pero tenga en
cuenta que Source requiere que exista un archivo real en un URI y este no se puede inicializar
simplemente con una cadena. Sin embargo, puede solucionar este problema utilizando cdigo
XAML insertado como Source y empleando el DOM HTML para aplicar el mtodo document.write
al contenido del bloque SCRIPT que contiene el cdigo XAML de origen deseado.
El mtodo CreateFromXaml solamente se puede invocar a travs del complemento Silverlight. Sin
embargo, en la API de JavaScript resulta sencillo obtener una referencia de objeto al complemento:
basta con llamar a GetHost para cualquier objeto de Silverlight.
El contenido de XAML que se crea con el mtodo CreateFromXaml solamente puede estar asignado
a un objeto. Si desea agregar objetos creados a partir de cdigo XAML idntico a reas diferentes
de la aplicacin, debe invocar CreateFromXaml varias veces y utilizar variables diferentes para el
valor devuelto. (Si lo hace, tenga cuidado con los conflictos de nombres; vea la seccin Crear
mbitos de nombres con CreateFromXAML ms adelante en este mismo tema).
El objeto de Silverlight que incluir el nuevo contenido de XAML debe ser capaz de encapsular un
objeto, como un elemento secundario o como un valor de propiedad.
La cadena que especifique para xamlContent de CreateFromXaml debe especificar cdigo XML con
el formato correcto (en concreto, debe tener un nico elemento raz). CreateFromXaml producir
un error si la cadena XML proporcionada no tiene el formato correcto.
El elemento raz utiliza implcitamente el espacio de nombres XML de Silverlight. Puede establecer
el espacio de nombres de Silverlight explcitamente, pero no establezca el espacio de nombres XML
predeterminado en ningn otro valor distinto del espacio de nombres de Silverlight.
Crear mbitos de nombres XAML con CreateFromXAML

El cdigo XAML utilizado para CreateFromXaml puede tener valores definidos para Name o x:Name. Como
parte de la llamada a CreateFromXaml, se crea un mbito de nombres XAML preliminar, basado en la raz
del cdigo XAML proporcionado. Este mbito de nombres preliminar evala todos los nombres definidos en
el cdigo XAML proporcionado para comprobar que son nicos. Si los nombres del cdigo XAML
proporcionado no son nicos internamente en este punto, CreateFromXaml produce un error. Sin embargo,
si los nombres del cdigo XAML proporcionado entran en conflicto con nombres que ya estn en el mbito
de nombres XAML primario, no se produce ningn error inmediatamente. Esto es as porque cuando se
llama al mtodo CreateFromXaml, el rbol de objetos creado que se devuelve est desconectado. Debe
conectar explcitamente el rbol de objetos creado, ya sea agregndolo a una coleccin de propiedades de
contenido como Canvas.Children o estableciendo alguna otra propiedad que acepte un valor de objeto
(como especificar un nuevo ImageBrush para un valor de propiedad Fill). Ver los conflictos de nombres que
producen errores solo despus de intentar conectar el rbol de objetos desconectado al rbol de objetos
principal de la aplicacin. El mtodo o propiedad utilizado para el intento de conexin ser la causa del
error, y el intento de conexin producir un error (el rbol desconectado seguir estando desconectado).
CreateFromXaml tiene un parmetro opcional, createNameScope, que normalmente se establece en false de
forma predeterminada. El establecimiento explcito de este valor en true en la llamada a CreateFromXaml

Silverlight
que se usa para crear un rbol de objetos desconectado crear igualmente un mbito de nombres XAML
preliminar que evala todos los nombres definidos en el cdigo XAML proporcionado para comprobar que
son nicos. Si los nombres del cdigo XAML proporcionado no son nicos internamente en este punto,
CreateFromXaml produce un error. La diferencia en el comportamiento es que el rbol de objetos
desconectado ahora est marcado para evitar que se combine su mbito de nombres XAML con el mbito
de nombres XAML primario cuando se conecte al rbol de objetos de la aplicacin principal. De hecho,
despus de conectar los rboles, la aplicacin tendr un rbol de objetos unificado pero mbitos de
nombres XAML discretos. Un nombre definido en la raz de CreateFromXaml o en cualquier objeto del rbol
previamente desconectado no se asocia al mbito de nombres XAML primario; tiene su propio mbito de
nombres XAML discreto.
La complicacin de tener mbitos de nombres XAML discretos es que las llamadas al mtodo FindName ya
no funcionan con un mbito de nombres unificado. En lugar de ello, el objeto en concreto en el que se
llama a FindName definir implcitamente el mbito, y el mbito ser el mbito de nombres XAML donde
reside el objeto que realiza la llamada. Por tanto, si intenta llamar a FindName para obtener un objeto con
nombre en el mbito de nombres XAML primario, no se encontrarn los objetos de un mbito de nombres
XAML discreto creado por CreateFromXaml. A la inversa, al llamar a FindName desde el mbito de nombres
XAML discreto no se encontrarn los objetos con nombre del mbito de nombres XAML primario. El
mtodo FindName definido en el objeto de complemento Silverlight no evita totalmente este problema; su
mbito de nombres XAML siempre es el mbito de nombres XAML primario.
Este problema de mbitos de nombres XAML discretos solamente afecta a los mbitos de nombres XAML y
a la llamada a FindName. Todava puede recorrer la estructura del rbol de objetos de forma ascendente en
algunos casos llamando al mtodo GetParent o de forma descendente realizando llamadas en las
propiedades o propiedades de coleccin pertinentes (como la coleccin devuelta por Canvas.Children).
Para llegar a los objetos que se definen en un mbito de nombres XAML discreto, puede emplear varias
tcnicas:
Recorrer el rbol de objetos con GetParent y/o propiedades de coleccin.
Si va a realizar la llamada desde un mbito de nombres XAML discreto y desea obtener el mbito
de nombres XAML primario, le resultar sencillo obtener una referencia al complemento Silverlight
y, a continuacin, llamar a FindName en esta referencia. La llamada de script concatenada para
realizar esta operacin se incluye en una nica lnea:
returnedObject = objeto .GetHost().content.FindName("nameToFind");
donde objeto es el objeto que realiza la llamada en un mbito de nombres XAML discreto. .content
en esta sintaxis es el paso a travs del subobjeto de complemento Silverlight especfico que define
el mtodo FindName.
Si va a realizar la llamada desde el mbito de nombres XAML primario y desea obtener un objeto
dentro de un mbito de nombres XAML discreto, debe planear con antelacin esta operacin en el
cdigo y conservar una referencia al objeto devuelto por CreateFromXaml. Este objeto es ahora un
objeto vlido para llamar a FindName dentro del mbito de nombres XAML discreto. Puede
mantener este objeto como una variable global o pasarlo de algn otro modo mediante
parmetros de mtodo.
3.3.1.1. Utilizar XAML insertado

En lugar de establecer el contenido inicial de Silverlight utilizando un archivo o paquete discreto al que se
hace referencia en un Identificador uniforme de recursos (URI), puede especificar un rea de contenido
HTML insertado que contiene el XAML.
Nota importante:
El cdigo XAML insertado es un concepto que solo es utilizable con la API de JavaScript para Silverlight. El
cdigo XAML insertado no es compatible con la API administrada para Silverlight.
Utilizar XAML insertado

Debido a su relacin con el DOM del explorador, el XAML insertado constituye una opcin deliberada para
utilizar la API de JavaScript. Sin un archivo XAML discreto, conocido para un archivo de proyecto

Silverlight
administrado, que especifique x:Class en su raz, no hay modo de que una solucin de XAML insertado sepa
cmo conectar el cdigo subyacente y el XAML, y ninguna instruccin concreta para compilar y conectar el
cdigo administrado.
Para utilizar XAML insertado, debe agregar el XAML en un bloque < SCRIPT > especial y especificar
"text/xaml" como atributo type. La declaracin de tipos del documento XML, <?xml version="1.0"?>,
precede el contenido XAML. Se debe identificar el contenido XAML de forma nica para que el parmetro
de inicializacin de Source del complemento Silverlight pueda hacer referencia a l. El parmetro source
utiliza el prefijo "#" seguido por el valor id en el elemento < SCRIPT > para identificar el contenido XAML. El
contenido XAML tambin puede definir eventos que hacen referencia a controladores de eventos en la
pgina HTML.
En el siguiente ejemplo HTML se muestra cmo crear contenido de cdigo XAML insertado. En este caso, la
pgina HTML incluye JavaScript y contenido XAML. Tenga en cuenta la construccin del elemento object
que especifica el parmetro source.
Nota:
El elemento < SCRIPT > que incluye el contenido XAML insertado debe preceder al elemento HTML que
contiene el complemento Silverlight, que hace referencia al XAML insertado para la inicializacin del origen.
<html>
<head>
<title>Display Date</title>

<script type="text/javascript">
function setDate(sender, eventArgs)
{
sender.text = Date();
}
</script>
</head>
<body bgcolor="Teal">

<script type="text/xaml" id="xamlContent"><?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
Background="Wheat">
<TextBlock
Canvas.Left="20"
FontSize="24"
Loaded="setDate" />
</Canvas>
</script>
<div id="silverlightControlHost">
<object type="application/x-silverlight" width="100%" height="100%" id="slc">
<param name="source" value="#xamlContent"/>
<param name="onload" value="onLoaded" />
<param name="iswindowless" value="true" />
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>
Cuando se muestra esta pgina, se carga el complemento Silverlight y se genera el evento Loaded para el
objeto TextBlock, que hace que TextBlock muestre la fecha y la hora.
3.3.2. Propiedades y propiedades adjuntas en la API de JavaScript

Las propiedades adjuntas son un concepto definido por el lenguaje XAML, que se us por primera vez en
WPF y despus en Silverlight 1.0 y Silverlight 2. En XAML, el uso de las propiedades adjuntas es sencillo y es
tambin uniforme entre las tecnologas anteriormente mencionadas. Cuando se usa con la API de
JavaScript, el acceso de una propiedad adjunta en tiempo de ejecucin requiere una sintaxis distinta, que es
nica para la API de JavaScript. Asimismo, la API de JavaScript incluye dos mtodos de utilidad que
proporcionan una sintaxis de establecimiento de propiedades alternativa para las propiedades de Silverlight
en general, incluidas las propiedades adjuntas. En este tema se describe la sintaxis para obtener y establecer

Silverlight
propiedades y propiedades adjuntas para la API de JavaScript, y el uso de los mtodos de utilidad
GetValue/SetValue.
GetValue y SetValue
Las propiedades del modelo de objetos de Silverlight se exponen a JavaScript a travs de una notacin
objeto.propiedad similar a muchos otros modelos de programacin en explorador. Dado que se basa en
prototipos, tambin es posible establecer valores de propiedad no incluidos en la API en cualquier objeto
de JavaScript y obtener ese valor posteriormente.
La API de JavaScript para Silverlight tambin proporciona dos mtodos de descriptor de acceso, GetValue y
SetValue, que obtienen y establecen las propiedades pasando el nombre de propiedad relevante como una
cadena. Estos mtodos realmente proporcionan una implementacin de "contenedor" intermedia que
procesa JavaScript en objetos nativos para Silverlight, pero se exponen como parte de la API del usuario
general porque, en ocasiones, resultan tiles para ciertos escenarios. Se proporcionan ejemplos de uso en
las pginas de referencia de GetValue y SetValue, en caso de que se encuentre ante un escenario de este
tipo. Dicho esto, en general no necesitar crear instancias para usar los mtodos GetValue / SetValue. La
notacin objeto.propiedad para obtener y establecer propiedades es equivalente y suele ser ms intuitiva.
Nota:
Si est familiarizado con WPF o con la API administrada para Silverlight, es probable que conozca los
mtodos SetValue y GetValue que forman parte del sistema de propiedades. Estos mtodos no son
exactamente equivalentes a los mtodos GetValue/SetValue de JavaScript de Silverlight. En WPF o en la API
administrada para Silverlight, los mtodos GetValue y SetValue solo pueden actuar en propiedades de
dependencia, mientras que los mtodos GetValue/SetValue pueden actuar en cualquier propiedad de
Silverlight disponible en la API de JavaScript.
Propiedades adjuntas en WPF y cdigo administrado

Puede resultar til proporcionar algo de informacin sobre los distintos usos de las propiedades adjuntas
disponibles para WPF y para cdigo administrado. En cdigo administrado, el analizador de XAML usa un
modelo de deteccin para determinar los descriptores de acceso de las propiedades adjuntas a fin de
procesar los valores. El modelo de deteccin est basado en los mtodos denominados Get* y Set*, y se
describe en las especificaciones del lenguaje XAML (aunque en dichas especificaciones no se describen las
caractersticas administradas de la implementacin WPF).
Propiedades adjuntas en Silverlight (API de JavaScript)

Para la API de JavaScript, el analizador de XAML reconoce un pequeo nmero de propiedades adjuntas:
Canvas.Left
Canvas.Top
Canvas.ZIndex
Storyboard.TargetName
Storyboard.TargetProperty
Grid.Column
Grid.ColumnSpan
Grid.Row
Grid.RowSpan
El comportamiento del analizador de XAML es considerar un nombre de propiedad adjunta como una
cadena completa y como una propiedad discreta que debe establecerse en cualquier elemento UIElement
del rbol de objetos. Sin embargo, esto no funciona as para el acceso a JavaScript porque el punto en el
nombre de la propiedad adjunta desencadena un paso en el modelo de objetos y presupone un valor de
objeto/propiedad intermedio Canvas que no existe en el elemento primario.
Sintaxis de las propiedades adjuntas para JavaScript

Para establecer propiedades adjuntas en JavaScript para Silverlight se usa una sintaxis que se parece a la
sintaxis de indizador de JavaScript: objeto["nombreDePropiedadAdjunta"], donde
nombreDePropiedadAdjunta es una cadena que define el nombre completo con punto de la propiedad
adjunta (por ejemplo Canvas.Top). Otro modo de considerar el nombreDePropiedadAdjunta completo es

Silverlight
como una serie de partes claseDefinitoria.propiedadAdjunta de una cadena nombreDePropiedadAdjunta

nica.
Tambin puede usar GetValue/SetValue para establecer una propiedad adjunta aunque, al igual que con las
propiedades estndar, el uso de GetValue/SetValue es realmente la alternativa menos comn.
El aspecto ms importante que hay que tener en cuenta aqu es que tanto en las notaciones
GetValue/SetValue como en la notacin compendiada, el . (punto) se considera parte del
nombre/identificador de propiedad y debe incluirse entre comillas. En el ejemplo siguiente se muestran las
distintas sintaxis a travs del uso:
// Set the value using the ["attachedPropertyName"] notation.
anObject["Canvas.Top"] = 40;
// Set the value using the SetValue method.
anObject2.setValue("Canvas.Top", 40);
// Get the value using the ["attachedPropertyName"] notation.
var top = anObject["Canvas.Top"];
// Get the value using the GetValue method.
var top2 = anObject2.GetValue("Canvas.Top");
3.3.3. Controlar eventos de Silverlight mediante JavaScript

Silverlight proporciona una API administrada. Pero tambin puede optar por seguir usando la API de
JavaScript inicialmente compatible con Silverlight 1.0. Esto implica el uso de JavaScript como lenguaje para
escribir los controladores de eventos de Silverlight, as como para realizar otras operaciones mediante
programacin.
Agregar un controlador de eventos en XAML

En el ejemplo de XAML siguiente se muestra cmo agregar un controlador para el evento Loaded en un
objeto Canvas. Tenga en cuenta que no es posible llamar a la funcin del controlador de eventos asignando
valores a los parmetros (incluso valores vacos), a diferencia de lo que ocurre con las funciones del
controlador de eventos de JavaScript para los elementos HTML del DOM HTML.
<Canvas Loaded="OnLoaded" />
En XAML, en el nivel de elemento, no existe ninguna diferencia en cuanto a la forma de hacer referencia al
controlador entre la API administrada y la API de JavaScript. En ambos casos, se proporciona una cadena
que designa una funcin (o un mtodo) del controlador de eventos.
Modelos de programacin y bsqueda del controlador de eventos

Si existe el atributo x:Class, se corresponde con la pgina y aplicacin de mayor tamao que usan la API
administrada. En este caso, la bsqueda del controlador de eventos se dirige a la clase a la que se hace
referencia como x:Class. Si no existe el atributo x:Class, la pgina no puede estar compilada por marcado, no
hay ninguna clase parcial de cdigo subyacente (o al menos el analizador XAML no puede determinar de
qu clase se trata) y la pgina debe usar la API de JavaScript para el control de eventos. En este caso, el host
evala el scripting en el motor de scripting con respecto a la funcin de JavaScript y a las definiciones de
objetos disponibles en tiempo de ejecucin en el DOM HTML.
Caractersticas del modelo de eventos que son comunes a la API

administrada y la API de JavaScript
Tanto si se utiliza la API administrada como la API de JavaScript, las funciones/mtodos del controlador de
eventos comparten los conceptos siguientes en sus firmas: un valor sender y un valor eventArgs (datos del
evento). El significado de sender en ambos modelos es que sender es el objeto al que est adjuntado el
controlador de eventos. En ambos modelos, los datos del evento son algn objeto que incluye propiedades
(y, a veces, mtodos) que notifican informacin especfica sobre esa instancia en concreto del evento.
Ambos modelos admiten la implementacin de Silverlight de un evento enrutado. Un evento enrutado es
un evento que se origina con un objeto en un rbol de objetos, pero que se enruta (se reenva) a cada
elemento primario sucesivo del rbol de objetos y a los posibles controladores de ese elemento primario,
hasta que dicho evento alcanza la raz del rbol de objetos. Generalmente, la representacin en el rbol de
objetos del modo en que un evento se enruta a travs del rbol es anloga al anidamiento de elementos de
objeto XAML en el XAML que define la pgina. El concepto de evento enrutado en Silverlight es la razn por
la que la definicin de sender como objeto al que est adjuntado el controlador de eventos difiere de las

Silverlight
definiciones de sender que puede ver en la documentacin bsica de .NET Framework acerca de los eventos
de CLR, donde sender es el objeto que gener el evento. Esto ltimo no es necesariamente cierto en el caso
de un evento enrutado; el evento podra haber sido generado por un objeto secundario del rbol de
objetos y haberse enrutado ascendentemente. Este concepto de evento enrutado tambin se describe a
veces en la documentacin de Silverlight y de WPF como un evento de propagacin.
Escribir controladores de eventos en JavaScript

En el ejemplo de JavaScript siguiente se muestra cmo definir una funcin de controlador de eventos de
Silverlight. En este caso, el cdigo muestra una cadena en un cuadro de dilogo de alerta que llama al
mtodo toString() sobre el objeto sender pasado como parmetro, lo que puede resultar una tcnica de
depuracin til para determinar informacin sobre los objetos.
function onLoaded(sender, eventArgs)
{
// Display the object type of the sender parameter.
alert("Sender = " + sender.toString());
}
Parmetros opcionales de JavaScript y eventArgs

Un controlador de eventos de JavaScript no necesita especificar ningn parmetro. No existe el concepto de
delegado que enlaza el controlador a una firma o convencin determinada, sino que los controladores de
eventos son un prototipo. Si su controlador no tiene la necesidad de usar sender o eventArgs, puede
omitirlos de la firma del controlador.
En muchos eventos de Silverlight, el valor de eventArgs disponible para un controlador de JavaScript es null,
por lo que hacer referencia a los datos del evento desde un controlador no reviste ninguna ventaja.
Sin embargo, para algunos eventos, los datos de evento de eventArgs son tan importantes como conocer
qu evento se gener. Esto es especialmente cierto en el caso de los eventos de entrada. En el caso de los
eventos del mouse, la posicin del mouse cuando se produjo el evento podra ser importante, y puede
determinarse utilizando el mtodo GetPosition al que se llam desde eventArgs. En el caso de los eventos
de teclado, las teclas del teclado generan los mismos eventos KeyDown y KeyUp, de modo que para
determinar qu tecla se presion es necesario obtener acceso a los KeyboardEventArgs que se encuentran
disponibles para el controlador de eventos. Se recomienda usar una nomenclatura ms especfica para el
segundo parmetro de las funciones del controlador de eventos siempre que haya disponible un conjunto
especializado de datos para dicho evento. En el caso de este ejemplo, el prototipo del controlador podra
usar keyboardEventArgs en lugar de eventArgs, ya que este es un nombre mucho menos especfico. El tipo
de datos del evento, as como las propiedades del mismo que se encuentran disponibles para un
controlador de un evento de Silverlight se indican en la referencia de cada evento.
Si est usando especficamente la API de JavaScript, puede usar caractersticas del sistema de eventos que
tambin existen en la API administrada para detener una ruta. La clase de datos de un evento enrutado
suele tener una propiedad Handled. Al establecer Handled en true en los datos del evento, se detendr el
comportamiento de enrutamiento del sistema de eventos, de modo que solamente lo recibir el primer
objeto que controla el evento enrutado. Hay una propiedad Handled disponible en los objetos
KeyboardEventArgs y MouseButtonEventArgs, que estn disponibles para los controladores en eventos de
botn del mouse o eventos de teclado, respectivamente. Los datos de eventos del mouse, de teclado y de
foco tambin tienen una propiedad Source, que notifica el objeto que gener el evento por oposicin al
lugar donde se control el evento (sender).
Obtener acceso al rbol de objetos de Silverlight combinando sender y
FindName
Puede hacer referencia a objetos con nombre de Silverlight distintos de sender en una funcin del
controlador de eventos, en caso de que puedan recuperarse mediante un nombre establecido en el XAML
inicial. Para denominar el objeto en XAML de modo que pueda hacer referencia a l posteriormente en un
script, use el atributo x:Name a fin de declarar el nombre del objeto en el rbol de objetos. El nombre se
aplica en cuanto se crea y analiza el XAML y se crea la representacin de objetos, por lo que lo normal es
que tenga que esperar a que se controle algn evento (como Loaded o algn evento concreto de la interfaz
de usuario). A continuacin, normalmente con el parmetro sender proporcionado como punto de entrada
del rbol de objetos general de Silverlight, puede llamar a FindName sobre el objeto sender y hacer

Silverlight
referencia al objeto con nombre en el rbol de objetos extendido. En el siguiente XAML se crea un rbol de
objetos con un TextBlock con nombre y un controlador de eventos en el Canvas primario.
<Canvas
Loaded="onLoaded">
<TextBlock x:Name="myTextBlock" />
</Canvas>
En el ejemplo de JavaScript siguiente se muestra cmo usar el mtodo FindName para buscar un objeto con
nombre concreto en el rbol de objetos de Silverlight. En este caso, el cdigo muestra la fecha actual como
la propiedad Text del objeto TextBlock.
{
// Set the TextBlock to display the current date and time.
sender.findName("myTextBlock").text = Date();
}
Agregar controladores de eventos en JavaScript

Adems de agregar controladores a los objetos a travs del XAML inicial, tambin puede agregar
controladores a los objetos en tiempo de ejecucin.
Para agregar y quitar funciones de controlador de eventos a los objetos Silverlight de JavaScript, use los
mtodos RemoveEventListener y AddEventListener. En el ejemplo de JavaScript siguiente se muestra la
forma de agregar eventos a un objeto TextBlock.
{
textBlock = sender.findName("Status");
var entertoken1 = textBlock.addEventListener("MouseEnter", onMouseEnter);
var leavetoken1 = textBlock.addEventListener("MouseLeave", onMouseLeave);
}
En el ejemplo anterior, es posible que haya observado los "tokens" devueltos. En algunas circunstancias, es
posible que desee quitar los controladores de eventos. Puede hacerlo si tiene pensado reemplazar un
controlador de eventos previamente agregado por una funcin de control diferente. Para quitar una funcin
de controlador de eventos existente, use el mtodo RemoveEventListener. En el ejemplo de JavaScript
siguiente se muestra cmo quitar los controladores de dos eventos diferentes de un objeto TextBlock.
function removeEvents()
{
textBlock.removeEventListener("MouseEnter", entertoken1);
textBlock.removeEventListener("MouseLeave", leavetoken1);
}
Tenga en cuenta el modo en que el cdigo destinado a quitar el controlador de eventos hace referencia a
los mencionados tokens que se declararon como variables en el cdigo anterior destinado a agregar
controladores de eventos. En realidad, los tokens son simplemente valores enteros. Los tokens los
devuelven las llamadas a AddEventListener, puesto que puede resultar necesario diferenciar los
controladores si se define ms de un controlador para el mismo evento en la misma instancia. Si no tiene
intencin de quitar los controladores posteriormente, no es necesario que almacene los tokens devueltos
por la llamada a AddEventListener.
Tambin puede quitar los controladores en casos en los que el evento se haya agregado a travs de un
atributo de evento XAML. En el caso de un atributo de evento XAML, no hay ninguna llamada de funcin
que pueda devolver un token. Sin embargo, puede proporcionar el valor 0 (cero) al parmetro token para
quitar un evento en el que se agreg el controlador utilizando un atributo XAML. Los tokens representan el
orden en que se agregaron los controladores, de 0 en adelante. Dado que los controladores de atributos
XAML son los primeros controladores que se agregan (el anlisis de XAML tiene lugar antes de que
cualquier script pueda agregar controladores) y dado que solo puede agregarse un controlador de eventos
por evento/instancia utilizando XAML, el valor token del controlador de eventos agregado por XAML
siempre es 0.
Nota:
El DOM de Gecko admite un mtodo DOM en muchos elementos que tambin se denominan
AddEventHandler y tiene un propsito conceptual similar. La versin Gecko del DOM se diferencia de

Silverlight
AddEventHandler de Silverlight en que la versin Gecko del DOM tiene tres parmetros y la versin de
Silverlight tiene dos. No es posible usar la versin Gecko del DOM de AddEventHandler para agregar
controladores de objetos en el rbol de objetos de Silverlight. No obstante, puede usarla para agregar
controladores a cualquier elemento de la pgina HTML que realmente se encuentre en el DOM HTML.
Eventos del DOM HTML de JavaScript y Loaded/onload

JavaScript proporciona un conjunto de eventos que puede usar para responder a los cambios de la pgina
web. Por ejemplo, en el ejemplo de HTML siguiente se muestra cdigo de JavaScript activado por el evento
onload del DOM HTML de JavaScript.
<body onload='javascript:alert("onload event generated")'>
En este ejemplo, el cdigo de JavaScript se define insertado, en lugar de hacer referencia a una funcin de
controlador de eventos. Esto no es posible con los eventos de Silverlight; es necesario definir funciones y
hacer referencia a ellas.
Adems, tenga en cuenta la similitud que existe entre el evento del DOM HTML onload y el evento Loaded
de Silverlight. El evento onload del DOM HTML no se genera hasta que la pgina web se ha cargado por
completo. Esto significa que cualquier complemento Silverlight incluido dentro de la pgina generar su
evento Loaded antes que el evento onload del DOM HTML.
Eventos de error
Los errores de la API de JavaScript pueden controlarse a menudo escribiendo un controlador para el evento
OnError definido para el objeto de complemento Silverlight. Los eventos de error siempre incluyen los datos
del evento en forma de ErrorEventArgs que se encuentran disponibles para el controlador de errores, y los
eventos del analizador y los eventos en tiempo de ejecucin proporcionan las subclases especializadas
ParserErrorEventArgs o RuntimeErrorEventArgs respectivamente.
3.4. Lenguajes dinmicos en Silverlight

Los lenguajes dinmicos proporcionan un enfoque interactivo para el desarrollo de aplicaciones basadas en
Silverlight. El DLR (Dynamic language runtime) permite que los lenguajes dinmicos se ejecuten en el
Common Language Runtime y utilicen la biblioteca de clases de .NET Framework para Silverlight. El DLR y
tres lenguajes dinmicos (IronPython, IronRuby y JScript administrado) estn actualmente en desarrollo en
el sitio web Codeplex. All encontrar ms informacin e incluso cdigo fuente y ejemplos de Silverlight.
3.5. Comunicacin entre aplicaciones locales basadas en Silverlight

La mensajera local permite crear canales de comunicacin entre varios complementos Silverlight que se
ejecutan en un mismo equipo. Normalmente, los complementos se hospedan en una pgina web nica y se
utiliza la mensajera local para coordinar su comportamiento. Esto permite crear diseos complejos que
combinan varias aplicaciones basadas en Silverlight con contenido basado en otras tecnologas.
Por ejemplo, supongamos que desea proporcionar un sistema de navegacin basado en Silverlight para un
sitio web que, por lo dems, est basado en HTML. Puede utilizar Silverlight para crear una barra de mens
y una barra lateral, y utilizar la mensajera local para mantener sus estados sincronizados. Otro ejemplo es
crear una pancarta basada en Silverlight con un efecto de animacin que atraviese la pantalla hasta un
anuncio de barra lateral, y utilizar la mensajera local para coordinar la transicin. Tambin se puede usar la
mensajera local para establecer la comunicacin entre una aplicacin basada en Silverlight en una pgina
web y otra que se ejecute fuera del explorador.
Configurar receptores y emisores de mensajes locales

Para establecer un canal de mensajera local, cree un objeto LocalMessageReceiver en una aplicacin y un
objeto LocalMessageSender correspondiente en la otra aplicacin. El emisor siempre enva el primer
mensaje, aunque el receptor puede responder, lo que permite la comunicacin bidireccional. Tambin se
pueden crear objetos emisores y receptores en dos aplicaciones para que cualquiera de ellas pueda enviar
el primer mensaje.
Al crear el receptor, debe darle un nombre que sea nico bien globalmente o bien dentro del dominio del
host de la aplicacin receptora. Si especifica un nombre solamente, su mbito se asigna al dominio de

Silverlight
forma predeterminada. Al crear el emisor, debe identificar el receptor correspondiente. Si solo especifica un
nombre, el emisor supondr que el receptor se hospeda en el mismo dominio y que utiliza un nombre cuyo
nombre est asignado al dominio.
El mbito de nombres garantiza que el receptor va a recibir nicamente los mensajes dirigidos al mismo. Es
posible usar el mbito global si no se desea restringir las aplicaciones a dominios concretos. Sin embargo,
esto aumenta la posibilidad de que se produzcan conflictos de nombres, a menos que se elijan nombres
que tengan probabilidad de ser nicos. El mbito de dominio permite elegir nombres de receptor ms
simples si se est familiarizado con todas las aplicaciones basadas en Silverlight que se hospedan en un
dominio.
En el ejemplo de cdigo siguiente se muestra una configuracin bsica donde las aplicaciones emisora y
receptora se hospedan en el mismo dominio.
' In the receiving application:
Dim messageReceiver As New LocalMessageReceiver("receiver")
' In the sending application:
Dim messageSender As New LocalMessageSender("receiver")
Puede crear varios objetos receptores y emisores. Cada receptor puede recibir los mensajes de cualquier
nmero de emisores. Cada emisor, sin embargo, solo puede enviar mensajes al receptor identificado en su
constructor. Adems, puede configurar el receptor de forma que reciba nicamente los mensajes de los
dominios emisores especificados, o desde cualquier dominio.
En el ejemplo siguiente se muestra una configuracin ms compleja en virtud de la cual las aplicaciones
emisora y receptora se pueden hospedar en el mismo dominio o en dominios diferentes.
Dim messageReceiver As New LocalMessageReceiver("receiver", ReceiverNameScope.Global,
LocalMessageReceiver.AnyDomain)
Dim messageSender As New LocalMessageSender("receiver", LocalMessageSender.Global)
En este ejemplo, el receptor recibe un nombre en el mbito global y puede recibir mensajes de cualquier
dominio. Tambin el emisor especifica el mbito global. El mbito global resulta til para que el emisor no
tenga que saber cul es el dominio del receptor. Sin embargo, cuando se utiliza el mbito global se deben
elegir cuidadosamente los nombres de los receptores, a fin de evitar la posibilidad de conflictos. Para
obtener ms informacin, vea la seccin "Escenarios avanzados y solucin de problemas" ms adelante en
este mismo tema.
Despus de crear los objetos emisores y receptores, agregue controladores de los eventos LocalMessage
Sender.SendCompleted y LocalMessageReceiver.MessageReceived para completar la configuracin. Estos
eventos se describen en la seccin siguiente.
Cuando el receptor est talmente configurado, llame al mtodo LocalMessageReceiver.Listen. Este mtodo
registra la identidad del receptor y le permite recibir los eventos MessageReceived. Este mtodo tambin
inicia una excepcin ListenFailedException si ya hay un receptor registrado con el mismo nombre y mbito
de nombres. Por ejemplo, esto puede suceder si se usa un nombre codificado de forma rgida y un usuario
carga al mismo tiempo la pgina web host en ms de una ventana o pestaa del explorador. Para obtener
ms informacin, vea la seccin "Escenarios avanzados y solucin de problemas".
No se puede modificar la configuracin del receptor despus de llamar al mtodo Listen. El receptor seguir
recibiendo mensajes hasta que se llame a su mtodo Dispose.
En el ejemplo de cdigo siguiente se muestran los detalles de configuracin completos donde las
aplicaciones emisora y receptora se hospedan en el mismo dominio.
Dim messageReceiver As New LocalMessageReceiver("receiver")
AddHandler messageReceiver.MessageReceived, AddressOf receiver_MessageReceived
Try
messageReceiver.Listen()
Catch ex As ListenFailedException
MessageBox.Show("Cannot receive messages." & Environment.NewLine & _
"There is already a receiver with the name 'receiver'.", "LocalMessageReceiver", MessageBoxButton.OK)
End Try
Dim messageSender As New LocalMessageSender("receiver")
AddHandler messageSender.SendCompleted, AddressOf sender_SendCompleted

Silverlight
Enviar mensajes y recibir respuestas

Para enviar un mensaje, la aplicacin emisora llama al mtodo SendAsync, y pasa un mensaje String con un
tamao mximo de 40 kilobytes. Si el mensaje se recibe correctamente, se produce el evento
LocalMessageReceiver.MessageReceived en la aplicacin receptora y el mensaje est disponible en la
propiedad MessageReceivedEventArgs.Message.
La aplicacin receptora puede enviar una respuesta del controlador de eventos MessageReceived
estableciendo la propiedad MessageReceivedEventArgs.Response. Para recibir la respuesta, la aplicacin
emisora puede controlar el evento LocalMessageSender.SendCompleted y obtener la propiedad Send
CompletedEventArgs.Response.
En el ejemplo de cdigo siguiente se muestra un intercambio simple de mensaje y respuesta.
Private Sub SendMessage(ByVal messageSender As LocalMessageSender)
MessageBox.Show("Sending message ""message"".", _
"LocalMessageSender", MessageBoxButton.OK)
messageSender.SendAsync("message")
End Sub

Private Sub receiver_MessageReceived(ByVal sender As Object, _
ByVal e As MessageReceivedEventArgs)
MessageBox.Show("Message """ & e.Message & _
""" received. Sending response ""response"".", _
"LocalMessageReceiver", MessageBoxButton.OK)
e.Response = "response"
End Sub

Private Sub sender_SendCompleted(ByVal sender As Object, _
ByVal e As SendCompletedEventArgs)
MessageBox.Show("Response """ & e.Response & """ receieved.", _
"LocalMessageSender", MessageBoxButton.OK)
End Sub
No es necesario que el emisor controle el evento SendCompleted. Sin embargo, si lo hace, el evento se
produce con independencia de si el mensaje se recibe correctamente o no, y de si el receptor enva una
respuesta o no. No obstante, si el mensaje no se recibe, la propiedad AsyncCompletedEventArgs.Error
(heredada por la clase SendCompletedEventArgs) se establecer en una instancia de SendFailedException.
Por ejemplo, esto se puede producir si no se ha registrado el nombre del destinatario especificado o si no
est configurado para recibir los mensajes del dominio del remitente.
Diagrama de ejemplo
En el diagrama siguiente se resumen los comportamientos descritos en las secciones anteriores.
El diagrama muestra los ejemplos siguientes de objetos e interacciones:

Silverlight
Un objeto LocalMessageReceiver en domain1 se denomina receiver1, utiliza el mbito de nombres

del dominio y nicamente puede recibir los mensajes de domain1. Este receptor llama
correctamente a su mtodo Listen en el paso 1.
Un segundo objeto LocalMessageReceiver de domain1 intenta utilizar el mismo nombre y mbito
de nombres, lo que hace que la llamada al mtodo Listen inicie una excepcin ListenFailed
Exception.
En domain1 hay dos objetos LocalMessageSender configurados para enviar mensajes a receiver1
en domain1. Estos emisores llaman a SendAsync en el paso 2, con lo que se produce el evento
MessageReceived en el receptor en el paso 3, seguido del evento SendCompleted en el emisor en
el paso 4. Los pasos 2, 3 y 4 se pueden producir varias veces. Cada ciclo de mensaje y respuesta es
distinto para cada emisor y cada llamada al mtodo SendAsync y no sucede necesariamente al
mismo tiempo.
Un tercer objeto LocalMessageSender est configurado para enviar mensajes a receiver1 en
domain2. Sin embargo, en domain2 no hay ningn emisor denominado receiver1, de modo que la
llamada al mtodo SendAsync genera el evento SendCompleted con la propiedad Error establecida
en una excepcin SendFailedException. El error tambin se producira si este emisor se configurase
para enviar mensajes a receiver1 en domain1. El motivo es que el emisor se encuentra en domain2,
pero receiver1 est configurado para recibir mensajes nicamente de domain1.
Escenarios avanzados y solucin de problemas

La mensajera local resulta sencilla de utilizar en la mayora de los escenarios comunes. Sin embargo, existen
algunas situaciones que requieren cdigo adicional o que no se admiten. En esta seccin se describen las
tareas siguientes:
Identificar mensajes en el controlador de eventos SendCompleted.
Evitar problemas entre dominios.
Enviar mensajes complejos.
Enviar mensajes durante el inicio de la aplicacin.
Evitar conflictos de nombres con varias instancias de una misma aplicacin web.
Identificar mensajes en el controlador de eventos SendCompleted
En algunos casos, ser necesario enviar varios mensajes desde un objeto LocalMessageSender y hacer que
el evento SendCompleted coincida con el mensaje correspondiente. Sin embargo, no est garantizado que
los eventos SendCompleted se produzcan en el mismo orden que las llamadas al mtodo SendAsync.
Adems, si los mensajes no son nicos, no se puede utilizar el texto del mensaje para identificar cada
mensaje concreto.
En este escenario, se puede llamar el mtodo SendAsync y pasar un objeto de estado de usuario junto con
el mensaje. A continuacin, en el controlador de eventos SendCompleted, se puede obtener el valor de la
propiedad AsyncCompletedEventArgs.UserState (heredada por la clase SendCompletedEventArgs). El objeto
de estado de usuario puede ser cualquier objeto de su eleccin, como un identificador de cadena o entero.
Sin embargo, tenga en cuenta que LocalMessageReceiver no recibe el objeto de estado de usuario, de
modo que no pueda utilizarlo como parte del mensaje.
Evitar problemas entre dominios
Cuando las aplicaciones emisora y receptora se hospedan en dominios diferentes, pueden existir problemas
de seguridad que eviten la mensajera local o requieran de cdigo adicional.
Primero, la mensajera local solo es posible entre dominios que utilicen el mismo esquema de
identificadores URI. Por ejemplo, un emisor hospedado en un identificador URI HTTP no puede enviar
mensajes a un receptor hospedado en un identificador URI HTTPS.
Adems, en Internet Explorer, los hosts de las aplicaciones emisora y receptora deben residir en la misma
zona de seguridad. Sin embargo, esta restriccin se puede deshabilitar estableciendo la propiedad Local
MessageReceiver.DisableSenderTrustCheck en true. Esto resulta til, por ejemplo, para establecer la
comunicacin entre una aplicacin hospedada en web de la zona de Internet y una aplicacin de ejecucin
fuera del explorador de la zona confiable.

Silverlight
Con la mensajera local entre dominios, a veces es preciso tomar precauciones adicionales para evitar
conflictos de nombre o la asuncin del control de mensajes. Recuerde que la primera aplicacin que registra
el nombre de un receptor dentro de un mbito de nombres determinado recibir los mensajes dirigidos a
esa identidad. Esto podra provocar problemas si una aplicacin desconocida con la misma identidad ya
est abierta en otra ventana o pestaa del explorador cuando se carga la aplicacin.
Si se utiliza el mbito de nombres global, debe evitarse el uso de nombres de receptor comunes. Si la
seguridad es una cuestin importante, puede ser conveniente utilizar mbitos de nombres de dominio y
restringir los dominios desde los que el receptor puede recibir mensajes. Por ltimo, debe evitarse el envo
de informacin confidencial a travs de un canal de mensajera local no cifrado.
Enviar mensajes complejos
Con la mensajera local, se puede enviar cualquier cadena de hasta 40 kilobytes. En muchas situaciones, el
mensaje tendr que ser solamente una notificacin simple o un conjunto de valores simple que el receptor
puede analizar e interpretar con facilidad. Sin embargo, dentro del lmite de 40 kilobytes, pueden enviarse
mensajes arbitrariamente complejos, incluso objetos serializados y mensajes cifrados.
Silverlight proporciona API para serializar y deserializar datos XML o JSON. Se trata de formatos de datos
comunes cuando se trabaja con servicios Web. Aunque la mensajera local tiene lugar por completo en un
equipo nico, estos formatos de datos se pueden utilizar de la misma manera que con un servicio Web.
Trabajar con datos XML resulta particularmente fcil porque Silverlight incluye LINQ to XML. Sin embargo,
los datos XML ocupan ms espacio, de modo que si se van a serializar objetos grandes que pueden superar
el lmite de 40 kilobytes, puede ser conveniente usar JSON.
Silverlight proporciona API para criptografa en el espacio de nombres System.Security.Cryptography.
Enviar mensajes durante el inicio de la aplicacin
Segn su tamao, las aplicaciones emisora y receptora podran terminar de cargarse en momentos distintos.
Aunque ambas aplicaciones sean pequeas, no hay ninguna garanta de que la aplicacin receptora est
disponible cuando la aplicacin emisora est lista para enviar. Si necesita enviar un mensaje local durante el
tiempo de inicio de la aplicacin, debe tener esto en cuenta.
Una manera de evitar este problema es hacer que la aplicacin emisora enve el mensaje repetidamente
hasta que se reciba. Para ello, puede reenviar el mensaje en el controlador de eventos SendCompleted si la
propiedad AsyncCompletedEventArgs.Error no es null. Esta tcnica se utiliza en el ejemplo de cdigo de
Cmo: Implementar la comunicacin entre aplicaciones locales basadas en Silverlight.
Otro enfoque es utilizar la caracterstica Puente HTML para comunicarse a travs de la pgina web host y
avisar a la aplicacin emisora cuando se haya cargado la aplicacin receptora. Obviamente, podra utilizar
Puente HTML como canal de comunicacin en lugar de la mensajera local. Sin embargo, la mensajera local
suele ser ms conveniente una vez que el emisor ha determinado que el receptor est disponible y
preparado para recibir mensajes. Tambin debe tenerse en cuenta que la caracterstica Puente HTML
requiere una pgina HTML host, de modo que no funciona con aplicaciones de ejecucin fuera del
explorador.
Evitar conflictos de nombres con varias instancias de una misma aplicacin web
En algunos casos, puede ser necesario permitir que los usuarios ejecuten ms de una instancia de la
aplicacin web a la vez. En este caso, se precisar cdigo adicional para asegurarse de que las instancias de
LocalMessageReceiver tengan nombres nicos.
Tal y como se ha mencionado, se puede controlar la excepcin ListenFailedException iniciada por el mtodo
LocalMessageReceiver.Listen para determinar si ya se ga registrado un nombre de receptor. Esto resulta til
si, sencillamente, desea deshabilitar la mensajera local para las instancias adicionales de la aplicacin web.
No obstante, si desea que las instancias adicionales se ejecuten normalmente, deber generar nombres de
receptor nicos para esas instancias.
En este caso, puede generar los nombres de receptor en JavaScript, utilizando la fecha y hora actuales para
asegurar su singularidad. A continuacin, puede recuperar los nombres generados en las aplicaciones
emisora y receptora por medio de la caracterstica Puente HTML.

Silverlight
3.5.1. Cmo: Implementar la comunicacin entre aplicaciones locales basadas

en Silverlight
En el ejemplo de cdigo siguiente se muestra cmo usar las clases LocalMessageSender y
LocalMessageReceiver.
En el XAML, la clase Receiver define un control TextBlock para mostrar los mensajes que recibe. La clase
Sender define un control Button para enviar mensajes y un control TextBlock para mostrar las respuestas
que recibe.
En el cdigo subyacente, la clase Receiver inicializa LocalMessageReceiver y administra el evento
MessageReceived. La clase Sender inicializa LocalMessageSender y proporciona control personalizado para
enviar los mensajes. Esto permite al remitente enviar los mensajes repetidamente hasta que el receptor
responda. Por ejemplo, es til si la aplicacin receptora tarda mucho tiempo en cargarse.
El remitente pasa el nmero de intento en la llamada al mtodo SendAsync(String, Object) junto con el
mensaje. Cuando el receptor responde finalmente, el remitente muestra el nmero de intento junto con la
respuesta.
En el ejemplo HTML se hospedan dos copias de la aplicacin emisora y una copia de la aplicacin receptora.
Esto demuestra que el receptor puede recibir mensajes de varios remitentes.
<UserControl x:Class="SendingApplication.Sender"
<StackPanel x:Name="LayoutRoot">
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Sender" FontSize="20" />
<Button x:Name="button" Click="Button_Click"
Height="20" Margin="20,0,0,0" />
</StackPanel>
<TextBlock x:Name="output" />
</StackPanel>
</UserControl>
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Messaging
Partial Public Class Sender

Private messageSender As LocalMessageSender
Public Sub New()

UpdateButton()
messageSender = New LocalMessageSender("receiver", LocalMessageSender.Global)
AddHandler messageSender.SendCompleted, AddressOf sender_SendCompleted
SendMessage("message from Sender constructor")
End Sub
Private clickNumber As Integer = 1
Private Sub UpdateButton()

button.Content = "send message 'click " & clickNumber & "'"
End Sub

SendMessage("click " & clickNumber)
clickNumber += 1
UpdateButton()
End Sub
Private Const MAX_ATTEMPTS As Integer = 10000

Private attempt As Integer = 1
Private Sub SendMessage(ByVal message As String)

messageSender.SendAsync(message, attempt)
End Sub
Private Sub sender_SendCompleted(ByVal sender As Object, ByVal e As SendCompletedEventArgs)

If e.Error IsNot Nothing Then
LogError(e)

Silverlight
attempt += 1
If attempt > MAX_ATTEMPTS Then
output.Text = "Could not send message."
Return
End If
SendMessage(e.Message)
Return
End If
output.Text = "Message: " & e.Message & Environment.NewLine & _
"Attempt " & CType(e.UserState, Integer) & " completed." & Environment.NewLine & _
"Response: " & e.Response & Environment.NewLine & "ReceiverName: " & _
e.ReceiverName & Environment.NewLine & "ReceiverDomain: " & e.ReceiverDomain
' Reset attempt counter.
attempt = 1
End Sub
Private Sub LogError(ByVal e As SendCompletedEventArgs)

System.Diagnostics.Debug.WriteLine( _
"Attempt number {0}: {1}: {2}", CType(e.UserState, Integer), e.Error.GetType().ToString(), e.Error.Message)
End Sub
End Class
<UserControl x:Class="ReceivingApplication.Receiver"
<TextBlock Text="Receiver" FontSize="20" />
<TextBlock x:Name="output"/>
</StackPanel>
</UserControl>
Imports System
Imports System.Windows.Messaging
Partial Public Class Receiver

Public Sub New()

Dim messageReceiver As New LocalMessageReceiver("receiver", _
ReceiverNameScope.Global, LocalMessageReceiver.AnyDomain)
AddHandler messageReceiver.MessageReceived, AddressOf messageReceiver_MessageReceived
Try
messageReceiver.Listen()
Catch ex As ListenFailedException
output.Text = "Cannot receive messages." & Environment.NewLine & _
"There is already a receiver with the name 'receiver'."
End Try
End Sub
Private Sub messageReceiver_MessageReceived(ByVal sender As Object, ByVal e As MessageReceivedEventArgs)

e.Response = "response to " & e.Message
output.Text = "Message: " & e.Message & Environment.NewLine & _
"NameScope: " & e.NameScope.ToString() & Environment.NewLine & _
"ReceiverName: " & e.ReceiverName & Environment.NewLine & _
"SenderDomain: " & e.SenderDomain & Environment.NewLine & _
"Response: " & e.Response
End Sub
End Class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>LocalMessaging</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost1 {
padding: 0;
margin: 0;

Silverlight
}
#silverlightControlHost2 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="10">
<tr>
<td>
<div id="silverlightControlHost1">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"
width="400" height="120">
<param name="source" value="ClientBin/SendingApplication.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>
</div>
</td>
</tr>
<tr>
<td>
<div id="Div1">
<param name="source" value="ClientBin/SendingApplication.xap"/>
</object>
</iframe>
</div>
</td>
</tr>
<tr>
<td>
<div id="silverlightControlHost2">
<param name="source" value="ClientBin/ReceivingApplication.xap"/>
</object>
</iframe>
</div>
</td>
</tr>
</table>
</body>
</html>
3.6. Compatibilidad de ejecucin fuera del explorador

Las aplicaciones basadas en Silverlight se pueden configurar de tal forma que los usuarios las instalen desde
sus pginas web del host y las ejecuten fuera del explorador.
La configuracin consiste sencillamente en proporcionar informacin adicional sobre una aplicacin.
Silverlight utiliza esta informacin para mostrar la interfaz de usuario de instalacin, accesos directos para
iniciar la aplicacin y una ventana de aplicacin de ejecucin fuera del explorador. Esta informacin se
proporciona por medio del manifiesto de aplicacin, de modo que pueda habilitar la compatibilidad con la
ejecucin fuera del explorador en una aplicacin existente sin tener que volver a compilarla.
Cuando una aplicacin est configurada correctamente, Silverlight muestra una opcin de instalacin en el
men contextual (que aparece al hacer clic con el botn secundario). Tambin puede proporcionar su
propia interfaz de usuario para la instalacin que complemente o reemplace la opcin disponible en el
men contextual.

Silverlight
Una aplicacin de ejecucin fuera del explorador se puede ejecutar sin que haya una conexin de red. Si la
aplicacin suele utilizar recursos basados en red, se puede implementar la deteccin de la red y
proporcionar compatibilidad sin conexin cuando esta ltima no est disponible. Por ejemplo, puede utilizar
el almacenamiento aislado a modo de memoria cach sin conexin que se sincronice con un almacn de
datos basado en servidor cuando se reanude la conexin. Cuando la conexin est disponible, tambin
puede comprobarse si hay actualizaciones para la aplicacin.
Asimismo, se puede configurar una aplicacin de ejecucin fuera del explorador de modo que requiera
confianza elevada. Las aplicaciones de confianza pueden omitir algunas de las restricciones del espacio
aislado de seguridad. Por ejemplo, las aplicaciones de confianza pueden utilizar el modo de pantalla
completa sin restricciones de teclado.
Nota:
Las aplicaciones de ejecucin fuera del explorador estn sometidas a las mismas restricciones de espacio
aislado que las aplicaciones normales de ejecucin en explorador. Para flexibilizar algunas de estas
restricciones, se debe configurar la aplicacin de modo que requiera confianza elevada. Sin embargo, si se
necesita acceso no restringido al equipo del usuario o se precisan otras capacidades adems de las
proporcionadas por Silverlight, puede ser conveniente utilizar Windows Presentation Foundation (WPF).
Como alternativa, se puede hospedar el complemento Silverlight dentro de otra aplicacin.
Las aplicaciones de ejecucin fuera del explorador pueden tener acceso a los recursos de la red por HTTPS
cuando hay una conexin disponible. Sin embargo, en este momento no existe ningn indicador integrado
de la presencia de un canal seguro y se puede suplantar cualquier indicador que se proporcione. Las
aplicaciones de ejecucin fuera del explorador son tan seguras como los sitios web donde se hospedan. Por
consiguiente, los usuarios deben basarse en la seguridad del sitio host al instalar o actualizar una aplicacin
de ejecucin fuera del explorador. Si la aplicacin trata informacin confidencial, debera usar HTTPS para el
URI de la aplicacin y para las comunicaciones seguras. Observe que siempre se utiliza el identificador URI
(incluido el protocolo) de la aplicacin original cuando la aplicacin comprueba si hay actualizaciones.
Instalar, iniciar y desinstalar aplicaciones de ejecucin fuera del

explorador
Para instalar una aplicacin Silverlight configurada correctamente, el usuario hace clic con el botn
secundario en la aplicacin dentro de la pgina web donde se hospeda y, a continuacin, selecciona
Instalar <nombre de la aplicacin> en este equipo. Se abre el cuadro de dilogo siguiente, que permite
al usuario especificar la ubicacin de los accesos directos de la aplicacin.
Sin embargo, si se configura la aplicacin de modo que requiera confianza elevada, aparecer un cuadro de
dilogo con una advertencia de seguridad. Este cuadro de dilogo contiene las mismas opciones de acceso
directo, pero adems informa al usuario de que la aplicacin tendr mayor acceso al equipo.
El nombre de aplicacin que aparece en el men contextual y en el cuadro de dilogo corresponde al
nombre del acceso directo en la configuracin de ejecucin fuera del explorador. La imagen que aparece en
el cuadro de dilogo corresponde al icono ms grande de la configuracin. Si no especifica ningn icono en
la configuracin, se utiliza el icono predeterminado, como se muestra en la imagen del ejemplo.
Es posible mostrar el cuadro de dilogo de instalacin mediante programacin llamando al mtodo
Application.Install. Sin embargo, esto funciona solamente dentro de un controlador de eventos para un
evento iniciado por usuario y nicamente si se ha configurado correctamente la aplicacin.
Nota:
Los administradores del sistema pueden deshabilitar la capacidad para instalar aplicaciones de confianza. En

Silverlight
ese caso, cuando se intentan instalar dichas aplicaciones, la instalacin no se lleva a cabo y el mtodo Install
devuelve false.
Hay varias razones para proporcionar una experiencia de instalacin personalizada para las aplicaciones de
ejecucin fuera del explorador:
Para asegurarse de que pueda detectarse la opcin de instalacin de aplicaciones de ejecucin
fuera del explorador.
Para describir lo que se va a instalar y la duracin de la instalacin.
Para indicar si alguna funcionalidad requiere una conexin de red activa.
Los ltimos dos puntos son sobre todo importantes para las aplicaciones donde no quedan claros los
lmites entre el sitio web, la aplicacin y el contenido. Por ejemplo, se debe comunicar a los usuarios si estn
descargando una biblioteca completa de vdeos o simplemente un explorador de vdeos que requiere una
conexin de red.
Si controla el evento MouseRightButtonDown, se suprime automticamente el men contextual de la
aplicacin. En ese caso, deber proporcionar una interfaz de usuario propia para la instalacin de
aplicaciones de ejecucin fuera del explorador. Si no controla el evento MouseRightButtonDown y desea
suprimir la opcin de instalacin del men contextual, establezca la propiedad OutOfBrowserSettings.
ShowInstallMenuItem en false en la configuracin de la ejecucin fuera del explorador.
Para la instalacin de ejecucin fuera del explorador se necesita la aceptacin del usuario, de modo que el
cuadro de dilogo de instalacin no se puede deshabilitar. Sin embargo, puede tener acceso a los datos de
configuracin por medio de la propiedad Deployment.OutOfBrowserSettings si desea mostrarlo en su
propia interfaz de usuario.
No se necesitan privilegios de administrador para realizar una instalacin de ejecucin fuera del explorador.
Cuando un usuario instala una aplicacin, se coloca una copia de ella en una memoria cach de aplicacin
de ejecucin fuera del explorador situada en la carpeta de perfil del usuario. Esto significa que la aplicacin
est disponible nicamente para el usuario que la instal.
El usuario puede iniciar la aplicacin mediante los accesos directos especificados en el cuadro de dilogo de
instalacin. Los accesos directos ejecutan un programa denominado sllauncher.exe, al que pasan un
identificador nico asignado a la aplicacin de ejecucin fuera del explorador. El programa sllauncher carga
la aplicacin en una ventana para cuya creacin se utilizan las propiedades de ancho, alto y texto de la barra
de ttulo especificadas en la configuracin de la ejecucin fuera del explorador.
Para quitar una aplicacin instalada, el usuario debe iniciarla, hacer clic en ella con el botn secundario y, a
continuacin, seleccionar Quitar esta aplicacin. Asimismo, puede desinstalar la aplicacin desde
Programas y caractersticas en el Panel de control. Este procedimiento es necesario si se suprime el men
contextual de la aplicacin controlando el evento MouseRightButtonDown.
Los administradores del sistema pueden utilizar la versin de Silverlight 4 de sllauncher.exe para
automatizar la instalacin de las aplicaciones de ejecucin fuera del explorador.
Detectar la conectividad de red y el estado de ejecucin fuera del

explorador
Muchas aplicaciones basadas en Silverlight dependen de servicios basados en red o en explorador, y no
funcionan correctamente fuera del explorador. Por ejemplo, la caracterstica Deep Zoom no funcionar sin
una conexin de red y la caracterstica Puente HTML no funcionar sin una pgina web del host.
Para abordar esta limitacin, puede modificar el cdigo de la aplicacin de forma que detecte la
conectividad de red y el estado de ejecucin fuera del explorador, y proporcionar rutas de acceso de cdigo
alternativas cuando proceda. Por ejemplo, puede reemplazar el HTML basado en explorador por HTML
representado en el control WebBrowser.
Puede comprobar el estado de la conectividad de red llamando al mtodo NetworkInterface.GetIsNetwork
Available.
Para responder a los cambios de conectividad, controle el evento NetworkChange.NetworkAddress
Changed.

Silverlight
Para determinar si una aplicacin se ha instalado de modo que se ejecute fuera del explorador, compruebe
la propiedad Application.InstallState. Para responder a la instalacin de ejecucin fuera del explorador,
controle el evento Application.InstallStateChanged. Tambin puede determinar si una aplicacin se inici de
fuera del explorador comprobando la propiedad Application.IsRunningOutOfBrowser.
Lo habitual es deshabilitar todas las funcionalidades de la aplicacin que se basen en los servicios de red o
del explorador. Si la aplicacin almacena informacin de estado del usuario en su servidor del host mientras
est conectada, puede utilizar el almacenamiento aislado para almacenar en memoria cach los datos entre
dos ejecuciones de la aplicacin. A continuacin, puede responder a la disponibilidad de la red
sincronizando los datos en cach con el servidor. Asimismo, puede configurar la aplicacin de modo que
requiera confianza elevada, lo que permite a la aplicacin almacenar informacin de estado del usuario y
otros datos en el sistema de archivos local.
Puede utilizar la mensajera local para la comunicacin entre una aplicacin de ejecucin fuera del
explorador y una aplicacin hospedada en web. Sin embargo, en Internet Explorer, la mensajera local est
deshabilitada de forma predeterminada entre las aplicaciones que se ejecutan en diferentes zonas de
seguridad. Las aplicaciones hospedadas en web suelen ejecutarse dentro de la zona de Internet, mientras
que las de ejecucin fuera del explorador lo hacen en la zona confiable. Por consiguiente, para habilitar la
mensajera local en este escenario, debe establecer la propiedad LocalMessageReceiver.DisableSender
TrustCheck en true.
Caractersticas especiales para las aplicaciones de ejecucin fuera del

explorador
Las aplicaciones de ejecucin fuera del explorador que tienen Silverlight 4 como destino pueden utilizar las
siguientes caractersticas que no estn disponibles para las aplicaciones hospedadas en el explorador:
Manipulacin de la ventana. Se puede modificar la ventana de la aplicacin de ejecucin fuera del
explorador en tiempo de ejecucin. Por ejemplo, es posible modificar su tamao, mostrarla como
ventana de nivel superior y minimizar o maximizarla mediante programacin. Asimismo, es posible
controlar el evento Window.Closing, que se puede cancelar salvo cuando el equipo se est
cerrando o el usuario est cerrando la sesin. El evento Closing permite realizar acciones como
mostrar una advertencia si el usuario tiene cambios no guardados en los datos de la aplicacin.
Personalizacin de la ventana. Las aplicaciones de confianza pueden ocultar la barra de ttulo y el
borde de la ventana de la aplicacin de ejecucin fuera del explorador para proporcionar una
interfaz de usuario completamente personalizada. La clase Window proporciona API que las
aplicaciones de confianza pueden utilizar para reemplazar los botones de la barra de ttulo y
habilitar el arrastre mediante el mouse para mover o cambiar el tamao de la ventana.
Hospedaje de HTML. Es posible mostrar contenido HTML en la aplicacin de ejecucin fuera del
explorador para reemplazar la funcionalidad proporcionada por una pgina web del host. Por
ejemplo, es posible mostrar anuncios basados en HTML que normalmente se mostraran junto a la
aplicacin basada en Silverlight en una pgina web.
Ventanas de notificacin. Las aplicaciones de ejecucin fuera del explorador pueden mostrar
ventanas de notificacin temporales, similares a las que se usan en Outlook, para informar a los
usuarios de correo electrnico entrante. Las ventanas de notificacin proporcionan una
interactividad limitada con el usuario, pero pueden responder a los clics del usuario, por ejemplo,
para activar la ventana principal de la aplicacin de ejecucin fuera del explorador.
Compatibilidad con la administracin de derechos digitales para los archivos multimedia sin
conexin.
Confianza elevada. Las aplicaciones de confianza pueden integrarse con la funcionalidad nativa y
no estn sujetas a las mismas restricciones de seguridad que las aplicaciones basadas en Silverlight
normales. Por ejemplo, las aplicaciones de confianza no restringen las solicitudes web entre
dominios.
Acceso al sistema de archivos. Las aplicaciones de confianza pueden obtener acceso a los tipos
System.IO y a los tipos relacionados que, de lo contrario, no estaran disponibles para Silverlight.
Estas API proporcionan acceso directo de lectura y escritura a los archivos de las carpetas de
usuario ubicadas en el equipo local.

Silverlight
Buscar actualizaciones de la aplicacin
Si la aplicacin se ha iniciado desde fuera del explorador y la conectividad de red est disponible, puede
buscar actualizaciones de la aplicacin en el servidor del host.
Nota:
En general, solamente debe comprobarse si hay actualizaciones con el consentimiento del usuario, y se le
debe notificar cuando hay una disponible.
Para buscar y recuperar una actualizacin, llame al mtodo CheckAndDownloadUpdateAsync del

subproceso de la interfaz de usuario y controle el evento
Application.CheckAndDownloadUpdateCompleted. En el controlador de eventos, la propiedad
UpdateAvailable es true si se detect una versin ms reciente de la aplicacin y se descarg
correctamente. En este caso, puede pedir al usuario que reinicie a fin de cargar la actualizacin.
Si hay una actualizacin de la aplicacin disponible, pero utiliza una versin ms reciente de Silverlight que
el usuario no ha instalado todava, no se descargar la actualizacin. Esto tambin sucede si una
actualizacin cambia la aplicacin de modo que requiera confianza elevada. En ambos casos, el valor de la
propiedad UpdateAvailable es false y el valor de la propiedad Error es una instancia de Exception. Con un
cambio en la versin de Silverlight, la excepcin es una instancia de PlatformNotSupportedException. Con
un cambio de seguridad, la excepcin es una instancia de SecurityException. Cuando esto sucede, puede
pedir al usuario que abra el sitio web del host de la aplicacin, a fin de activar la experiencia de la
actualizacin de Silverlight basada en HTML.
Silverlight 4 admite ejecutar las aplicaciones de ejecucin fuera del explorador con confianza elevada. Las
aplicaciones de confianza no pueden utilizar el mecanismo de actualizacin descrito en esta seccin, a
menos que la aplicacin y la actualizacin se hayan firmado con el mismo certificado vlido de firma de
cdigo. Para actualizar una aplicacin de confianza sin firma vlida, los usuarios deben desinstalar la versin
anterior e instalar manualmente la nueva versin.
Depurar aplicaciones de ejecucin fuera del explorador

Visual Studio 2010 y Silverlight 4 proporcionan compatibilidad adicional con la depuracin de las
aplicaciones de ejecucin fuera del explorador.
En Visual Studio, en la pgina Depuracin del Diseador de proyectos, puede seleccionar Aplicacin de
ejecucin fuera del explorador instalada como Accin de inicio. A continuacin, cuando comience la
depuracin, Visual Studio iniciar la aplicacin de ejecucin fuera del explorador y adjuntar
automticamente el depurador. Para utilizar esta caracterstica, es preciso ejecutar e instalar primero la
aplicacin desde el explorador. Si hay un proyecto web en la solucin, tambin se debe establecer el
proyecto de Silverlight como proyecto de inicio.
Silverlight 4 proporciona compatibilidad con la lnea de comandos nicamente para la depuracin en
Windows. Se puede utilizar sllauncher.exe para ejecutar un archivo XAP en una ventana de ejecucin fuera
del explorador como si estuviera instalado. A continuacin, se puede adjuntar un depurador al proceso de la
ventana de ejecucin fuera del explorador.
Para ejecutar un archivo XAP en una ventana de ejecucin fuera del explorador, utilice la siguiente lnea de
comandos: sllauncher /emulate: nombreDeArchivoXap /origin: uri
El parmetro de origen indica el identificador URI del sitio de origen de la aplicacin. Es necesario para
asignar privilegios de seguridad, como acceso al almacenamiento aislado. Asimismo, proporciona un
identificador URI base que la aplicacin puede utilizar para resolver los identificadores URI relativos, obtener
acceso a los recursos remotos y realizar actualizaciones.
El programa sllauncher.exe se encuentra en una de las siguientes ubicaciones:
En sistemas operativos de 32 bits: C:\Program Files\Microsoft Silverlight
En sistemas operativos de 64 bits: C:\Program Files (x86)\Microsoft Silverlight

Silverlight
3.6.1. Cmo: Configurar una aplicacin para la compatibilidad con la ejecucin

fuera del explorador
Visual Studio proporciona compatibilidad en el diseador para permitir que las aplicaciones basadas en
Silverlight se ejecuten fuera del explorador. En este tema se describen la compatibilidad del diseador y los
fundamentos de la configuracin de la ejecucin fuera del explorador.
Nota:
Si una aplicacin de ejecucin fuera del explorador requiere los recursos de red que normalmente se cargan
despus del inicio, tambin necesitar implementar la compatibilidad sin conexin.
Para configurar la compatibilidad con la ejecucin fuera del explorador

1. En el Explorador de soluciones, seleccione el proyecto Silverlight para el que desea habilitar la
compatibilidad con la ejecucin fuera del explorador.
2. En el men Proyecto, seleccione Propiedades de nombre de proyecto.
3. En la pestaa Silverlight, seleccione Habilitar la ejecucin de aplicacin fuera del explorador.
4. Haga clic en Configuracin de la ejecucin fuera del explorador.
Aparece el cuadro de dilogo Configuracin de la ejecucin fuera del explorador.
5. Especifique los valores de los campos indicados y, a continuacin, haga clic en Aceptar. Todos los
campos son opcionales salvo los siguientes:
o Ttulo de la ventana
o Nombre del acceso directo
o Descripcin de la aplicacin
En la tabla siguiente se indica dnde se usa cada valor y la propiedad correspondiente de la clase Window
Settings o OutOfBrowserSettings.
Campo Descripcin Propiedad

Aparece en la barra de ttulo de la ventana de la aplicacin de
Ttulo de la ventana Title
ejecucin fuera del explorador.
Indica las dimensiones iniciales de la ventana de la aplicacin
Ancho y alto Width y Height
con ejecucin fuera del explorador.
Establecer ubicacin de Indica si la posicin inicial de la ventana de la aplicacin con
WindowStartup
la ventana ejecucin fuera del explorador estar centrada o se colocar
Location
manualmente segn los valores Superior e Izquierda especificados.
Indica la ubicacin inicial de la ventana de la aplicacin con
ejecucin fuera del explorador. Estos campos estn
Superior e Izquierda Top y Left
deshabilitados si no selecciona Establecer ubicacin de la
ventana manualmente.
Aparece en el cuadro de dilogo de instalacin de la aplicacin
Nombre del acceso
de ejecucin fuera del explorador y en el acceso directo o ShortName
directo
accesos directos de la aplicacin instalada.
Descripcin de la Aparece como una informacin sobre herramientas en los
Blurb
aplicacin accesos directos de la aplicacin instalada.
El sistema operativo elige el icono ms adecuado para las
ubicaciones siguientes:
Cuadro de dilogo de instalacin.
Campos de icono Ventana de la aplicacin. Icons
Explorador de Windows.
Barra de tareas de Windows.
Barra de acoplamiento de Macintosh.
Indica si el rendimiento de grficos se ha mejorado mediante la EnableGPU
Usar aceleracin GPU
aceleracin de hardware. Acceleration

Silverlight
Mostrar men de Indica si la opcin de instalacin debe aparecer en el men ShowInstall

instalacin contextual de la aplicacin. MenuItem
Requerir confianza
Indica si la aplicacin se ejecuta con restricciones de seguridad
elevada al ejecutar fuera SecuritySettings
relajadas.
del explorador
Indica la apariencia de la barra de ttulo y el borde de la ventana
Estilo de ventana WindowStyle
de la aplicacin con ejecucin fuera del explorador.
Si no especifica los valores Ancho y Alto, la ventana de la aplicacin usar un tamao predeterminado de
800x600.
Si no se especifican iconos, se usarn los iconos predeterminados. Si especifica los iconos, debera
especificar uno para cada tamao indicado en el diseador (16x16, 32x32, 48x48 y 128x128).
Los iconos deben ser archivos .png agregados al proyecto que tengan como Accin de compilacin el
valor Contenido. Adems, los archivos .png deben ser de las dimensiones indicadas. El sistema operativo
elegir el tamao ms adecuado dependiendo de cada situacin. Si no se puede cargar un icono adecuado,
aparecer el predeterminado.
Nota:
Silverlight 3 no admite las propiedades siguientes:
WindowStartupLocation
Top
Left
SecuritySettings
WindowStyle
Ejemplo
Los valores del cuadro de dilogo Configuracin de la ejecucin fuera del explorador se usan para
generar un archivo OutOfBrowserSettings.xml en la carpeta Propiedades del proyecto (Mi proyecto en
Visual Basic). Cualquier cambio en este archivo se refleja en el diseador. Este archivo se usa para incluir los
valores especificados en el manifiesto de aplicacin (AppManifest.xaml).
Para configurar una aplicacin existente para la compatibilidad con la ejecucin fuera del explorador sin
volver a compilar, agregue el XML de configuracin al manifiesto en un archivo .xap existente. Para ello,
copie el elemento de propiedad Deployment.OutOfBrowserSettings del cdigo de ejemplo siguiente en el
archivo de manifiesto y, a continuacin, actualice los valores.
Como alternativa al uso del diseador, puede especificar la configuracin de ejecucin fuera del explorador
rellenando la plantilla de manifiesto (AppManifest.xml en la carpeta Propiedades o Mi proyecto), como se
muestra en el ejemplo siguiente. De forma predeterminada, la compilacin usa la plantilla de manifiesto
para generar el manifiesto de aplicacin. Sin embargo, el XML de plantilla es ms fcil de usar en Visual
Studio.
Nota:
Si usa el cuadro de dilogo Configuracin de la ejecucin fuera del explorador, no puede especificar la
configuracin de la ejecucin fuera del explorador en el manifiesto de aplicacin o en la plantilla de
manifiesto. Si lo hace, se crear informacin duplicada en el manifiesto. Se generar un error al intentar
ejecutar la aplicacin.
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
<Deployment.Parts>
</Deployment.Parts>
<Deployment.OutOfBrowserSettings>
<OutOfBrowserSettings
ShortName="Out-of-Browser Application"
EnableGPUAcceleration="True"
ShowInstallMenuItem="True">
<OutOfBrowserSettings.Blurb>
Demonstrates the out-of-browser feature.
</OutOfBrowserSettings.Blurb>
<OutOfBrowserSettings.Icons>

Silverlight
<Icon Size="16,16">icons/16x16.png</Icon>
</OutOfBrowserSettings.Icons>
<OutOfBrowserSettings.WindowSettings>
<WindowSettings
Title="Out-of-Browser Example"
Height="600" Width="600"
Left="0" Top="0" WindowStartupLocation="Manual"
WindowStyle="SingleBorderWindow"/>
</OutOfBrowserSettings.WindowSettings>
<OutOfBrowserSettings.SecuritySettings>
<SecuritySettings ElevatedPermissions="Required" />
</OutOfBrowserSettings.SecuritySettings>
</OutOfBrowserSettings>
</Deployment.OutOfBrowserSettings>
</Deployment>
3.6.2. Cmo: Implementar la compatibilidad sin conexin con las aplicaciones

de ejecucin fuera del explorador
En este tema se demuestra cmo implementar los escenarios comunes siguientes para las aplicaciones de
ejecucin fuera del explorador de Silverlight:
Determinar si una aplicacin se ha instalado o se ejecuta fuera del explorador. Esto permite llevar a
cabo acciones tales como mostrar personalizaciones de marca que suelen mostrarse mediante
HTML. En el ejemplo de este tema se usa esta informacin para ocultar un botn de instalacin o
mostrar un indicador de estado de red.
Determinar si hay una conexin de red disponible. Esto permite deshabilitar la funcionalidad
dependiente de la red o proporcionar alternativas a los recursos basados en red o en explorador.
En el ejemplo de este tema se usa esta informacin para actualizar un indicador de conectividad de
red, y mostrar u ocultar un botn de actualizacin.
Determinar si hay actualizaciones disponibles para la aplicacin. Si se dispone de una conexin, se
pueden comprobar y descargar las nuevas versiones de una aplicacin, y advertir a los usuarios que
reinicien sus equipos. En el ejemplo de este tema se proporciona una demostracin bsica de esta
capacidad.
Es posible realizar cambios arbitrarios en el aspecto y comportamiento de una aplicacin cuando se ejecuta
fuera del explorador. Sin embargo, en la mayora de los casos, una aplicacin se debera cambiar lo menos
posible. De esta manera, los usuarios no tendrn que aprender una nueva interfaz de usuario. Sin embargo,
si la aplicacin usa recursos de la red, se debera mostrar siempre el estado de conectividad de red en la
interfaz de usuario.
En el ejemplo, el XAML especifica una interfaz de usuario que muestra un indicador de estado de red, un
botn de instalacin, un botn de actualizacin y varios controles TextBlock. Los bloques de texto estn
enlazados a la configuracin de la ejecucin fuera del explorador, que se muestra en el cdigo XML incluido
al final de este tema. Puede copiar esta configuracin en el cuadro de dilogo Configuracin de la
ejecucin fuera del explorador en Visual Studio. Como alternativa, puede habilitar la compatibilidad con la
ejecucin fuera del explorador en Visual Studio y, a continuacin, copiar el XML en el archivo
OutOfBrowserSettings.xml de su proyecto.
El cdigo subyacente establece el valor DataContext que usan los enlaces y administra los distintos eventos
que son necesarios para actualizar la interfaz de usuario.
Cuando ejecute este ejemplo, haga clic en el botn de instalacin o use la opcin de men que aparece al
hacer clic con el botn secundario para instalar. Observe que el botn de instalacin desaparece despus de
la instalacin. Puede hacer clic con el botn secundario en la aplicacin de ejecucin fuera del explorador o
en la aplicacin basada en Web para desinstalar. Sin embargo, el botn de instalacin solo reaparecer si se
realiza la desinstalacin desde la aplicacin basada en Web. Esto se debe a que la aplicacin de ejecucin
fuera del explorador ya no tiene ninguna conexin con la versin basada en Web. Si realiza la desinstalacin
desde la aplicacin de ejecucin fuera del explorador, el botn de instalacin no reaparecer hasta que
actualice la pgina web.

Silverlight
Puede probar el indicador de conectividad de red en la aplicacin de ejecucin fuera del explorador si la
desconecta y la vuelve a conectar a la red. Observe que el botn de actualizacin desaparece cuando la
conexin no est disponible.
Para probar el botn de actualizacin, debera incluir un proyecto de aplicacin web en su solucin
Silverlight. Despus de instalar la aplicacin, modifique y recompile la solucin en Visual Studio, y, a
continuacin, haga clic en el botn de instalacin para descargar la actualizacin.
<UserControl x:Class="OutOfBrowser.MainPage"
<StackPanel x:Name="LayoutRoot" Background="White" Margin="20">
<TextBlock x:Name="networkIndicator" FontWeight="Bold" FontSize="20"/>
<Button x:Name="installButton" Content="install"
HorizontalAlignment="Left" Margin="0,10" Padding="10,5"
Click="installButton_Click"/>
<Button x:Name="updateButton" Content="check for update"
HorizontalAlignment="Left" Margin="0,10" Padding="10,5"
Click="updateButton_Click"/>
<TextBlock Text="ShortName = " FontWeight="Bold"/>
<TextBlock Text="{Binding ShortName}"/>
</StackPanel>
<TextBlock Text="Blurb = " FontWeight="Bold"/>
<TextBlock Text="{Binding Blurb}"/>
</StackPanel>
<TextBlock Text="WindowSettings.Title = " FontWeight="Bold"/>
<TextBlock Text="{Binding WindowSettings.Title}"/>
</StackPanel>
<TextBlock Text="WindowSettings.Height = " FontWeight="Bold"/>
<TextBlock Text="{Binding WindowSettings.Height}"/>
</StackPanel>
<TextBlock Text="WindowSettings.Width = " FontWeight="Bold"/>
<TextBlock Text="{Binding WindowSettings.Width}"/>
</StackPanel>
<TextBlock Text="IsRunningOutOfBrowser = " FontWeight="Bold"/>
<TextBlock x:Name="isRunningOutOfBrowserTextBlock"/>
</StackPanel>
<TextBlock Text="InstallState = " FontWeight="Bold"/>
<TextBlock x:Name="installStateTextBlock"/>
</StackPanel>
</StackPanel>
</UserControl>
Imports System
Imports System.Net.NetworkInformation
Partial Public Class MainPage

Private WithEvents app As Application = Application.Current
Public Sub New()

LayoutRoot.DataContext = Deployment.Current.OutOfBrowserSettings
UpdateUI()
AddHandler NetworkChange.NetworkAddressChanged, AddressOf UpdateNetworkIndicator
End Sub
Private Sub App_InstallStateChanged(ByVal sender As Object, ByVal e As EventArgs) Handles app.InstallStateChanged

UpdateUI()
End Sub
Private Sub UpdateUI()

UpdateNetworkIndicator()
If app.InstallState = InstallState.NotInstalled Then
installButton.Visibility = Visibility.Visible
Else
installButton.Visibility = Visibility.Collapsed

Silverlight
End If
If app.IsRunningOutOfBrowser Then
updateButton.Visibility = Visibility.Visible
Else
updateButton.Visibility = Visibility.Collapsed
End If
isRunningOutOfBrowserTextBlock.Text = app.IsRunningOutOfBrowser.ToString()
installStateTextBlock.Text = app.InstallState.ToString()
End Sub
Private Sub UpdateNetworkIndicator()

If app.IsRunningOutOfBrowser Then
networkIndicator.Visibility = Visibility.Visible
Else
networkIndicator.Visibility = Visibility.Collapsed
End If
Dim online As Boolean = NetworkInterface.GetIsNetworkAvailable()
If online Then
networkIndicator.Text = "ONLINE"
updateButton.Visibility = Visibility.Visible
Else
networkIndicator.Text = "OFFLINE"
updateButton.Visibility = Visibility.Collapsed
End If
End Sub
Private Sub installButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

Try
app.Install()
Catch ex As InvalidOperationException
MessageBox.Show("The application is already installed.")
End Try
End Sub
Private Sub updateButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

app.CheckAndDownloadUpdateAsync()
End Sub
Private Sub App_CheckAndDownloadUpdateCompleted(ByVal sender As Object, _

ByVal e As CheckAndDownloadUpdateCompletedEventArgs) _
Handles app.CheckAndDownloadUpdateCompleted
If e.UpdateAvailable Then
MessageBox.Show("An application update has been downloaded. " & _
"Restart the application to run the new version.")
ElseIf e.Error IsNot Nothing AndAlso _
TypeOf e.Error Is PlatformNotSupportedException Then
MessageBox.Show("An application update is available, " & _
"but it requires a new version of Silverlight. " & _
"Visit the application home page to upgrade.")
Else
MessageBox.Show("There is no update available.")
End If
End Sub
End Class
<OutOfBrowserSettings ShortName="Out-of-Browser Demo"

EnableGPUAcceleration="False" ShowInstallMenuItem="True">
<OutOfBrowserSettings.Blurb>
This application demonstrates Silverlight's out-of-browser support.
</OutOfBrowserSettings.Blurb>
<OutOfBrowserSettings.WindowSettings>
<WindowSettings Title="Silverlight Out-of-Browser Demonstration"
Height="250" Width="500" />
</OutOfBrowserSettings.WindowSettings>
<OutOfBrowserSettings.Icons />
</OutOfBrowserSettings>
3.6.3. Aplicaciones de confianza

De forma predeterminada, las aplicaciones basadas en Silverlight se ejecutan con confianza parcial, lo que
significa que se ejecutan en un espacio aislado de seguridad. Las aplicaciones en espacio aislado tienen
acceso restringido al equipo local, adems de tener otras restricciones que ayudan a evitar
comportamientos malintencionados.
En algunos casos, estas restricciones evitan escenarios tiles o necesarios, sobre todo para las aplicaciones
de lnea de negocio. Sin embargo, es posible configurar aplicaciones de ejecucin fuera del explorador de

Silverlight
modo que requieran confianza elevada. Despus de la instalacin, estas aplicaciones de confianza pueden
omitir algunas de las restricciones del espacio aislado de seguridad. Por ejemplo, las aplicaciones de
confianza pueden obtener acceso a los archivos de usuario y utilizar el modo de pantalla completa sin
restricciones de teclado.
Se puede utilizar el diseador de proyectos de Visual Studio para configurar una aplicacin de modo que
requiera confianza elevada. El diseador establece el valor apropiado en el manifiesto de aplicacin.
Asimismo, es posible actualizar el manifiesto de una aplicacin existente sin recompilar. Sin embargo,
normalmente hay que modificar su funcionalidad para poder aprovechar la confianza elevada.
Cuando se instala una aplicacin de ejecucin fuera del explorador que requiere confianza elevada, aparece
una advertencia de seguridad en lugar del cuadro de dilogo de instalacin predeterminado. Esta
advertencia indica que la aplicacin puede obtener acceso a los datos del usuario y que debe instalarse
nicamente desde un sitio web de confianza. Una vez instalada, la aplicacin se comporta como una
aplicacin de ejecucin fuera del explorador normal, con la excepcin de lo descrito en este tema.
La advertencia de seguridad vara dependiendo de si la aplicacin tiene una firma digital vlida. Las
aplicaciones sin firmas vlidas (tambin denominadas aplicaciones no comprobadas) presentan un mayor
riesgo para la seguridad, por lo que la advertencia destaca ms. En las siguientes imgenes, se muestra la
advertencia de seguridad para una aplicacin antes y despus de que se agregue una firma digital.
Advertencia de seguridad para una aplicacin no comprobada
Advertencia de seguridad para una aplicacin comprobada
La mayora de la documentacin de Silverlight se ha escrito suponiendo que todas las aplicaciones son
aplicaciones en espacio aislado que se hospedan en un explorador. En este tema, se describe en qu se
diferencian las aplicaciones de confianza de las aplicaciones en espacio aislado. En concreto, se describen
las capacidades habilitadas por la confianza elevada y se explica cmo determinar si una aplicacin se
ejecuta con confianza elevada.
Nota:
Si bien las aplicaciones de confianza se ejecutan con privilegios de seguridad elevados, no tienen las mismas
capacidades que las aplicaciones de escritorio que se ejecutan con plena confianza. Esto ayuda a mantener
la compatibilidad con varias plataformas. Si se necesita un acceso no restringido al equipo del usuario, o se
precisan otras capacidades adems de las proporcionadas por Silverlight, puede ser conveniente utilizar
Windows Presentation Foundation (WPF). Como alternativa, se puede hospedar el complemento Silverlight

Silverlight
dentro de otra aplicacin.
Restricciones flexibles de acceso entre dominios

Las aplicaciones de confianza pueden realizar comunicaciones a travs de la red y mediante sockets sin
estar sujetas a restricciones de acceso entre dominios y esquemas. Por ejemplo, una aplicacin instalada
desde un subdominio mediante el protocolo HTTP puede tener acceso a los archivos multimedia de otro
subdominio mediante el protocolo HTTPS.
Adems, las aplicaciones de confianza pueden utilizar las clases de conexin de red del espacio de nombres
System.Net.Sockets con comprobaciones de directivas flexibles. Estas clases incluyen las nuevas clases
UdpAnySourceMulticastClient y UdpSingleSourceMulticastClient.
Las aplicaciones de confianza pueden crear una conexin TCP a cualquier puerto en cualquier host sin la
necesidad de un archivo de directivas entre dominios. El puerto de destino ya no tiene que pertenecer al
intervalo 4502-4534. De forma similar, las aplicaciones de confianza que usan las clases
UdpAnySourceMulticastClient y UdpSingleSourceMulticastClient pueden unirse a cualquier grupo de
multidifusin en cualquier puerto igual o mayor que 1024 sin que un respondedor de directivas tenga que
autorizar la conexin.
Requisitos flexibles de consentimiento del usuario

Las aplicaciones en espacio aislado requieren el consentimiento del usuario para obtener acceso a la
funcionalidad proporcionada por el valor StaysFullScreenWhenUnfocused de la propiedad Content.
FullScreenOptions y las clases Clipboard, AudioSink y VideoSink. Las aplicaciones de confianza no requieren
el consentimiento del usuario, excepto cuando obtienen acceso a la funcionalidad AudioSink (micrfono) y
VideoSink (cmara).
Requisitos flexibles de iniciacin por parte del usuario

Varias caractersticas de Silverlight requieren que su uso sea una respuesta a acciones iniciadas por el
usuario, como los eventos Click de los botones. Asimismo, estas caractersticas deben usarse en menos de
un segundo despus de la accin iniciada por el usuario. Este requisito es una caracterstica de seguridad
para evitar que las aplicaciones suplanten las funciones del sistema operativo.
Las aplicaciones de confianza pueden utilizar la mayora de estas caractersticas sin una accin iniciada por
el usuario. Por ejemplo, se puede entrar en el modo de pantalla completa en un controlador de eventos
Application.Startup o escribir en el objeto Clipboard despus de una larga operacin de formato.
Compatibilidad con pantalla completa

Tal y como se ha mencionado en las secciones anteriores, las aplicaciones de confianza pueden entrar y
permanecer en modo de pantalla completa sin una accin iniciada por el usuario o sin el consentimiento del
usuario. Las aplicaciones de confianza tambin pueden usar el valor StaysFullScreenWhenUnfocused de la
propiedad Content.FullScreenOptions.
Adems, las aplicaciones de confianza que entren en el modo de pantalla completa no mostrarn el
mensaje "Presione ESC para salir del modo de pantalla completa". Las aplicaciones de confianza no
interceptan automticamente las pulsaciones de tecla ni tienen restricciones de teclado en el modo de
pantalla completa.
Una de las consecuencias del cambio en las restricciones de teclado consiste en que, al presionar ESC, el
usuario no sale del modo de pantalla completa en las aplicaciones de confianza. Esto permite utilizar la tecla
ESC para otra funcionalidad. Sin embargo, es preciso proporcionar una interfaz de usuario propia para salir
del modo de pantalla completa.
Compatibilidad con la personalizacin de la ventana

Las aplicaciones de confianza pueden ocultar la barra de ttulo y el borde de la ventana de la aplicacin de
ejecucin fuera del explorador para proporcionar una interfaz de usuario completamente personalizada.
Cuando se ocultan la barra de ttulo y el borde, Silverlight muestra solamente el contenido de la aplicacin
sobre un fondo blanco. Dado que el fondo no es transparente, no se puede utilizar esta caracterstica para
crear aplicaciones de formas irregulares. Sin embargo, existe la opcin de utilizar esquinas redondeadas,
que tienen un radio de 9 pxeles.

Silverlight
Para reemplazar la funcionalidad proporcionada por la barra de ttulo y el borde, puede utilizar las API de la
clase Window. Para que los usuarios puedan arrastrar la ventana o los bordes de la ventana, utilice los
mtodos DragResize y DragMove. Tambin puede ajustar el tamao y la posicin de la ventana mediante
las propiedades Left, Top, Width y Height. Para que los usuarios puedan minimizar y maximizar la ventana,
utilice la propiedad WindowState. Para que los usuarios puedan cerrar la ventana, utilice el mtodo Close.
Acceso al sistema de archivos

Las aplicaciones de confianza pueden obtener acceso a los tipos System.IO y a los tipos relacionados que,
de lo contrario, no estaran disponibles. De este modo, es posible obtener acceso directo a los archivos del
usuario sin utilizar las clases SaveFileDialog y OpenFileDialog. Sin embargo, se puede obtener acceso
nicamente a los archivos ubicados en las carpetas del usuario, en concreto, las carpetas MyDocuments,
MyMusic, MyPictures y MyVideos.
Nota:
Estas carpetas son distintas de las bibliotecas de Windows 7 denominadas Documentos, Msica, Imgenes y
Vdeos. Estas carpetas de biblioteca suelen combinar el contenido de las carpetas del usuario con el de otras
carpetas, como carpetas multimedia compartidas. Sin embargo, las aplicaciones de confianza no pueden
obtener acceso a carpetas que no sean del usuario, salvo a travs de las clases SaveFileDialog y
OpenFileDialog.
Es preciso utilizar el mtodo Environment.GetFolderPath para obtener las rutas de acceso a las carpetas del
usuario. No se pueden especificar directamente estas rutas de acceso.
En la siguiente tabla, se muestran las clases del espacio de nombres System.IO que las aplicaciones de
confianza pueden utilizar. Tambin se indica qu miembros de cada clase no se admiten.
Clase Miembros que no se admiten

GetCurrentDirectory
Directory GetDirectoryRoot
SetCurrentDirectory
Root
DirectoryInfo
MoveTo
File SetAttributes
FileInfo (Se admiten todos los miembros.)
BeginRead
BeginWrite
CanRead
FileStream CanSeek
CanWrite
EndRead
EndWrite
GetTempFileName
Path
GetTempPath
StreamReader Constructores que toman un argumento Stream
StreamWriter Constructores que toman un argumento Stream
Integracin nativa
Las aplicaciones de confianza pueden obtener acceso a algunas de las capacidades del sistema operativo
nativo. Por ejemplo, en Windows, las aplicaciones de confianza pueden utilizar las caractersticas de
automatizacin y obtener acceso o manipular los componentes expuestos por el conjunto de Office y otras
aplicaciones.
Determinar si una aplicacin es de confianza

Para determinar si una aplicacin se ejecuta con confianza elevada, compruebe la propiedad HasElevated
Permissions. Esto es til para proporcionar rutas de acceso alternativas al cdigo cuando una aplicacin se
ejecuta con confianza parcial (por ejemplo, cuando se ejecuta en el explorador).
Consideraciones de seguridad

Silverlight
Si bien las aplicaciones de confianza no tienen acceso total al equipo host, pueden obtener acceso a los
datos personales y causar daos. Por consiguiente, se han de tratarlas como aplicaciones de plena confianza
a la hora de realizar evaluaciones de seguridad y auditoras. Para evitar que los usuarios instalen o ejecuten
aplicaciones de confianza, los administradores del sistema pueden utilizar los valores de la directiva de
equipo para denegar el acceso, tal y como se describe en la seccin "Restricciones de directiva para la
confianza elevada" que figura en este tema.
Las aplicaciones de confianza se ejecutan con privilegios de usuario, incluso si las instalan usuarios con
privilegios de administrador. Sin embargo, las aplicaciones de confianza se pueden ejecutar con privilegios
elevados durante la depuracin en la fase de desarrollo, por lo que es necesario asegurarse de que las
pruebas se realicen en consecuencia.
Silverlight ejecuta todo el cdigo de aplicacin en una instancia de AppDomain que tiene un conjunto
uniforme de privilegios (aplicaciones de confianza o en espacio aislado). Es responsabilidad de los
desarrolladores de una aplicacin comprobar y validar cualquier componente externo que se agregue a la
aplicacin.
Las aplicaciones de ejecucin fuera del explorador son tan seguras como los sitios web donde se hospedan.
Por consiguiente, los usuarios deben basarse en la seguridad del sitio host al instalar o actualizar una
aplicacin de ejecucin fuera del explorador. En la siguiente lista, se describen algunas de las acciones que
se pueden realizar para ayudar a mejorar la seguridad.
Firme las aplicaciones tal y como se describe en la seccin "Firma de aplicaciones" que figura en
este tema.
Si la aplicacin obtiene acceso a recursos de su servidor host, deber comprobar que el valor de la
propiedad SilverlightHost.Source se corresponde con el identificador URI del sitio de origen
esperado.
Si la aplicacin trata informacin confidencial o carga cdigo adicional del servidor, se debe usar
HTTPS para el identificador URI de la aplicacin y para las comunicaciones seguras. Observe que
siempre se utiliza el identificador URI (incluido el protocolo) de la aplicacin original cuando se
comprueba si hay actualizaciones.
Las aplicaciones de ejecucin fuera del explorador pueden tener acceso a los recursos de la red por
HTTPS cuando hay una conexin disponible. Los certificados expirados o no vlidos darn lugar a
errores en las llamadas de conexin de red. Sin embargo, hoy en da, no hay ningn indicador
integrado de la presencia de un canal seguro. Para aumentar la confianza del usuario, considere la
posibilidad de proporcionar un indicador propio.
Firma de aplicaciones
Agregar una firma digital a una aplicacin de confianza es un paso importante para ayudar a proteger la
aplicacin y aumentar la confianza del usuario durante la instalacin. Adems, solamente las aplicaciones de
confianza con firmas digitales vlidas pueden utilizar el mecanismo de actualizacin de ejecucin fuera del
explorador. Para actualizar una aplicacin de confianza sin firma vlida, los usuarios deben desinstalar la
versin anterior e instalar manualmente la nueva versin.
Para agregar una firma digital a una aplicacin de confianza, utilice la utilidad SignTool.exe con un
certificado de firma de cdigo Authenicode X.509. Por ejemplo, puede utilizar la siguiente lnea de
comandos: signtool sign /v /f archivoDeCertificado.pfx archivoQueSeVaAFirmar
La firma de cdigo es relevante nicamente para las aplicaciones de confianza. Silverlight comprueba la
firma y el certificado cuando el usuario instala o actualiza la aplicacin. Una aplicacin de confianza se
puede instalar sin firma vlida. Sin embargo, Silverlight evita que las aplicaciones de confianza se actualicen,
a menos que la aplicacin original y la actualizacin estn firmadas con el mismo certificado de firma de
cdigo vlido y comprobado. Adems, el certificado no puede haber expirado en el momento de la
actualizacin. Asegrese de tener en cuenta la fecha de expiracin del certificado a la hora de planear la
implementacin y la actualizacin.
Nota:
Silverlight no evita las actualizaciones de la aplicacin cuando el host del sitio de origen es localhost o
127.0.0.1. Esto permite probar el cdigo de actualizacin sin firma digital.

Silverlight
Restricciones de directiva para la confianza elevada

Los administradores del sistema pueden configurar los equipos para evitar que los usuarios instalen o
ejecuten aplicaciones de ejecucin fuera del explorador que requieren confianza elevada.
Si est deshabilitada la instalacin de aplicaciones de confianza, cualquier intento de instalar este tipo de
aplicaciones no surtir efecto. En este caso, las aplicaciones de confianza ya instaladas (o instaladas por el
administrador) funcionarn correctamente.
Si est deshabilitada la ejecucin de aplicaciones de confianza y se intenta ejecutar alguna, se mostrar una
ventana de aplicacin de ejecucin fuera del explorador en blanco. Si est deshabilitada la ejecucin de
aplicaciones de confianza, normalmente tambin est deshabilitada la instalacin.
Notas de la versin
Silverlight 3 no admite aplicaciones de confianza.
3.6.3.1. Cmo: Obtener acceso al sistema de archivos local en aplicaciones de

confianza
Las aplicaciones de confianza pueden obtener acceso a los tipos System.IO y a los tipos relacionados que,
de lo contrario, no estaran disponibles. De este modo, es posible obtener acceso directo a los archivos del
usuario sin utilizar las clases SaveFileDialog y OpenFileDialog. Sin embargo, se puede obtener acceso
nicamente a los archivos ubicados en las carpetas del usuario, en concreto, las carpetas MyDocuments,
MyMusic, MyPictures y MyVideos.
Nota:
Estas carpetas son distintas de las bibliotecas de Windows 7 denominadas Documentos, Msica, Imgenes y
Vdeos. Estas carpetas de biblioteca suelen combinar el contenido de las carpetas del usuario con el de otras
carpetas, como carpetas multimedia compartidas. Sin embargo, las aplicaciones de confianza no pueden
obtener acceso a carpetas que no sean del usuario, salvo a travs de las clases SaveFileDialog y
OpenFileDialog.
En el tema siguiente se muestra cmo tener acceso a archivos de las carpetas de usuario y se enumeran las
API expuestas para su uso en aplicaciones de confianza.
Nota:
Las aplicaciones de confianza no se admiten en Silverlight 3.
Procedimientos
Para tener acceso a archivos de carpetas de usuario
Use las API compatibles como hara en el marco de escritorio, pero emplee los valores indicados
previamente de la enumeracin System.Environment.SpecialFolder para construir las rutas de
acceso. En el ejemplo siguiente se muestra el uso necesario.
Private Sub TestIO()
If (Application.Current.HasElevatedPermissions) Then
Dim myDocuments As String = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments)
Dim filename As String = "test.txt"
Dim path As String = System.IO.Path.Combine(myDocuments, filename)
If File.Exists(path) Then
Dim contents As String = File.ReadAllText(path)
MessageBox.Show(contents)
End If
End If
End Sub
3.6.3.2. Cmo: Usar la automatizacin en aplicaciones de confianza

Las aplicaciones de confianza pueden integrarse con alguna funcionalidad nativa del sistema operativo host.
En Silverlight 4, esta integracin nativa incluye la capacidad de tener acceso a las API de Automatizacin en
sistemas operativos Windows.

Silverlight
La automatizacin es una tecnologa que las aplicaciones emplean para exponer funcionalidad a las
herramientas de scripting y otras aplicaciones. Por ejemplo, puede usar Automatizacin para agregar
caractersticas de Office a sus aplicaciones basadas en Silverlight.
Una aplicacin o un componente que expone API de Automatizacin se denomina un servidor de
automatizacin, mientras que una aplicacin que tiene acceso a estas API se denomina un cliente de
automatizacin. En el tema siguiente se describe cmo permitir que las aplicaciones basadas en Silverlight
funcionen como clientes de automatizacin.
Nota:
Solo las aplicaciones de confianza con ejecucin fuera del explorador que se ejecutan en Windows pueden
tener acceso a las API de Automatizacin, y solo las expuestas por componentes o aplicaciones que ya estn
instalados.
Para determinar si Automatizacin est disponible

Use la propiedad AutomationFactory.IsAvailable como se muestra en el ejemplo de cdigo
siguiente. La propiedad IsAvailable indica si la aplicacin es de confianza y se est ejecutando fuera
del explorador en un sistema operativo Windows.
Public Sub New()
If AutomationFactory.IsAvailable Then
' Use Outlook on a background thread to keep the UI responsive.
Dim worker As New BackgroundWorker()
AddHandler worker.DoWork,
Sub(sender, e)
If InitializeOutlook() Then
SearchEmail()
Else : Dispatcher.BeginInvoke(
Sub()
MessageBox.Show("Outlook is not available.")
End Sub)
End If
End Sub
worker.RunWorkerAsync()
Else : MessageBox.Show("Automation is not available.")
End If
End Sub
Para crear o recuperar un objeto de automatizacin

Llame al mtodo AutomationFactory.GetObject o AutomationFactory.CreateObject con un
identificador de programacin (ProgID) que indique el servidor de automatizacin que se va a usar.
Estos mtodos producen una excepcin NotSupportedException si Automatizacin no est
disponible y Exception si el servidor de automatizacin especificado no est disponible.
En general, CreateObject iniciar una nueva instancia del servidor de automatizacin y GetObject
recuperar la instancia iniciada ms recientemente. Sin embargo, el comportamiento exacto de
CreateObject y GetObject difiere para los distintos componentes, por lo que debe examinar la
documentacin del componente y probar su uso detenidamente.
El ejemplo de este tema busca en la bandeja de entrada de Outlook del usuario. Es necesario que
Outlook est abierto, por lo que el cdigo siguiente intenta recuperar primero una instancia en
ejecucin llamando a GetObject. Si se produce una excepcin, el cdigo intenta abrir Outlook
llamando a CreateObject y mostrando la bandeja de entrada del usuario. Si se produce una
segunda excepcin, puede que Outlook no est instalado.
La referencia al servidor de automatizacin se almacena en una variable de tipo Object en Visual
Basic y de tipo dynamic en C#. Esto es necesario porque la informacin de tipos no est disponible
hasta el tiempo de ejecucin. Sin embargo, la falta de informacin de tipos tambin impide el uso
de IntelliSense y la depuracin en tiempo de compilacin, lo que aumenta an ms la importancia
de la documentacin del componente.
Private outlook As Object
Private Function InitializeOutlook() As Boolean
Try
' If GetObject throws an exception, then Outlook is
' either not running or is not available.

Silverlight
outlook = AutomationFactory.GetObject("Outlook.Application")
Return True
Catch
Try
' Start Outlook and display the Inbox, but minimize
' it to avoid hiding the Silverlight application.
outlook = AutomationFactory.CreateObject("Outlook.Application")
outlook.Session.GetDefaultFolder(6).Display() ' 6 = Inbox
outlook.ActiveWindow.WindowState = 1 ' minimized
Return True
Catch
' Outlook is unavailable.
Return False
End Try
End Try
End Function
Para controlar eventos de automatizacin

Use una de las tcnicas mostradas en el ejemplo de cdigo siguiente.
Nota:
No se admiten eventos con valores devueltos.
Private Sub SearchEmail()
UpdateStatusMessage("Searching Inbox for 'Silverlight'...")
' The following code demonstrates three ways to handle Automation
' events. In Visual Basic, all three ways use the AutomationEvent class.
searchEvent = AutomationFactory.GetEvent(outlook, "AdvancedSearchComplete")
' The first way is demonstrated by the Handles clause of the
' SearchEvent_EventRaised method, which requires the WithEvents modifier
' on the searchEvent variable declaration.
' The second way uses the AddHandler syntax with the EventRaised event,
' and does not require the WithEvents modifier.
' AddHandler searchEvent.EventRaised, AddressOf SearchEvent_EventRaised
' The third way uses the AutomationEvent.AddEventHandler method, and
' requires the use of a delegate with an API signature that matches the Automation event.
' searchEvent.AddEventHandler(New AdvancedSearchCompleteDelegate(AddressOf SearchComplete))
' Begin the search.
outlook.AdvancedSearch("Inbox","urn:schemas:mailheader:subject ci_phrasematch 'Silverlight'",
True, "SubjectSearch")
End Sub
Private WithEvents searchEvent As AutomationEvent
Sub SearchEvent_EventRaised(ByVal sender As Object,ByVal e As AutomationEventArgs) Handles

searchEvent.EventRaised
SearchComplete(e.Arguments(0))
End Sub
' Required only with the second two ways of handling Automation events.
' Private Delegate Sub AdvancedSearchCompleteDelegate(ByRef search As Object)
' Note: Visual Basic does not support the use of custom delegates for events with optional parameters.
Private Sub SearchComplete(ByRef search As Object)
Dim searchResults As New List(Of String)
For Each result As Object In search.Results
searchResults.Add(result.Subject)
Next
SetResultsList(searchResults)
End Sub
Ejemplo
El siguiente cdigo proporciona los mtodos auxiliares y el XAML de la interfaz de usuario que se usan en el
cdigo anterior. Para ejecutar el cdigo de este tema, cree un nuevo proyecto de aplicacin de Silverlight y,
a continuacin, agregue todo el cdigo a la clase MainPage.
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="message"/>
<ListBox x:Name="items" Visibility="Collapsed"/>
</Grid>
Private Sub UpdateStatusMessage(ByVal text As String)

UpdateUserInterface(Sub() message.Text = text)
End Sub
Private Sub SetResultsList(ByVal results As IEnumerable(Of String))

UpdateUserInterface(

Silverlight
Sub()
message.Visibility = System.Windows.Visibility.Collapsed
items.Visibility = System.Windows.Visibility.Visible
items.ItemsSource = results
End Sub)
End Sub
Private Sub UpdateUserInterface(ByVal performUpdate As Action)

' Marshal to the UI thread, if necessary.
If Dispatcher.CheckAccess Then
performUpdate()
Else
Dispatcher.BeginInvoke(performUpdate)
End If
End Sub
3.7. Hospedaje alternativo

Silverlight se ha diseado principalmente para el hospedaje en una pgina web. Sin embargo, existen varias
opciones de hospedaje alternativo que permiten ejecutar Silverlight fuera del explorador o en de otro
entorno de host.
La mayora de las opciones de hospedaje alternativo se encuentran fuera del mbito de la documentacin
de Silverlight. Sin embargo, en este tema se resumen las opciones y se proporcionan vnculos a informacin
adicional y a ejemplos de cdigo, si los hay.
Nota:
Silverlight est supeditado a las mismas restricciones de recinto de seguridad con independencia del
entorno de host y de la presencia de un explorador web. Sin embargo, el entorno de host podra
proporcionar acceso total al equipo local, con lo que, en la prctica, se estara eludiendo la seguridad de
Silverlight.
Si no hay un explorador o conexin de red presente, el entorno de host podra tener que proporcionar
funcionalidades de reemplazo, segn sus requisitos.
Utilizar Silverlight fuera del explorador

Silverlight proporciona la compatibilidad bsica con la ejecucin fuera del explorador en equipos Windows y
Macintosh para las aplicaciones basadas en Silverlight y hospedadas en web. Esta es la manera ms fcil de
utilizar Silverlight fuera de un explorador web, pero requiere que los usuarios instalen la aplicacin desde
una pgina web host.
Para obtener una compatibilidad ms completa sin conexin, que incluya acceso total al equipo local, puede
ser ms conveniente utilizar Windows Presentation Foundation (WPF). WPF proporciona un supraconjunto
de funcionalidades de Silverlight y permite convertir las aplicaciones basadas en Silverlight en aplicaciones
para Windows con todas las caractersticas, con mnimas modificaciones del cdigo.
Utilizar Silverlight en un control de explorador

Utilizar un control de explorador web incrustado es la manera ms fcil de agregar Silverlight a una
aplicacin creada con otra tecnologa. En este caso, la aplicacin hospeda un control de explorador que
muestra una pgina web que, a su vez, hospeda la aplicacin basada en Silverlight.
Dependiendo de las necesidades, se pueden ocultar los lmites entre las capas de hospedaje y crear una
interfaz de usuario sin diferencias. Para la comunicacin entre la aplicacin host y el cdigo Silverlight, se
puede utilizar el DOM HTML.
Para tener acceso a DOM desde la aplicacin host, consulte la documentacin del control de explorador
web elegido. En la lista siguiente se indican algunos controles de explorador web comunes.
Control WebBrowser de Windows Forms.
Control WebBrowser de WPF.
Control WebBrowser de Win32.
Componente MSHTML.
Marco de trabajo WebKit de Macintosh OS X.
Utilizar una interfaz de usuario de Silverlight en otro complemento o

aplicacin

Silverlight
Silverlight proporciona una interfaz no administrada denominada ISilverlightViewer a travs de la cual se

puede recuperar una representacin de mapa de bits de una interfaz de usuario basada en Silverlight. Esta
funcionalidad se puede utilizar para combinar los elementos de la interfaz de usuario de Silverlight con la
interfaz de usuario de otra aplicacin.
En este escenario, se suele incrustar el complemento Silverlight detrs de la interfaz de usuario del
complemento del host o de la aplicacin. A continuacin, el host puede mostrar partes concretas de la
interfaz de usuario de Silverlight y recibir los datos correspondientes proporcionados por el usuario a travs
del teclado y del mouse. Dado que la interfaz de usuario de Silverlight puede cambiar en respuesta a los
datos proporcionados por el usuario, el host suele mostrar continuamente las actualizaciones de la
representacin.
Esta alternativa de hospedaje resulta particularmente til para mostrar elementos de la interfaz de usuario
de Silverlight dentro de otro complemento de explorador. En este caso, el complemento del host puede
interactuar completamente con Silverlight a travs de la interfaz ISilverlightViewer, mientras el explorador
administra los detalles de la incrustacin. Si el explorador no est presente, la aplicacin host debe utilizar
otra opcin de hospedaje, posiblemente adems de tener acceso a la interfaz ISilverlightViewer.
Utilizar Silverlight en una aplicacin basada en Windows a travs de

COM
Silverlight proporciona varias interfaces COM a travs de las cuales una aplicacin basada en Windows
puede hospedar el complemento Silverlight. Este enfoque proporciona gran flexibilidad, pero tambin
requiere un importante esfuerzo de desarrollo.
Con esta opcin, la aplicacin host debe proporcionar la infraestructura de hospedaje COM necesaria e
implementar las interfaces IXcpControlHost e IXcpControlHost2. A continuacin, se puede interactuar con el
complemento Silverlight a travs de las interfaces IXcpControl e IXcpControl2.
Con Silverlight 4, es posible hospedar aplicaciones de confianza e implementar la interfaz IXcpControlHost3
para atender las solicitudes de objetos de automatizacin del complemento.
El mecanismo de hospedaje de COM se ha diseado para satisfacer necesidades concretas y actualmente
presenta varias limitaciones. Por ejemplo, solamente se pueden invocar controladores en la aplicacin host
para eventos de API de JavaScript del cdigo de Silverlight, pero no para los eventos de la API administrada.
Utilizar Silverlight en otra aplicacin a travs de la interfaz del

explorador
Una ltima consiste en hospedar el complemento Silverlight a travs del modelo de complemento del
explorador. En este escenario, la aplicacin host asume el rol del explorador e incrusta el complemento
Silverlight de la misma manera que si fuera un explorador.
Esta opcin proporciona un acceso relativamente integrado para las aplicaciones basadas en Macintosh,
donde no estn disponibles las interfaces COM. En este caso, lo habitual es usar la interfaz NAPI (tambin
denominada Gecko Plugin API).
Se trata de una opcin de hospedaje avanzada para la que no existe orientacin adicional en este momento.
4. Diseo, entrada e impresin

En los temas de esta seccin se describen los conceptos de programacin de Silverlight y se explica cmo
compilar aplicaciones basadas en Silverlight con texto y entrada.
4.1. Sistema de diseo de Silverlight

En este tema se describe el sistema de diseo de Silverlight. Entender cmo se coloca el complemento en
una pgina HTML y cmo y cundo se efectan los clculos de diseo en el complemento es esencial para
poder disear interfaces de usuario de apariencia profesional y de alto rendimiento.
Posicin y dimensiones del complemento Silverlight

El complemento Silverlight define el rea en la que se muestra la aplicacin basada en Silverlight. El
complemento se incrusta en la pgina HTML que lo hospeda y se puede insertar de modo que ocupe parte

Silverlight
de la pgina HTML o toda la pgina HTML. Debido a esto, existen dos marcos de referencia al colocar
objetos de Silverlight:
Dentro del complemento: los objetos se colocan en la superficie de Silverlight dentro del cuadro
de lmite del complemento. En la mayora de los artculos de informacin general sobre el diseo se
describe este tipo de colocacin.
Dentro del HTML: el complemento completo y todos los objetos colocados en su interior estn
sujetos al lugar donde se coloca el complemento en HTML.
Sistema de diseo
El trmino diseo describe el proceso de ajuste de tamao y colocacin de los objetos en la aplicacin
basada en Silverlight. Para colocar objetos visuales, se deben insertar en un objeto Panel u otro objeto
contenedor. El objeto Panel primario presenta un comportamiento de diseo definido que determina cmo
se dibujan en pantalla los miembros de la coleccin Children de un elemento Panel. Se trata de un proceso
intensivo y, cuanto mayor es la coleccin Children, mayor es el nmero de clculos realizados. Tambin se
puede incluir mayor complejidad segn el comportamiento de diseo definido por el elemento Panel que
posee la coleccin. Un diseo relativamente sencillo, como Canvas, puede producir un rendimiento
excelente si no se requiere un Panel ms complejo, como Grid.
Cada vez que un elemento UIElement secundario cambia de posicin, tiene el potencial de desencadenar un
nuevo paso del sistema de diseo. Es importante entender los eventos que pueden invocar el sistema de
diseo, ya que la invocacin innecesaria puede deteriorar el rendimiento de la aplicacin.
En su versin ms simple, el diseo es un sistema recursivo que conduce a la configuracin del tamao,
posicin y representacin de un elemento en la pantalla. El sistema de diseo completa dos pasos por cada
miembro de la coleccin Children: un paso de medida y un paso de organizacin. En el paso de medida se
determina el tamao deseado de cada elemento secundario. En el paso de organizacin se establece el
tamao y la posicin definitivos del elemento secundario.
Nota:
Al hacer referencia al diseo de un elemento, es ms exacto hacer referencia al diseo del cuadro de lmite
de ese elemento.
Para invalidar el comportamiento de diseo predeterminado de Panel, cada tipo de Panel proporciona sus
propios mtodos MeasureOverride y ArrangeOverride para lograr su propio comportamiento de diseo.
Esta es la serie de eventos que se produce cada vez que se invoca el sistema de diseo:
1. Se mide cada elemento UIElement secundario.
2. Se evalan las propiedades de tamao definidas en FrameworkElement, como Width, Height y
Margin.
3. Se aplica la lgica especfica de Panel, como la propiedad Orientation del apilamiento.
4. El contenido se organiza despus de medir todos los elementos secundarios.
5. Se dibuja la coleccin Children en la pantalla.
6. Se invoca el proceso de nuevo si se agregan propiedades Children adicionales a la coleccin,
cambian las propiedades de diseo de Children, como Width y Height, o se llama al mtodo
UpdateLayout.
Este proceso y los medios por los que se invoca se definen con mayor detalle en las secciones siguientes.
Cuadros de lmite de elementos

Es importante entender que un cuadro de lmite rodea todos los elementos de una aplicacin basada en
Silverlight. Esta abstraccin ayuda a comprender el comportamiento del sistema de diseo. Cuando el
sistema de diseo coloca algn elemento FrameworkElement, en realidad coloca un rectngulo o ranura de
diseo que contiene ese elemento.
La clase LayoutInformation se expone para devolver los lmites geomtricos de la ranura de diseo y la
regin visible de un elemento. El sistema determina el tamao de la ranura de diseo, calculando el espacio
disponible en la pantalla, el tamao de cualquier restriccin, las propiedades especficas del diseo, como el

Silverlight
margen y el relleno, y el comportamiento individual del elemento Panel primario. A partir de estos datos, el
sistema puede calcular la posicin de todos los elementos secundarios de un Panel determinado. Es
importante recordar que las caractersticas de tamao definidas en el elemento primario (como un Border)
afectan a sus elementos secundarios.
En la siguiente ilustracin se muestran las dimensiones de un panel primario, su elemento secundario y la
ranura de diseo que contiene el elemento secundario.
Puede ver que el rea asignada para el elemento secundario es, en realidad, mucho mayor que el elemento
secundario. Corresponde al contenedor primario determinar el tamao de la ranura de diseo para cada
elemento secundario. El elemento primario puede asignar ms o menos espacio del que solicita el elemento
secundario. Puede obtener las dimensiones de la ranura de diseo llamando a GetLayoutSlot. A
continuacin, el elemento primario coloca el elemento secundario dentro de su ranura de diseo en funcin
de las propiedades de alineacin establecidas para el elemento secundario.
En la ilustracin siguiente se muestra un elemento secundario que se gira y se extiende ms all de su
ranura de diseo asignada.
En este caso, el sistema de diseo recorta el elemento secundario y solo muestra la parte que cabe en la
ranura de diseo. Esta rea visible, perfilada en rojo, se denomina clip de diseo y sus dimensiones se
pueden obtener llamando al mtodo GetLayoutClip. Tenga en cuenta que GetLayoutClip devuelve un objeto
Geometry, por lo que el rea visible no es necesariamente un rectngulo.
El cuadro de lmite que rodea un elemento puede cambiar a medida que se agregan elementos adicionales
al contenedor primario. Puede reducirse o expandirse, en funcin del tipo y del tamao de los elementos
que se agregan.
Medir y organizar elementos secundarios

Cuando se necesita representar elementos en la pantalla o cambia el tamao de un elemento, se invoca el
sistema del diseo. El primer paso del diseo es el paso de medida, donde se determina el tamao deseado
de cada elemento secundario. El segundo es el paso de organizacin, donde se determina el tamao y la
posicin definitivos del cuadro de lmite de cada elemento secundario.
Medir
En el paso de medida, el sistema de diseo indica al objeto Panel el valor de su parmetro availableSize. Se
trata del rea que el elemento primario pone a disposicin de Panel para colocar los elementos secundarios.
El elemento primario Panel evaluar las propiedades de tamao nativas de cada uno de sus elementos
secundarios, como Clip y Visibility.
A continuacin, se procesan las propiedades de FrameworkElement definidas en cada elemento secundario.
Estas propiedades suelen a describir las caractersticas de tamao del UIElement subyacente, como Height,
Width, Margin y Style. Cada una de estas propiedades puede modificar el espacio necesario para mostrar el
elemento. A continuacin, Panel llama al mtodo Measure de cada uno de sus elementos secundarios y
pasa el tamao disponible para cada uno de ellos. El tamao disponible puede ser el tamao solicitado del

Silverlight
elemento secundario, pero el elemento primario tambin puede optar por restringir el tamao del elemento
secundario en funcin del nmero de elementos que necesite colocar y el valor de su parmetro
availableSize.
Nota:
Existe una diferencia entre las propiedades de Height y Width, y ActualHeight y ActualWidth. Por ejemplo, la
propiedad ActualHeight es un valor calculado que se basa en otras entradas de alto y en el sistema de
diseo. El propio sistema de diseo establece el valor, basndose en un paso de representacin real; por
consiguiente, puede existir un pequeo desfase con respecto al valor establecido de propiedades como
Height, que constituyen la base del cambio de entrada. Es necesario establecer Height y Width puesto que
su valor predeterminado es 0.
Dado que ActualHeight es un valor calculado, debe tener en cuenta que puede sufrir varios cambios o
cambios incrementales como resultado de las diversas operaciones realizadas por el sistema de diseo. El
sistema de diseo puede calcular el espacio de medidas necesario para los elementos secundarios, las
restricciones impuestas por el elemento principal, etc.
El objetivo final del paso de medida es que el sistema de diseo determine el valor de la propiedad
DesiredSize de cada elemento secundario, lo que sucede internamente despus de llamar a Measure. Este
valor se almacena y se utiliza durante el proceso de organizacin.
Organizar
En el paso de organizacin, el sistema de diseo indica al objeto Panel el valor de finalSize que est
disponible para l y sus elementos secundarios. Durante el paso de organizacin, el elemento Panel
primario evala la propiedad DesiredSize del elemento secundario y los mrgenes adicionales que puedan
afectar al tamao representado del elemento; a continuacin, determina el cuadro de lmite para cada
elemento secundario. El cuadro de lmite determina las dimensiones de la ranura de diseo del elemento
secundario. Luego, el elemento primario Panel llama al mtodo Arrange de cada elemento secundario,
pasando la estructura Rect que establece el punto de origen del elemento secundario en el panel as como
su alto y ancho.
Nota:
Todo el diseo es relativo al elemento primario. Si se establece el punto de origen en 0.0, el elemento
secundario se colocar en la esquina superior izquierda del panel primario y no en la esquina superior
izquierda del complemento Silverlight.
El sistema de diseo efecta una ltima evaluacin de las propiedades de desplazamiento, como los
mrgenes y la alineacin, y coloca el elemento secundario dentro de su ranura de diseo. El elemento
secundario no necesita rellenar el espacio asignado completo, y con frecuencia no lo hace. A continuacin,
el control se devuelve al Panel primario y el proceso del diseo se completa.
Elementos Panel y comportamientos de diseo personalizados

Silverlight incluye un conjunto derivado de elementos Panel que permiten numerosos diseos complejos.
Los escenarios comunes, como apilar elementos, se logran con facilidad mediante el elemento StackPanel;
otros diseos ms complejos son posibles gracias a Grid.
En la tabla siguiente se resumen los elementos de diseo disponibles.
Nombre del
Descripcin
panel
Define un rea en la que pueden colocarse explcitamente los elementos secundarios
Canvas
utilizando las coordenadas relativas al rea del control Canvas.
Grid Define un rea de cuadrcula flexible que se compone de columnas y filas.
Organiza los elementos secundarios en una nica lnea que se puede orientar horizontal o
StackPanel
verticalmente.
Cada uno de estos contenedores de diseo tiene en cuenta distintas propiedades que pueden afectar al
modo en que se organizan los elementos secundarios. Algunos de los ms comunes se muestran en la tabla
siguiente.

Silverlight
Nombre de la propiedad Efecto en el diseo

Margin Crea espacio entre un objeto y su ranura de diseo.
HorizontalAlignment y VerticalAlignment Coloca un objeto dentro de su ranura de diseo.
Canvas.ZIndex Coloca un objeto encima de otro cuando superponen.
Adems de aplicar la lgica de diseo de panel, puede utilizar transformaciones y animaciones para cambiar
la posicin de un objeto.
Para los escenarios que requieren un diseo de aplicacin que no es posible utilizando cualquiera de los
elementos Panel predefinidos, se pueden conseguir comportamientos de diseo personalizados heredando
de Panel e invalidando el comportamiento predeterminado de medida y organizacin mediante los
mtodos MeasureOverride y ArrangeOverride.
Cambiar el tamao de las ventanas

Aunque utilizar la posicin absoluta de los objetos mediante Canvas es til en algunos escenarios, no suele
ser una estrategia vlida en una ventana de explorador que cambia de tamao. La posicin absoluta no
permite que los objetos se recoloquen en la pgina en respuesta al ajuste del tamao de la ventana del
explorador; en lugar de ello, los objetos permanecen colocados en su posicin especificada en pxeles.
StackPanel y Grid permiten la recolocacin del contenido. El objeto Grid es el elemento raz utilizado por la
plantilla de Silverlight para Visual Studio. Aunque resulta ms complejo utilizar Grid que otros objetos Panel,
permite la recolocacin del contenido y tiene la flexibilidad suficiente para poder crear gran variedad de
diseos de objetos.
Para obtener el mejor comportamiento del ajuste de tamao de las ventanas (adems de utilizar objetos
Panel para colocar objetos secundarios), suele ser mejor dejar los valores de las propiedades width y height
del DOM en el 100% y excluir todas las declaraciones de width y height del elemento raz del archivo XAML
o del elemento raz del diseo. Por ejemplo, en el XAML siguiente, no se han definido el ancho ni el alto del
elemento raz ni del elemento de diseo.
<UserControl x:Name="RootElement" x:Class="WindowResizingSample.Page"
</Grid>
</UserControl>
4.1.1. Paneles personalizados

Silverlight proporciona tres contenedores de diseo dinmico: Canvas, StackPanel y Grid. Si est creando un
diseo complejo que no se logra con facilidad utilizando los contenedores provistos, puede crear un panel
personalizado en el que puede definir el comportamiento de diseo de los elementos secundarios. Para
ello, derive de Panel e invalide los mtodos ArrangeOverride y MeasureOverride.
Requisitos previos
Antes de seguir los pasos en este tema, deber familiarizarse con el modo en que los objetos se
dimensionan y colocan en Silverlight.
Medir
El primer paso en el diseo de un panel es medir cada elemento secundario y determinar cunto espacio
asignar el panel a dicho elemento secundario. Adems, devuelva la cantidad de espacio disponible para el
panel completo.
En el ejemplo siguiente se muestra una invalidacin del mtodo MeasureOverride para un panel
(BlockPanel) que coloca 9 elementos secundarios en una cuadrcula de 3x3 donde cada celda es 100x100.
'First measure all children and return available size of panel
Protected Overloads Overrides Function MeasureOverride(ByVal availableSize As Size) As Size
'Measure first 9 children giving them space up to 100x100, remaining children get 0x0
Dim i As Integer = 0
For Each child As FrameworkElement In Children
If i < 9 Then
child.Measure(New Size(100, 100))
Else
child.Measure(New Size(0, 0))

Silverlight
End If
i += 1
Next
'return the size available to the whole panel, which is 300x300
Return New Size(300, 300)
End Function
En MeasureOverride, debe llamar al mtodo Measure de cada elemento secundario, pasando el espacio que
el panel puede asignar. A continuacin, el sistema del diseo calcula DesiredSize de cada elemento
secundario basndose en el tamao disponible. En este ejemplo, asignamos 100x100 a los primeros 9
elementos secundarios y 0x0 a los restantes. El tamao que el elemento primario asigna al elemento
secundario puede basarse en el valor availableSize que se pasa en el mtodo MeasureOverride. El valor de
availableSize representa el rea que el panel puede ocupar en el diseo.
Cuando se llama a Measure, el sistema del diseo determina el DesiredSize del elemento secundario
basndose en availableSize pasado a Measure y el tamao natural del elemento. El tamao natural lo
determina el elemento Width y las propiedades Height o el tamao nativo de una imagen. La propiedad
DesiredSize se establece generalmente en availableSize o en el tamao natural, el que tenga menor valor.
Una vez establecido DesiredSize de los elementos secundarios, el panel debe determinar cunto espacio
solicitar de su elemento primario como el valor devuelto de su invalidacin de MeasureOverride. El valor
adecuado se puede determinar de varias maneras:
Se calcula dependiendo de los valores DesiredSize totales de todos los elementos secundarios.
Un tamao predeterminado, como el ejemplo actual.
Un tamao muy grande, que permitir exceso de espacio para que el panel organice los elementos
secundarios.
Precaucin:
No devuelva el valor availableSize que se pas a MeasureOverride. El valor devuelto para Measure Override
debe ser finito, pero el availableSize que se pasa puede ser infinito en algunos casos.
Organizar
Una vez completado el paso Medir, comienza el paso Organizar. En este paso debe determinar la posicin y
el tamao de la ranura de diseo de cada elemento secundario, y establecer el tamao final del panel.
En el cdigo siguiente se muestra el mtodo ArrangeOverride para el BlockPanel de la seccin Measuring.
'Second arrange all children and return final size of panel
Protected Overloads Overrides Function ArrangeOverride(ByVal finalSize As Size) As Size
'Get the collection of children
Dim mychildren As UIElementCollection = Children
'Get total number of children
Dim count As Integer = mychildren.Count
'Arrange children We're only allowing 9 children in this panel. More children will get a 0x0 layout slot.
Dim i As Integer
For i = 0 To 8
'Get (left, top) origin point for the element in the 3x3 block
Dim cellOrigin As Point = GetOrigin(i, 3, New Size(100, 100))
'Arrange child Get desired height and width. This will not be larger than 100x100 as set in MeasureOverride.
Dim dw As Double = mychildren(i).DesiredSize.Width
Dim dh As Double = mychildren(i).DesiredSize.Height
mychildren(i).Arrange(New Rect(cellOrigin.X, cellOrigin.Y, dw, dh))
Next
For i = 9 To count - 1
'Give the remaining children a 0x0 layout slot
mychildren(i).Arrange(New Rect(0, 0, 0, 0))
Next
'Return final size of the panel
Return New Size(300, 300)
End Function
'Calculate point origin of the Block you are in

Protected Function GetOrigin(ByVal blockNum As Integer, ByVal blocksPerRow As Integer, ByVal itemSize As Size) As Point
'Get row number (zero-based)
Dim row As Integer = CInt(Math.Floor(blockNum / blocksPerRow))
'Get column number (zero-based)
Dim column As Integer = blockNum - blocksPerRow * row
'Calculate origin
Dim origin As New Point(itemSize.Width * column, itemSize.Height * row)

Silverlight
Return origin
End Function
En ArrangeOverride, llame a Arrange en cada secundario, pasando un Rect. Esto establece el punto de
origen, el alto y el ancho de la ranura de diseo del elemento secundario en el panel primario. En este
ejemplo, los primeros 9 elementos secundarios se colocan en una celda de una cuadrcula de 3x3 basndose
en su orden en la coleccin Children. El primer elemento secundario se coloca en la celda superior izquierda,
de modo que el objeto Rect pasado es (0,0,100,100); esto significa que se colocar en la esquina superior
izquierda del panel y que tendr un ancho y un alto de 100. Los 9 primeros elementos secundarios tienen
asignada una ranura de diseo de 100 x 100. La ranura de diseo asignada a los dems elementos
secundarios es de 0 x 0. Si el tamao deseado del elemento secundario es mayor que el espacio asignado,
se recortar. Cada elemento secundario se coloca en la ranura del diseo segn las dems propiedades de
diseo, como HorizontalAlignment, VerticalAlignment y Margin.
Nota:
El panel personalizado no debera tener en cuenta propiedades que se pueden establecer, como Visibility,
Margin o MinWidth, cuando se determina el diseo. El sistema de diseo de Silverlight administrar todas
estas propiedades. As que, por ejemplo, no es necesario que omita el diseo para elementos con Visibility
de Collapsed porque el sistema de diseo lo controlar.
Una vez organizados los elementos secundario, devuelva el tamao final del panel. Este es el tamao que el
panel solicitar de su contenedor primario. En este ejemplo, BlockPanel se establece siempre en 300x300.
Crear un panel personalizado en XAML

Para utilizar el panel en XAML, debe definir el espacio de nombres XML para la clase de panel
personalizado. Despus, cuando cree una instancia del panel personalizado, har referencia a l utilizando
su espacio de nombres XML.
En el ejemplo siguiente se muestra cmo crear una instancia de BlockPanel.
<UserControl x:Class="BlockPanel.Page"
xmlns:my="clr-namespace:BlockPanel;assembly=BlockPanel">
<Grid x:Name="LayoutRoot" Background="Black">
<my:BlockPanel Background="Black" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Rectangle Fill="Red" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Salmon" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Orange" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Yellow" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Lime" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Green" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Turquoise" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Blue" Height="500" Width="500" Margin="2"/>
<Rectangle Fill="Purple" Height="500" Width="500" Margin="2"/>
<TextBlock Text="This Text Does Not Appear"/>
</my:BlockPanel>
</Grid>
Contenido desplazable y rendimiento

Si crea un control personalizado que incluye gran cantidad de contenido desplazable (parecido a un control
ListBox) y el control se carga despacio o no se desplaza fcilmente, puede ser conveniente utilizar la
virtualizacin. El trmino "virtualizar" se refiere a una tcnica mediante la cual se genera un subconjunto de
elementos de la interfaz de usuario a partir de un nmero mayor de elementos de datos y en funcin de los
elementos que se puedan ver en la pantalla. La generacin de muchos elementos de interfaz de usuario
cuando puede haber solo unos pocos elementos en la pantalla puede afectar negativamente al rendimiento
de la aplicacin. Un control personalizado con contenido desplazable se puede virtualizar derivando el
control de la clase VirtualizingStackPanel.
4.1.2. Redondeo del diseo

El redondeo del diseo es un concepto de Silverlight por el que el sistema de diseo de Silverlight redondea
los valores no integrales existentes en la fase de representacin del diseo. El redondeo del diseo tiene un
rea de superficie de API de una sola API (UIElement.UseLayoutRounding), pero el comportamiento de
redondeo del diseo predeterminado integrado en el sistema de diseo afecta al aspecto visual de la

Silverlight
aplicacin. Tambin tiene implicaciones con respecto al modo en que el usuario podra establecer los
valores de las propiedades o usar los valores existentes de las propiedades de diseo si ejecuta su propia
lgica de diseo en un panel personalizado o en otra clase.
La propiedad UseLayoutRounding
La superficie de API directa para el comportamiento de redondeo del diseo es la propiedad nica
UIElement.UseLayoutRounding. El valor predeterminado de esta propiedad es true, lo que significa que el
redondeo del diseo est activado de forma predeterminada.
Redondeo del diseo y representacin de subpxeles

Lo que pretende el redondeo del diseo es impedir que la lgica de representacin con unidades menores
de pxel (subpxel) genere efectos de suavizado (anti-aliasing), que suelen considerarse como una
presentacin visual deficiente. Uno de los ejemplos ms extremos de esto ltimo sera que tuviera una lnea
recta negra de un solo pxel en un lmite de la cuadrcula de pxeles de medio pxel exactamente. La
representacin de subpxeles obtendr el promedio de los dos pxeles afectados por la divisin de 0,5. En
lugar de una lnea de un solo pxel de color 100% negro, se representara una lnea de 2 pxeles de ancho en
un color 50% gris.
Con el redondeo del diseo, una lnea de este tipo se sometera a diseo y se alineara con el pxel entero
ms cercano de la cuadrcula, y se conservara tanto la informacin del ancho ms pequeo como la
informacin del color esperado (100% negro).
Redondeo del diseo y especificacin de valores no integrales para las

propiedades
Hay varias propiedades en Silverlight que especifican las dimensiones de un objeto en trminos de alto o
ancho. Todas estas propiedades pueden tomar un valor Double como tipo de propiedad, lo que significa
que los valores proporcionados podran no ser integrales. Sin embargo, si no establece deliberadamente
UseLayoutRounding como false, no hay ningn motivo para usar un valor no integral para estos valores de
propiedad. Las propiedades en las que podra establecer un valor no integral, como
FrameworkElement.Width, notificarn fielmente el valor no integral establecido, pero el sistema de diseo lo
redondear a pxeles enteros en ltima instancia a efectos de representacin. Adems, en la mayora de los
casos, los valores de FrameworkElement.ActualWidth y FrameworkElement.ActualHeight reflejan la
influencia del sistema de diseo y el comportamiento de redondeo del diseo, y notifican el valor
redondeado. Existen otros factores que tambin permiten calcular las dimensiones de los objetos en la
interfaz de usuario, como los modos de ajuste de tamao Star o Auto de las columnas o las filas de Grid.
Dado que esto implica un comportamiento de diseo de Grid, FrameworkElement.ActualWidth y
FrameworkElement.ActualHeight para los valores determinados, normalmente tambin se devuelven como
valores redondeados.
Nota:
Establecer con valores Double las propiedades de ajuste de tamao de Silverlight es una tcnica que se usa
principalmente con fines de compatibilidad con WPF. WPF admite un comportamiento de conversin para
otros tipos unitarios y tambin admite un concepto de pxel independiente del dispositivo que incluye
dependencias de plataforma. Silverlight es multiplataforma y no admite los tipos unitarios; por lo tanto, los
requisitos de conversin de WPF que requieren un tipo Double subyacente no suelen ser relevantes para la
programacin en Silverlight.
Propiedades ActualHeight y ActualWidth de la clase TextBlock

El texto y TextBlock constituyen un rea de caractersticas generales donde el suavizado (anti-aliasing)
resulta crucial para generar texto legible, especialmente en tamaos de pxel menores. La clase TextBlock
hereda las propiedades ActualWidth y ActualHeight de FrameworkElement. Estas propiedades, cuando se
exponen en TextBlock, pueden proporcionar un valor no integral y no exhibir ningn comportamiento de
redondeo, si se comprueban en un objeto TextBlock donde se haya especificado una cadena Text pero no
Height o Width (que es el uso tpico de TextBlock).
Si el usuario est escribiendo en un panel, y midiendo y organizando los elementos de TextBlock, tal vez le
pueda resultar conveniente redondear los valores ActualHeight y ActualWidth de acuerdo con sus intereses
de diseo. Sin embargo, tambin podra preferir no redondear deliberadamente esos valores en funcin de

Silverlight
la lgica de clase. Por ejemplo, podra estar agregando o calculando los valores, y preferir valores exactos a
arriesgarse a perder informacin en el proceso de redondeo.
Establecer la propiedad UseLayoutRounding en false

En general, se espera que el comportamiento de redondeo del diseo mejore el aspecto visual de la interfaz
de usuario frente a lo que se mostrara si los valores de subpxeles se representaran en los pxeles
adyacentes. No obstante, puede haber situaciones o determinados escenarios de aplicacin donde sea
preferible el comportamiento de representacin de subpxeles. Si cree que se encuentra ante este tipo de
escenario, puede establecer UIElement.UseLayoutRounding en false. Si lo hace, normalmente deber
establecer el valor en el objeto raz, lo que propagar el comportamiento a todos los objetos secundarios
del diseo y del rbol visual.
Nota:
UseLayoutRounding existe en UIElement porque generalmente controla el comportamiento de las clases de
los contenedores de diseo, como los paneles, pero hay contenedores de diseo que potencialmente no
son paneles (FrameworkElement podra implementar ArrangeOverride y el resto de las API de diseo).
4.1.3. Alineacin en Silverlight Designer

Silverlight Designer para Visual Studio proporciona diversas indicaciones visuales para ayudar con la
alineacin y el diseo de los controles en la interfaz de usuario. Las lneas de ajuste proporcionan claves
visuales que indican si un control est alineado con otros controles. Los mrgenes son tiles para mantener
la distancia entre el borde de un control y los bordes de la ventana. Las lneas de cuadrcula son tiles para
alinear grandes grupos de controles en un modelo similar a una cuadrcula. En este tema, se describen las
guas de alineacin, los mrgenes y las lneas de cuadrcula de Silverlight Designer, adems de algunas de
las tareas que se pueden llevar a cabo mediante Silverlight Designer.
Lneas de ajuste
Las guas de alineacin representan una indicacin visual que ayuda a alinear un control con respecto a los
otros controles de una aplicacin. Cuando se arrastra un control en Silverlight Designer, las guas de
alineacin aparecen al alinearse el control con otro control. Las lneas de ajuste aparecen como lneas rojas
que conectan el control que se est arrastrando con el control con el que se est alineado. Las guas de
alineacin aparecen cuando el borde superior, inferior, izquierdo o derecho del control que se est
arrastrando se alinea con el correspondiente borde de otro control. Con algunos controles, las lneas de
ajuste aparecen tambin cuando las lneas base del texto estn alineadas.
Para alinear los bordes de los controles
En Silverlight Designer, con al menos dos controles, arrastre o cambie el tamao de uno de ellos
para que el borde se alinee con otro control.
Cuando los bordes estn alineados, aparecer una lnea de ajuste indicando la alineacin. Cuando
las lneas de ajuste aparecen, tambin ver un nmero junto a la lnea de ajuste que cambia a
medida que arrastra el control. El nmero indica la distancia entre el borde del control actual y el
borde del otro control.
Para alinear lneas base del texto de controles basados en texto
En Silverlight Designer, con al menos dos controles basados en texto, arrastre uno de ellos de
modo que la lnea base del texto se alinee con la lnea base del texto de otro control.
Cuando las lneas base del texto estn alineadas, aparecer una lnea de ajuste indicando la
alineacin.
Para desactivar las lneas de ajuste
Mientras arrastra un control en Silverlight Designer, mantenga presionada la tecla ALT.
Las lneas de ajuste se deshabilitarn temporalmente y ya no aparecern.
Mrgenes

Silverlight
En Silverlight Designer, el trmino margen hace referencia a la cantidad de espacio que hay entre el borde
de un control y el borde de su contenedor host. Cuando se selecciona un control en Silverlight Designer, los
mrgenes se indican mediante las lneas negras que aparecen entre los bordes del control y los bordes del
contenedor. Si aparece una lnea de margen entre un control y el borde de la aplicacin, eso indica que el
margen es fijo. Cuando cambia el tamao del explorador, la distancia entre ese borde del control y ese
borde de la aplicacin se mantiene constante. En cambio, si se muestra una lnea como un margen variable
que no se ajusta al borde de la aplicacin, esto indica que el margen no es fijo y que la distancia entre ese
borde del control y ese borde de la aplicacin puede cambiar. Por ejemplo, si los mrgenes izquierdo y
superior de un control son fijos, el control mantendr su posicin con respecto a la esquina superior
izquierda de la aplicacin cuando cambie el tamao del explorador. Por otro lado, si los mrgenes inferior y
derecho son fijos, el control cambiar de posicin con respecto a la esquina superior izquierda de la
aplicacin cuando cambie el tamao del explorador. Si los mrgenes contrarios, por ejemplo, el margen
inferior y el margen superior, son fijos, el control se ajustar cuando cambie el tamao del explorador.
Para fijar o liberar los mrgenes de un control
1. En Silverlight Designer, arrastre un control hasta la ubicacin que desee.
Observe que en cada lado del control hay lneas o cdigos auxiliares. Las lneas se ajustan desde el
borde del control al borde correspondiente del contenedor.
2. Para fijar un margen, muvase sobre un cdigo auxiliar hasta que el puntero se convierta en un
dedo sealador.
3. Haga clic en el cdigo auxiliar. El cdigo auxiliar se expande para formar una lnea de margen y se
fija el margen.
4. Para liberar un margen, muvase sobre una lnea hasta que el puntero se convierta en un dedo
sealador.
5. Haga clic en la lnea del margen. La lnea se contrae en un cdigo auxiliar y el margen de ese lado
se libera.
Lneas de la cuadrcula
Las lneas de la cuadrcula se pueden utilizar para alinear los controles de Silverlight Designer que se han
diseado mediante el control contenedor Grid. Las lneas de la cuadrcula representan las divisiones entre
las filas y columnas de un Grid. Cuando los controles se colocan dentro de una fila, columna o celda de Grid,
los mrgenes mostrados son relativos a los bordes de la fila, columna o celda, y las lneas de ajuste de Grid,
se pueden utilizar para alinear el control a los lados de la fila o columna.
Cuando se selecciona un control Grid en Silverlight Designer, aparecen carriles en los lados superior e
izquierdo. Puede utilizar los rales para agregar, quitar o cambiar el tamao de las filas y columnas de la
cuadrcula.
Nota:
Si la propiedad FlowDirection est establecida en RighToLeft, el ral de las filas aparece en el lado derecho
de Grid.
Para agregar filas y columnas a una cuadrcula mediante el diseador

1. En Silverlight Designer, seleccione un control Grid.
2. Mueva el puntero sobre el borde exterior del ral lateral para agregar una fila o muvalo sobre el
borde superior del ral superior para agregar una columna. El puntero cambia a una cruz y aparece
una lnea de cuadrcula que indica dnde se agregar la fila.
3. Haga clic en el ral para establecer la fila o la columna.
La lnea de cuadrcula est fija y aparece un indicador de lnea de cuadrcula en el ral al final de la
misma.
Para eliminar una fila o una columna de un control Grid, haga clic en el indicador de lnea de cuadrcula y
arrstrelo fuera del control Grid. El puntero cambiar e incluir una X para indicar la eliminacin.
Para agregar filas y columnas a una cuadrcula mediante el editor de coleccin

Silverlight
1. En Silverlight Designer, seleccione un control Grid.

2. En la ventana Propiedades, busque la propiedad RowDefinitions para agregar una fila o la
propiedad ColumnDefinitions para agregar una columna.
3. Haga clic en el botn de puntos suspensivos en la columna del valor de la propiedad.
Aparecer el cuadro de dilogo Editor de colecciones.
4. Haga clic en Agregar para agregar una fila o una columna.
5. Si es necesario, establezca las propiedades de la fila o de la columna.
Para agregar filas y columnas a una cuadrcula mediante el editor XAML
1. En el editor XAML, busque un elemento Grid.
2. Agregue Grid.RowDefinitions y Grid.ColumnDefinitions como elementos secundarios del elemento
Grid.
En el marcado siguiente se muestra un ejemplo:
<Grid>
</Grid>
3. Agregue elementos RowDefinition y ColumnDefinition.

En el marcado siguiente se muestra un ejemplo:
<Grid>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5*" />
</Grid>
Para establecer el alto de una fila mediante el diseador

1. En Silverlight Designer, seleccione un control Grid que tenga al menos dos filas.
2. Mueva el puntero sobre el ral lateral.
3. El puntero cambia a cruz y aparece una barra de tamao atenuada fuera del ral para la fila
correspondiente.
4. Mueva el puntero sobre la barra de tamao para seleccionar las opciones de tamao. Las opciones
de tamao son fijo, proporcional y automtico.
5. Para establecer el alto de fila en un valor fijo, haga clic en el botn #.
En la vista XAML, el alto de fila se actualiza a un valor fijo (n).
6. Para establecer el alto de fila de forma que use la variacin de tamao proporcional, haga clic en el
botn *.
En la vista XAML, el alto de fila se actualiza de modo que use la variacin de tamao proporcional
(n*).
7. Para establecer el alto de fila de forma que use el ajuste de tamao automtico, haga clic en el
botn Automtico.
En la vista XAML, el alto de fila se actualiza para usar el ajuste de tamao automtico (Automtico).

Silverlight
Nota:
Si la fila no tiene contenido, el ajuste de tamao automtico hace que se contraiga a un alto de
tamao cero. Esto puede provocar dificultades a medida que sigue diseando el objeto Grid. Para
evitar este problema, agregue contenido a la fila antes de establecer el ajuste de tamao
automtico. Tambin podr usar la variacin de tamao proporcional mientras trabaje y cambiar a
Automtico cuando termine.
8. Para salir sin seleccionar una opcin de tamao, presione ESC o mueva el puntero fuera de la barra
de tamao.
Para establecer el ancho de una columna mediante el diseador, siga los pasos anteriores pero mueva el
puntero sobre el ral superior para activar la barra de tamao.
4.2. Compatibilidad con pantalla completa

Silverlight proporciona funcionalidad para mostrar las aplicaciones basadas en Silverlight en modo de
pantalla completa.
Modo incrustado y modo de pantalla completa

Una aplicacin basada en Silverlight puede mostrarse en modo incrustado o en modo de pantalla completa:
En modo incrustado, la aplicacin se muestra en el explorador web o en una ventana de aplicacin
que se ejecuta fuera del explorador.
En modo de pantalla completa, el tamao de la aplicacin se ajusta a la resolucin de la pantalla. De
forma predeterminada, las aplicaciones en modo de pantalla completa se muestran encima de
todas las dems aplicaciones. No obstante, es posible configurarlas para que permanezcan en
modo de pantalla completa cuando otras aplicaciones estn activas.
En las ilustraciones siguientes se muestran las diferencias entre el modo incrustado y modo de pantalla
completa.
Aplicacin basada en Silverlight en modo incrustado
Aplicacin basada en Silverlight en modo de pantalla completa
Entrar en modo de pantalla completa

Silverlight
Una aplicacin basada en Silverlight entra en modo de pantalla completa cuando se establece la propiedad
IsFullScreen en true. En el momento de entrar en modo de pantalla completa, la aplicacin muestra durante
unos instantes el mensaje "Presione ESC para salir del modo de pantalla completa". Este mensaje avisa al
usuario de que la aplicacin est en modo de pantalla completa, y proporciona informacin sobre cmo
volver al modo incrustado.
Mensaje del modo de pantalla completa
En el ejemplo de cdigo siguiente, se muestra cmo habilitar y deshabilitar el modo de pantalla completa
alternando el valor de la propiedad IsFullScreen.
Private WithEvents rootPage As Page = New Page()
Private WithEvents htmlContent As Content
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
Me.RootVisual = rootPage
htmlContent = Me.Host.Content
End Sub
Private Sub ToggleFullScreen(ByVal sender As Object, ByVal e As MouseButtonEventArgs) Handles

rootPage.MouseLeftButtonDown
Me.Host.Content.IsFullScreen = Not Me.Host.Content.IsFullScreen
End Sub
Private Sub DisplaySizeInformation(ByVal sender As Object, ByVal e As EventArgs) _

Handles htmlContent.FullScreenChanged, htmlContent.Resized
Dim message As String = String.Format("ActualWidth={0}, ActualHeight={1}", _
Me.Host.Content.ActualWidth, Me.Host.Content.ActualHeight)
rootPage.LayoutRoot.Children.Clear()
Dim t As New TextBlock()
t.Text = message
rootPage.LayoutRoot.Children.Add(t)
End Sub
Limitaciones del modo de pantalla completa

Una aplicacin basada en Silverlight puede entrar en modo de pantalla completa nicamente como
respuesta a una accin iniciada por el usuario. Esto significa que solo se puede cambiar mediante
programacin al modo de pantalla completa en un controlador de eventos de acciones del usuario. Por
ejemplo, si se intenta establecer la propiedad IsFullScreen en true en un controlador de eventos Startup, se
omitir el valor de la propiedad. Limitar las acciones que habilitan el modo de pantalla completa permite
garantizar que el usuario sea siempre quien inicia el comportamiento del modo de pantalla completa. De
este modo, se limita la posibilidad de que aplicaciones malintencionadas suplanten la apariencia del sistema
operativo o de otros programas.
Nota:
La iniciacin por parte del usuario y los dems requisitos no se aplican a las aplicaciones de confianza. Para
obtener ms informacin, vea la siguiente seccin.
De forma predeterminada, solamente puede haber una aplicacin a la vez en modo de pantalla completa.
Normalmente, una aplicacin sale del modo de pantalla completa cuando el usuario pasa a otra aplicacin.
Para configurar una aplicacin basada en Silverlight de modo que permanezca en modo de pantalla
completa independientemente de si est activa o no, establezca la propiedad FullScreenOptions en
StaysFullScreenWhenUnfocused. De este modo, los usuarios podrn ver una aplicacin en modo de pantalla
completa mientras interactan con otras aplicaciones. Asimismo, podrn mostrar varias aplicaciones en
modo de pantalla completa.
Cuando una aplicacin permanece en modo de pantalla completa mientras est inactiva, los usuarios
pueden cambiar a otras aplicaciones. Entre ellas se encuentra el explorador del host original o la ventana de
ejecucin fuera del explorador, donde el complemento Silverlight incrustado mostrar un rea vaca
mientras la aplicacin est en modo de pantalla completa.

Silverlight
En la mayora de los casos, al pasar de nuevo a una aplicacin en modo de pantalla completa, no se vuelve a
mostrar el mensaje referente al modo de pantalla completa. Esto significa que las aplicaciones
malintencionadas tienen una oportunidad ms para suplantar la identidad de otras aplicaciones. Para
intentar evitarlo, el valor StaysFullScreenWhenUnfocused hace que la aplicacin muestre un cuadro de
dilogo para el consentimiento del usuario antes de entrar en modo de pantalla completa. Si el usuario no
da su consentimiento, la aplicacin utilizaa el comportamiento predeterminado del modo de pantalla
completa.
Este cuadro de dilogo incluye una casilla que permite a los usuarios guardar sus preferencias. Los usuarios
pueden modificar sus preferencias en Configuracin de Microsoft Silverlight (Cuadro de dilogo).
Cuando una aplicacin basada en Silverlight est en modo de pantalla completa, la mayora de los eventos
de teclado estn deshabilitados. Esta limitacin de las acciones del teclado durante el modo de pantalla
completa es una caracterstica de seguridad, dirigida a minimizar la posibilidad de que el usuario escriba
informacin imprevista. En modo de pantalla completa, las nicas entradas permitidas son las
correspondientes a las siguientes teclas:
FLECHA ARRIBA
FLECHA ABAJO
FLECHA IZQUIERDA
FLECHA DERECHA
BARRA ESPACIADORA
TAB
RE PG
AV PG
INICIO
FIN
ENTRAR
Silverlight no admite cuadros de dilogo en modo de pantalla completa. Esto incluye las clases
SaveFileDialog y OpenFileDialog, adems de los cuadros de dilogo para el consentimiento del usuario. En
la mayora de los casos, si se muestra un cuadro de dilogo en modo de pantalla completa, la aplicacin se
revertir al modo incrustado. Sin embargo, para evitar problemas en algunos exploradores, se debe salir del
modo de pantalla completa antes de utilizar una caracterstica que muestra un cuadro de dilogo.
El modo de pantalla completa no admite operaciones de arrastrar y colocar ni entradas multitoque. Si una
aplicacin utiliza estas caractersticas, se debe proporcionar al usuario informacin sobre las alternativas que
puede usar cuando la aplicacin entra en modo de pantalla completa.
Modo de pantalla completa con aplicaciones de confianza
El mensaje referente al modo de pantalla completa, el requisito de la iniciacin por parte del usuario, las
restricciones de teclado y de cuadro de dilogo no se aplican a las aplicaciones de confianza. Adems, las
aplicaciones de confianza no muestran el cuadro de dilogo para el consentimiento del usuario cuando
usan el valor StaysFullScreenWhenUnfocused.
Dado que la tecla ESC no tiene ningn efecto integrado para las aplicaciones de confianza, se puede
utilizarla para fines propios. Para ello, sin embargo, es necesario implementar una alternativa para que los
usuarios puedan salir del modo de pantalla completa.
Tamao de la aplicacin en modo de pantalla completa
Cuando una aplicacin basada en Silverlight est en modo de pantalla completa, su tamao equivale a la
resolucin actual de la pantalla. Sin embargo, los valores de las propiedades width y height del
complemento no se ven afectados al cambiar al modo de pantalla completa. Para determinar el tamao real
de la aplicacin en modo de pantalla completa, utilice las propiedades Content.ActualWidth y
Content.ActualHeight. En modo de pantalla completa, el valor de estas propiedades se establece en la
resolucin actual de la pantalla.
Cuando una aplicacin en modo de pantalla completa vuelve a pasar al modo incrustado, su tamao
cambia a los valores de las propiedades width y height.
Caractersticas de rendimiento durante un cambio de modo

Silverlight
Cambiar entre el modo incrustado y el modo de pantalla completa tiene un efecto mnimo sobre el
rendimiento del contenido de la aplicacin. En la mayora de los casos, esto significa que la reproduccin de
audio o vdeo se realiza sin problemas.
Nota:
Para obtener el mximo rendimiento, cuando la aplicacin pase al modo de pantalla completa, oculte o
desconecte del rbol visual todos los objetos que no se representen en ese modo. Puede ocultar un objeto
estableciendo su propiedad Visibility en Collapsed.
Aplicaciones sin ventanas en modo de pantalla completa

Un complemento Silverlight cuya propiedad Windowless est establecida en true siempre dibuja su color de
fondo con total opacidad cuando se muestra en modo de pantalla completa. Sin embargo, cuando la
aplicacin vuelve al modo incrustado, el color de fondo revierte a su valor de opacidad anterior.
No se admiten efectos de superposicin de HTML sin ventanas en el modo de pantalla completa. Sin
embargo, las aplicaciones de ejecucin fuera del explorador pueden utilizar el control WebBrowser para
mostrar HTML en modo de pantalla completa.
Volver al modo incrustado

Una aplicacin basada en Silverlight que est en modo de pantalla completa puede volver al modo
incrustado de varias maneras. La manera ms simple de salir del modo de pantalla completa consiste en
presionar la tecla ESC o utilizar una de las siguientes combinaciones de teclas:
Los usuarios de Windows pueden presionar ALT+F4.
Los usuarios de Macintosh pueden presionar COMANDO+ESC.
Adems, si una aplicacin en modo de pantalla completa pierde el foco, volver a entrar en modo
incrustado a menos que est vigente el valor StaysFullScreenWhenUnfocused. Una aplicacin en modo de
pantalla completa puede perder el foco cuando otra aplicacin recibe el foco a travs de una accin del
usuario. Por ejemplo, al cambiar de una tarea a otra en Windows mediante la combinacin de teclas
ALT+TAB, la aplicacin actual pierde el foco y la aplicacin siguiente lo obtiene.
Establecer la propiedad IsFullScreen en False
Una aplicacin basada en Silverlight sale del modo de pantalla completa cuando se establece la propiedad
IsFullScreen en false. Cuando la aplicacin entra de nuevo en modo incrustado, su tamao cambia a los
valores de las propiedades width y height del complemento.
Evento FullScreenChanged
El evento Content.FullScreenChanged se produce siempre que cambia la propiedad IsFullScreen. Este evento
se puede controlar para cambiar la interfaz de usuario en modo de pantalla completa.
Nota:
El evento Resized no se produce cuando la aplicacin entra en modo de pantalla completa. Sin embargo,
normalmente este tipo de cambios de diseo se realizan en los controladores de los eventos
FullScreenChanged y Resized.
Notas de la versin
Silverlight 3 no admite las siguientes caractersticas que se han mencionado en este tema:
Propiedad FullScreenOptions.
Aplicaciones de confianza.
El control WebBrowser.
4.3. Entrada
En esta seccin se describe la compatibilidad de Silverlight con los datos proporcionados por el usuario.
4.3.1. Compatibilidad con el mouse

Silverlight
Silverlight proporciona un conjunto de eventos que permiten responder a las acciones del mouse, como
mover el mouse o hacer clic con el mouse. Silverlight tambin puede promover las entradas de lpiz y las
entradas multitoque a acciones de mouse equivalentes.
Eventos del mouse

Silverlight proporciona el siguiente conjunto de eventos del mouse.
Evento Descripcin
Se produce cuando el elemento de la interfaz de usuario pierde la captura del
LostMouseCapture
mouse.
Se produce cuando cambia la posicin de las coordenadas del puntero del mouse
MouseMove
(o del lpiz).
MouseEnter Se produce cuando el mouse (o lpiz) entra en el rea delimitadora de un objeto.
MouseLeave Se produce cuando el mouse (o lpiz) sale del rea delimitadora de un objeto.
Se produce cuando se presiona el botn primario del mouse o cuando la punta
MouseLeftButtonDown
del lpiz toca la pantalla.
Se produce cuando se suelta el botn primario del mouse o cuando la punta del
MouseLeftButtonUp lpiz deja de tocar la pantalla, normalmente a continuacin de un evento
MouseLeftButtonDown.
MouseRightButtonDown Se produce cuando se presiona el botn secundario del mouse.
MouseRightButtonUp Se produce cuando se suelta el botn secundario del mouse.
Controladores de eventos del mouse

Al igual que ocurre con los controladores de eventos generales de Silverlight y de CLR, un controlador de
eventos del mouse implementa un delegado que proporciona dos categoras de informacin. Puede
determinar el sender del evento. El sender notifica el objeto al que est adjuntado el controlador de eventos.
Tambin se reciben los datos del evento. Para los eventos de mouse o los eventos de lpiz promovidos
como eventos de mouse, esos datos son una instancia de una de las siguientes clases:
MouseEventArgs
MouseButtonEventArgs , que es una subclase de MouseEventArgs
Con el par de datos de evento coinciden un par de delegados que se usan para los eventos del mouse.
MouseButtonEventHandler se usa para los siguientes eventos:
MouseLeftButtonDown
MouseLeftButtonUp
MouseRightButtonDown
MouseRightButtonUp
MouseEventHandler se utiliza para los siguientes eventos:
LostMouseCapture
MouseEnter
MouseLeave
MouseMove
MouseWheel usa MouseWheelEventHandler.
Adjuntar un controlador de eventos del mouse

Puede adjuntar funciones del controlador de eventos del mouse a cualquier objeto de Silverlight que
incluya el evento como un miembro (cualquier clase derivada de UIElement). En el ejemplo de XAML
siguiente se muestra cmo adjuntar controladores a los eventos MouseLeave y MouseEnter de dos objetos
Ellipse. Tenga en cuenta que, en este caso, los dos objetos comparten el controlador de cada evento.
<Canvas>
<Ellipse

Silverlight
MouseEnter="Ellipse_MouseEnter"
MouseLeave="Ellipse_MouseLeave"
Fill="Blue" />
<Ellipse
MouseEnter="Ellipse_MouseEnter"
MouseLeave="Ellipse_MouseLeave"
Canvas.Left="120"
Fill="Blue" />
</Canvas>
En este tema, no se explica cmo adjuntar un controlador de eventos del mouse mediante cdigo. La
tcnica para adjuntar controladores de eventos mediante cdigo suele ser la misma para todos los eventos
de Silverlight o eventos del mouse.
Definir un controlador de eventos del mouse

En el ejemplo siguiente se muestran las funciones de controlador de eventos de Silverlight correspondientes
a los eventos MouseEnter y MouseLeave.
Private Sub Ellipse_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
Dim ell As Ellipse = sender
ell.Fill = New SolidColorBrush(Colors.Red)
End Sub
Private Sub Ellipse_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
Dim ell As Ellipse = sender
ell.Fill = New SolidColorBrush(Colors.Blue)
End Sub
Usar MouseEventArgs o MouseButtonEventArgs

Todos los eventos del mouse, salvo MouseWheel, usan MouseButtonEventArgs o MouseEventArgs para los
datos de los eventos. MouseEventArgs tiene los siguientes miembros:
GetPosition (un mtodo)
OriginalSource (una propiedad heredada de RoutedEventArgs)
StylusDevice
MouseButtonEventArgs extiende MouseEventArgs y agrega los siguientes miembros:
Handled (una propiedad)
Se llama a GetPosition para determinar las coordenadas X e Y del mouse en el momento en que se produjo
el evento. GetPosition devuelve un Point, que notifica los valores X e Y.
GetPosition es un mtodo sincrnico; no tiene que preocuparse de que el mouse se haya movido entre el
momento en que se produce el evento y la ejecucin del controlador. GetPosition es un mtodo y no una
propiedad, de modo que es posible determinar las coordenadas X e Y relativas al sistema de coordenadas
de otro objeto. Normalmente, se pasa uno de los siguientes valores:
null: de este modo, se evalan las coordenadas en el espacio de coordenadas global del rea de
contenido de Silverlight. En este espacio de coordenadas, el punto 0,0 es la esquina superior
izquierda del rea de contenido. relativeTo es un parmetro obligatorio de GetPosition, por lo que
hay que pasar explcitamente este valor null.
El valor de sender: la evaluacin se realiza en funcin de las coordenadas internas del objeto donde
se controla el evento. Por ejemplo, se puede comparar el valor de las coordenadas de GetPosition
con respecto a sender con los valores globales de Width y Height de sender.
Algunos de los objetos contenedores conocidos son elementos primarios inmediatos de sender y
controlan su diseo, como un panel.
En la ilustracin siguiente se muestra el objeto Rectangle verde que utiliza el objeto Rectangle rojo como
valor de relativeTo, a fin de devolver valores de posicin del mouse relativos con respecto al espacio de
coordenadas de relativeTo. Esto significa que al hacer clic cerca de la esquina superior izquierda del objeto
Rectangle verde, se generan valores de posicin del mouse que son negativos con respecto al objeto
Rectangle rojo.

Silverlight
Devolver valores de posicin del mouse relativos
En el ejemplo siguiente se muestra cmo recuperar la posicin actual del puntero del mouse
correspondiente al objeto utilizando un desplazamiento relativo a otro objeto referenceObject del rbol.
Private Sub Rectangle_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
' Return a Point object representing the x- and y-coordinates of the current mouse position
' relative to the reference object.
Dim pt As Point = e.GetPosition(referenceObject)
' Display the current mouse position on statusText, an existing textblock.
statusText.Text = pt.X & " : " & pt.Y
End Sub
Nota:
Si bien MouseLeave utiliza MouseEventArgs, no hay ninguna posicin de mouse significativa disponible a
travs de GetPosition para el evento MouseLeave.
Posicin del mouse, posicin en pantalla y zoom del explorador

Silverlight admite el zoom para algunos hosts de explorador siempre y cuando se configure en la aplicacin.
Para el host de un cliente de explorador que funciona con zoom del explorador, la posicin en pantalla
notificada por los eventos del mouse ya no est alineada con el espacio de coordenadas original. Para estos
casos, se ha de llamar a TransformToVisual para el espacio de coordenadas que se intenta evaluar.
Algunos eventos del mouse son eventos enrutados

Silverlight admite el concepto de evento enrutado para determinados eventos, como algunos de los
eventos del mouse. Todos los eventos enrutados de Silverlight utilizan la estrategia de propagacin. La
estrategia de propagacin de eventos significa que un evento se origina a partir de un objeto secundario y
se enruta a continuacin a objetos primarios sucesivos del rbol de objetos, lo que da lugar a ms
oportunidades para controlar el mismo evento e interactuar con los mismos datos de evento como parte
del control o de la lgica de aplicacin.
Los eventos del mouse que se muestran a continuacin son eventos enrutados; se propagan hasta los
objetos primarios del rbol de objetos:
MouseLeftButtonDown
MouseLeftButtonUp
MouseMove
MouseRightButtonDown
MouseRightButtonUp
MouseWheel
Los eventos del mouse que se muestran a continuacin no se propagan; solo pueden controlarse en el
objeto que los genera:
MouseEnter
MouseLeave
Observe el ejemplo de XAML siguiente, en el que se definen eventos MouseLeftButtonDown para un objeto
Canvas y dos objetos Rectangle. En este caso, si hace clic con el botn en cualquiera de los objetos
Rectangle, dicho objeto recibe el evento MouseLeftButtonDown. A continuacin, el evento se propaga hasta
el objeto Canvas primario.
<Canvas

Silverlight
Background="OldLace" Name="ParentCanvas"
MouseLeftButtonDown="BubbleUpClick">
<Rectangle
Name="RectA"
Width="100" Height="100" Fill="PowderBlue" />
<Rectangle
Name="RectB"
Width="100" Height="100" Fill="Gold"
Canvas.Top="50" Canvas.Left="50" Opacity="0.5" />
<TextBlock Name="statusTextBlock" Canvas.Top="180" />
</Canvas>
En el ejemplo siguiente se muestra cmo implementar el controlador de eventos MouseLeftButtonDown

para el contenido XAML correspondiente del ejemplo anterior.
Private Sub BubbleUpClick(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
Dim fe As FrameworkElement = e.OriginalSource
Dim msg As String = "x:y = " & e.GetPosition(Nothing).ToString()
msg = msg & " from " & fe.Name
statusTextBlock.Text = msg
End Sub
Observe el uso de la propiedad OriginalSource en el controlador. Aqu, la propiedad OriginalSource ha

notificado el objeto que gener el evento. Este objeto podra ser uno de los rectngulos o tambin podra
ser el rea seleccionable del Canvas que rodea los rectngulos. OriginalSource permite distinguir el objeto
del origen de eventos real si est controlando el evento en un objeto primario. Conocer el valor de
OriginalSource y utilizar dicho valor en lugar del parmetro sender en un controlador suele ser til si se deja
que el evento se propague deliberadamente a un elemento primario comn de varios orgenes de eventos
posibles.
Comandos
En Silverlight 4, un nmero reducido de elementos de la interfaz de usuario admite comandos. Los
comandos usan eventos enrutados relacionados con las entradas en su implementacin subyacente y
permiten procesar entradas relacionadas de la interfaz de usuario (una determinada accin del mouse, una
tecla de aceleracin concreta) invocando un solo controlador de comandos. Si hay comandos disponibles
para un elemento de la interfaz de usuario, considere la posibilidad de usar sus API de comandos en lugar
de algn evento de entrada discreto.
La ejecucin de comandos se basa en la interfaz ICommand, que habilita la abstraccin de una llamada de
mtodo parametrizada a travs de su mtodo Execute. Adems, el usuario determina si se puede llamar a
un mtodo antes de invocarlo con el mtodo CanExecute.
Normalmente, los objetos implementan esta interfaz para habilitar llamadas de mtodo a travs de enlaces
XAML. Esto resulta sobre todo til en los escenarios Model-View-ViewModel (MVVM), ya que permite a los
modelos exponer los comandos a los que se pueden enlazar controles, como botones, sin que sea necesario
ningn cdigo adicional.
La propiedad Handled en los datos de evento
En funcin de la estrategia de control de eventos que utilice, puede interesarle que solo un controlador de
eventos reaccione ante un evento del mouse que se propaga. Por ejemplo, si tiene un controlador
MouseLeftButtonDown concreto para uno de los objetos Rectangle, no le interesar que el Canvas primario
tambin controle el evento. En este caso, use la propiedad Handled en los datos del evento.
El propsito de Handled en una clase de datos de evento enrutado de Silverlight es influir sobre el
comportamiento del sistema de eventos enrutados de Silverlight, para notificar que ya ha actuado algn
otro controlador previamente registrado en la ruta de eventos. Cuando se establece el valor de Handled en
true en un controlador de eventos, ese evento no invoca otros controladores tpicos a lo largo de la ruta.
El ejemplo siguiente es una modificacin del ejemplo de controlador de eventos anterior, esta vez con
Handled. Si el evento ya est controlado, el controlador no podr responder. Si el evento an no est
controlado, se llama al controlador. En este caso, el controlador de eventos tambin establece Handled en
true para que no se llame a los controladores adjuntados ms arriba en la ruta de eventos y el rbol de
objetos.
Private Sub BubbleUpClick(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
e.Handled = True

Silverlight
Dim msg As String = "x:y = " & e.GetPosition(Nothing).ToString()
msg = msg & " from " & fe.Name
End Sub
La decisin de establecer o no la propiedad Handled en true representa una decisin consciente de detener
la ruta. El significado exacto de que un evento de entrada determinado est controlado ("Handled") sigue
estando en sus manos en el contexto de la aplicacin, pero su decisin de establecer o no Handled no tiene
ningn efecto tangible sobre el comportamiento de enrutamiento posterior de dicho evento de entrada en
concreto.
Eventos del mouse AddHandler y Already-Handled
Se puede utilizar una tcnica especial para adjuntar controladores que pueden actuar sobre eventos ya
marcados como controlados. En esta tcnica, se utiliza el mtodo AddHandler para registrar un controlador,
en lugar de usar atributos XAML o una sintaxis especfica del lenguaje para agregar un controlador, como
+= en C#. Esta tcnica tiene como limitacin que la API de AddHandler toma un parmetro de tipo
RoutedEvent que identifica el evento enrutado en cuestin. No todos los eventos enrutados de Silverlight
proporcionan un identificador de RoutedEvent, por lo que esta consideracin determina qu eventos
enrutados se podrn controlar en el caso de Handled. Los eventos del mouse MouseLeftButtonDown,
MouseLeftButtonUp y MouseWheel tienen identificadores de evento enrutado como campos en UIElement.
Los dems eventos del mouse (MouseEnter, MouseLeave, MouseMove, MouseRightButtonDown,
MouseRightButtonUp) no tienen identificadores de evento enrutado en Silverlight.
Eventos MouseEnter y MouseLeave
Los eventos MouseEnter y MouseLeave no se enrutan. Estos eventos los generan y los controlan nicamente
los elementos en los que entra o de los que sale el puntero del mouse. Este diseo de eventos es igual que
en WPF y tambin se basa en el modelo de diseo del DOM HTML de Internet Explorer.
Si desea que los elementos primarios sepan que los elementos secundarios han recibido eventos
MouseEnter y MouseLeave, deber configurarlo de modo que forme parte de su propia lgica de control o
de aplicacin. Para los autores de controles, reemplazar OnMouseEnter o OnMouseLeave puede resultar til
en este escenario.
Captura del mouse

Puede usar los mtodos ReleaseMouseCapture y CaptureMouse para habilitar y deshabilitar la captura del
mouse. Cuando un objeto captura el mouse, recibe la entrada del mouse independientemente de que el
puntero del mouse est dentro de sus lmites.
Por ejemplo, si un objeto retiene la captura del mouse y el puntero del mouse se mueve fuera de los lmites
del objeto, el objeto que mantiene la captura continuar recibiendo eventos MouseMove. El objeto sobre el
que aparentemente se encuentra el puntero del mouse durante esta captura no recibe eventos MouseMove.
La captura del mouse requiere que el botn del mouse (o el botn primario, en el caso de que haya botn
primario y botn secundario) est presionado durante todo el tiempo en que el objeto tenga intencin de
mantener la captura del mouse. En el momento en que se suelte el botn del mouse, dicho objeto perder
la captura del mouse y el mouse no se considerar capturado por ningn objeto. Esta condicin genera el
evento LostMouseCapture en el objeto que originalmente mantuvo la captura.
Un escenario principal de captura del mouse es implementar operaciones de "arrastrar y colocar" de
posicionamiento visual o variaciones de las mismas.
Cuando se captura el mouse, es posible que se genere el evento MouseEnter si se captura el mouse en un
elemento que an no tiene el puntero del mouse sobre sus lmites.
Captura del mouse, posicin del mouse y MouseEnter o MouseLeave
LostMouseCapture utiliza MouseEventArgs, por lo que puede notificar la posicin del mouse. Sin embargo,
debe saber que el evento puede desencadenarse en casos en los que la causa no es una llamada al mtodo
ReleaseMouseCapture ni se puede atribuir a que el usuario haya soltado el botn primario del mouse
dentro de los lmites de la aplicacin. Por ejemplo, el entorno del host de explorador podra recibir el foco y,
por lo tanto, la captura en respuesta a una accin del usuario, una accin propia o una accin en el nivel del
sistema operativo (por ejemplo, ALT+TAB en Windows) podra quitar completamente el mbito de entrada
del mbito de contenido de Silverlight. En estos casos, la posicin del mouse en los datos del evento

Silverlight
LostMouseCapture es la ltima posicin conocida y puede ser que estos datos no sean tiles para una
accin de la interfaz de usuario.
Adems, no es un diseo robusto emparejar siempre una llamada a ReleaseMouseCapture al evento
MouseLeave en un elemento concreto de la interfaz de usuario que se va a usar como origen de captura. El
motivo es el siguiente: cuando LostMouseCapture notifica la ltima posicin conocida del mouse, se genera
un evento MouseEnter y, a continuacin, se generan otros eventos MouseEnter a medida que se mueve el
mouse. En lugar de llamar al mtodo ReleaseMouseCapture al producirse el evento MouseLeave, se ha de
escuchar el evento LostMouseCapture.
El mouse como un lpiz

Los eventos del mouse tambin pueden usarse para detectar las acciones realizadas por un dispositivo de
lpiz. Esto se debe a que es posible usar un mouse en lugar de un lpiz para la entrada, que acte como un
lpiz al que le faltan algunas variacin de presin y que no puede ser Inverted.
Promocin de eventos multitoque a eventos del mouse

Silverlight admite eventos de entrada sin formato para la entrada multitoque. En las plataformas en las que
est disponible la entrada multitoque, Silverlight se registra como la aplicacin que va a recibir la entrada
tctil, toma los mensajes WM_TOUCH que recibe y genera los eventos de toque correspondientes. Los
usuarios podran usar dispositivos multitoque para interactuar con aplicaciones que no tienen un control
especfico de la entrada multitoque. Para hacer frente a esta situacin, los eventos multitoque tambin se
promueven como eventos simples del mouse. El punto de toque principal hacia abajo se promueve como
presionar el botn primario del mouse, el ltimo punto de toque es soltar el mouse y cualquier movimiento
intermedio se interpreta potencialmente como una captura del mouse, as como un desplazamiento del
mouse. Para obtener ms informacin, vea Multitouch Input.
Eventos que se producen al hacer clic con el botn secundario del mouse
Los eventos que se producen al hacer clic con el botn secundario del mouse son nuevos en Silverlight 4.
Para capturar estos eventos, el cliente debe ejecutar una plataforma capaz, por su diseo de hardware y de
sistema operativo, de generar una accin de entrada de hacer clic con el botn secundario del mouse. Los
datos de evento MouseButtonEventArgs no contienen informacin sobre el botn en el que se ha hecho
clic. Es responsabilidad del controlador responder a los eventos apropiados que denotan un clic con el
botn primario con respecto a los que denotan un clic con el botn secundario. Los eventos de clic con el
botn secundario son eventos enrutados, son similares a los eventos de clic con el botn primario pero no
comparten los datos de evento para la determinacin de Handled ni se relacionan de ninguna otra manera
con las acciones de clic con el botn primario. Si el usuario presiona simultneamente ambos botones del
mouse, se generan dos eventos independientes.
Doble clic
Silverlight no proporciona ningn evento designado para el doble clic de un botn del mouse. Le
corresponde al cdigo de la aplicacin determinar si los eventos de los botones del mouse constituyen un
doble clic, si los dos clics se han producido en un mbito aceptable, etc. Normalmente, el cdigo de una
aplicacin usa un objeto Timer en el primer controlador del botn del mouse y, a continuacin, comprueba
el temporizador en la llamada al siguiente controlador.
Eventos del mouse fuera del rbol visual

Algunos objetos de Silverlight participan en una relacin con el rbol visual principal que es, desde el punto
de vista conceptual, como una superposicin sobre los elementos visuales principales, y no participan en las
relaciones habituales entre elementos primarios y secundarios que conectan todos los elementos del rbol a
la raz visual. Es lo que sucede con cualquier objeto Popup o ToolTip mostrado. Si desea detectar la entrada
del mouse procedente de Popup o ToolTip, debera colocar los controladores en elementos de la interfaz de
usuario concretos que estn dentro de Popup o ToolTip y no los propios elementos ToolTip o Popup;
tampoco debera usarse el enrutamiento dentro de cualquier composicin que se realice para el contenido
de Popup o ToolTip. Esto se debe a que el enrutamiento de eventos de los eventos enrutados solo funciona
a lo largo del rbol visual principal. Ni Popup ni ToolTip se consideran elementos primarios de los
elementos de la interfaz de usuario secundarios, y nunca reciben el evento del mouse enrutado, aun cuando
intentan usar elementos como el segundo plano predeterminado de Popup como el rea donde hacer clic.

Silverlight
Arrastrar y colocar
Arrastrar y colocar es un comportamiento relacionado con el mouse, pero no se aborda en este tema.
Eventos del mouse, hosts de explorador y sistemas operativos

Si una aplicacin basada en Silverlight se hospeda en un explorador, el host del explorador desempea un
papel a la hora de pasar los eventos del mouse al contenido hospedado. En el siguiente nivel de la
arquitectura, el sistema operativo procesa todas las entradas de las aplicaciones (incluidos hosts de
explorador) que se ejecutan con dicho sistema operativo; esto tambin se aplica a las aplicaciones de
ejecucin fuera del explorador. A la hora de controlar eventos de entrada, se ha de saber que la forma en
que se notifican las entradas en Silverlight puede dar lugar a eventos de entrada "perdidos" o "adicionales"
aparentes. Por ejemplo, consideremos el caso en el que hay un controlador para los eventos
MouseLeftButtonDown y MouseLeftButtonUp en el elemento raz de la aplicacin. El usuario hace clic con el
botn primario del mouse en alguna parte de la aplicacin, que genera un evento, por lo que se ejecuta el
controlador de MouseLeftButtonDown. Ahora, sin embargo, el usuario podra mover el puntero del mouse
completamente fuera del rea de contenido de Silverlight y soltar el botn. O bien, podra trasladar las
tareas a otra parte que no sea el host del explorador, por lo que el host deja de mostrarse, y, a continuacin,
podra soltar el botn del mouse. Si la lgica de aplicacin espera que el evento MouseLeftButtonDown
siempre vaya seguido por el evento MouseLeftButtonUp y que no se pueda producir ningn otro evento
MouseLeftButtonDown hasta ese momento, es posible que la aplicacin se encuentre en un estado
inesperado. Como regla general, se debe disear la lgica de aplicacin de modo que la interaccin con los
eventos del mouse sea robusta ya que es posible, por diversos motivos, que Silverlight no capture todos los
eventos de entrada del usuario.
Notas sobre la plataforma
En Apple Safari, si se produce una excepcin no controlada en el cdigo del controlador de eventos, no se
llama a ningn otro controlador de eventos relacionado con el mouse a lo largo de la duracin del
complemento Silverlight. En otros exploradores, solo se cerrar el controlador que contena el error
(normalmente con un error de scripting que se devuelve al explorador); pueden seguir funcionando otros
controladores de eventos del mouse sin errores.
4.3.1.1. Entrada de rueda del mouse

Silverlight proporciona compatibilidad con la entrada de rueda del mouse mediante un evento de la clase
UIElement. La entrada de rueda del mouse para Silverlight se modela en la entrada de rueda del mouse para
WPF. La captura de la entrada de rueda del mouse tiene algunas dependencias de la plataforma. En este
tema se describen los fundamentos de la administracin de la entrada de rueda del mouse y cmo una
aplicacin puede solucionar los problemas de dependencia de la plataforma relacionados con la entrada de
rueda del mouse.
API para el evento MouseWheel

La entrada de rueda del mouse genera su propio evento de entrada, MouseWheel, que se define en
UIElement junto con los otros eventos especficos del mouse (como MouseMove). El evento tiene un
delegado (MouseWheelEventHandler) que se hace cargo de los datos de evento (MouseWheelEventArgs)
que son especficos de la entrada de rueda del mouse. MouseWheelEventArgs tiene una propiedad Delta
que informa de la cantidad que ha cambiado la rueda del mouse, desde un estado de inicio o desde el
ltimo evento MouseWheel.
Cundo se usa la API MouseWheel

A partir de Silverlight 3, normalmente hay dos maneras de procesar la entrada de rueda del mouse. Cuando
Silverlight se hospeda en un explorador, la entrada de rueda del mouse se puede procesar usando eventos
DOM HTML en el host del explorador. O bien, el evento MouseWheel puede procesar la entrada de rueda
del mouse en cdigo administrado. Todava puede proporcionar el control de eventos DOM desde cdigo
administrado llamando al mtodo AttachEvent para OnMouseWheel en el elemento DOM pertinente y
proporcionando un controlador.
Hay dos casos donde los eventos de rueda del mouse de DOM HTML no estn disponibles:
La aplicacin se muestra en modo de pantalla completa.

Silverlight
La aplicacin se implementa fuera del explorador, por lo que no hay ninguna pgina HTML de
hospedaje para controlar los eventos DOM.
El evento MouseWheel administrado admite estos dos casos. Por tanto, debe usar el evento MouseWheel
en lugar de eventos DOM siempre que sea posible. Esto es especialmente cierto si implementa o usa
controles con determinado control de eventos de rueda del mouse. El evento MouseWheel se enruta a
travs de otros objetos administrados de la interfaz de usuario de Silverlight, se puede cancelar con la
propiedad Handled, y se integra con las plantillas de control y el modelo de estados visuales en general.
Debido a las dependencias de la plataforma, es posible que todava desee usar el control del DOM HTML de
OnMouseWheel. Esto se describe con ms detalle en "Dependencias de la plataforma", ms adelante en
este tema.
Control en la API MouseWheel

Los datos de evento de MouseWheel (MouseWheelEventArgs) exponen una propiedad Handled. Uno de los
propsitos de Handled es comn a varios de los eventos enrutados de Silverlight. Estableciendo Handled en
true, se evita que los controladores generales acten sobre el evento y finalicen la ruta. (Una excepcin es
que se pueden registrar controladores que incluso pueden actuar a favor de eventos enrutados ya
controlados si es necesario.
Adems de finalizar la ruta del evento administrado, al establecer Handled en true, tambin se marca el
evento del DOM HTML como administrado. En otras plataformas distintas de Windows e Internet Explorer,
Handled no tiene ningn efecto en el evento del DOM HTML.
Ciertos controles (por ejemplo, Calendar) proporcionan control para los eventos de rueda del mouse en el
nivel de control. Esos controles proporcionan una invalidacin del mtodo OnMouseWheel. Una
invalidacin tpica de OnMouseWheel de un control realizar alguna accin de entrada relacionada que la
accin de rueda del mouse permite y establece Handled en true en los datos de eventos. El resultado es que
no se suelen invocar controladores de instancia especficamente para MouseWheel. En general, debe
considerar que es el diseo previsto del control. Sin embargo, si tiene un escenario en el que todava desea
controlar MouseWheel desde un control que invalida OnMouseWheel, puede adjuntar controladores con
UIElement.AddHandler en lugar de los atributos XAML o las palabras claves/operadores del lenguaje para el
control de eventos, como el operador de asignacin y suma (+=) en C#.
Delta en la API MouseWheel

Delta es la propiedad de datos de evento que es nica para un evento de rueda del mouse. Delta notifica el
nmero de paradas en las que la rueda del mouse ha girado, multiplicado por un factor. El factor es 120,
que es coherente con WPF y las API de entrada predecesoras. Normalmente le interesar si Delta es positivo
o negativo; el factor no suele ser importante. Delta positivo indica que la rueda del mouse ha girado para
alejarse del usuario. Delta negativo indica que la rueda del mouse ha girado hacia el usuario.
Dependencias de la plataforma
El evento MouseWheel solo se genera y se puede controlar para las plataformas compatibles. Por ejemplo,
en Microsoft Windows, MouseWheel es compatible en Internet Explorer y Firefox, y en las aplicaciones con
ejecucin fuera del explorador. Cualquier cliente y host de explorador que use un sistema operativo
Macintosh no genera el evento. En la tabla siguiente se enumeran varias plataformas y si se admite
MouseWheel.
Plataforma Compatibilidad de MouseWheel

Windows, Internet Explorer S
Windows, Firefox S
Windows, Firefox, sin ventana No
Windows, ejecucin fuera del explorador S
Macintosh No
Nota:
Firefox (u otros exploradores que usan NPAPI) no genera el evento si la aplicacin se est ejecutando en
modo sin ventanas.

Silverlight
Para procesar informacin de rueda del mouse para los clientes o situaciones que no generan MouseWheel,
se debe usar el control de eventos del DOM HTML para los eventos mouseWheel (el atributo
onMouseWheel especifica un controlador) que estn disponibles en el scripting de cliente y el puente
HTML.
4.3.1.2. Entrada multitoque

La entrada multitoque es un tipo de entrada que se basa en el concepto de entrada de un toque y,
potencialmente, en varios toques y sus caractersticas se interpretan como una unidad (a veces denominada
marco). La entrada multitoque necesita dispositivos de hardware sensibles al tacto, as como un entorno que
admita la infraestructura necesaria para exponer los eventos de toque a las aplicaciones individuales. En este
tema se documenta la compatibilidad con la entrada multitoque en Silverlight y se describen algunos
conceptos clave.
Hardware multitoque
El concepto de multitoque necesita dispositivos de hardware capaces de registrar la presin tctil que se
produce en una superficie. La superficie podra ser directamente la pantalla (como en un dispositivo Tablet
PC) o un dispositivo de entrada dedicado independiente (como una tableta grfica). De stos, el dispositivo
Tablet PC o dispositivos similares con sensibilidad tctil directamente en la pantalla son por lo general los
ms pertinentes para Silverlight.
Requisitos de plataforma
La entrada multitoque necesita un entorno (dispositivo; plataforma y sistema operativo; aplicacin host
como un explorador) que pueda difundir la entrada tctil a una aplicacin individual, como una aplicacin
basada en Silverlight.
Los dispositivos compatibles con la entrada multitoque son un mercado en evolucin y los dispositivos
concretos no se tratan en este tema.
Windows 7 admite la entrada multitoque en el nivel del sistema operativo. Esto se admite en parte a travs
de un mensaje (WM_TOUCH). En este nivel, el sistema operativo proporciona una promocin de mensajes
multitoque a mensajes del mouse. La promocin est presente de forma que los usuarios de entrada
multitoque puedan usar el toque y los gestos como sustitutos de movimientos del mouse o clics del mouse.
Esto es til al interactuar con aplicaciones que quizs no estn preparadas para el toque y la aplicacin
realiza todos sus procesamientos de entrada espacial a travs de eventos del mouse y mensajes. Windows 7
tambin combina los mensajes cuando es necesario, por lo que las aplicaciones no tienen que procesar una
gran cantidad de mensajes intermedios que generan eventos incrementales.
La versin 8 de Internet Explorer como un host de explorador tambin reconoce la entrada multitoque.
Internet Explorer versin 8 reenva los mensajes multitoque de plataforma a complementos como Silverlight
que se ejecutan dentro de Internet Explorer, por lo que las aplicaciones de Silverlight pueden interactuar
con la entrada multitoque.
Entrada multitoque para Silverlight (se muestra para el host IE8)

Silverlight
La entrada multitoque tambin se admite para Silverlight en las versiones actuales de hosts Firefox que se
ejecutan en Windows 7 y para las aplicaciones con ejecucin fuera del explorador que se ejecutan en
Windows 7. Sin embargo, la entrada multitoque no se admite para las aplicaciones que se ejecutan en modo
de pantalla completa.
Registro para la entrada multitoque
Como parte de la arquitectura de plataforma ms amplia para entradas multitoque, cada aplicacin que
desee recibir mensajes multitoque debe registrar su HWND (la API tctil para Windows 7 incluye
RegisterTouchWindow con esta finalidad). El runtime de Silverlight 4 se ocupa de este paso de registro, y
registra Silverlight como un runtime y todas las aplicaciones que usen Silverlight como runtime. Por lo tanto,
generalmente no es necesario interactuar de forma directa con el cdigo de plataforma para procesar la
entrada multitoque. Sin embargo, las caractersticas de interaccin multitoque dentro de la API tctil para la
entrada multitoque de Windows 7 y Silverlight 4 son bastante concretas:
Silverlight 4 se registra para la entrada tctil sin formato, no gestos. Si entre sus requisitos se
incluyen los movimientos, debe procesar la entrada tctil en movimientos utilizando su propio
cdigo de aplicacin, dentro del contexto de Silverlight. Alternativamente, puede necesitar un
diseo de interoperacin mayor para poder incluir un HWND independiente registrado para los
movimientos multitoque desde la plataforma y que interopere con una rea de contenido de
Silverlight.
En general, Silverlight 4 promueve la entrada tctil sin formato a eventos del mouse. (Sin embargo,
se puede deshabilitar la promocin por marco tctil, como se describe en secciones posteriores de
este tema).
Dentro de un host, el host del explorador puede promover que ciertos gestos se conviertan en
eventos distintos de MouseDown, MouseMove y MouseUp.
Promocin a eventos del mouse

La promocin de eventos del mouse existe para que los usuarios de entrada multitoque puedan usar el
toque y los gestos como sustitutos de movimientos del mouse o clics del mouse. Conceptualmente este es
el valor predeterminado, ya que las aplicaciones antiguas o que no reconocen la entrada multitoque no
sabran a qu API llamar para realizar la promocin y, por tanto, la plataforma realiza la promocin a
eventos del mouse en la mayora de los casos. Silverlight 4 perpeta el concepto general de promocin a
eventos del mouse prcticamente por las mismas razones. Cualquier control de Silverlight existente podra
tener controladores para eventos del mouse, pero no especficamente para eventos multitoque. Por
ejemplo, se esperara que un botn actuase como si se hiciera clic en l si el usuario interacta con l a
travs de un dispositivo multitoque.
La promocin a eventos del mouse tiene el potencial de dualismo de evento cuando hay un control
deliberado de un marco multitoque y sus puntos tctiles. Dentro del cuerpo del controlador de un evento
multitoque de Silverlight, se puede suspender la promocin a eventos del mouse durante el primer toque
descendente. Por ejemplo, si desea crear un botn que reconozca la entrada tctil y que realice distintas
acciones en funcin de las caractersticas del toque, puede suspender la promocin para que su botn no
cambie al comportamiento normal del "clic" y, en su lugar, obtenga acceso a la lgica discreta para
averiguar cmo administrar la entrada. Para ello, llame a SuspendMousePromotionUntilTouchUp como una
de las primeras operaciones del controlador.
La naturaleza exacta de la promocin a eventos del mouse no se documenta aqu, porque es una
caracterstica de la plataforma. En trminos generales, el mecanismo consiste en una promocin mensaje a
mensaje.
Procesamiento de toques en movimientos

Silverlight procesa los mensajes multitoque en el nivel de mensaje sin formato, de forma anloga al mensaje
WM_TOUCH de la plataforma, junto con el acceso a otras API que pueden capturar las caractersticas del
punto tctil en ese nivel sin formato y que despus se exponen como API de Silverlight. Silverlight no
procesa los toques en movimientos, no usa la funcionalidad de la plataforma a tal efecto ni procesa los
mensajes WM_GESTURE de forma nativa. (El procesamiento de WM_GESTURE necesitara un estado de
registro con la plataforma al que Silverlight 4 no opta.)

Silverlight
Si desea procesar la entrada multitoque mediante la metfora de gestos, el cdigo debe controlar los
eventos de toque y usar la API expuesta bajo Silverlight 4 para procesarlos en gestos, usando o no la API de
plataforma para los gestos. Esto no es trivial.
API tctil
Una diferencia importante entre la entrada multitoque y otras tcnicas de entrada admitidas en Silverlight
(mouse, teclado o lpiz) es que es preciso registrarse para los eventos multitoque en el nivel de aplicacin, y
no se agregan controladores a elementos de entrada especficos (objetos UIElement ). Esto es coherente
con la metfora de que Silverlight en su conjunto es la "aplicacin" registrada con la plataforma.
Para asignar un controlador de eventos multitoque, se asigna un controlador para el evento
esttico Touch.FrameReported. System.Windows.Input.Touch es una clase de servicio esttica que
existe solamente para este fin con Touch.FrameReported como su nica API.
El controlador que se escribe para Touch.FrameReported est basado en el delegado de
TouchFrameEventHandler.
En un diseo de interfaz de usuario tpico, podra haber reas de la interfaz de usuario dentro de las
cuales se admitiran acciones multitoque concretas y otras reas donde sera mejor usar la
promocin a eventos del mouse y no necesariamente procesar las entradas como multitoque. Para
determinar dnde se encuentra el punto tctil principal, es posible que tenga que evaluar las
coordenadas generales con respecto a la ubicacin del elemento que reconoce la entrada
multitoque, as como sus lmites. Para obtener ms informacin y cdigo de ejemplo, vea
GetPrimaryTouchPoint.
Tal y como se ha mencionado previamente, quizs desee suspender la promocin a eventos del
mouse como parte de la lgica de TouchFrameEventHandler. Para ello, llame a
SuspendMousePromotionUntilTouchUp como una de las primeras operaciones.
Los mensajes de entrada tctil, tal y como se notifican a Silverlight 4, suelen combinarse como
marcos, que comienzan con un punto tctil "descendente" principal. A veces tan solo interesa el
primer punto tctil y la primera accin "ascendente", pero el marco puede contener otros puntos
tctiles y acciones de "movimiento". Para tener acceso a la coleccin completa de puntos de un
marco en sus controladores, llame a GetTouchPoints. Probablemente para un punto tctil
determinado la informacin ms importante sea su Position.
Otras API exponen informacin que en la API de plataforma se encontrara en la estructura
TOUCHINPUT. Estos son algunos ejemplos de esa API: TouchFrameEventArgs.Timestamp;
TouchDevice.DirectlyOver; TouchPoint.Size; TouchPoint.TouchDevice. Dependiendo del escenario,
no siempre necesitara este nivel de informacin.
API de manipulacin en la versin 4 de Silverlight

La clase UIElement de Silverlight 4 tiene varios eventos relacionados con manipulaciones, as como clases de
respaldo de eventos como ManipulationStartedEventArgs. Sin embargo, estas API y los conceptos de
manipulacin relacionados no tienen plena compatibilidad bajo Silverlight 4 en tiempo de ejecucin. Para
controlar estos eventos, la aplicacin debe estar destinada a Silverlight para Windows Phone. Los eventos
existen en los ensamblados de Silverlight 4 para proporcionar compatibilidad con el diseador comn tanto
para Silverlight 4 como para Silverlight para Windows Phone.
4.3.2. Compatibilidad con el teclado

Silverlight proporciona un conjunto de eventos de teclado que permiten responder a las pulsaciones de
tecla. Los eventos del teclado tienen varias similitudes con los eventos del mouse. Los eventos del mouse,
foco, dispositivo tctil y teclado a veces se denominan colectivamente eventos de entrada de Silverlight.
Eventos de teclado
Silverlight proporciona los eventos de teclado que se describen en la tabla siguiente.
Evento Descripcin
Se produce cuando se presiona una tecla mientras el foco se encuentra en el complemento (y
KeyDown
algn elemento interno).

Silverlight
Se produce cuando se suelta una tecla mientras el foco se encuentra en el complemento (y algn
KeyUp
elemento interno).
Eventos de teclado y foco

Para que se reciba un evento de teclado, el objeto debe tener el foco; de lo contrario, no se generan
eventos de teclado. Hay dos niveles de foco: foco en el nivel de complemento y foco en el nivel de un
elemento individual de la interfaz de usuario en el rea de contenido de Silverlight.
Un complemento Silverlight obtiene el foco cuando el usuario hace clic en el rea del complemento, usa el
tabulador desde la secuencia de tabulacin de nivel de explorador o proporciona la accin de activacin
adecuada al modelo de complemento. En la mayora de los casos, tambin se puede llamar al mtodo
Focusdel DOM HTML si se desea forzar el foco en el nivel HTML. El comportamiento de foco exacto al
cargarse por primera vez el contenido de Silverlight vara segn si el contenido se hospeda en un
explorador y segn el host del explorador.
Un elemento individual obtiene el foco cuando el usuario hace clic directamente en ese elemento del diseo
o utiliza la tecla TAB para entrar en una secuencia de tabulacin de Silverlight dentro del rea de contenido
de Silverlight. Asimismo, se puede llamar al mtodo Focus de un control para forzar el foco, pero solo si el
objeto UIElement en cuestin tambin es un Control. Cuando se fuerza el foco, se suele hacer a fin de
permitir acciones del teclado para ese elemento de la interfaz de usuario; normalmente, solo los controles
visibles necesitan procesar las acciones del teclado.
Si el usuario hace clic en un elemento del rea de contenido del complemento Silverlight, estas dos
condiciones de foco se dan simultneamente (y, en este caso, GotFocus a veces se genera por duplicado).
Eventos de teclado y hosts de explorador
Cuando una aplicacin basada en Silverlight se hospeda en un explorador, los diferentes exploradores
podran controlar los eventos de teclado de manera distinta debido a problemas en el control de teclado
del host que afectan a los comandos y debido a los cdigos de tecla no porttiles. Cuando cree una
aplicacin que utilice acciones del teclado, asegrese de probar la aplicacin en cada uno de los
exploradores de implementacin de destino.
Si una aplicacin se hospeda en un explorador, el host del explorador determina qu pulsaciones de tecla
interpreta como comandos y cules pasa al contenido hospedado. Esto significa que no es posible
recuperar determinadas combinaciones de pulsaciones de tecla desde las funciones de controlador de
eventos KeyUp y KeyDown en algunos hosts de explorador. La mayora de las pulsaciones de tecla que un
host de explorador interpreta como comandos son pulsaciones de tecla de mtodo abreviado o de
aceleracin y, si esto sucede, las pulsaciones de tecla no se pasan como eventos de tecla a Silverlight. Por
ejemplo, CTRL+D es una combinacin de pulsaciones de tecla de mtodo abreviado que se usa para
agregar una direccin URL favorita a los hosts de los exploradores Firefox e Internet Explorer, por lo que ni
CTRL ni D se notifican como eventos de tecla al nivel de hospedaje intermedio que Silverlight debe utilizar
como origen de entrada cuando las aplicaciones basadas en Silverlight se hospedan en un explorador.
El comportamiento del host de explorador tambin afecta al comportamiento de repeticin automtica del
evento KeyDown. Los hosts del explorador Internet Explorer pueden emitir eventos de tecla presionada en
el nivel del explorador para los casos en los que se mantiene presionada una tecla. El evento KeyDown de
Silverlight tambin expone este comportamiento de repeticin automtica. Sin embargo, algunos hosts de
explorador no proporcionan informacin de tecla presionada de repeticin automtica al nivel de
integracin del complemento, por lo que Silverlight no puede repetir automticamente KeyDown en estos
casos.
Eventos de teclado y modo de pantalla completa
Cuando el complemento Silverlight se muestra en modo de pantalla completa y la aplicacin se hospeda en
un explorador o fuera del explorador sin confianza elevada, no se pasan los eventos de teclado de todas las
posibles teclas a los controladores de eventos de teclado de la aplicacin. Se aplican las siguientes
consideraciones cuando una aplicacin se ejecuta en modo de pantalla completa:
Las teclas especficas FLECHA ARRIBA, FLECHA ABAJO, FLECHA IZQUIERDA, FLECHA DERECHA,
BARRA ESPACIADORA, TAB, RE PG, AV PG, INICIO, FIN y ENTRAR generan eventos KeyDown y

Silverlight
KeyUp. Estas teclas se pueden utilizar para iniciar acciones en la aplicacin, incluso si se ejecuta en
modo de pantalla completa.
Todas las dems teclas no generan eventos KeyDown ni KeyUp, por lo que no se puede actuar
sobre las acciones de estas teclas.
Silverlight controla la tecla ESC, que devuelve la aplicacinal modo incrustado.
Esta limitacin de entradas de teclado en el modo de pantalla completa es una caracterstica de seguridad.
Sin embargo, una aplicacin de ejecucin fuera del explorador que utiliza confianza elevada no tiene esta
restriccin y puede controlar todos los eventos de tecla mientras se ejecuta en modo de pantalla completa.
Controladores de eventos de teclado

Los controladores de eventos de entrada implementan un delegado que proporciona la siguiente
informacin:
Puede determinar el sender del evento. El sender notifica el objeto al que est adjuntado el
controlador de eventos.
Tambin se reciben los datos del evento. Para los eventos de teclado, esos datos sern una
instancia de KeyEventArgs. El delegado para los controladores es KeyEventHandler. Las
propiedades ms pertinentes de KeyEventArgs para la mayora de los escenarios de controlador
son Key y posiblemente PlatformKeyCode.
Dado que los eventos de teclado son eventos enrutados, los datos de evento proporcionan
OriginalSource. Si se permite deliberadamente la propagacin de los eventos a travs de un rbol
de objetos, a veces OriginalSource es el objeto de preocupacin en lugar de sender, aunque eso
depende del diseo.
Adjuntar un controlador de eventos de teclado

Puede adjuntar funciones de controlador de eventos de teclado a cualquier objeto de Silverlight que incluya
el evento como miembro (cualquier clase derivada de UIElement). En el ejemplo de cdigo XAML siguiente
se muestra cmo adjuntar controladores del evento KeyUp para un Canvas.
<Canvas KeyUp="Canvas_KeyUp">
...
</Canvas>
Definicin de un controlador de eventos de teclado

En el ejemplo siguiente se muestra la definicin incompleta del controlador de eventos para el mtodo
OnKeyUp adjuntado anteriormente.
Private Sub Canvas_KeyUp(ByVal sender As Object, ByVal e As KeyEventArgs)
'handling code here
End Sub
Uso de KeyEventArgs
Todos los eventos de teclado utilizan KeyEventArgs para los datos de evento, y KeyEventArgs contiene las
propiedades siguientes:
Key
PlatformKeyCode
Handled
OriginalSource (heredada de RoutedEventArgs)
Key
El evento KeyDown se genera si se presiona una tecla (del mismo modo, se genera el evento KeyUp cuando
sta se suelta). Normalmente, el usuario escucha los eventos para procesar un valor de tecla concreto. Para
determinar qu tecla se presiona o se libera, ha de comprobar el valor de Key en los datos del evento. Key
devuelve un valor de tecla porttil (un miembro de la enumeracin Key) o devuelve Key.Unknown.
Si el valor de Key no es Unknown, el evento representa un solo y especfico valor de tecla porttil, y se
puede comprobar comparndolo con los valores esperados del controlador para ver si este debe seguir
respondiendo.

Silverlight
Los cdigos de tecla porttiles son un subconjunto comn de todos los cdigos de tecla posibles de las
plataformas compatibles de Silverlight. Por ejemplo, la pulsacin de tecla 'v' se representa como un valor
Key.V de la propiedad Key.
PlatformKeyCode
Algunas pulsaciones de tecla no son porttiles. Un ejemplo es la tecla BLOQ DESPL en Microsoft Windows.
Si el valor de Key es Unknown, ello significa que se ha presionado o liberado una tecla, pero dicha tecla es
de una plataforma determinada. En este caso, se puede comprobar el valor de la propiedad
PlatformKeyCode. Esta propiedad devuelve un entero. El entero se debe evaluar en el contexto de lo que
dicho valor significa para una plataforma determinada y cmo asigna los cdigos de tecla.
Nota:
En este tema no se aborda cmo determinar la plataforma (lo que podra ser necesario para interpretar el
valor de la propiedad PlatformKeyCode). Dependiendo del diseo global de la aplicacin, se puede hacerlo
en el nivel de HTML o el nivel del host del explorador analizando los encabezados de las solicitudes HTTP de
la pgina HTML de hospedaje o estableciendo una variable en el momento de instalar una aplicacin de
ejecucin fuera del explorador. Dentro de la API administrada, Silverlight proporciona la clase
BrowserInformation, as como otros tipos en el espacio de nombres System.Windows.Browser que podran
ser tiles para capturar informacin que tambin est disponible en el DOM HTML o en el host del
explorador.
Teclas modificadoras
Se considera que algunas pulsaciones de tecla son modificadoras. Se trata de teclas que normalmente se
presionan junto con otras. Las teclas modificadoras de todas las plataformas incluyen las teclas MAYS y
CTRL. Algunas teclas modificadoras son especficas de la plataforma.
Nota:
La tecla CTRL puede tener un nombre diferente en algunos teclados. En esta documentacin, se usa la
cadena CTRL para identificar la tecla porque se corresponde con el valor Key.Ctrl en la API.
Normalmente, las teclas modificadoras se interpretan para comprobar si se mantiene presionada una tecla
modificadora mientras se recibe otro evento de tecla. Esto es porque la otra tecla y una tecla modificadora
representan una combinacin de teclas de inters para la aplicacin. En este caso, la informacin de la tecla
modificadora no se transmite como parte de los mismos datos de evento. En su lugar, se utiliza la clase de
utilidad Keyboard desde el interior de los controladores de eventos para comprobar los modificadores,
como parte del control del evento correspondiente al valor de tecla que se modifica potencialmente.
Para determinar qu modificadores se aplican, compruebe el valor de la propiedad Modifiers de la clase
esttica Keyboard. Esta propiedad devuelve un valor de enumeracin de marcador ModifierKeys. El valor es
un marcador porque se podran presionar varios modificadores.
Sin embargo, independientemente de cmo se procesen las teclas modificadoras para otros eventos
correspondientes a teclas no modificadoras, una tecla modificadora genera sus propios eventos de tecla.
Puede decidir controlar estos eventos o llevar a cabo el seguimiento del estado propio de la tecla
modificadora, pero el uso del valor de Modifiers es generalmente ms prctico.
Nota:
Se podra usar la tecla CTRL en combinacin con un clic del mouse para generar un equivalente a entradas
mediante el botn secundario del mouse en las plataformas Macintosh.
Ejemplo de controlador de eventos de teclado

En el ejemplo siguiente, un controlador de eventos controla el evento KeyUp. Este controlador comprueba
concretamente la combinacin de teclas CTRL+V. Se omite cualquier otro valor de tecla (incluso un valor
Key.V no modificado).
Private Sub Canvas_KeyUp(ByVal sender As Object, ByVal e As KeyEventArgs)
'check for the specific v key, then check modifiers
If (e.Key = Key.V) Then
If ((Keyboard.Modifiers And ModifierKeys.Control) = ModifierKeys.Control) Then
'specific Ctrl+V action here
Else 'ignore the keystroke

Silverlight
End If
End If
End Sub
Eventos enrutados de teclado

Silverlight admite el concepto de evento enrutado para algunos eventos, entre ellos KeyDown y KeyUp. Los
eventos enrutados en Silverlight utilizan la estrategia de enrutamiento de propagacin. Esta estrategia
significa que un evento se origina a partir de un objeto secundario y se enruta a continuacin a objetos
primarios sucesivos del rbol de objetos, lo que proporciona otra oportunidad para controlar el mismo
evento e interactuar con los mismos datos de evento.
Observe el ejemplo de XAML siguiente, en el que se definen eventos KeyUp para un objeto Canvas y dos
objetos Button. En este caso, si libera una tecla mientras alguno de los objetos Button contiene el foco, se
genera el evento KeyUp y cualquier controlador agregado a Button tiene la primera oportunidad de
administrar ese evento. A continuacin, el evento se propaga hasta el objeto Canvas primario.
<StackPanel KeyUp="TopLevelKB">
<Button Name="ButtonA" Content="Button A"/>
<Button Name="ButtonB" Content="Button B"/>
<TextBlock Name="statusTextBlock"/>
</StackPanel>
En el ejemplo siguiente se muestra cmo implementar el controlador del evento KeyUp para el contenido
XAML correspondiente del ejemplo anterior.
Private Sub TopLevelKB(ByVal sender As Object, ByVal e As KeyEventArgs)
If Not (e.Key = Key.Unknown) Then
Dim msg As String = "The key " & e.Key.ToString()
msg = msg & " was pressed while focus was on "
msg = msg & fe.Name
End If
End Sub
Observe el uso de la propiedad OriginalSource en el controlador anterior. Aqu, la propiedad Original

Source informa del objeto que gener el evento. El objeto no puede ser StackPanel, porque StackPanel no
es un control y no puede tener el foco; solo uno de los dos botones de StackPanel puede haber generado el
evento. Pero, cul de los dos? OriginalSource permite distinguir el objeto de origen de evento real si se
controla el evento en un objeto primario.
La propiedad Handled en los datos de evento
Dependiendo de la estrategia de control de eventos, le puede interesar que solo un controlador reaccione
ante un evento que se propaga. Por ejemplo, si tiene un controlador del evento KeyUp concreto para uno
de los objetos Button, puede que no le interese que el panel primario controle tambin el evento. En este
caso, use la propiedad Handled en los datos del evento.
La finalidad de la propiedad Handled en una clase de datos de eventos enrutados de Silverlight es influir en
el comportamiento del sistema de eventos enrutados de Silverlight, para notificar que otro controlador
registrado anteriormente en la ruta de eventos ya ha actuado. Cuando se establece la propiedad Handled
en true en un controlador de eventos, ese evento detiene el enrutamiento y no se enva a los elementos
primarios sucesivos.
El ejemplo siguiente es una modificacin del ejemplo de controlador de eventos anterior, esta vez con
Handled. Si el evento ya est controlado, el controlador no podr responder. Si el evento an no est
controlado, se llama al controlador. En este caso, el controlador de eventos tambin establece la propiedad
Handled en true para que no se llame a cualquier controlador adjunto ms adelante en la ruta de eventos y
el rbol de objetos.
Private Sub ButtonKB(ByVal sender As Object, ByVal e As KeyEventArgs)
If Not (e.Key = Key.Unknown) Then
e.Handled=True
Dim fe As FrameworkElement = sender
Dim msg As String = "The key " & e.Key.ToString()
msg = msg & " was handled while focus was on "
msg = msg & fe.Name
End If
End Sub

Silverlight
AddHandler y eventos de teclado controlados

Se puede utilizar una tcnica especial para adjuntar controladores que pueden actuar sobre eventos ya
marcados como controlados. En esta tcnica, se utiliza el mtodo AddHandler para registrar un controlador,
en lugar de usar atributos XAML o una sintaxis especfica del lenguaje para agregar un controlador, como
+= en C#. En general, esta tcnica tiene como limitacin que la API de AddHandler toma un parmetro de
tipo RoutedEvent que identifica el evento enrutado en cuestin. No todos los eventos enrutados de
Silverlight proporcionan un identificador de RoutedEvent, por lo que esta consideracin determina qu
eventos enrutados se podrn controlar en el caso de Handled. Los eventos de teclado KeyDown y KeyUp
tienen identificadores de evento enrutado como campos en UIElement. Lo mismo sucede con los eventos
TextInput, TextInputStart y TextInputUpdate. Sin embargo, otros eventos de entrada de texto relacionados,
como TextBox.TextChanged, no tienen identificadores de evento enrutado, por lo que no se pueden usar
para la tcnica en la que se usa el mtodo AddHandler.
Comandos
En Silverlight 4, un nmero reducido de elementos de la interfaz de usuario admite comandos. La ejecucin
de comandos es un concepto que se puede aplicar a las entradas que se realizan a travs del mouse y a
travs del teclado porque la accin de entrada se abstrae en el comando propiamente dicho.
Entrada de texto y controles

Algunos controles reaccionan a los eventos de teclado realizando su propio control. Por ejemplo, un
TextBox es un control diseado para capturar y representar visualmente el texto que se escribi con el
teclado, y utiliza KeyUp y KeyDown en su propia lgica para capturar pulsaciones de tecla; tambin genera
despus su propio evento TextChanged si el texto cambi realmente. Normalmente, se pueden seguir
agregando controladores para eventos KeyUp y KeyDown a un TextBox o cualquier control relacionado cuya
finalidad sea procesar la entrada de texto. Sin embargo, como parte de su diseo, un control podra no
responder a todos los valores de tecla dirigidos a l a travs de eventos de tecla. El comportamiento es
especfico de cada control. Como ejemplo, ButtonBase (clase base de Button) procesa el evento KeyUp para
que pueda comprobar la tecla BARRA ESPACIADORA o ENTRAR, que considera equivalente a que el botn
primario del mouse se presione con el fin de generar un evento Click. Este procesamiento del evento se
logra mediante ButtonBase, que invalida el mtodo virtual OnKeyUp y en su implementacin establece
Handled = true. El resultado es que cualquier elemento primario de un botn que escucha un evento de
tecla en el caso de una BARRA ESPACIADORA no recibira el evento ya controlado por sus propios
controladores. Otro ejemplo es TextBox. TextBox no considera algunas teclas como texto (es el caso de las
teclas de direccin), sino que las considera especficas del comportamiento de la interfaz de usuario de
control; TextBox marca estos casos de eventos como administrados.
Los controles personalizados pueden implementar su propio comportamiento de reemplazo para los
eventos de tecla reemplazando el mtodo OnKeyDown / OnKeyUp. Si un control personalizado procesa
determinadas teclas de aceleracin o tiene un comportamiento de control o de foco similar al escenario
descrito para TextBox, se deber colocar esta lgica en los reemplazos propios de OnKeyDown / OnKeyUp
invalida.
Control y reentrada de eventos de teclado

Cuando se escriben controladores de eventos de teclado, o controladores de eventos de entrada en
general, dichos controladores se invocan de una manera sincrnica y se asocian al subproceso de la interfaz
de usuario principal. Por esta razn, es posible que no se puedan invocar determinadas operaciones desde
un controlador de eventos de entrada relacionados con teclas si las acciones tienen potencial de reentrada.
Un ejemplo es llamar a ShowDialog para SaveFileDialog o OpenFileDialog. (Excepcin: se permite abrir
SaveFileDialog siempre y cuando el cliente ejecute Internet Explorer en modo protegido, que lo convierte en
seguro para la reentrada).
Editores de mtodos de entrada

Para los controles TextBox (y posiblemente para controles derivados), Silverlight proporciona API que
pueden influir en el comportamiento y el estado de las acciones del Editor de mtodos de entrada (IME) en
ese control. Las API se definen como propiedades adjuntas que se establecen en un control TextBox,
normalmente estableciendo un valor inicial en XAML. El valor de
InputMethod.PreferredImeConversionMode usa una enumeracin basada en marcadores. En cuanto al uso

Silverlight
de atributos para InputMethod.PreferredImeConversionMode, se puede usar una tcnica de marcado XAML

relativamente poco habitual por la que se combinan los valores de enumeracin con comas entre los
nombres de enumeracin. En el siguiente ejemplo, se establecen las propiedades adjuntas especficas del
IME en un control TextBox de la interfaz de usuario:
<TextBox Name="ImeEnabledTextBox1" InputMethod.PreferredImeState="On"
InputMethod.PreferredImeConversionMode="FullShape,Katakana,Native" />
4.3.3. Informacin general sobre el foco

El foco es un concepto de sistema de entrada que es pertinente para los controles de Silverlight. El control
que tiene el foco actualmente puede recibir los eventos de acciones del teclado KeyUp y KeyDown y, de
este modo, utilizar las acciones del teclado. El foco tambin es pertinente para el sistema de automatizacin.
En una aplicacin basada en Silverlight, el usuario puede recorrer los controles de la interfaz de usuario
utilizando una secuencia de tabulacin. Al recorrer la secuencia de tabulacin se establece el foco en los
controles. Puede influir en la secuencia de tabulacin, as como en el comportamiento de navegacin,
estableciendo varias propiedades definidas en la clase Control.
Controles y foco
Solo un elemento que sea una clase Control puede recibir el foco. Los elementos visuales ms notables que,
por lo tanto, no pueden recibir el foco, son:
Paneles, como StackPanel o Grid
TextBlock
Objetos de texto alineado, como Run
Para que un control reciba el foco, debe cumplirse lo siguiente:
IsEnabled es true.
Visibility es Visible.
El foco no puede estar completamente fuera del rea de contenido de Silverlight.
IsTabStop debe ser true.
Los controles que pueden recibir y presentar las acciones del teclado constituyen los casos ms evidentes
para los que es importante recibir el foco. Esto se debe a que nicamente el elemento con el foco puede
generar los eventos KeyDown y KeyUp. Sin embargo, puede que haya otros controles diseados para recibir
el foco con el fin de poder usar las teclas del teclado como activadores o aceleradores. Por ejemplo, un
control Button admite una caracterstica que permite seleccionarlo recorriendo la secuencia de tabulacin y
presionar la tecla BARRA ESPACIADORA para "hacer clic" en Button sin mover el mouse.
Como parte del comportamiento predeterminado, la mayora de los controles de Silverlight proporciona un
estilo especfico del foco que indica visualmente qu control tiene el foco. En WPF sin el modelo de estados
visuales, una propiedad FocusVisualStyle diferente proporcionaba este estilo. En Silverlight o cuando se usa
el modelo de estados visuales con WPF, usted proporciona estados con nombre que realizan los ajustes
necesarios en la apariencia visual del control. Esos estados se suelen denominar Focused o Unfocused, y se
aplican a veces a las partes de un control compuesto en lugar de a todo el rbol visual.
GotFocus y LostFocus
GotFocus se genera cada vez que el foco cambia de un control a otro dentro del rea de contenido de
Silverlight, y tambin en caso de que una aplicacin se inicie por primera vez y la primera vez que un control
recibe el foco. El control que recibe el foco genera GotFocus. El control que tena el foco anteriormente
genera LostFocus.
Tanto GotFocus como LostFocus son eventos enrutados que se propagan. El escenario de la propagacin
corresponde a la composicin de controles. En el nivel de composicin, el foco podra estar en un objeto
que sea una parte compuesta de un control mayor. El implementador del control compuesto podra desear
que el diseo del control realizara acciones que se apliquen con independencia de la parte del componente
que tenga el foco, o bien realizara acciones diferentes si el foco sale de la composicin inmediata y se
desplaza a otro control.

Silverlight
Si utiliza controles existentes, generalmente interesan ms los comportamientos de foco del control y no de
las partes que lo componen, ya que es el primer punto al que el usuario de controles puede asociar los
controladores de eventos sin tener que recurrir a la aplicacin de una plantilla distinta al control. Sin
embargo, tambin puede comprobar los eventos LostFocus y GotFocus de propagacin en los
contenedores para la composicin de pginas ms grandes: objetos tales como StackPanel o Grid, o
tambin el elemento raz UserControl. Sin embargo, debido al comportamiento de propagacin, puede
resultar til comprobar el valor de OriginalSource en cada evento LostFocus y GotFocus. Puede hacerlo si
desea comprobar si el origen de ese evento de foco es pertinente a algo que se deba hacer con el objeto al
que est asociado el controlador. Puede que ese objeto est por encima de OriginalSource en el rbol de
objetos.
Adems, si va a crear un control, puede que le interesen los mtodos de invalidacin relacionados con
eventos OnGotFocus y OnLostFocus. Estos mtodos proporcionan una manera de implementar el control
del evento como un mtodo de clase, en lugar de como un controlador asociado para las instancias.
Los eventos de foco tienen una implementacin asincrnica, lo que constituye una optimizacin de
rendimiento necesaria en Silverlight. Sin embargo, puede comprobar sincrnicamente el foco en el cuerpo
de un controlador llamando a FocusManager.GetFocusedElement.
Mtodo Focus
La clase base Control proporciona un mtodo Focus. Al llamar a este mtodo mediante programacin, se
intenta establecer el foco en el control donde se llama al mtodo. Focus tiene un tipo de valor devuelto que
informa de si el intento se realiza correctamente. Las posibles razones de que se produzca un error incluyen
todos los puntos mencionados en Controles y foco anteriormente en este mismo tema. Si llama a Focus en
el control que ya tiene el foco, no se genera ningn evento, pero el mtodo devuelve true igualmente para
que la llamada al mtodo no se interprete como un error real al establecer el foco en el destino pretendido.
Secuencias de tabulacin
Los controles que se representan en una interfaz de usuario se colocan en una secuencia de tabulacin
predeterminada. La tecla TAB controla de una manera especial los controles a fin de habilitar esta
funcionalidad, de tal forma que el elemento que recibe la entrada de la tecla TAB pierde el foco y el control
siguiente de la secuencia obtiene foco; en este proceso se generan los eventos LostFocus y GotFocus
pertinentes. Si llama al mtodo Focus, el foco podra salir del punto anterior de la secuencia de tabulacin;
al presionar TAB el usuario va al control siguiente de la secuencia. El comportamiento es similar a presionar
MAYS+TAB, pero la secuencia de tabulacin se recorre en direccin inversa. Para estar contenido en la
secuencia de tabulacin, el control debe poder recibir el foco segn los requisitos enumerados en Controles
y foco.
Los controles poseen las propiedades TabIndex y TabNavigation. Estas propiedades le permiten modificar la
secuencia de tabulacin y el comportamiento predeterminados. TabIndex declara la secuencia y
TabNavigation declara el comportamiento para cualquier secuencia de tabulacin anidada dentro del
control.
Los controles tienen una propiedad IsTabStop que se puede establecer. Algunas clases de controles, como
Label, se inicializan con IsTabStopfalse. Si IsTabStop es false, no puede establecer el foco en el control
mediante Focus, los usuarios no pueden enfocarlo y el control no recibe ningn evento de entrada de
teclado. Para un control como Label, todo ello es inherente al diseo.
En el caso de una aplicacin hospedada en el explorador, la secuencia de tabulacin del contenido de
Silverlight es una secuencia anidada dentro de la secuencia de tabulacin del host del explorador. Los
usuarios pueden salir del rea de contenido de Silverlight y enfocar otros elementos de la pgina HTML de
hospedaje, as como traer el foco a los controles de la interfaz de usuario de la aplicacin de explorador de
hospedaje (por ejemplo, una barra de direcciones).
Automatizacin
El foco de los controles es pertinente para la accesibilidad y automatizacin de Silverlight.
4.3.4. Pruebas de posicionamiento y eventos de entrada

Silverlight
La prueba de posicionamiento es el concepto por el cual el complemento Silverlight y su subsistema de

entradas procesan las entradas (por ejemplo, clics del mouse) procedentes de un host (host de explorador
web o ventana de ejecucin fuera del explorador). En este tema, se describen las pruebas de
posicionamiento, las API o las condiciones que afectan a las pruebas de posicionamiento y las implicaciones
de dichas pruebas para los eventos de entrada.
Pruebas de posicionamiento y host

El complemento Silverlight puede hospedarse en un explorador. Es el host del explorador el que procesa en
primer lugar las entradas generadas desde dispositivos de entrada y hardware (mouse, teclado, dispositivos
de entradas de lpiz y de tableta grfica, multitoque). El explorador utiliza la API de entrada especfica de la
plataforma. A continuacin, el host del explorador reenva la entrada a Silverlight a travs de la API de
complemento utilizada por ese explorador. En este nivel, el nico origen del evento de entrada es el rea de
contenido global de Silverlight. Para los propios eventos de entrada de Silverlight, la entrada se asigna al
sistema de coordenadas de un dispositivo de pantalla y a las coordenadas del puntero del mouse, o se
interpreta como entrada de teclado. Por consiguiente, la entrada se identifica como procedente de una
clase concreta derivada de UIElement en el rbol visual dentro del rea de contenido de Silverlight.
El subsistema de entradas y el mecanismo de la prueba de posicionamiento determinan qu UIElement del
diseo de la interfaz de usuario y del rbol visual debe sealarse como origen del evento de entrada de
Silverlight. Ese origen se transmite en los datos del evento y la determinacin del origen del evento tambin
afecta a otros comportamientos, como el estado visual de las plantillas de control.
Para una aplicacin hospedada en un explorador, las entradas tambin se pueden procesar a travs del
DOM HTML. Esto es sobre todo til para entradas procedentes de un origen de elementos HTML distinto al
rea de contenido de Silverlight. El procesamiento de las entradas a travs del DOM HTML tambin implica
un proceso similar a la prueba de posicionamiento, que utiliza el valor de foco del nivel de DOM as como la
posicin del puntero del mouse para determinar dnde se deben generar los eventos.
En el caso de una aplicacin de ejecucin fuera del explorador o si Silverlight est incorporado en un marco
de hospedaje alternativo, el proceso es similar. La diferencia reside en que la entrada se interpreta dentro de
la ventana o la procesa la API de entrada que forma parte de la aplicacin del marco de hospedaje, que
posiblemente tiene un HWND que representa el host. No hay ningn host de explorador implicado.
Pruebas de posicionamiento y API

Hay varias API expuestas en la clase UIElement y sus clases derivadas que pueden afectar a la prueba de
posicionamiento. A continuacin figura una lista de las condiciones que afectan a la prueba de
posicionamiento para las clases de interfaz de usuario ms comunes.
Al establecer el estado de Visibility en Visibility.Collapsed, se deshabilita la prueba de
posicionamiento. De manera ms patente, hace que el objeto UIElement solicite una ranura de
tamao cero cuando el sistema de diseo lo procesa. Por consiguiente, no hay ningn punto fsico
en la pantalla sobre el que pueda situarse el mouse o donde pueda encontrarse el foco del teclado.
Si se establece el estado de Visibility en Visibility.Collapsed en un elemento con captura del mouse,
se liberar. Si se establece el estado de Visibility en Visibility.Collapsed en un elemento con foco del
teclado, el foco se desplazar al elemento siguiente segn el orden de recorrido del foco
(normalmente, se utiliza la secuencia de tabulacin).
Se puede establecer explcitamente la propiedad IsHitTestVisible en false para deshabilitar la
prueba de posicionamiento, incluso si UIElement no es visiblemente transparente.
Aunque UIElement no lo define, muchas clases derivadas implementan una propiedad Background
(por ejemplo, Control.Background, Border.Background) o una propiedad Fill (por ejemplo,
Shape.Fill, Glyphs.Fill). Estas propiedades usan un valor de Brush. Si el valor de Brush es null, el
comportamiento de representacin para esa rea es transparente. Adems, no se pueden realizar
pruebas de posicionamiento con el rea donde se aplica el pincel. (Si se desea obtener un rea
transparente con el que se puedan realizar pruebas de posicionamiento, se debe usar un valor de la
propiedad Transparent para un objeto SolidColorBrush.)
TextBlock realiza pruebas de posicionamiento basndose en su ranura de diseo en un contenedor;
TextBlock no tiene una propiedad Background donde se pueda establecer un pincel null. Es posible

Silverlight
deshabilitar las pruebas de posicionamiento para un control TextBlock mediante la propiedad

IsHitTestVisible.
Se pueden realizar pruebas de posicionamiento con el objeto Glyphs a travs de su ranura de
diseo como un rectngulo de sus valores de Height y de Width. El rea de texto (rea dibujada
por Glyphs.Fill) se considera parte de ese rectngulo.
Se pueden realizar pruebas de posicionamiento de los controles Image y MediaElement a travs de
sus reas de presentacin de imgenes y elementos multimedia, bsicamente sus valores de Height
y de Width. Se pueden seguir realizando pruebas de posicionamiento con los pxeles alfa
transparentes y completos en el archivo de imagen, lo que es similar al comportamiento del valor
Transparent para SolidColorBrush.
Los controles se pueden deshabilitar, lo cual tambin deshabilita las pruebas de posicionamiento y,
por consiguiente, los eventos de entrada.
La mayora de las clases Panel se implementan deliberadamente de modo que no se puedan
realizar pruebas de posicionamiento, por lo que los elementos dentro del control Panel notifican las
entradas en lugar del contenedor. En muchas ocasiones, el panel o el contenedor puede controlar
el evento aprovechndose del enrutamiento de eventos.
InkPresenter tiene un mtodo HitTest dedicado. Este mtodo se utiliza para determinar si una
regin proporcionada (punto o rectngulo) interseca con la coleccin Strokes existente del control
InkPresenter. Por consiguiente, el mtodo HitTest solo es til para los escenarios de entradas de
lpiz.
En un subconjunto del rbol visual, es posible predeterminar los resultados de las pruebas de
posicionamiento sin entradas del mouse mediante las API de VisualTreeHelper, en concreto
VisualTreeHelper.FindElementsInHostCoordinates.
Las transformaciones aplicadas pueden cambiar el sistema de coordenadas. En muchas ocasiones,
estas diferencias se pueden resolver llamando a RenderTransform.
Los cambios en el diseo de los elementos tambin son importantes para las pruebas de posicionamiento.
El diseo podr determinar qu elemento es el origen de entrada notificado si el usuario hace clic en un
rea de la interfaz de usuario donde varios elementos comparten un espacio de diseo. No obstante,
normalmente, los cambios de diseo modifican la apariencia visual as como las caractersticas de las
pruebas de posicionamiento y puede que esto no sea lo que se pretende. Hay varias tcnicas para cambiar
el diseo de los elementos que no se abordan en este tema.
Pruebas de posicionamiento y eventos de entrada

Las pruebas de posicionamiento son sobre todo importantes para los siguientes eventos de entrada bsicos:
MouseEnter; MouseLeave; MouseMove; MouseLeftButtonDown; MouseLeftButtonUp;
MouseRightButtonDown; MouseRightButtonUp; MouseWheel; FrameReported. La prueba de
posicionamiento tambin est relacionada con eventos especficos de los controles que dependen de los
eventos de entrada bsicos, como Click. Las pruebas de posicionamiento son importantes para el foco del
teclado ya que, si se hace clic en un control que utiliza el foco del teclado para su funcionalidad, ese control
suele recibir el foco del teclado. Para evaluar el foco del puntero en la interfaz de usuario, se utiliza la
prueba de posicionamiento. Sin embargo, los eventos de teclado bsicos se basan en el elemento que tiene
el foco del teclado y no en la evaluacin de las pruebas de posicionamiento.
Nota:
Si el destino es Silverlight 4, las pruebas de posicionamiento son tambin importantes para los eventos de
arrastrar y colocar, como DragEnter.
4.3.5. Cmo: Arrastrar y colocar objetos en el diseo de la interfaz de usuario

En el ejemplo siguiente se muestra cmo arrastrar y colocar objetos en una aplicacin basada en Silverlight.
Por razones de seguridad, no se puede arrastrar y colocar objetos entre aplicaciones. Por consiguiente, es
ms preciso decir que los objetos se "deslizan" dentro del rea del complemento Silverlight. Sin embargo, el
trmino "arrastrar y colocar" es ms conocido y por ello lo utilizamos aqu.
<UserControl x:Class="DragAndDropSimple.Page"

Silverlight
Width="400" Height="300">
<Canvas x:Name="rootCanvas"
Width="640"
Height="480"
Background="Gray">

<Rectangle
MouseLeftButtonDown="Handle_MouseDown"
MouseMove="Handle_MouseMove"
MouseLeftButtonUp="Handle_MouseUp"
Canvas.Left="30" Canvas.Top="30" Fill="Red"
Width="50" Height="50" />
</Canvas>
</UserControl>
' Global variables used to keep track of the mouse position and whether the object is captured by the mouse.
Dim isMouseCaptured As Boolean
Dim mouseVerticalPosition As Double
Dim mouseHorizontalPosition As Double
Private Sub Handle_MouseDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)

Dim item As Rectangle = sender
mouseVerticalPosition = e.GetPosition(Nothing).Y
mouseHorizontalPosition = e.GetPosition(Nothing).X
isMouseCaptured = True
item.CaptureMouse()
End Sub
Private Sub Handle_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)

If (isMouseCaptured) Then
' Calculate the current position of the object.
Dim deltaV As Double = e.GetPosition(Nothing).Y - mouseVerticalPosition
Dim deltaH As Double = e.GetPosition(Nothing).X - mouseHorizontalPosition
Dim newTop As Double = deltaV + item.GetValue(Canvas.TopProperty)
Dim newLeft As Double = deltaH + item.GetValue(Canvas.LeftProperty)
' Set new position of object.
item.SetValue(Canvas.TopProperty, newTop)
item.SetValue(Canvas.LeftProperty, newLeft)
' Update position global variables.
mouseVerticalPosition = e.GetPosition(Nothing).Y
mouseHorizontalPosition = e.GetPosition(Nothing).X
End If
End Sub
Private Sub Handle_MouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)

isMouseCaptured = False
item.ReleaseMouseCapture()
mouseVerticalPosition = -1
mouseHorizontalPosition = -1
End Sub
End Class
4.4. Imprimir
A veces desear agregar funciones de impresin a la aplicacin de Silverlight y no confiar en las opciones de
impresin del explorador. Por ejemplo, quizs desee permitir al usuario imprimir un control de imagen que
contiene un mapa. La clase PrintDocument proporciona la funcin de impresin para una aplicacin de
Silverlight. En este tema se describe cmo agregar funciones de impresin a sus aplicaciones de Silverlight y
contiene las siguientes secciones:
Mostrar un cuadro de dilogo Imprimir

Para agregar funciones de impresin a su aplicacin de Silverlight, agregue primero un objeto
PrintDocument a la aplicacin. Para mostrar un cuadro de dilogo de impresin, llame al mtodo Print de
PrintDocument. Normalmente, llamar a Print en el controlador de eventos de un botn que indica que se
realizar una operacin de impresin si se hace clic en el botn. Todos los cuadros de dilogo de Silverlight
deben estar iniciados por el usuario. Si se intenta mostrar el cuadro de dilogo de impresin cuando la
operacin no est iniciada por el usuario, se producir una SecurityException. Por ejemplo, si intenta
mostrar el cuadro de dilogo desde un controlador de eventos Loaded, se producir una excepcin de
seguridad.

Silverlight
Dentro del cuadro de dilogo de impresin, el usuario puede seleccionar la configuracin de impresora que
desee y, a continuacin, hacer clic en Imprimir para continuar con la operacin de impresin o en Cancelar
para cancelar la operacin de impresin. En la ilustracin siguiente se muestra un ejemplo del cuadro de
dilogo de impresin para Windows.
Realizar la operacin de impresin

Para realizar la operacin de impresin real y especificar el contenido que se va a imprimir, debe controlar el
evento PrintPage para PrintDocument. En el controlador de eventos PrintPage, establezca la propiedad
PrintPageEventArgs.PageVisual en el UIElement con nombre que desee imprimir. El elemento UIElement
puede ser cualquier UIElement con nombre de la aplicacin. El UIElement especificado no tiene que formar
parte del rbol visual. Para imprimir todo el control de Silverlight, puede especificar el elemento LayoutRoot.
En el ejemplo de cdigo siguiente se muestra un controlador de eventos de botn que llama al mtodo
Print y un controlador de eventos para el evento PrintPage. En este ejemplo, se imprime un control Image,
que contiene un mapa.
Private pd As PrintDocument()
Public Sub New()

pd = New PrintDocument()
End Sub
Private Sub PrintButton_Click(ByVal sender As Object, _

ByVal e As RoutedEventArgs)
pd.Print("M yMap")
End Sub
Private Sub pd_PrintPage(ByVal sender As Object, _

ByVal e As PrintPageEventArgs) Handles pd.PrintPage
e.PageVisual = mapImage
End Sub
End Class
<Button Margin="5" Width="200" Content="Click to print" x:Name="PrintButton"
Click="PrintButton_Click" />
<Image Width="600" Height="600" Source="RedmondMap.jpg" x:Name="mapImage"/>
</StackPanel>
Adems de especificar UIElement, puede obtener el tamao fsico del rea de impresin con la propiedad
PrintPageEventArgs.PrintableArea. Si UIElement supera PrintableArea, el contenido se recortar en los
lmites de PrintableArea. Las dimensiones del rea imprimible son en pxeles basndose en la configuracin
de pantalla.

Silverlight
La propiedad PrintPageEventArgs.HasMorePages se usa para imprimir un documento con varias pginas. El

valor predeterminado para PrintPageEventArgs.HasMorePages es false, por lo que no es necesario
establecerla para documentos de una pgina. Sin embargo, si hay varias pginas para imprimir, establezca el
valor de la propiedad PrintPageEventArgs.HasMorePages en true para indicar que deben imprimirse ms
pginas. Vuelva a establecer PrintPageEventArgs.HasMorePages en false en el controlador de eventos
PrintPage cuando se est imprimiendo la ltima pgina.
Configurar y limpiar para una operacin de impresin

Si tiene una configuracin especial que se deba realizar antes de que se produzca la operacin de
impresin, controle el evento BeginPrint. Por ejemplo, si desea configurar un contador de pginas para un
documento que tiene varias pginas, puede hacerlo en el controlador de eventos BeginPrint.
Si hay que realizar alguna tarea de limpieza despus de la operacin de impresin, controle el evento
EndPrint. Tambin puede usar el controlador de eventos EndPrint para buscar si se produjeron errores en el
proceso de impresin comprobando la propiedad Error de EndPrintEventArgs.
5. Controles
Silverlight proporciona una completa biblioteca de controles que admiten el desarrollo de interfaces de
usuario.
5.1. Controles y cuadros de dilogo

Silverlight proporciona una completa biblioteca de controles y cuadros de dilogo que admiten el desarrollo
de interfaces de usuario. Algunos de estos controles poseen una representacin visual; otros actan como
contenedores de otros controles o contenidos, como imgenes o elementos multimedia.
A continuacin figura una lista alfabtica de los controles y cuadros de dilogo de Silverlight ms
comunes. Haga clic en el vnculo del control para obtener acceso a la documentacin de la biblioteca de
clases correspondiente al control. La documentacin incluye normalmente ejemplos de cdigo, un ejemplo
en ejecucin, una ilustracin y vnculos a temas adicionales. Si utiliza el SDK de Silverlight y Silverlight 4
Tools para Visual Studio 2010, la mayora de estos controles aparecern en el cuadro de herramientas de
Visual Studio.
Casi todos estos controles estn disponibles como parte del motor en tiempo de ejecucin de Silverlight,
pero algunos de ellos forman parte de las bibliotecas de Silverlight contenidas en el SDK de Silverlight. La
ltima columna de las tablas siguientes especifica si el control est disponible como parte del runtime o
SDK de Silverlight.
A
Proporciona un cuadro de texto para los datos proporcionados por el
SDK de
AutoCompleteBox usuario y una lista desplegable que contiene posibles coincidencias basadas
Silverlight
en la entrada del cuadro de texto.
B
Proporciona un borde, un fondo o ambos a otro control. Un borde puede Motor en tiempo
Border
contener un nico elemento secundario. de ejecucin
Proporciona un evento de clic para responder a los datos proporcionados por el Motor en tiempo
Button
usuario con un mouse, teclado, lpiz u otro dispositivo de entrada. de ejecucin
C
Proporciona una interfaz de usuario grfica que permite al usuario seleccionar
SDK de
Calendar una fecha. Muestra a la vez las fechas de un mes y proporciona la capacidad
Silverlight
de desplazarse de mes en mes o de cambiar a la vista de todo el ao.
Proporciona una superficie para mostrar elementos secundarios en las Motor en
Canvas coordenadas concretas del lienzo. Un lienzo puede contener uno o varios tiempo de
objetos UIElement. ejecucin
CheckBox Permite al usuario seleccionar (activar) una opcin o cancelar su seleccin Motor en

Silverlight
(desactivarla). CheckBox puede tener tres estados: activado, desactivado e tiempo de

indeterminado. Utilice CheckBox para permitir elegir al usuario entre dos ejecucin
opciones (como verdadero/falso o s/no) o seleccionar entre una lista de
opciones. CheckBox es un objeto ContentControl.
Proporciona una ventana que se puede mostrar sobre una ventana primaria y SDK de
ChildWindow
bloquea la interaccin con la ventana primaria. Silverlight
Representa un control de seleccin que combina un cuadro de texto no
Motor en
editable y un elemento emergente. El elemento emergente contiene un
ComboBox tiempo de
cuadro de lista que permite a los usuarios seleccionar un elemento de una
ejecucin
lista.
Representa un control con un solo elemento de contenido, de cualquier tipo. Motor en
ContentControl Muchos controles se derivan de ContentControl y pueden contener objetos, tiempo de
como Button o Panel. ejecucin
D
Proporciona una forma flexible de mostrar una coleccin de datos en filas y
columnas. Los tipos de columnas integrados incluyen la columna de cuadros
de texto, la columna de casillas y la columna de plantilla para hospedar SDK de
DataGrid
contenido personalizado. El tipo de fila integrado incluye una seccin de Silverlight
detalles desplegable que se puede utilizar para mostrar contenido adicional
debajo de los valores de celda.
Proporciona una interfaz de usuario para la paginacin a travs de una SDK de
DataPager
coleccin de datos que implementa IPagedCollectionView. Silverlight
Permite al usuario seleccionar una fecha escribindola en un control TextBox SDK de
DatePicker
o utilizando un control Calendar desplegable. Silverlight
Muestra una descripcin y realiza el seguimiento del estado del error para un SDK de
DescriptionViewer
control asociado. Silverlight
F
Frame Admite la navegacin a los controles Page. SDK de Silverlight
G
Proporciona una superficie compuesta de filas y columnas para mostrar
Motor en
elementos secundarios. Se definen las filas y columnas para un objeto Grid y, a
Grid tiempo de
continuacin, se asignan los objetos a una fila o columna concreta de la
ejecucin
cuadrcula. Opcionalmente, puede mostrar las lneas de la cuadrcula.
Permite al usuario redistribuir el espacio entre las filas o columnas de un control
Grid. Representa un elemento grfico que el usuario puede agarrar y arrastrar. Las
SDK de
GridSplitter propiedades adjuntas que rigen su alineacin y las propiedades de fila o columna
Silverlight
de Grid determinan la direccin y manera en las que GridSplitter distribuye el
espacio.
H
Representa un control que contiene una coleccin de elementos y un SDK de
HeaderedItemsControl
encabezado. Silverlight
Representa un control de botn que muestra un hipervnculo.
Motor en
Cuando se hace clic en l, HyperlinkButton permite al usuario visitar
HyperlinkButton tiempo de
una pgina web que pertenece a la misma aplicacin web o que es
ejecucin
externa a la aplicacin actual.
I
Muestra una imagen en formato PNG o JPEG. El control Image muestra Motor en
Image imgenes indizadas con una profundidad de color de 1, 4 u 8 bits o imgenes tiempo de
en color verdadero con una profundidad de color de 24 32 bits. ejecucin

Silverlight
Proporciona una superficie de dibujo que admite las caractersticas de Tablet Motor en
InkPresenter PC. InkPresenter se deriva de Canvas y puede mostrar uno o ms trazos y tiempo de
objetos UIElement. ejecucin
L
Muestra una leyenda, el indicador de campo obligatorio y el indicador de error de SDK de
Label
validacin para un control asociado. Silverlight
Contiene una coleccin de elementos. Puede rellenar el control enlazndolo a un
Motor en
origen de datos o mostrando elementos independientes. El cuadro de lista es un
ListBox tiempo de
control de elementos, lo que significa que puede rellenarlo con elementos que
ejecucin
contengan texto u otros controles.
M
Hospeda contenido de audio o vdeo. Un control MediaElement Motor en
MediaElement proporciona una regin rectangular que puede mostrar vdeo en su tiempo de
superficie o reproducir audio si no hay vdeo presente. ejecucin
Permite al usuario abrir una imagen en varias resoluciones que se puede Motor en
MultiScaleImage escalar y se puede cambiar de posicin para verla con detalle. tiempo de
MultiScaleImage es para su uso con la tecnologa Deep Zoom. ejecucin
O
Representa un cuadro de dilogo de archivos abierto que permite al Motor en tiempo de
OpenFileDialog
usuario seleccionar uno o varios archivos. ejecucin
P
SDK de
Page Encapsula el contenido al que puede navegar un control Frame.
Silverlight
Se usa para escribir informacin confidencial o privada en un rea de texto de Motor en
PasswordBox una sola lnea sin ajuste. No se ve el texto real sino los caracteres que tiempo de
representan el contenido. ejecucin
Superpone el contenido al contenido existente. Un control Popup resulta til
Motor en
para mostrar temporalmente informacin que realiza una tarea determinada.
Popup tiempo de
Un control emergente siempre aparecer encima del contenido existente, a
ejecucin
menos que otro control emergente se abra encima de l.
Motor en
Indica el progreso de una operacin. Este control se puede utilizar para mostrar
ProgressBar tiempo de
un progreso genrico o un progreso que cambia segn un valor.
ejecucin
R
Permite al usuario seleccionar una sola opcin de un grupo de opciones. Los
controles RadioButton se agrupan colocndolos dentro de un elemento Motor en
RadioButton primario o estableciendo la propiedad GroupName de cada RadioButton en un tiempo de
grupo concreto. Cuando estn agrupados, los controles RadioButton son ejecucin
mutuamente excluyentes.
Representa un botn que genera su evento de clic repetidamente desde el
Motor en
momento en que se presiona el botn hasta que se suelta. Un control
RepeatButton tiempo de
RepeatButton contiene propiedades que especifican el retraso antes de que se
ejecucin
repitan los clics y el intervalo entre los clics.
Motor en
Representa un control de edicin de texto enriquecido que admite texto con
RichTextBox tiempo de
formato, hipervnculos, imgenes insertadas y otro contenido enriquecido.
ejecucin
S
SaveFileDialog Proporciona un cuadro de dilogo que permite al usuario especificar Motor en

Silverlight
opciones para guardar un archivo. tiempo de

ejecucin
Proporciona una barra de desplazamiento con un control de posicin Motor en
ScrollBar (Thumb) deslizante cuya posicin corresponde a un valor. El control tiempo de
ScrollBar se puede orientar en sentido horizontal o vertical. ejecucin
Encapsula una parte de contenido, lo que proporciona hasta dos controles
ScrollBar para desplazar una ventanilla sobre el contenido.
Motor en
ScrollViewer tiempo de
El control ScrollViewer permite establecer el tamao de la ventanilla de
ejecucin
manera relativa con respecto al contenido y, adems, establecer si
aparecern los controles ScrollBar horizontal y vertical.
Motor en
Permite al usuario realizar una seleccin en un intervalo de valores
Slider tiempo de
desplazando un control Thumb a lo largo de una trayectoria.
ejecucin
Motor en
Proporciona una superficie para mostrar elementos secundarios en una lnea
StackPanel tiempo de
en sentido horizontal o vertical.
ejecucin
T
Proporciona una interfaz con fichas en la que mostrar elementos. Los elementos SDK de
TabControl
secundarios se hospedan en un control TabItem. Silverlight
Muestra pequeas cantidades de contenido de texto. Puede establecer el
Motor en
contenido de TextBlock mediante la propiedad Text. Como alternativa, puede
TextBlock tiempo de
establecer la propiedad Inlines en una coleccin de objetos Inline, tales como los
ejecucin
objetos Run o LineBreak.
Se usa para obtener datos proporcionados por el usuario o para mostrar texto. El
Motor en
control de cuadro de texto se utiliza generalmente para el texto que se puede
TextBox tiempo de
editar, aunque tambin puede configurarse como control de solo lectura. Los
ejecucin
cuadros de texto pueden mostrar varias y ajustar el texto al tamao del control.
Motor en
Proporciona informacin al usuario sobre un elemento de la interfaz de usuario
ToolTip tiempo de
mediante una ventana emergente.
ejecucin
SDK de
TreeView Representa un control que muestra datos jerrquicos.
Silverlight
V
SDK de
ValidationSummary Muestra un resumen de los errores de validacin en un formulario.
Silverlight
Motor en
Proporciona un control que puede ajustar o escalar su contenido
Viewbox tiempo de
para rellenar el espacio disponible.
ejecucin
Proporciona un control de panel de pila que organiza el contenido Motor en
VirtualizingStackPanel que est visible en la pantalla, creando los elementos adicionales de tiempo de
la interfaz de usuario que sean necesarios. ejecucin
W
Proporciona una superficie para mostrar contenido HTML cuando la Motor en tiempo de
WebBrowser
aplicacin se hospeda fuera del explorador. ejecucin
5.2. Modelos de contenido de controles

En Silverlight, los controles estn diseados para mostrar determinados tipos de contenido. Para elegir qu
control usar o de qu control derivar otro, es importante entender qu tipos de objetos muestra mejor cada
control concreto. Hay varios tipos de controles que muestran contenido arbitrario en Silverlight.

Silverlight
Controles de texto
Controles que muestran un elemento nico
Controles que muestran un elemento nico y un encabezado
Controles que muestran una coleccin de elementos
Controles que muestran una coleccin de elementos y un encabezado
Controles que muestran otros elementos de la interfaz de usuario
Informacin general
En la tabla siguiente se muestra una lista de muchos de los controles de Silverlight ms comunes, con su
tipo de contenido y su propiedad de contenido correspondientes.
Control Tipo de contenido Propiedad de contenido

TextBlock.Text
TextBlock Text
TextBlock.Inlines
TextBox Text TextBox.Text
RichTextBox Text RichTextBox.Blocks
PasswordBox Text PasswordBox.Password
Button Elemento nico ContentControl.Content
RepeatButton Elemento nico ContentControl.Content
CheckBox Elemento nico ContentControl.Content
RadioButton Elemento nico ContentControl.Content
ListBoxItem Elemento nico ContentControl.Content
ComboBoxItem Elemento nico ContentControl.Content
DataGridCell Elemento nico ContentControl.Content
Viewbox Elemento nico Viewbox.Child
ContentControl.Content
TabItem Elemento nico y un encabezado
TabItem.Header
ItemsControl.Items
ComboBox Coleccin de elementos
ItemsControl.ItemsSource
ItemsControl.Items
ListBox Coleccin de elementos
ItemsControl.Items
TabControl Coleccin de elementos
ItemsControl.Items
TreeView Coleccin de elementos
DataGrid Coleccin de elementos DataGrid.ItemsSource
AutoCompleteBox.Text
AutoCompleteBox Texto y coleccin de elementos
AutoCompleteBox.ItemsSource
Canvas Elementos de la interfaz de usuario Panel.Children
Grid Elementos de la interfaz de usuario Panel.Children
StackPanel Elementos de la interfaz de usuario Panel.Children
Controles de texto
Los controles de texto muestran contenido de tipo string. Hay tres tipos de controles de texto.
TextBlock

Silverlight
TextBox y PasswordBox
RichTextBox
Estos controles permiten elegir entre texto de solo lectura con varios formatos aplicados, texto editable con
un formato nico y texto editable con formato enriquecido.
TextBlock
El control TextBlock hereda directamente de la clase FrameworkElement. Muestra texto de solo lectura al
que se puede dar formato de modo extensivo. Su contenido se establece con las propiedades Inlines o Text.
La propiedad Text toma como valor String. La propiedad Inlines toma como valor InlineCollection.
InlineCollection acepta objetos Inline. Inline es una clase abstracta; as pues, para rellenar la coleccin se
utilizan objetos Run o LineBreak que se derivan de Inline. Una ventaja de establecer la propiedad Inlines es
que se puede especificar la familia de fuentes, el estilo, el peso y el tamao para cada objeto Inline de la
coleccin Inlines. Sin embargo, si desea utilizar la misma fuente o estilo de fuente para todo el texto de
TextBlock, la propiedad Text es la opcin ms fcil.
En el ejemplo siguiente se muestra cmo establecer el contenido de los objetos TextBlock mediante las
propiedades Inlines y Text en XAML y en cdigo.
<TextBlock Margin="10" Text="TextBlock" />
...
<TextBlock Margin="10">
<Run FontFamily="Arial" FontSize="20">TextBlock</Run>
<LineBreak />
<Run FontFamily="Courier New" FontWeight="Bold" FontSize="14">using Inlines</Run>
</TextBlock>
Dim tBlock1 As New TextBlock()

tBlock1.Text = "TextBlock"
LayoutRoot.Children.Add(tBlock1)
La clase TextBox hereda de Control y muestra texto que el usuario puede modificar. El contenido de TextBox
se establece mediante la propiedad Text. El formato del texto mostrado se limita al formato que se aplica al
control, que es aplicable a todo el texto que contiene. La propiedad TextWrapping permite establecer el
ajuste del texto. El estilo de fuente, as como su grosor, tamao y familia se especifican mediante las
propiedades FontStyle, FontWeight, FontSize y FontFamily, respectivamente. Los valores de las propiedades
se aplican a todo el texto mostrado en el control TextBox.
PasswordBox hereda de TextBox. Su contenido se establece mediante la propiedad Text. PasswordBox
permite una lnea de texto nica y oculta el texto con un smbolo. Esto permite que el usuario escriba datos
confidenciales, como su contrasea.
En el ejemplo de cdigo siguiente se muestra cmo se establece la propiedad Text de un control TextBox en
XAML y en cdigo.
<TextBox Margin="10" HorizontalAlignment="Left" Width="100"
Text="TextBox with a line of text that wraps."
FontFamily="Arial" TextWrapping="Wrap" />
Dim tBox1 As New TextBox()

tBox1.Text = "TextBox with a line of text that wraps."
tBox1.FontFamily = New FontFamily("Arial")
tBox1.TextWrapping = TextWrapping.Wrap
tBox1.Width = 100
LayoutRoot.Children.Add(tBox1)
RichTextBox
La clase RichTextBox hereda de Control y muestra texto enriquecido que el usuario puede editar. Establezca
el contenido de un control RichTextBox con la propiedad Blocks. La propiedad Blocks contiene una
coleccin de elementos Paragraph. Un elemento Paragraph puede contener muchos tipos de elementos,
incluyendo los siguientes:
Inline
InlineUIContainer , que puede contener objetos FrameworkElement, como Image o Button
Run
Span

Silverlight
Bold
Hyperlink
Italic
Underline
Controles que muestran un elemento nico

Los controles que muestran un elemento nico se denominan controles de contenido. Son todos aquellos
controles que se derivan de la clase ContentControl. Hay muchos controles que se derivan de
ContentControl: los controles de botn, como Button, RepeatButtony HyperlinkButton; los controles de
alternancia, como CheckBox y RadioButton; y los contenedores de elementos para ItemsControl, como
ListBoxItem, ComboBoxItem y DataGridCell.
Un control de contenido muestra una sola parte de contenido estableciendo su propiedad Content. La
propiedad de contenido es del tipo Object, as que no hay ninguna restriccin que limite lo que un control
de contenido puede contener. Dado que muchas clases que se derivan del objeto pueden contener otros
controles, puede crear contenido anidado en ContentControl. Por ejemplo, puede establecer la propiedad
ContentControl de un botn en un panel StackPanel que contenga una imagen y texto. A continuacin se
muestra un ejemplo de cmo establecer la propiedad de contenido de un botn en XAML y en cdigo.
<Button Width="50">
<Rectangle Width="10" Fill="Green" />
<TextBlock Margin="2" Text="Green" />
</StackPanel>
</Button>
Dim button1 As New Button()

button1.Width = 50
button1.Height = 30
Dim panel1 As New StackPanel()
panel1.Orientation = Orientation.Horizontal
Dim rect1 As New Rectangle()
rect1.Width = 10
rect1.Fill = New SolidColorBrush(Colors.Green)
Dim tb3 As New TextBlock()
tb3.Margin = New Thickness(2)
tb3.Text = "Green"
tb3.TextAlignment = TextAlignment.Center
panel1.Children.Add(tb3)
panel1.Children.Add(rect1)
button1.Content = panel1
LayoutRoot.Children.Add(button1)
Controles que muestran un elemento nico y un encabezado

TabItem es un tipo especial de control de contenido que permite establecer contenido y un encabezado. Su
propiedad Content se establece igual que en los dems controles de contenido. Adems, puede establecer
un encabezado para el contenido con la propiedad Header. La propiedad Header es del tipo Object; as
pues, al igual que sucede con la propiedad Content, no hay ninguna restriccin que limite lo que el
encabezado puede contener. En el ejemplo siguiente se muestra cmo establecer propiedades Content y
Header en un texto y en un panel que incluya contenido adicional.
Nota:
El control TabItem forma parte del SDK de Silverlight y requiere la siguiente declaracin de espacio de
nombres XAML:
<sdk:TabControl>
<sdk:TabItem Header="TabItem1" >
<sdk:TabItem.Content>
<TextBlock Margin="2" Text="TabItem1 Content" />
</StackPanel>
</sdk:TabItem.Content>
</sdk:TabItem>
<sdk:TabItem Content="TabItem 2 Content">
<sdk:TabItem.Header>

Silverlight
<TextBlock Margin="2" Text="TabItem2" />
</StackPanel>
</sdk:TabItem.Header>
</sdk:TabItem>
</sdk:TabControl>
Controles que muestran una coleccin de elementos

Hay dos tipos de controles que muestran una coleccin de objetos:
Controles de elementos
DataGrid
Controles de elementos
Los controles de elementos heredan de la clase ItemsControl. El tipo de coleccin que un control de
elementos puede mostrar depende del tipo de control y de cmo se rellena la coleccin. Con
independencia de cmo se establezca el contenido de un control de elementos, cada control de elementos
tiene un contenedor de elemento asociado, que incluye partes individuales de contenido de la coleccin.
ListBox, ComboBox, TreeView y TabControl son ejemplos de controles de elementos. ListBoxItem,
ComboBoxItem, TreeViewItem y TabItem son los contenedores de elementos correspondientes. Los
contenedores de elementos se crean para cada elemento de una coleccin y se pueden recuperar tanto si
se han creado explcitamente como si no.
Hay dos propiedades diferentes que pueden determinar el contenido de un control de elementos.
Items
ItemsSource
Propiedad Items
Puede rellenar directamente un control de elementos estableciendo su propiedad Items. La propiedad Items
es del tipo ItemCollection, que es una coleccin PresentationFrameworkCollection(Of T) genrica. Tambin
puede agregar elementos a una coleccin existente mediante el mtodo Add. No se pueden agregar
elementos a una coleccin creada mediante la propiedad ItemsSource. Al crear los contenedores de
elementos en XAML, se agregan elementos a la coleccin de elementos. En el ejemplo siguiente se muestra
cmo crear y agregar objetos ComboBoxItem a un control ComboBox en XAML y en cdigo.
<ComboBox>
<ComboBox.Items>
<ComboBoxItem Content="Item 1" />
</ComboBox.Items>
</ComboBox>
Dim cb1 As New ComboBox()

cb1.Items.Add("Item 1")
LayoutRoot.Children.Add(cb1)
Propiedad ItemsSource
La propiedad ItemsSource del control ItemsControl permite utilizar cualquier tipo que implemente
IEnumerable como contenido de ItemsControl. Normalmente, se utiliza ItemsSource para mostrar una
recoleccin de datos o enlazar un control ItemsControl a un objeto de coleccin. Al establecer la propiedad
ItemsSource, se crean automticamente los contenedores de elementos para cada elemento de la coleccin.
En el ejemplo siguiente se muestra cmo establecer la propiedad ItemsSource en una coleccin de objetos
Uri mediante una combinacin de XAML y cdigo.
<ComboBox x:Name="UriBox1" />
Dim Uris As New ObservableCollection(Of Uri)()

Uris.Add(New Uri("http://www.contoso.com"))
Uris.Add(New Uri("http://www.tailspintoys.com"))
Uris.Add(New Uri("http://www.cohowinery.com/"))
UriBox1.ItemsSource = Uris

Silverlight
Tambin puede enlazar a una coleccin estableciendo la propiedad ItemsSource en un objeto Binding y
estableciendo DataContext para el control. En el ejemplo siguiente se muestra cmo establecer la propiedad
ItemsSource en un objeto Binding y la propiedad DataContext en la coleccin de identificadores URI
mediante una combinacin de XAML y cdigo.
<ComboBox ItemsSource="{Binding}" x:Name="UriBox2" />

UriBox2.DataContext = Uris
AutoCompleteBox
AutoCompleteBox es un control especial que combina un cuadro de texto para los datos proporcionados
por el usuario y un control de elementos que se muestra en una lista desplegable. El control de elementos
contiene posibles coincidencias basadas en la entrada del cuadro de texto. Se agrega contenido a la parte
de texto del control mediante la propiedad Text y se agrega contenido a la lista desplegable mediante la
creacin de un enlace a una lista con la propiedad ItemsSource.
DataGrid
DataGrid es til para mostrar recolecciones de datos, pero no es un control de elementos. El control
DataGrid hereda directamente de la clase Control. Su contenido se establece estableciendo la propiedad
ItemsSource en una coleccin de IEnumerable o en Binding, que resulta parecido a un control de elementos.
Sin embargo, un control DataGrid no se puede rellenar manualmente como un control de elementos. Al
establecer ItemsSource en una coleccin de objetos, se crea automticamente una fila para cada objeto de
la coleccin. Puede establecer AutoGenerateColumns en true a fin de generar automticamente una
columna para cada propiedad del tipo de objeto. Tambin puede especificar las columnas personalmente
con la propiedad Columns. Hay tipos diferentes de columnas que contienen tipos diferentes de contenido.
Nota:
El control DataGrid forma parte del SDK de Silverlight y requiere la siguiente declaracin de espacio de
nombres:
En el ejemplo siguiente, se muestra cmo establecer la propiedad ItemsSource en una coleccin de objetos
Uri mediante una combinacin de XAML y cdigo. AutoGenerateColumns se establece en true, para que se
cree automticamente una columna para cada propiedad pblica de Uri.
<sdk:DataGrid x:Name="UriGrid1" AutoGenerateColumns="True" />

UriGrid1.ItemsSource = Uris
En el ejemplo siguiente se muestra cmo establecer la propiedad ItemsSource en un objeto Binding y la

propiedad DataContext del control en la coleccin de objetos Uri mediante una combinacin de XAML y
cdigo. AutoGenerateColumnsProperty se establece en true, para que se cree automticamente una
columna para cada propiedad pblica de Uri.
<sdk:DataGrid ItemsSource="{Binding}" x:Name="UriGrid2" AutoGenerateColumns="True" />

UriGrid2.DataContext = Uris
Controles que muestran una coleccin de elementos y un encabezado

HeaderedItemsControl es un tipo especial de control de elementos que permite establecer una coleccin de
elementos y un encabezado. Su propiedad ItemsSource se establece igual que en los dems controles de
elementos. Adems, puede establecer un encabezado para los elementos con la propiedad Header.
HeaderedItemsControl es muy til para mostrar datos jerrquicos, porque se puede establecer la propiedad
ItemTemplate en HierarchicalDataTemplate y constituir la estructura del siguiente subnivel en una jerarqua.

Silverlight
Controles que muestran otros elementos de la interfaz de usuario

Hay varios controles que se derivan de la clase Panel y se han diseado para mostrar los elementos y el
diseo de la interfaz de usuario. La propiedad de contenido de un control derivado de la clase Panel es
Children. La propiedad Children es de tipo UIElementCollection. Una coleccin UIElementCollection
nicamente puede contener objetos UIElement. Por consiguiente, los paneles tienen un modelo de
contenido ms restringido que los controles de contenido. Panel y los controles que se derivan de Panel,
Grid, Canvas y StackPanel, se explican con detalle en Sistema de diseo de Silverlight.
5.3. Controles por funcin

Silverlight proporciona controles cliente que realizan muchas funciones. Puede seleccionar el control
adecuado para cada escenario comparando controles que proporcionan funcionalidades similares. Algunos
de estos controles forman parte de las bibliotecas de Silverlight del SDK de Silverlight. Si un control est
disponible nicamente como parte del SDK de Silverlight, se especifica en la columna Ubicacin.
Controles por funcin

En la tabla siguiente se muestran los controles de Silverlight comunes segn su funcin general.
Funcin Control Ubicacin Descripcin

Motor en Reacciona a los datos proporcionados por el
Controles de
Button tiempo de usuario desde un mouse, teclado, lpiz u otro
botn/comando
ejecucin dispositivo de entrada y genera un evento Click.
Representa un control de botn que muestra un
Motor en hipervnculo. Cuando se hace clic en l,
HyperlinkButton tiempo de HyperlinkButton permite al usuario ir a una pgina
ejecucin web que pertenece a la misma aplicacin web o
que es externa a la aplicacin actual.
Motor en Representa un botn que genera su evento de clic
RepeatButton tiempo de repetidamente desde el momento en que se
ejecucin presiona el botn hasta que se suelta.
Representa un control que un usuario puede
Motor en
Controles de activar o desactivar. Una casilla proporciona,
CheckBox tiempo de
seleccin opcionalmente, un estado de seleccin
ejecucin
indeterminado.
Motor en
Muestra una lista desplegable de los elementos
ComboBox tiempo de
que el usuario puede seleccionar.
ejecucin
Motor en
Muestra una lista de elementos que el usuario
ListBox tiempo de
puede seleccionar haciendo clic en ellos.
ejecucin
Permite al usuario seleccionar una sola opcin de
Motor en
una lista de opciones. Cuando los botones de
RadioButton tiempo de
radio estn agrupados, son mutuamente
ejecucin
excluyentes.
Representa un control que permite al usuario
Motor en
efectuar la seleccin en un intervalo de valores,
Slider tiempo de
moviendo un control Thumb a lo largo de una
ejecucin
trayectoria.
Permite al usuario seleccionar una fecha en una
Presentacin y SDK de presentacin visual de un calendario. El calendario
Calendar
seleccin de fechas Silverlight se puede utilizar por s solo o en combinacin con
el control DatePicker.
Permite al usuario seleccionar una fecha
SDK de
DatePicker escribindola en un campo de texto o
Silverlight
seleccionndola en un control de calendario

Silverlight
desplegable.
Presentacin de la Motor en
Muestra cantidades pequeas de texto de solo
informacin (solo TextBlock tiempo de
lectura.
lectura) ejecucin
Motor en
Muestra el progreso actual de una operacin al
ProgressBar tiempo de
usuario.
ejecucin
Proporciona un control para mostrar o editar texto
Motor en enriquecido. Admite texto con formato,
RichTextBox tiempo de hipervnculos, imgenes y otro contenido
ejecucin enriquecido. Se puede establecer como de solo
lectura.
Representa un control que proporciona un cuadro
de texto para los datos proporcionados por el
Presentacin y SDK de
AutoCompleteBox usuario y una lista desplegable que contiene
edicin de texto Silverlight
posibles coincidencias basadas en la entrada del
cuadro de texto.
Motor en Proporciona un control que permite al usuario
PasswordBox tiempo de escribir datos confidenciales, como una
ejecucin contrasea.
Motor en
Proporciona un control para mostrar o editar
TextBox tiempo de
texto.
ejecucin
Proporciona un control para mostrar o editar texto
Motor en
enriquecido. Admite texto con formato,
RichTextBox tiempo de
hipervnculos, imgenes y otro contenido
ejecucin
enriquecido.
Muestra una coleccin de datos en filas y
Presentacin de SDK de
DataGrid columnas. Puede cambiar el tipo de fila o columna
datos Silverlight
para adaptarlo a las necesidades de su aplicacin.
Proporciona una interfaz de usuario para la
SDK de
DataPager paginacin a travs de una coleccin de datos que
Silverlight
implementa IPagedCollectionView.
Muestra datos jerrquicos en una estructura de
SDK de
TreeView rbol con elementos que se pueden expandir y
Silverlight
contraer.
Motor en
Presentacin de
Image tiempo de Muestra una imagen.
grficos y vdeo
ejecucin
Motor en Permite al usuario abrir una imagen con varias
MultiScaleImage tiempo de resoluciones que se puede escalar o cambiar de
ejecucin posicin para verla con detalle.
Hospeda contenido de audio o vdeo. Proporciona
Motor en
una regin rectangular que puede mostrar vdeo
MediaElement tiempo de
en su superficie o reproducir audio si no hay vdeo
ejecucin
presente.
Motor en
Proporciona una superficie de dibujo que admite
InkPresenter tiempo de
las caractersticas de Tablet PC.
ejecucin
Presentacin HTML, Motor en Proporciona una superficie para mostrar contenido
ejecucin fuera del WebBrowser tiempo de HTML cuando la aplicacin se hospeda fuera del
explorador ejecucin explorador.
Diseo y agrupacin Motor en Proporciona un borde, un fondo o ambos a otro
Border
de elementos tiempo de control.

Silverlight
ejecucin
Motor en Proporciona una superficie para mostrar
Canvas tiempo de elementos secundarios en las coordenadas
ejecucin concretas del lienzo.
Motor en
Representa un control con una sola parte de
ContentControl tiempo de
contenido.
ejecucin
Proporciona una superficie compuesta de filas y
Motor en columnas para mostrar elementos secundarios. Se
Grid tiempo de definen las filas y columnas para una cuadrcula y,
ejecucin a continuacin, se asignan los objetos a una fila o
columna concreta de la cuadrcula.
SDK de Permite al usuario cambiar el tamao de las
GridSplitter
Silverlight columnas o filas de un control Grid.
Motor en Proporciona una superficie para mostrar
StackPanel tiempo de elementos secundarios en una lnea en sentido
ejecucin horizontal o vertical.
Motor en Proporciona un control que puede ajustar o
Viewbox tiempo de escalar su contenido para rellenar el espacio
ejecucin disponible.
Proporciona un control de panel de pila que
Motor en
organiza el contenido que est visible en la
VirtualizingStackPanel tiempo de
pantalla, creando los elementos adicionales de la
ejecucin
interfaz de usuario que sean necesarios.
Representa un control que proporciona una barra
Motor en
de desplazamiento con un control de posicin
ScrollBar tiempo de
(Thumb) deslizante cuya posicin corresponde a
ejecucin
un valor.
Motor en
Proporciona una superficie que se puede
ScrollViewer tiempo de
desplazar para mostrar un elemento secundario.
ejecucin
Proporciona una interfaz con fichas en la que
SDK de
TabControl mostrar elementos. Los elementos secundarios se
Silverlight
hospedan en un control TabItem.
SDK de Muestra una descripcin y realiza el seguimiento
Ayuda del usuario DescriptionViewer
Silverlight del estado del error para un control asociado.
Muestra una leyenda, el indicador de campo
SDK de
Label obligatorio y el indicador de error de validacin
Silverlight
para un control asociado.
Motor en Proporciona informacin al usuario sobre un
ToolTip tiempo de elemento de la interfaz de usuario mediante una
ejecucin ventana emergente.
SDK de Muestra un resumen de los errores de validacin
ValidationSummary
Silverlight en un formulario.
SDK de
Navegacin Frame Admite la navegacin a los controles Page.
Silverlight
SDK de Encapsula el contenido al que puede navegar un
Page
Silverlight control Frame.
Motor en
Ventanas y cuadros Permite al usuario seleccionar uno o ms archivos
OpenFileDialog tiempo de
de dilogo del sistema de archivos.
ejecucin
Motor en
Permite al usuario especificar opciones para
SaveFileDialog tiempo de
guardar un archivo.
ejecucin

Silverlight
Proporciona una ventana que se puede mostrar

SDK de
ChildWindow sobre una ventana primaria y bloquea la
Silverlight
interaccin con la ventana primaria.
Motor en Coloca el contenido encima del contenido
Popup tiempo de existente dentro de los lmites del complemento
ejecucin Silverlight.
5.4. Inicializacin y diseo de controles

Es importante conocer el orden de inicializacin y diseo de los eventos y mtodos al crear un control. Esto
permite saber cul es el mtodo que hay que invalidar o qu evento se debe controlar para conseguir un
efecto determinado. Normalmente, se construye el control de Silverlight y se establecen sus propiedades;
despus, se crea su representacin visual, o rbol visual; y, por ltimo, el control se somete al proceso de
diseo. En la tabla siguiente se muestra una lista de las propiedades que se establecen y de los eventos y
mtodos que se producen durante la creacin y el diseo de controles. Las propiedades, los mtodos y los
eventos se muestran en el orden en que se producen.
Propiedad, mtodo o evento

Se produce
del control
En XAML, cuando se analiza la etiqueta de apertura para una declaracin de
control.
Se construye el control.
O bien
En cdigo, cuando se llama explcitamente al constructor.

En XAML, cuando se analizan los atributos de propiedad XAML del control.
Se establecen las propiedades

O bien
del control.
En cdigo, cuando se establecen explcitamente las propiedades.

En XAML, despus de
analizar la etiqueta de cierre del control.

Se aplica la propiedad Style
(estilo explcito).
O bien
En cdigo, cuando se establece explcitamente la propiedad Style.

Se aplica la propiedad Style Cuando se analiza la etiqueta de cierre del control, despus de aplicar el
(estilo predeterminado de estilo explcito (si existe). El estilo predeterminado no invalidar el estilo
generic.xaml). explcito que se estableci previamente.
Cuando el elemento se agrega al rbol visual. Sucede antes de que se
Se produce el evento Loaded. presente el fotograma siguiente. Esto se produce antes de realizar cualquier
operacin de diseo.
Durante el paso de medicin del diseo. El valor de la propiedad Template,
Se aplica la plantilla (los si se ha establecido, se expandir para proporcionar el rbol visual. El control
elementos visuales del control se crea inicialmente sin rbol visual, que se borra cuando se establece la
se crean basndose en ella). propiedad Template. Tambin se puede llamar al mtodo ApplyTemplate
para expandir la plantilla y crear el rbol visual del control, si no lo tiene ya.
Cada vez que se aplica la plantilla del control. No es necesario llamar al
Se llama al mtodo
mtodo OnApplyTemplate base para que se aplique la plantilla; sin embargo,
OnApplyTemplate.
los tipos heredados podran necesitarlo para su implementacin.
Los elementos visuales del
control pasan a estar En OnApplyTemplate. Llame a GetTemplateChild y pase el nombre del
disponibles para su elemento de plantilla que se debe recuperar.
manipulacin en cdigo.

Silverlight
En el primer paso de diseo, cuando se miden todos los elementos

Se llama al mtodo
secundarios. Si la plantilla se expande durante este paso de medicin, se
MeasureOverride.
llamar a MeasureOverride despus de expandirla.
Se llama al mtodo En el paso de diseo de organizacin, que se produce despus del paso de
ArrangeOverride. medicin.
Se genera el evento
Despus de completarse los dos pasos de diseo (medicin y organizacin).
SizeChanged.
Se genera el evento
Si se produce el evento SizeChanged.
LayoutUpdated.
5.5. Utilizar controles y cuadros de dilogo

En los temas siguientes se muestra cmo usar los controles y cuadros de dilogo disponibles con el motor
en tiempo de ejecucin de Silverlight y el SDK de Silverlight.
5.5.1. Introduccin a los controles

Los controles estn diseados para ser coherentes. Cuando se han entendido los fundamentos de un tipo
de control, resulta fcil usar otros controles. Por ejemplo, agregar un control a una aplicacin, cambiar su
apariencia y controlar los eventos del control son tareas similares para todos los controles de Silverlight.
Estas tareas se pueden realizar fcilmente con Silverlight Designer para Visual Studio si se usa Visual Studio
2010. Asimismo, se pueden llevar a cabo mediante XAML o cdigo. En este tema se describen algunas de las
tareas de control que son aplicables a los distintos controles de Silverlight.
Agregar un control a una aplicacin

Para agregar un control a una aplicacin, se puede usar XAML, cdigo o Silverlight Designer. Para hacer
referencia al control en el archivo de cdigo subyacente, es preciso especificar un nombre para el control
mediante el atributo x:Name en la declaracin de XAML
Cuando se usa un control del SDK o del Kit de herramientas de Silverlight, hay que hacer referencia al
ensamblado correcto y agregar una asignacin de espacio de nombres al archivo XAML. Una de las ventajas
que ofrece el diseador reside en que, al arrastrar los controles desde el cuadro de herramientas, se
agregan automticamente la referencia al ensamblado y la asignacin de espacio de nombres. Cuando se
agregan controles mediante XAML o cdigo, es preciso agregar manualmente una referencia de
ensamblado y una asignacin de espacio de nombres.
Para agregar un control a la aplicacin mediante el diseador
1. En el Cuadro de herramientas, busque el control que desee usar.
En la ilustracin siguiente, se muestra un ejemplo del cuadro de herramientas de Silverlight.

Silverlight
2. Haga doble clic en el control para agregarlo a la superficie de diseo.

O bien
Arrastre el control hasta la ubicacin deseada en la superficie de diseo.
Para agregar un control a la aplicacin mediante XAML
1. Si es necesario, en el Explorador de soluciones, agregue una referencia al ensamblado.
2. Si es necesario, en el archivo XAML, agregue una asignacin de espacio de nombres.
3. Declare el control en XAML.
En el ejemplo siguiente, se muestra cmo declarar un botn, asignarle un nombre y establecer su
contenido en XAML.
<Button Margin="5" Width="100" Content="Click Me" x:Name="button1"/>
Para agregar un control a la aplicacin mediante cdigo

1. Si es necesario, en el Explorador de soluciones, agregue una referencia al ensamblado.
2. Si es necesario, en el archivo XAML, agregue una asignacin de espacio de nombres.
3. En el archivo de cdigo subyacente, cree el control mediante cdigo.
4. Agregue el control al rbol visual para que se muestre en la aplicacin.
En el ejemplo siguiente, se muestra cmo crear un botn, asignarle un nombre, establecer su
contenido mediante cdigo y agregarlo a la coleccin Children de LayoutRoot.
Dim button1 As Button = New Button
button1.Content = "Click Me"
button1.Name = "button1"
LayoutRoot.Children.Add(button1)
Utilizar propiedades para cambiar el aspecto de un solo control

Puede cambiar la apariencia de un control estableciendo sus propiedades, como Width, Height o
Background. Estos cambios se pueden realizar en Silverlight Designer manipulando el control en la
superficie de diseo o estableciendo estas propiedades en la ventana Propiedades. Asimismo, es posible
realizar estos cambios mediante XAML o cdigo.
Para cambiar el tamao de un control en el diseador
1. Seleccione el control en la superficie de diseo.

Silverlight
Aparecern los controladores de tamao.

2. Arrastre uno de estos controladores para cambiar el tamao del control.
En la siguiente ilustracin, se muestra cmo se ajusta el tamao de un botn mediante los
controladores de tamao.
Para establecer las propiedades de un control mediante la ventana Propiedades

1. Haga clic con el botn secundario en el control para que se muestre su men contextual.
En la ilustracin siguiente, se muestra un ejemplo de men contextual.
2. Seleccione Propiedades.
3. En la ventana Propiedades, busque la propiedad que desee establecer y especifique el nuevo valor.
En la ilustracin siguiente, se muestra un ejemplo de la ventana Propiedades.
Para establecer propiedades mediante XAML

1. En la vista XAML, busque el control que desee cambiar.
2. Cambie las propiedades existentes o agregue propiedades nuevas. Si procede, aparecer una
ventana de IntelliSense.

Silverlight
En el ejemplo siguiente, se muestra cmo establecer mediante XAML propiedades que cambian la
apariencia de un botn. Las propiedades utilizadas en este ejemplo se aplican a muchos controles
de Silverlight.
<Button Margin="5" Height="50" Width="100" Background="Blue" Content="Click Me!" x:Name="button2" />
Para establecer propiedades mediante cdigo

En el archivo de cdigo subyacente, especifique los valores de propiedad de un control mediante
cdigo.
En el ejemplo siguiente, se muestra cmo establecer mediante cdigo propiedades que cambian la
apariencia de un botn. Las propiedades utilizadas en este ejemplo se aplican a muchos controles
de Silverlight.
Dim button2 As Button = New Button
button2.Height = 50
button2.Width = 100
button2.Background = New SolidColorBrush(Colors.Blue)
button2.Content = "Click Me"
Utilizar estilos para cambiar el aspecto de varios controles

Para aplicar los mismos valores de propiedad a varios controles del mismo tipo, se puede crear un estilo y
aplicarlo al control. Un estilo es bsicamente una coleccin de valores de propiedad de un tipo
determinado. Los estilos se definen normalmente en XAML. El valor de targetType del estilo determina a
qu tipo de controles se aplica. Asimismo, se puede asignar al estilo una clave (mediante el atributo x:Key) y
hacer referencia a l por su nombre al declarar un tipo.
Se puede asignar un estilo a un control mediante cdigo o mediante el diseador.
Para declarar un estilo y aplicarlo a un control
1. En un archivo XAML, cree una seccin de recursos, como Grid.Resources o StackPanel. Resources.
2. Agregue un elemento Style con un atributo x:Key (atributo).
3. Agregue uno o varios elementos Setter a Style.
4. En la declaracin de XAML del control, agregue una propiedad Style junto con una Extensin de
marcado StaticResource.
En el ejemplo siguiente, se muestra cmo declarar un estilo como un recurso, asignarle una clave y
aplicarlo a un control de botn en XAML.
<StackPanel.Resources>
<Style TargetType="Button" x:Key="myButtonStyle">
<Setter Property="Background" Value="Purple" />
<Setter Property="Foreground" Value="#9900FF" />
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="100" />
<Setter Property="Margin" Value="5" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontSize" Value="14" />
</Style>
</StackPanel.Resources>
<Button x:Name="button3" Width="130" Content="Click Me Instead!" Style="{StaticResource myButtonStyle}"/>
Aplicar un estilo al control mediante el diseador
1. Cree un estilo como un recurso siguiendo los pasos descritos en el procedimiento anterior.
2. Seleccione el control al que desee aplicar el estilo.
3. Abra la ventana Propiedades y busque la propiedad Style.
4. Haga clic en la columna de valores a la derecha para que se abra el editor de recursos de
propiedad.
5. Expanda la seccin Local y seleccione el estilo en la lista.
Se agrega al control una propiedad Style junto con una Extensin de marcado StaticResource
mediante XAML.

Silverlight
Los valores de propiedad y los estilos permiten cambiar solo algunos aspectos de la apariencia de un
control. Para cambiar completamente la apariencia y el comportamiento de un control, es preciso usar su
plantilla. El objeto ControlTemplate se define en XAML, ya sea de forma insertada o en un archivo
independiente, y contiene la apariencia visual y el comportamiento de un control. Para cambiar la plantilla
de un control, se establece la propiedad Template en XAML al crear un estilo. La mayora de los controles
tienen una plantilla predeterminada. Se puede reemplazar la plantilla predeterminada de un control o se
puede modificar la plantilla para agregar, reorganizar o eliminar determinados elementos de un control.
Crear controladores de eventos para controles

Cada control tiene eventos que permiten responder a las acciones del usuario. Por ejemplo, un control de
botn contiene un evento de clic que se genera cuando se hace clic en el botn. Para controlar un evento,
se crea un mtodo denominado controlador de eventos. Los controladores de eventos se pueden crear en
Silverlight Designer o en XAML. Asimismo, es posible crearlos manualmente mediante cdigo, siempre y
cuando se haya establecido la propiedad Name del control.
Para crear un controlador de eventos mediante la ventana Propiedades
1. En la vista Diseo, seleccione el control para el que desee crear un controlador de eventos.
2. En la ventana Propiedades, haga clic en el botn Eventos.
Se mostrarn los eventos del control y estar seleccionado el evento predeterminado.
3. Haga doble clic en el evento que desee controlar para crear un nuevo controlador de eventos.
Se crea el controlador de eventos para el control. Se abre el archivo de cdigo subyacente y el
cursor se coloca en el controlador de eventos. En los proyectos de Visual C#, se agrega al archivo
XAML un atributo que especifica el controlador de eventos. En los proyectos de Visual Basic, no se
modifica el archivo XAML.
Para crear un controlador de eventos en el editor de XAML
1. En la vista XAML, seleccione el control para el que desee crear un controlador de eventos.
2. En la etiqueta de apertura del elemento, empiece a escribir el nombre del evento que desee
controlar, por ejemplo, el evento Click o MouseEnter.
Cuando empiece a escribir el nombre del evento, aparecer una ventana de IntelliSense con los
eventos disponibles, tal y como se muestra en la ilustracin siguiente.

Silverlight
3. Seleccione el evento y, a continuacin, presione TAB.

Deber aparecer una ventana similar a la que se muestra en la ilustracin siguiente.
4. Haga doble clic en <Nuevo controlador de eventos>.

El nombre predeterminado del controlador de eventos aparece en XAML y se crea un controlador
de eventos en el archivo de cdigo subyacente.
5. Haga clic con el botn secundario en el evento y, en el men contextual, seleccione Navegar al
controlador de eventos, tal y como se muestra en la ilustracin siguiente.
Se abre el archivo de cdigo subyacente y el cursor se coloca en el controlador de eventos.

En el ejemplo siguiente, se muestra un evento Click de un control Button que est asociado a un
controlador de eventos denominado button5_Click.
Private Sub button5_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
End Sub
<Button Margin="5" Width="100" Content="Click Me" x:Name="button5" Click="button5_Click"/>
Para crear un controlador de eventos mediante cdigo

1. En XAML, asegrese de que el control tenga un nombre.
2. En el cdigo subyacente, use la palabra clave Handles en Visual Basic o el operador += en C# para
especificar el controlador de eventos que desee utilizar.
En el ejemplo siguiente, se muestra un evento Click de un control Button que est asociado a un
controlador de eventos denominado button6_Click.
Private Sub button6_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) Handles button6.Click
End Sub
<Button Margin="5" Width="100" Content="Click Me" x:Name="button6" />

Silverlight
5.5.2. DataGrid
El control DataGrid proporciona una forma flexible de mostrar una coleccin de datos en filas y columnas.
Los tipos de columnas integrados incluyen la columna de texto, la columna de casillas y la columna de
plantilla para hospedar contenido personalizado. El tipo de fila integrado incluye una seccin de detalles
desplegable que se puede utilizar para mostrar contenido adicional debajo de los valores de celda.
El control DataGrid admite las opciones de formato de tabla comunes, como los fondos de fila alternos y la
capacidad de mostrar u ocultar encabezados, lneas de cuadrcula y barras de desplazamiento. Adems, el
control proporciona varias propiedades de estilo y plantilla que puede usar para cambiar por completo la
apariencia del control y de sus filas, columnas, celdas y encabezados de fila o columna.
En los temas de esta seccin se describen los conceptos y las tcnicas adicionales que puede usar para crear
caractersticas del control DataGrid en las aplicaciones.
5.5.2.1. Comportamiento predeterminado del teclado y del mouse en el control

DataGrid
En este tema se describe cmo los usuarios pueden interactuar con el control DataGrid a travs del teclado
y el mouse.
Comportamiento predeterminado del teclado

En la tabla siguiente se muestra el comportamiento predeterminado del teclado para el control DataGrid.
Nota:
En un equipo Macintosh, use la tecla Comando en lugar de la tecla CTRL.
Tecla o
combinacin de Descripcin
teclas
Mueve el foco a la celda que se encuentra directamente debajo de la celda actual. Si el
FLECHA ABAJO
foco est en la ltima fila, al presionar la FLECHA ABAJO, no sucede nada.
Mueve el foco a la celda que se encuentra directamente encima de la celda actual. Si el
FLECHA ARRIBA
foco est en la primera fila, al presionar la FLECHA ARRIBA, no sucede nada.
Mueve el foco a la celda anterior de la fila. Si el foco est en la primera celda de la fila, al
FLECHA
presionar la FLECHA IZQUIERDA, no sucede nada. Si el foco se encuentra en un
IZQUIERDA
encabezado de grupo de filas, al presionar la FLECHA IZQUIERDA, se contrae el grupo.
Mueve el foco a la siguiente celda de la fila. Si el foco est en la ltima celda de la fila, al
FLECHA
presionar la FLECHA DERECHA, no sucede nada. Si el foco se encuentra en un encabezado
DERECHA
de grupo de filas, al presionar la FLECHA DERECHA, se expande el grupo.
INICIO Mueve el foco a la primera celda de la fila actual.
FIN Mueve el foco a la ltima celda de la fila actual.
Desplaza el control hacia abajo por el nmero de filas que se muestran. Mueve el foco
AV PG hasta la ltima fila mostrada sin cambiar las columnas. Si la ltima fila se muestra solo
parcialmente, desplaza la cuadrcula de modo que se muestre totalmente la ltima fila.
Desplaza el control hacia arriba por el nmero de filas que se muestran. Desplaza el foco
RE PG a la primera fila mostrada sin cambiar las columnas. Si la primera fila se muestra solo
parcialmente, desplaza la cuadrcula de modo que se muestre totalmente la primera fila.
Si la celda actual est en modo de edicin, mueve el foco a la celda siguiente de la fila
actual. Si el foco ya est en la ltima celda de la fila, confirma los cambios realizados y
mueve el foco a la primera celda de la siguiente fila. Si el foco est en la ltima celda del
control, desplaza el foco al siguiente control en el orden de tabulacin del contenedor
TAB
primario.
Si la celda actual no est en modo de edicin, desplaza el foco al siguiente control en el

orden de tabulacin del contenedor primario.
MAYS+TAB Si la celda actual est en modo de edicin, mueve el foco a la celda anterior de la fila

Silverlight
actual. Si el foco ya est en la primera celda de la fila, confirma los cambios realizados y
mueve el foco a la ltima celda de la fila anterior. Si el foco est en la primera celda del
control, desplaza el foco al control anterior en el orden de tabulacin del contenedor
primario.
Si la celda actual no est en modo de edicin, desplaza el foco al control anterior en el

orden de tabulacin del contenedor primario.
CTRL+FLECHA
Mueve el foco a la ltima celda de la columna actual.
ABAJO
CTRL+FLECHA
Mueve el foco a la primera celda de la columna actual.
ARRIBA
CTRL+FLECHA
Mueve el foco a la ltima celda de la fila actual.
DERECHA
CTRL+FLECHA
Mueve el foco a la primera celda de la fila actual.
IZQUIERDA
CTRL+INICIO Desplaza el foco a la primera celda del control.
CTRL+FIN Desplaza el foco a la ltima celda del control.
CTRL+AV PG Igual que AV PG.
CTRL+RE PG Igual que RE PG.
Si el valor de la propiedad DataGrid.IsReadOnly es false y el valor de la propiedad
F2 DataGridColumn.IsReadOnly es false para la columna actual, coloca la celda actual en
modo de edicin.
Confirma cualquier cambio en la celda y fila actuales y desplaza el foco a la celda
ENTRAR directamente debajo de la celda actual. Si el foco est en la ltima fila, confirma cualquier
cambio sin mover el foco.
Si el control est en modo de edicin, cancela la edicin y revierte todos los cambios
ESC realizados en el control. Si el origen de datos subyacente implementa IEditableObject, al
presionar ESC por segunda vez, se cancela el modo de edicin para toda la fila.
RETROCESO Elimina el carcter situado delante del cursor al editar una celda.
SUPR Elimina el carcter situado detrs del cursor al editar una celda.
CTRL+ENTRAR Confirma cualquier cambio en la celda actual sin mover el foco.
Teclas de seleccin
Si el valor de la propiedad SelectionMode se establece en Extended, el comportamiento de navegacin no
cambia, pero si se navega con el teclado y al mismo tiempo se presiona la tecla MAYS (incluida la
combinacin de teclas CTRL+MAYS), se modifica una seleccin de varias filas. Antes de comenzar la
navegacin, el control marca la fila actual como fila delimitadora. Cuando se navega presionando la tecla
MAYS, la seleccin incluye todas las filas comprendidas entre la fila delimitadora y la fila actual.
Las siguientes teclas de seleccin modifican una seleccin de varias filas.
MAYS+FLECHA ABAJO
MAYS+FLECHA ARRIBA
MAYS+FLECHA IZQUIERDA
MAYS+FLECHA DERECHA
MAYS+INICIO
MAYS+FIN
MAYS+AV PG
MAYS+RE PG
CTRL+MAYS+FLECHA ABAJO
CTRL+MAYS+FLECHA ARRIBA
CTRL+MAYS+FLECHA IZQUIERDA
CTRL+MAYS+FLECHA DERECHA
CTRL+MAYS+INICIO
CTRL+MAYS+FIN
CTRL+MAYS+AV PG

Silverlight
CTRL+MAYS+RE PG
Comportamiento predeterminado del mouse

En la tabla siguiente se muestra el comportamiento predeterminado del mouse para el control DataGrid.
Nota:
Al hacer clic en una celda con el botn primario del mouse, siempre se cambia la celda actual. En Silverlight,
cuando se hace clic con el botn secundario del mouse, siempre se abre el men contextual Configuracin
de Silverlight.
Accin del mouse Descripcin
Hacer clic en una fila no
La fila en la que se ha hecho clic se convierte en la fila actual.
seleccionada
Hacer clic en una celda de
Coloca la celda en la que se ha hecho clic en modo de edicin.
la fila actual
Si el valor de la propiedad DataGrid.CanUserReorderColumns es true y el valor
Arrastrar una celda de
de la propiedad DataGridColumn.CanUserReorder es true para la columna
encabezado de columna
actual, mueve la columna de modo que se pueda colocar en la nueva posicin.
Arrastrar una lnea de Si el valor de la propiedad DataGrid.CanUserResizeColumns es true y el valor de
separacin de encabezados la propiedad DataGridColumn.CanUserResize es true para la columna actual,
de columna cambia el tamao de la columna.
Si el valor de la propiedad DataGrid.CanUserSortColumns es true y el valor de la
propiedad DataGridColumn.CanUserSort es true para la columna actual, ordena
la columna.
Hacer clic en una celda de Al hacer clic en el encabezado de una columna que ya est ordenada, se
encabezado de columna invertir la direccin de ordenacin de esa columna.
Cuando se presiona la tecla MAYS y al mismo tiempo se hace clic en varios

encabezados de columna, la ordenacin se realiza por varias columnas en el
orden en que se ha hecho clic en sus encabezados.
Si el valor de propiedad SelectionMode se establece en Extended, modifica una
seleccin de varias filas no contiguas.
CTRL+hacer clic en una fila
Si la fila ya est seleccionada, anula la seleccin de la fila.

MAYS+hacer clic en una Si el valor de propiedad SelectionMode se establece en Extended, modifica una
fila seleccin de varias filas contiguas.
Hacer clic en el botn de
expansin de un
Se expande o contrae el grupo.
encabezado de grupo de
filas
Hacer doble clic en un
encabezado de grupo de Se expande o contrae el grupo.
filas
Seleccin del mouse

Si el valor de la propiedad SelectionMode se establece en Extended, al hacer clic en una fila y presionar al
mismo tiempo la tecla CTRL o MAYS, se modificar una seleccin de varias filas.
Cuando se hace clic en una fila al mismo tiempo que se presiona la tecla CTRL, la fila cambia su estado de
seleccin mientras que las dems filas conservan su estado de seleccin actual.
Cuando se hace clic en una fila al mismo tiempo que se presiona la tecla MAYS, la seleccin incluye todas
las filas comprendidas entre la fila actual y la fila delimitadora ubicada en la posicin de la fila actual antes
del primer clic. Si posteriormente se hace clic mientras se presiona la tecla MAYS, cambiar la fila actual
pero no la fila delimitadora.

Silverlight
5.5.2.2. Cmo: Agregar un control DataGrid a una pgina

El control DataGrid de Silverlight est disponible nicamente como parte de las bibliotecas del kit de
desarrollo de software (SDK) de Silverlight. Puesto que el control DataGrid no es un control bsico, para
poder usarlo se debe hacer referencia a l correctamente.
Agregar un control DataGrid arrastrndolo

El modo ms sencillo de agregar un control DataGrid y hacer referencia a l correctamente es arrastrarlo
desde el cuadro de herramientas hasta la vista XAML.
Para agregar un control DataGrid arrastrndolo en Visual Studio
1. En el proyecto de Silverlight, abra la pestaa Todos los controles de Silverlight del cuadro de
herramientas.
2. En el cuadro de herramientas, arrastre el control DataGrid hasta la vista XAML o la vista de diseo.
Visual Studio realiza las siguientes tareas automticamente.
o Agrega una referencia al ensamblado System.Windows.Controls.Data.
o En la etiqueta de apertura <UserControl> de la pgina XAML, agrega una declaracin de
espacio de nombres XML para el espacio de nombres del SDK, tal y como se describe en
Prefijos y asignaciones para las bibliotecas de Silverlight.
o Agrega el siguiente XAML a la pgina si se arrastra el control hasta la vista XAML.
<sdk:DataGrid />
O bien
o Agrega el siguiente XAML si se arrastra el control hasta la vista de diseo.
<sdk:DataGrid AutoGenerateColumns="False" Height="100" Name="dataGrid2" Width="120" />
Agregar un control DataGrid manualmente

Para agregar manualmente un control DataGrid a la pgina, debe agregar una referencia al ensamblado
System.Windows.Controls.Data y tambin debe asignar un espacio de nombres XML al ensamblado.
Para agregar una referencia al ensamblado System.Windows.Controls.Data en
Visual Studio
1. En el proyecto de Silverlight, haga clic en el men Proyecto y seleccione Agregar referencia.
2. En la ficha .NET del cuadro de dilogo Agregar referencia, seleccione System.Windows.
Controls.Data.
Para agregar una asignacin de espacio de nombres XML
2. En la etiqueta de apertura <UserControl>, agregue el siguiente marcado.
xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk
Para agregar un control DataGrid en XAML

2. Agregue el siguiente XAML a la pgina.
<sdk:DataGrid></sdk:DataGrid>
Agregar un control DataGrid en cdigo

Una vez que tenga una referencia al ensamblado System.Windows.Controls.Data, tambin podr agregar
DataGrid en cdigo. En el ejemplo siguiente se crea un control DataGrid denominado dataGrid1 y se agrega
al elemento LayoutRoot de la pgina.

Silverlight
Para agregar un control DataGrid en cdigo

1. Abra MainPage.xaml.cs o MainPage.xaml.vb.
2. Agregue el siguiente cdigo a la pgina de cdigo subyacente.
Dim dataGrid1 As New DataGrid
LayoutRoot.Children.Add(dataGrid1)
5.5.2.3. Cmo: Mostrar y configurar detalles de fila en el control DataGrid

Cada fila de DataGrid de Silverlight se puede expandir para mostrar una seccin de detalles. La seccin de
detalles la define DataTemplate, que especifica el aspecto y los datos que va a mostrar.
Se puede mostrar la seccin de detalles para filas seleccionadas, para todas las filas o se puede contraer. Se
puede inmovilizar la seccin de detalles tambin para que no se desplace horizontalmente cuando se
desplaza DataGrid.
Mostrar una seccin de detalles de fila mediante XAML insertado
1. Cree DataTemplate que defina el aspecto de la seccin de detalles de fila.
2. Coloque DataTemplate dentro de las etiquetas <DataGrid.RowDetailsTemplate>.
<sdk:DataGrid x:Name="dataGrid1" Height="400" IsReadOnly="True" >
<sdk:DataGrid.RowDetailsTemplate>

<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Background="Tan">
<StackPanel>

<TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Name}"
Margin="0,0,10,0" VerticalAlignment="Bottom" />
<TextBlock FontSize="12" Text="Due Date: " VerticalAlignment="Bottom"/>
<sdk:DatePicker SelectedDate="{Binding DueDate, Mode=TwoWay}" VerticalAlignment="Bottom" />
<TextBlock FontSize="12" Text=" Complete:" VerticalAlignment="Bottom" />
<CheckBox IsChecked="{Binding Complete, Mode=TwoWay}"
</StackPanel>
<TextBlock FontSize="12" Text="Notes: " />
<TextBox FontSize="12" Text="{Binding Notes, Mode=TwoWay}"
Width="420" TextWrapping="Wrap"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>

</sdk:DataGrid.RowDetailsTemplate>
</sdk:DataGrid>
Mostrar una seccin de detalles de fila mediante un recurso DataTemplate

1. Cree DataTemplate que defina el aspecto de la seccin de detalles de fila.
2. Identifique DataTemplate asignando un valor a x:Key (atributo).
3. Enlace DataTemplate a la propiedad RowDetailsTemplate de DataGrid.
<data:DataGrid RowDetailsTemplate="{StaticResource templateReference}"/>
Cambiar la visibilidad de una seccin de detalles de fila

Establezca la propiedad RowDetailsVisibilityMode en el valor de enumeracin DataGridRowDetails
VisibilityMode.
En el ejemplo de cdigo siguiente se controla el evento SelectionChanged de ComboBox y
establece RowDetailsVisibilityMode en la opcin seleccionada en ComboBox.
' Set the row details visibility to the option selected in the combo box.
Private Sub cbRowDetailsVis_SelectionChanged(ByVal sender As System.Object, ByVal e As
System.Windows.Controls.SelectionChangedEventArgs)
Dim cb As ComboBox = sender
Dim cbi As ComboBoxItem = cb.SelectedItem
If Me.dataGrid1 IsNot Nothing Then
If cbi.Content.ToString() = "Selected Row (Default)" Then

Silverlight
Me.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.VisibleWhenSelected
ElseIf cbi.Content.ToString() = "None" Then
Me.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.Collapsed
ElseIf cbi.Content.ToString() = "All" Then
Me.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.Visible
End If
End If
End Sub
Para evitar que una seccin de detalles de fila se desplace horizontalmente

Establezca la propiedad AreRowDetailsFrozen en true.
En el ejemplo de cdigo siguiente se establece el valor de la propiedad AreRowDetailsFrozen en el
valor IsChecked de CheckBox denominado cb.
Me.dataGrid1.AreRowDetailsFrozen = cb.IsChecked
Ejemplo
En el ejemplo de cdigo siguiente se crea una List(Of T) de objetos Task y la lista de tareas se muestra en
una DataGrid denominada dataGrid1. DataGrid es de solo lectura, pero muestra una seccin de detalles de
fila que permite la edicin. La seccin de detalles de fila se enlaza al mismo DataContext que DataGridRow.
Para que muestren los cambios hechos en los datos de origen en la seccin de detalles de fila que se va a
mostrar en DataGridRow, la clase Task implementa la interfaz INotifyPropertyChanged. Tambin se
proporciona una interfaz de usuario para establecer las opciones de los detalles de fila.
<UserControl x:Class="DGRowDetails.Page"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<ScrollViewer VerticalScrollBarVisibility="Auto" BorderThickness="0" Padding="0">
<StackPanel Margin="0,0,0,5">
<Border BorderBrush="Black" BorderThickness="1" Padding="3" Width="180">
<StackPanel>
<TextBlock Text="Row Details Visibility" FontSize="12"/>
<ComboBox SelectionChanged="cbRowDetailsVis_SelectionChanged">
<ComboBoxItem Content="Selected Row (Default)" IsSelected="True" />
<ComboBoxItem Content="All"/>
<ComboBoxItem Content="None"/>
</ComboBox>
<CheckBox Content="Freeze Row Details" Margin="0,3,0,0"
Checked="cbFreezeRowDetails_Changed"
Unchecked="cbFreezeRowDetails_Changed" />
</StackPanel>
</Border>
</StackPanel>
</StackPanel>
<sdk:DataGrid x:Name="dataGrid1" Height="400" IsReadOnly="True" >
<sdk:DataGrid.RowDetailsTemplate>

<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Background="Tan">
<StackPanel>

<TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Name}"
Margin="0,0,10,0" VerticalAlignment="Bottom" />
<TextBlock FontSize="12" Text="Due Date: " VerticalAlignment="Bottom"/>
<sdk:DatePicker SelectedDate="{Binding DueDate, Mode=TwoWay}" VerticalAlignment="Bottom" />
<TextBlock FontSize="12" Text=" Complete:" VerticalAlignment="Bottom" />
<CheckBox IsChecked="{Binding Complete, Mode=TwoWay}"
</StackPanel>
<TextBlock FontSize="12" Text="Notes: " />
<TextBox FontSize="12" Text="{Binding Notes, Mode=TwoWay}"
Width="420" TextWrapping="Wrap"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>

</sdk:DataGrid.RowDetailsTemplate>
</sdk:DataGrid>

Silverlight
</StackPanel>
</ScrollViewer>
</UserControl>
Partial Public Class Page

Public Sub New()

' Create a list to store task data.
Dim taskList As List(Of Task) = New List(Of Task)
Dim itemsCount As Integer = 15
' Generate some task data and add it to the task list.
For index = 1 To itemsCount
taskList.Add(New Task() With _
{.Name = "Task " & index.ToString(), _
.DueDate = Date.Now.AddDays(index), _
.Complete = (index Mod 3 = 0), _
.Notes = "Task " & index.ToString() & " is due on " & Date.Now.AddDays(index) & ". Lorum ipsum..." _
})
Next
Me.dataGrid1.ItemsSource = taskList
End Sub
' Set the row details visibility to the option selected in the combo box.
Private Sub cbRowDetailsVis_SelectionChanged(ByVal sender As System.Object, ByVal e As
System.Windows.Controls.SelectionChangedEventArgs)
If cbi.Content.ToString() = "Selected Row (Default)" Then
Me.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.VisibleWhenSelected
ElseIf cbi.Content.ToString() = "None" Then
Me.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.Collapsed
ElseIf cbi.Content.ToString() = "All" Then
Me.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.Visible
End If
End If
End Sub
' Freeze the row details if the check box is checked.
Private Sub cbFreezeRowDetails_Changed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Dim cb As CheckBox = sender
Me.dataGrid1.AreRowDetailsFrozen = cb.IsChecked
End If
End Sub
End Class
Imports System.ComponentModel
Public Class Task

Implements System.ComponentModel.INotifyPropertyChanged
' The Task class implements INotifyPropertyChanged so that the datagrid row will be notified of changes to the data
' that are made in the row details section.
' Private task data.

Private m_Name As String
Private m_DueDate As Date
Private m_Complete As Boolean
Private m_Notes As String
' Define the public properties.

Property Name() As String
Get
Return Me.m_Name
End Get
Set(ByVal value As String)
If Not (value = Me.m_Name) Then
Me.m_Name = value
NotifyPropertyChanged("Name")
End If
End Set
End Property
Property DueDate() As Date

Get
Return Me.m_DueDate
End Get
Set(ByVal value As Date)

Silverlight
If Not (value = Me.m_DueDate) Then
Me.m_DueDate = value
NotifyPropertyChanged("DueDate")
End If
End Set
End Property
Property Complete() As Boolean

Get
Return Me.m_Complete
End Get
Set(ByVal value As Boolean)
If Not (value = Me.m_Complete) Then
Me.m_Complete = value
NotifyPropertyChanged("Complete")
End If
End Set
End Property
Property Notes() As String

Get
Return Me.m_Notes
End Get
If Not (value = Me.m_Notes) Then
Me.m_Notes = value
NotifyPropertyChanged("Notes")
End If
End Set
End Property
' Implement INotifyPropertyChanged interface.

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Private Sub NotifyPropertyChanged(ByVal propertyName As String)

RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
5.5.2.4. Cmo: Personalizar columnas generadas automticamente en el

control DataGrid
Puede controlar el evento AutoGeneratingColumn para modificar, reemplazar o cancelar una columna que
se est generando. El evento AutoGeneratingColumn se produce una vez para cada propiedad pblica no
esttica en el tipo de datos enlazado cuando cambia la propiedad ItemsSource y la propiedad
AutoGenerateColumns es true.
Para controlar el evento AutoGeneratingColumn
1. Cree un controlador de eventos para el evento AutoGeneratingColumn de DataGrid.
Private Sub dataGrid1_AutoGeneratingColumn(ByVal sender As System.Object, ByVal e As
System.Windows.Controls.DataGridAutoGeneratingColumnEventArgs)
End Sub
2. Agregue el controlador de eventos a los eventos de instancia de DataGrid.

<sdk:DataGrid x:Name="dataGrid1"
AutoGenerateColumns="True"
AutoGeneratingColumn="dataGrid1_AutoGeneratingColumn"/>
Para modificar una columna generada

En el controlador de eventos AutoGeneratingColumn, obtenga acceso a las propiedades DataGrid
Column haciendo referencia a la propiedad DataGridAutoGeneratingColumnEventArgs.Column.
' Modify the header of the Name column.
If e.Column.Header.ToString() = "Name" Then
e.Column.Header = "Task"
End If
Para reemplazar una columna generada
1. En el controlador de eventos AutoGeneratingColumn, cree un nuevo objeto DataGridColumn.
' Replace the DueDate column with a custom template column.

Silverlight
If e.PropertyName = "DueDate" Then
' Create a new template column.
Dim templateColumn As New DataGridTemplateColumn
templateColumn.Header = "Due Date"
templateColumn.CellTemplate = Me.Resources("dueDateCellTemplate")
templateColumn.CellEditingTemplate = Me.Resources("dueDateCellEditingTemplate")
templateColumn.SortMemberPath = "DueDate"
2. Reemplace la columna de la propiedad DataGridAutoGeneratingColumnEventArgs.Column por la

nueva instancia de DataGridColumn.
' Replace the auto-generated column with the templateColumn.
e.Column = templateColumn
Para cancelar la generacin de una columna

Establezca la propiedad Cancel en true.
' Cancel AutoGeneration of all boolean columns.
If e.PropertyType Is GetType(Boolean) Then
e.Cancel = True
End If
Ejemplo
En el ejemplo de cdigo siguiente se crea una List(Of T) de objetos Task y la lista de tareas se muestra en
una DataGrid denominada dataGrid1. En el controlador de eventos AutoGeneratingColumn de dataGrid1, se
realizan las personalizaciones siguientes.
El encabezado Header de la columna 'Name' se modifica por 'Task'.
La columna DueDate generada automticamente se reemplaza por un objeto DataGridTemplate
Column personalizado.
Se cancela la generacin automtica de todas las columnas que muestran datos de tipo Boolean.
<UserControl
x:Class="DGAutoGenColumn.Page"
<DataTemplate x:Key="dueDateCellTemplate">
<TextBlock
Text="{Binding DueDate}"
Margin="5,4,5,4" />
</DataTemplate>
<DataTemplate x:Key="dueDateCellEditingTemplate">
<sdk:DatePicker
SelectedDate="{Binding DueDate, Mode=TwoWay}" />
</DataTemplate>
<TextBlock Text="Column AutoGeneration" Foreground="#FF5C9AC9"
FontSize="18" FontFamily="Verdana" FontWeight="Bold" />
<sdk:DataGrid x:Name="dataGrid1"
AutoGenerateColumns="True"
AutoGeneratingColumn="dataGrid1_AutoGeneratingColumn" />
</StackPanel>
</UserControl>
Partial Public Class Page

Public Sub New()

For index = 1 To 10
.Notes = "add notes..." _
})
Next

Silverlight
End Sub
Private Sub dataGrid1_AutoGeneratingColumn(ByVal sender As System.Object, ByVal e As
System.Windows.Controls.DataGridAutoGeneratingColumnEventArgs)
' Modify the header of the Name column.
If e.Column.Header.ToString() = "Name" Then
e.Column.Header = "Task"
End If
' Replace the DueDate column with a custom template column.
If e.PropertyName = "DueDate" Then
' Create a new template column.
Dim templateColumn As New DataGridTemplateColumn
templateColumn.Header = "Due Date"
templateColumn.CellTemplate = Me.Resources("dueDateCellTemplate")
templateColumn.CellEditingTemplate = Me.Resources("dueDateCellEditingTemplate")
templateColumn.SortMemberPath = "DueDate"
' ...
' Replace the auto-generated column with the templateColumn.
e.Column = templateColumn
End If
' Cancel AutoGeneration of all boolean columns.
If e.PropertyType Is GetType(Boolean) Then
e.Cancel = True
End If
End Sub
End Class
Public Class Task


Get
Return Me.m_Name
End Get
Me.m_Name = value
End Set
End Property

Get
Return Me.m_DueDate
End Get
End Set
End Property

Get
End Get
End Set
End Property

Get
Return Me.m_Notes
End Get
Me.m_Notes = value
End Set
End Property
End Class
5.5.2.5. Cmo: Agrupar, ordenar y filtrar los datos en el control DataGrid

A menudo es til ver los datos de un control DataGrid de maneras diferentes, agrupndolos, ordenndolos
y filtrndolos. Para agrupar, ordenar y filtrar los datos de un control DataGrid, ste se enlaza a una vista de
coleccin que admita estas funciones. A continuacin se pueden manipular los datos en la vista de
coleccin sin afectar a los datos subyacentes. Los cambios en la vista de coleccin se reflejan en la interfaz
de usuario de DataGrid.

Silverlight
La clase PagedCollectionView proporciona funcionalidad de agrupacin, ordenacin y paginacin para un

origen de datos que implemente la interfaz IEnumerable. En este ejemplo, una coleccin de objetos Task se
encapsula dentro de PagedCollectionView. PagedCollectionView se usa como ItemsSource de DataGrid. La
agrupacin, ordenacin y filtrado se realizan en PagedCollectionView y se muestran en la interfaz de usuario
de DataGrid.
PagedCollectionView tambin proporciona funcionalidad de paginacin que se puede usar con DataGrid.
Uso de PagedCollectionView como ItemsSource

Para agrupar, ordenar y filtrar los datos de un control DataGrid, DataGrid se enlaza a una vista de coleccin
que admita estas funciones. En este ejemplo, DataGrid se enlaza a un objeto PagedCollectionView que
proporciona estas funciones para una coleccin List(Of T) de objetos Task.
Para enlazar DataGrid a PagedCollectionView
1. Cree una coleccin de datos que implemente la interfaz IEnumerable.
Nota:
Los objetos de la coleccin deben implementar la interfaz INotifyPropertyChanged y la interfaz
IEditableObject para que DataGrid responda correctamente a los cambios y ediciones de
propiedad.
2. Cree PagedCollectionView y pase la coleccin de datos al constructor.

3. Establezca la propiedad DataGrid.ItemsSource en PagedCollectionView.
' Create a collection to store task data.
Dim taskList As ObservableCollection(Of Task) = New ObservableCollection(Of Task)
For index = 1 To 14
{.ProjectName = "Project " & ((index Mod 3) + 1).ToString(), _
.TaskName = "Task " & index.ToString(), _
})
Next
Dim taskListView As New PagedCollectionView(taskList)
Me.dataGrid1.ItemsSource = taskListView
Agrupacin de elementos en DataGrid

Para especificar cmo se agrupan los elementos de DataGrid, se usa el tipo PropertyGroupDescription para
agrupar los elementos en la vista de origen.
Para agrupar elementos en DataGrid
1. Cree un objeto PropertyGroupDescription y pase al constructor el nombre de la propiedad segn la
cual se va a agrupar.
2. Agregue el objeto PropertyGroupDescription a la coleccin PagedCollectionView.Group
Descriptions.
3. Agregue ms instancias de PropertyGroupDescription a la coleccin PagedCollectionView.Group
Descriptions para aumentar el nmero de niveles de agrupacin.
If taskListView.CanGroup = True Then
' Group tasks by ProjectName...
taskListView.GroupDescriptions.Add(New PropertyGroupDescription("ProjectName"))
' Then group by Complete status.
taskListView.GroupDescriptions.Add(New PropertyGroupDescription("Complete"))
End If
Cuando los elementos se agrupan en DataGrid, cada grupo tiene un encabezado. Puede cambiar el aspecto
de DataGridRowGroupHeader definiendo un Style personalizado y agregndolo a la coleccin
RowGroupHeaderStyles. Si dispone de varios niveles de agrupacin, puede aplicar estilos diferentes a cada
nivel de grupo. Los estilos se aplican en el orden en que se definen. Por ejemplo, si define dos estilos, el
primero se aplicar a los grupos de fila de nivel superior. El segundo estilo se aplicar a todos los grupos de

Silverlight
filas del segundo nivel y niveles inferiores. El DataContext de DataGridRowGroupHeader es el

CollectionViewGroup que representa el encabezado.
Para cambiar la apariencia del encabezado de grupo de filas
1. Cree un objeto Style con la propiedad TargetType del objeto DataGridRowGroupHeader.
2. Coloque Style dentro de las etiquetas <DataGrid.RowGroupHeaderStyles>.
<sdk:DataGrid.RowGroupHeaderStyles>

<Style TargetType="sdk:DataGridRowGroupHeader">
<Setter Property="PropertyNameVisibility" Value="Collapsed" />
<Setter Property="Background" Value="#FF112255" />
<Setter Property="Foreground" Value="#FFEEEEEE" />
<Setter Property="SublevelIndent" Value="15" />
</Style>

<Setter Property="Background" Value="#44225566" />
</Style>
</sdk:DataGrid.RowGroupHeaderStyles>
Cuando se agrupan los elementos en DataGrid, se pueden usar los mtodos siguientes para contraer y
expandir manualmente los grupos:
Haga clic en la flecha de contraer o expandir en el encabezado del grupo de la filas.
Haga doble clic en cualquier parte del encabezado de grupo.
Presione la tecla de direccin izquierda para contraer el grupo y la tecla de direccin derecha para
expandirlo cuando el encabezado tiene el foco.
Para contraer o expandir un grupo mediante programacin, pase CollectionViewGroup al mtodo
CollapseRowGroup o ExpandRowGroup.
Para contraer o expandir grupos de filas
1. Obtenga el objeto CollectionViewGroup que representa el grupo que se va a contraer o expandir.
Nota:
Puede obtener el objeto CollectionViewGroup mediante la coleccin Groups. Alternativamente,
puede usar el mtodo GetGroupFromItem para obtener un objeto CollectionViewGroup individual,
como se muestra aqu.
2. Para contraer el grupo, pase CollectionViewGroup al mtodo CollapseRowGroup. Establezca el

segundo argumento en true para contraer tambin todos los subgrupos.
3. Para expandir el grupo, pase CollectionViewGroup al mtodo ExpandRowGroup. Establezca el
segundo argumento en true para expandir tambin todos los subgrupos.
En el ejemplo siguiente se muestra cmo contraer o expandir todos los grupos de la coleccin
PagedCollectionView.Groups.
Private Sub CollapseButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Dim pcv As PagedCollectionView = Me.dataGrid1.ItemsSource
Try
For Each group As CollectionViewGroup In pcv.Groups
dataGrid1.ScrollIntoView(group, Nothing)
dataGrid1.CollapseRowGroup(group, True)
Next
Catch ex As Exception
' Could not collapse group.
MessageBox.Show(ex.Message)
End Try
End Sub
Private Sub ExpandButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

Try
dataGrid1.ExpandRowGroup(group, True)
Next

Silverlight
' Could not expand group.
End Try
End Sub
Ordenacin de elementos en DataGrid

Para especificar cmo se ordenan los elementos de DataGrid, se usa el tipo SortDescription para ordenar los
elementos en la vista de origen.
Para ordenar elementos en DataGrid
1. Cree un objeto SortDescription y pase al constructor el nombre de la propiedad segn la cual se va

a ordenar.
2. Agregue el objeto SortDescription a la coleccin PagedCollectionView.SortDescriptions.
3. Agregue ms instancias de SortDescription a la coleccin PagedCollectionView.SortDescriptions
para ordenar por otras propiedades.
If taskListView.CanSort = True Then

'// By default, sort by ProjectName.
taskListView.SortDescriptions.Add(New SortDescription("ProjectName", ListSortDirection.Ascending))
End If
Filtrado de elementos en DataGrid

Para filtrar los elementos de DataGrid, se crea un mtodo que proporcione la lgica de filtrado y, a
continuacin, se usa la propiedad PagedCollectionView.Filter para aplicar el filtro.
Para filtrar elementos en DataGrid
1. Cree un mtodo que proporcione la lgica de filtrado. El mtodo se utiliza como devolucin de
llamada y acepta un parmetro de tipo Object.
2. Aplique el filtro a los datos estableciendo la propiedad PagedCollectionView.Filter.
3. Quite el filtro estableciendo la propiedad PagedCollectionView.Filter en null.
En el ejemplo siguiente se aplica el filtro cuando CheckBox es Checked, y se quita cuando CheckBox
es Unchecked.
Private Sub CheckBox_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
If pcv IsNot Nothing & pcv.CanFilter = True Then
' Apply the filter.
pcv.Filter = New Predicate(Of Object)(AddressOf FilterCompletedTasks)
End If
End Sub
Private Sub CheckBox_Unchecked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

If pcv IsNot Nothing Then
' Remove the filter.
pcv.Filter = Nothing
End If
End Sub
Public Function FilterCompletedTasks(ByVal t As Object) As Boolean

Dim _task As New Task
_task = t
Return _task.Complete = False
End Function
Ejemplo
En el ejemplo siguiente se muestra cmo agrupar, ordenar y filtrar los datos en un objeto
PagedCollectionView, adems de cmo mostrar los datos agrupados, ordenados y filtrados en un control
DataGrid. Una coleccin de objetos Task se encapsula en un objeto PagedCollectionView.
PagedCollectionView se usa como ItemsSource de DataGrid. La agrupacin, ordenacin y filtrado se realizan
en PagedCollectionView y se muestran en la interfaz de usuario de DataGrid.
<UserControl x:Class="DataGridGrouping.MainPage"

Silverlight
<Grid x:Name="LayoutRoot" Background="White" Margin="10">
<RowDefinition />
<sdk:DataGrid x:Name="dataGrid1">
<sdk:DataGrid.RowGroupHeaderStyles>

<Setter Property="PropertyNameVisibility" Value="Collapsed" />
<Setter Property="Background" Value="#FF112255" />
<Setter Property="Foreground" Value="#FFEEEEEE" />
<Setter Property="SublevelIndent" Value="15" />
</Style>

<Setter Property="Background" Value="#44225566" />
</Style>
</sdk:DataGrid.RowGroupHeaderStyles>
</sdk:DataGrid>
<StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="Filter Completed Tasks " />
<CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" />
<Button Content="Expand All Groups" Margin="10,0,0,0" Click="ExpandButton_Click" />
<Button Content="Collapse All Groups" Margin="5,0,0,0" Click="CollapseButton_Click" />
</StackPanel>
</Grid>
</UserControl>
Imports System.Collections.ObjectModel
Imports System.ComponentModel
Imports System.Windows.Data

Public Sub New()

' Create a collection to store task data.
Dim taskList As ObservableCollection(Of Task) = New ObservableCollection(Of Task)
For index = 1 To 14
{.ProjectName = "Project " & ((index Mod 3) + 1).ToString(), _
.TaskName = "Task " & index.ToString(), _
})
Next
Dim taskListView As New PagedCollectionView(taskList)
Me.dataGrid1.ItemsSource = taskListView
If taskListView.CanGroup = True Then
' Group tasks by ProjectName...
taskListView.GroupDescriptions.Add(New PropertyGroupDescription("ProjectName"))
' Then group by Complete status.
taskListView.GroupDescriptions.Add(New PropertyGroupDescription("Complete"))
End If
If taskListView.CanSort = True Then
'// By default, sort by ProjectName.
taskListView.SortDescriptions.Add(New SortDescription("ProjectName", ListSortDirection.Ascending))
End If
End Sub
Private Sub CheckBox_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
If pcv IsNot Nothing & pcv.CanFilter = True Then
' Apply the filter.
pcv.Filter = New Predicate(Of Object)(AddressOf FilterCompletedTasks)
End If
End Sub
Private Sub CheckBox_Unchecked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
If pcv IsNot Nothing Then
' Remove the filter.
pcv.Filter = Nothing
End If
End Sub

Silverlight
Public Function FilterCompletedTasks(ByVal t As Object) As Boolean
Dim _task As New Task
_task = t
Return _task.Complete = False
End Function
Private Sub ExpandButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Try
dataGrid1.ExpandRowGroup(group, True)
Next
' Could not expand group.
End Try
End Sub
Private Sub CollapseButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Try
dataGrid1.ScrollIntoView(group, Nothing)
dataGrid1.CollapseRowGroup(group, True)
Next
' Could not collapse group.
End Try
End Sub
End Class
Public Class Task

Implements System.ComponentModel.INotifyPropertyChanged, IEditableObject
' The Task class implements INotifyPropertyChanged and IEditableObject so that the datagrid can properly respond to
changes to the data collection and edits made in the DataGrid.
' Private task data.

Private m_ProjectName As String = String.Empty
Private m_TaskName As String = String.Empty
Private m_DueDate As DateTime = Date.Now
Private m_Complete As Boolean = False
Private m_Notes As String = String.Empty
' Data for undoing canceled edits.

Private temp_Task As Task = Nothing
Private m_Editing As Boolean = False
' Public properties.

Public Property ProjectName() As String
Get
Return Me.m_ProjectName
End Get
If Not value = Me.m_ProjectName Then
Me.m_ProjectName = value
NotifyPropertyChanged("ProjectName")
End If
End Set
End Property
Public Property TaskName() As String

Get
Return Me.m_TaskName
End Get
If Not value = Me.m_TaskName Then
Me.m_TaskName = value
NotifyPropertyChanged("TaskName")
End If
End Set
End Property
Public Property DueDate() As Date

Get
Return Me.m_DueDate
End Get
If Not value = Me.m_DueDate Then
NotifyPropertyChanged("DueDate")

Silverlight
End If
End Set
End Property
Public Property Complete() As Boolean

Get
End Get
If Not value = Me.m_Complete Then
NotifyPropertyChanged("Complete")
End If
End Set
End Property
Public Property Notes() As String

Get
Return Me.m_Notes
End Get
If Not value = Me.m_Notes Then
Me.m_Notes = value
NotifyPropertyChanged("Notes")
End If
End Set
End Property
' Implement INotifyPropertyChanged interface.

Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
Public Sub NotifyPropertyChanged(ByVal propertyName As String)

RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
' Implement IEditableObject interface.

Public Sub BeginEdit() Implements IEditableObject.BeginEdit
If Not Me.m_Editing Then
Me.temp_Task = Me.MemberwiseClone()
Me.m_Editing = True
End If
End Sub
Public Sub CancelEdit() Implements IEditableObject.CancelEdit

If m_Editing = True Then
Me.ProjectName = Me.temp_Task.ProjectName
Me.TaskName = Me.temp_Task.TaskName
Me.DueDate = Me.temp_Task.DueDate
Me.Complete = Me.temp_Task.Complete
Me.Notes = Me.temp_Task.Notes
Me.m_Editing = False
End If
End Sub
Public Sub EndEdit() Implements IEditableObject.EndEdit

If m_Editing = True Then
Me.temp_Task = Nothing
Me.m_Editing = False
End If
End Sub
End Class
5.5.2.6. Tutorial: Personalizar el control DataGrid mediante propiedades

El control DataGrid de Silverlight admite las opciones de formato de tabla comunes, tales como fondos de
fila alternos y la capacidad de mostrar u ocultar encabezados, lneas de cuadrcula y barras de
desplazamiento. Estas personalizaciones pueden realizarse estableciendo las propiedades de DataGrid. Las
propiedades pueden establecerse en XAML en tiempo de diseo o pueden establecerse en cdigo de
procedimiento en tiempo de ejecucin.
En este tutorial se muestran las tareas siguientes:
Crear una coleccin de objetos de datos.
Crear la interfaz de usuario para mostrar los datos.
Establecer el origen de datos de la lista.

Silverlight
Crear la interfaz de usuario para establecer las opciones de DataGrid.

Agregar cdigo de procedimiento para modificar las propiedades de DataGrid.
Requisitos previos
Silverlight 4.
Visual Studio 2010.
Crear un proyecto de Silverlight

El primer paso es crear un proyecto de Silverlight.
Para crear un proyecto de Silverlight
Cree un nuevo proyecto de aplicacin de Silverlight denominado DGBasicCustomization en Visual
Basic o Visual C#. Deje activada la opcin Hospedar la aplicacin de Silverlight en un nuevo sitio
web de la seleccin predeterminada.
Crear una coleccin de datos para mostrarlos

A continuacin, crear una coleccin de objetos Task para mostrarlos en DataGrid.
Para crear una coleccin de objetos Task
1. Agregue al proyecto DGBasicCustomization una clase denominada Task.
2. Agregue el cdigo siguiente a la clase Task.
Este cdigo contiene la clase Task que representa los objetos de datos que deben mostrarse en el
control DataGrid.

Get
Return Me.m_Name
End Get
Me.m_Name = value
End Set
End Property

Get
Return Me.m_DueDate
End Get
End Set
End Property

Get
End Get
End Set
End Property

Get
Return Me.m_Notes
End Get
Me.m_Notes = value
End Set
End Property
3. Abra MainPage.xaml.vb o MainPage.xaml.cs.

Silverlight
4. En el constructor de clase MainPage, a continuacin del mtodo InitializeComponent, agregue el

cdigo siguiente:
Este cdigo crea una List(Of T) genrica denominada taskList y utiliza un bucle para rellenar la
coleccin con objetos Task. taskList se establece a continuacin como ItemsSource de DataGrid.
' Create a list to store task data.
Dim itemsCount As Integer = 10
For index = 1 To itemsCount
})
Next
Crear la interfaz de usuario de la lista de tareas

A continuacin, crear la interfaz de usuario para la lista de tareas agregando un control DataGrid a la
pgina.
Para crear la interfaz de usuario de la lista de tareas
1. En el proyecto DGBasicCustomization, agregue una referencia al ensamblado System.Windows.
Controls.Data.
3. En la etiqueta de apertura <UserControl>, agregue el siguiente XAML.
Este XAML asigna el prefijo sdk al espacio de nombres del SDK de Silverlight, tal y como se describe
en Prefijos y asignaciones para las bibliotecas de Silverlight.
4. En la etiqueta de apertura <UserControl>, cambie el valor de la propiedad Width a 600, y el valor
de la propiedad Height a 700.
5. A continuacin de la etiqueta de apertura <UserControl>, agregue el XAML siguiente,
reemplazando las etiquetas <Grid> existentes.
Este XAML agrega un control StackPanel para fines de diseo y un control DataGrid denominado
dataGrid1 para mostrar la lista de tareas.
<sdk:DataGrid x:Name="dataGrid1" Height="350" Width="540"
HorizontalAlignment="Left" >
</sdk:DataGrid>
</StackPanel>
6. Genere y ejecute la aplicacin.

Cuando la aplicacin se ejecute, ver un control DataGrid donde se muestran las tareas de la
coleccin taskList con su aspecto y comportamiento predeterminados.
Crear la interfaz de usuario para las opciones de DataGrid

A continuacin, crear la interfaz de usuario para las opciones de DataGrid.
Para crear la interfaz de usuario para las opciones de DataGrid
2. A continuacin de la etiqueta de apertura <StackPanel>, agregue el siguiente XAML.
Este XAML agrega controles de seleccin que usar para modificar las propiedades de DataGrid en
tiempo de ejecucin.
<StackPanel Margin="0,0,0,5">

Silverlight
<StackPanel>
<TextBlock Text="DataGrid Options" FontSize="12" />
<CheckBox Content="Grid is read-only"
Checked="cbReadOnly_Changed" Unchecked="cbReadOnly_Changed" />
<CheckBox Content="Freeze first column"
Checked="cbFreezeColumn_Changed" Unchecked="cbFreezeColumn_Changed"/>
<CheckBox Content="Hide first column"
Checked="cbHideColumn_Changed" Unchecked="cbHideColumn_Changed"/>
<CheckBox Content="Single Row Selection"
Checked="cbSelectionMode_Changed" Unchecked="cbSelectionMode_Changed" />
<TextBlock Text="Column Options" FontSize="12" />
<CheckBox Content="Allow Column Reordering" IsChecked="true"
Checked="cbColReorder_Changed" Unchecked="cbColReorder_Changed"/>
<CheckBox Content="Allow Column Resizing" IsChecked="true"
Checked="cbColResize_Changed" Unchecked="cbColResize_Changed"/>
<CheckBox Content="Allow Column Sorting" IsChecked="true"
Checked="cbColSort_Changed" Unchecked="cbColSort_Changed"/>
<TextBlock Text="Scroll Bar Options" FontSize="12" />
<CheckBox Content="Vertical Scroll Bars" IsThreeState="True" IsChecked=""
Checked="cbVerticalScroll_Changed" Unchecked="cbVerticalScroll_Changed"
Indeterminate="cbVerticalScroll_Changed" />
<CheckBox Content="Horizontal Scroll Bars" IsThreeState="True" IsChecked=""
Checked="cbHorizontalScroll_Changed" Unchecked="cbHorizontalScroll_Changed"
Indeterminate="cbHorizontalScroll_Changed"/>
</StackPanel>
</Border>
<StackPanel>
<TextBlock Text="Alternating Row Background" FontSize="12" />
<ComboBox SelectionChanged="cbAltRowBrush_SelectionChanged">
<ComboBoxItem Content="Default" IsSelected="True" />
<ComboBoxItem Content="Custom" />
<ComboBoxItem Content="Null" />
</ComboBox>
<TextBlock Text="Row Background" FontSize="12" />
<ComboBox SelectionChanged="cbRowBrush_SelectionChanged">
<ComboBoxItem Content="Default" IsSelected="True" />
<ComboBoxItem Content="Custom" />
<ComboBoxItem Content="Null" />
</ComboBox>
<TextBlock Text="Header Visibility" FontSize="12" />
<ComboBox SelectionChanged="cbHeaders_SelectionChanged">
<ComboBoxItem Content="Column (Default)" IsSelected="True"/>
<ComboBoxItem Content="Row"/>
</ComboBox>
<TextBlock Text="Grid Lines Visibility" FontSize="12" />
<ComboBox SelectionChanged="cbGridLines_SelectionChanged">
<ComboBoxItem Content="Vertical (Default)" IsSelected="True"/>
<ComboBoxItem Content="Horizontal"/>
</ComboBox>
<TextBlock Text="Custom Grid Lines" FontSize="12" />
<CheckBox Content="Vertical"
Checked="cbCustomGridLineVert_Changed"
Unchecked="cbCustomGridLineVert_Changed"/>
<CheckBox Content="Horizontal"
Checked="cbCustomGridLineHorz_Changed"
Unchecked="cbCustomGridLineHorz_Changed"/>
</StackPanel>
</Border>
</StackPanel>
</StackPanel>
Establecer las propiedades de DataGrid en cdigo

A continuacin, agregar cdigo para controlar los cambios realizados en los controles de la interfaz de
usuario y establecer las propiedades de DataGrid.
Para establecer las propiedades de DataGrid en cdigo
1. Abra MainPage.xaml.vb o MainPage.xaml.cs.
2. A continuacin del constructor de clase MainPage, agregue el cdigo siguiente.

Silverlight
Este cdigo controla los eventos de cambio para los controles de interfaz de usuario de opciones
de DataGrid que agreg en la seccin anterior. Cuando se modifica una opcin, se establece la
propiedad DataGrid correspondiente.
' READ ONLY
Private Sub cbReadOnly_Changed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Me.dataGrid1.IsReadOnly = cb.IsChecked
End If
End Sub
' FREEZE COLUMN
Private Sub cbFreezeColumn_Changed(ByVal sender As System.Object, ByVal e As
System.Windows.RoutedEventArgs)
If cb.IsChecked = True Then
Me.dataGrid1.FrozenColumnCount = 1
ElseIf cb.IsChecked = False Then
Me.dataGrid1.FrozenColumnCount = 0
End If
End If
End Sub
' HIDE COLUMN
Private Sub cbHideColumn_Changed(ByVal sender As System.Object, ByVal e As
Me.dataGrid1.Columns(0).Visibility = Windows.Visibility.Collapsed
Me.dataGrid1.Columns(0).Visibility = Windows.Visibility.Visible
End If
End If
End Sub
' SELECTION MODE
Private Sub cbSelectionMode_Changed(ByVal sender As System.Object, ByVal e As
Me.dataGrid1.SelectionMode = DataGridSelectionMode.Single
Me.dataGrid1.SelectionMode = DataGridSelectionMode.Extended
End If
End If
End Sub
' COLUMN OPTIONS
Private Sub cbColReorder_Changed(ByVal sender As System.Object, ByVal e As
Me.dataGrid1.CanUserReorderColumns = cb.IsChecked
End If
End Sub
Private Sub cbColResize_Changed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Me.dataGrid1.CanUserResizeColumns = cb.IsChecked
End If
End Sub
Private Sub cbColSort_Changed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Me.dataGrid1.CanUserSortColumns = cb.IsChecked
End If
End Sub
' SCROLL BARS VISIBILITY
Private Sub cbVerticalScroll_Changed(ByVal sender As System.Object, ByVal e As
Me.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Visible
Me.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden
Else
Me.dataGrid1.VerticalScrollBarVisibility = ScrollBarVisibility.Auto

Silverlight
End If
End If
End Sub
Private Sub cbHorizontalScroll_Changed(ByVal sender As System.Object, ByVal e As
Me.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible
Me.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden
Else
Me.dataGrid1.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto
End If
End If
End Sub
' ROW BRUSH
Private Sub cbAltRowBrush_SelectionChanged(ByVal sender As System.Object, ByVal e As
If cbi.Content.ToString() = "Custom" Then
Me.dataGrid1.AlternatingRowBackground = New SolidColorBrush(Color.FromArgb(255, 130, 175, 200))
ElseIf cbi.Content.ToString() = "Default" Then
Me.dataGrid1.AlternatingRowBackground = New SolidColorBrush(Color.FromArgb(37, 233, 238, 244))
ElseIf cbi.Content.ToString() = "Null" Then
Me.dataGrid1.AlternatingRowBackground = Nothing
End If
End If
End Sub
Private Sub cbRowBrush_SelectionChanged(ByVal sender As System.Object, ByVal e As
If cbi.Content.ToString() = "Custom" Then
Me.dataGrid1.RowBackground = New SolidColorBrush(Color.FromArgb(255, 135, 185, 195))
ElseIf cbi.Content.ToString() = "Default" Then
Me.dataGrid1.RowBackground = New SolidColorBrush(Color.FromArgb(0, 255, 255, 255))
ElseIf cbi.Content.ToString() = "Null" Then
Me.dataGrid1.RowBackground = Nothing
End If
End If
End Sub
' HEADERS VISIBILITY
Private Sub cbHeaders_SelectionChanged(ByVal sender As System.Object, ByVal e As
If cbi.Content.ToString() = "All" Then
Me.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.All
ElseIf cbi.Content.ToString() = "Column (Default)" Then
Me.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.Column
ElseIf cbi.Content.ToString() = "Row" Then
Me.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.Row
Else
Me.dataGrid1.HeadersVisibility = DataGridHeadersVisibility.None
End If
End If
End Sub
' GRIDLINES VISIBILITY
Private Sub cbGridLines_SelectionChanged(ByVal sender As System.Object, ByVal e As
If cbi.Content.ToString() = "All" Then
Me.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.All
ElseIf cbi.Content.ToString() = "Vertical (Default)" Then
Me.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.Vertical
ElseIf cbi.Content.ToString() = "Horizontal" Then
Me.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.Horizontal
Else
Me.dataGrid1.GridLinesVisibility = DataGridGridLinesVisibility.None
End If
End If
End Sub

Silverlight
' CUSTOM GRIDLINES
Private Sub cbCustomGridLineVert_Changed(ByVal sender As System.Object, ByVal e As
Me.dataGrid1.VerticalGridLinesBrush = New SolidColorBrush(Colors.Blue)
Me.dataGrid1.VerticalGridLinesBrush = New SolidColorBrush(Color.FromArgb(255, 223, 227, 230))
End If
End If
End Sub
Private Sub cbCustomGridLineHorz_Changed(ByVal sender As System.Object, ByVal e As
Me.dataGrid1.HorizontalGridLinesBrush = New SolidColorBrush(Colors.Blue)
Me.dataGrid1.HorizontalGridLinesBrush = New SolidColorBrush(Color.FromArgb(255, 223, 227, 230))
End If
End If
End Sub
3. Genere y ejecute la aplicacin.

Cuando se ejecute la aplicacin, ver un control DataGrid donde se muestran las tareas de la
coleccin taskList. Adems, ver las opciones para modificar dinmicamente el aspecto y el
comportamiento del control DataGrid.
4. Mientras se ejecuta la aplicacin, cambie varias opciones y observe el efecto sobre el aspecto y el
comportamiento del control DataGrid.
Pasos siguientes
Normalmente, las propiedades de DataGrid se establecen en XAML si no tienen que establecerse
dinmicamente en tiempo de ejecucin. Si desea obtener la sintaxis XAML para establecer una propiedad,
vea la seccin Uso de atributos XAML de la documentacin de la propiedad de DataGrid.
Tambin puede personalizar un control DataGrid aplicando estilos y plantillas al mismo. Los estilos y
plantillas permiten personalizar el control an ms que estableciendo propiedades.
5.5.2.7. Opciones de ajuste de tamao en el control DataGrid

Hay varias opciones disponibles para controlar los tamaos de DataGrid. Se puede establecer DataGrid, as
como las filas y las columnas de DataGrid, para dimensionar automticamente el contenido, o se puede
establecer en valores concretos. De manera predeterminada, DataGrid aumentar y disminuir de tamao
para ajustarse al tamao del contenido.
Dimensionar DataGrid
Precauciones cuando se utiliza el tamao automtico
De forma predeterminada, las propiedades Width y Height de DataGrid se establecen en Double.NaN
("Auto" en XAML) y DataGrid se ajustar al tamao de su contenido.
Cuando se coloca dentro de un contenedor que no restringe el tamao de sus elementos secundarios,
como Canvas o StackPanel, DataGrid se expandir ms all de los lmites visibles del contenedor y las barras
de desplazamiento no se mostrarn. Esta condicin tiene implicaciones de utilidad y rendimiento.
Cuando se enlaza un conjunto de datos, si Height de DataGrid no se restringe, continuar agregando una
fila para cada elemento de datos en el conjunto de datos enlazado. Esto puede hacer que DataGrid crezca
fuera de los lmites visibles de la aplicacin cuando se agreguen filas. DataGrid no mostrar las barras de
desplazamiento en este caso porque Height continuar creciendo para alojar las nuevas filas.
Se crea un objeto para cada fila de DataGrid. Si est trabajando con un conjunto de datos grande y permite
que DataGrid se dimensione automticamente, la creacin de un nmero grande de objetos puede afectar
al rendimiento de la aplicacin.

Silverlight
Para evitar estos problemas al trabajar con conjuntos de datos grandes, se recomienda que establezca
Height de DataGrid especficamente o que lo coloque en un contenedor que restrinja su Height, por
ejemplo, Grid. Cuando Height se restringe, DataGrid crear solo las filas que se ajusten a su Height
especificado y reciclar segn sea necesario esas filas para mostrar los nuevos datos.
Establecer el tamao de DataGrid
DataGrid se puede establecer para que se dimensione dentro de los lmites especificados automticamente
o DataGrid se puede establecer en un tamao concreto. En la siguiente lista se muestran las propiedades
que pueden establecerse para controlar el tamao de DataGrid.
Propiedad Descripcin
Height Establece un alto concreto para DataGrid.
Establece el lmite superior para el alto de DataGrid. DataGrid crecer verticalmente hasta que
MaxHeight
llegue a este alto.
Establece el lmite inferior para el alto de DataGrid. DataGrid disminuir verticalmente hasta que
MinHeight
llegue a este alto.
Width Establece un ancho concreto para DataGrid.
Establece el lmite superior para el ancho de DataGrid. DataGrid crecer horizontalmente hasta
MaxWidth
que llegue a este ancho.
Establece el lmite inferior para el ancho de DataGrid. DataGrid disminuir horizontalmente hasta
MinWidth
que llegue a este ancho.
Dimensionar filas y encabezados de fila

Filas de DataGrid
De forma predeterminada, una propiedad Height de fila DataGrid se establece en Double.NaN ("Auto" en
XAML) y el alto de fila se expandir hasta el tamao de su contenido. El alto de todas las filas de DataGrid se
puede especificar estableciendo la propiedad DataGrid.RowHeight. Los usuarios no pueden cambiar el alto
de fila arrastrando los divisores del encabezado de fila.
Encabezados de fila de DataGrid
De forma predeterminada, no se muestran los encabezados de fila de DataGrid. Para mostrar los
encabezados de fila, la propiedad HeadersVisibility debe estar establecida en DataGridHeadersVisibility. Row
o en DataGridHeadersVisibility.All. De forma predeterminada, cuando se muestran los encabezados de fila,
se dimensionan para ajustar su contenido automticamente. A los encabezados de fila se les puede
proporcionar un ancho especfico estableciendo la propiedad DataGrid.RowHeaderWidth.
Dimensionar columnas y encabezados de columna

Columnas DataGrid
El control DataGrid utiliza valores de las estructuras DataGridLength y DataGridLengthUnitType para
especificar modos de ajuste de tamao automtico o absoluto.
En la tabla siguiente se muestran los valores proporcionados por la estructura DataGridLengthUnitType.
Nombre Descripcin
El modo de ajuste de tamao automtico predeterminado ajusta el tamao de las columnas
Auto
de DataGrid en funcin del contenido de los encabezados de celda y columna.
El modo de ajuste de tamao automtico basado en celdas ajusta el tamao de las columnas
SizeToCells de DataGrid en funcin del contenido de las celdas en la columna, sin incluir los encabezados
de columna.
El modo de ajuste de tamao automtico basado en encabezados ajusta el tamao de las
SizeToHeader
columnas de DataGrid en funcin solamente del contenido de los encabezados de columna.
El modo de ajuste de tamao basado en pxeles dimensiona las columnas de DataGrid
Pixel
basndose en el valor numrico proporcionado.
El modo de ajuste de tamao mediante asterisco se usa para distribuir el espacio disponible
Star en proporciones ponderadas.
En el lenguaje XAML, los valores de asterisco se expresan como n*, donde n representa un

Silverlight
valor numrico. 1* equivale a *. Por ejemplo, si el ancho de dos columnas de un control

DataGrid fuese * y 2*, respectivamente, la primera columna recibira una parte del espacio
disponible y la segunda columna recibira dos partes del espacio disponible.
Silverlight 4 y posterior.
La clase DataGridLengthConverter se puede utilizar para convertir datos entre valores numricos o de
cadena y valores DataGridLength.
De manera predeterminada, la propiedad DataGrid.ColumnWidth se establece en Auto y la propiedad
DataGridColumn.Width es null. Cuando el modo de tamao se establece en Auto o SizeToCells, las
columnas crecern hasta el tamao de su contenido visible ms ancho. Al desplazarse, estos modos de
tamao harn que las columnas se expandan si el contenido que es mayor que el tamao de columna se
desplaza en la vista. La columna no se reducir cuando el contenido se desplace fuera de la vista.
Las columnas de DataGrid tambin se pueden establecer para dimensionarse automticamente solo dentro
de los lmites especificados, o las columnas se pueden establecer en un tamao concreto. En la siguiente
lista se muestran las propiedades que se pueden establecer para controlar el tamao de columna.
Propiedad Descripcin
DataGrid.MaxColumnWidth Establece el lmite superior de todas las columnas de DataGrid.
Establece el lmite superior de una columna individual. Invalida
DataGridColumn.MaxWidth
DataGrid.MaxColumnWidth.
DataGrid.MinColumnWidth Establece el lmite inferior de todas las columnas de DataGrid.
Establece el lmite inferior de una columna individual. Invalida
DataGridColumn.MinWidth
DataGrid.MinColumnWidth.
DataGrid.ColumnWidth Establece un ancho especfico para todas las columnas de DataGrid.
Establece un ancho especfico para una columna individual. Invalida
DataGridColumn.Width
DataGrid.ColumnWidth.
Encabezados de columna de DataGrid

De forma predeterminada, se muestran los encabezados de columna de DataGrid. Para ocultar los
encabezados de fila, la propiedad HeadersVisibility debe estar establecida en DataGridHeadersVisibility. Row
o en DataGridHeadersVisibility.None. De forma predeterminada, cuando se muestran los encabezados de
columna, se dimensionan para ajustar su contenido automticamente. A los encabezados de columna se les
puede proporcionar un alto concreto estableciendo la propiedad DataGrid. ColumnHeaderHeight.
Cambiar el tamao con el mouse
Los usuarios pueden cambiar el tamao de las columnas de DataGrid arrastrando los divisores de los
encabezados de columna. DataGrid no admite cambios de tamao automticos de columnas haciendo
doble clic en el divisor del encabezado de columna. Para evitar que un usuario cambie el tamao de las
columnas en particular, establezca la propiedad DataGridColumn.CanUserResize en false para las columnas
individuales. Para evitar que los usuarios cambien el tamao de todas las columnas, establezca la propiedad
DataGrid.CanUserResizeColumns en false.
5.5.3. Informacin general sobre cuadros de dilogo

Un cuadro de dilogo es una ventana temporal que una aplicacin utiliza normalmente para pedir al usuario
informacin adicional, como el archivo que desea abrir o la configuracin de impresora que desea aplicar
antes de imprimir un documento. Un cuadro de dilogo suele contener uno o varios controles que permiten
al usuario escribir texto, elegir opciones o dirigir la accin de la aplicacin. Silverlight proporciona cuadros
de dilogo predefinidos que admiten mensajes o que permiten abrir, guardar e imprimir un archivo.
Adems, hay controles que permiten crear cuadros de dilogo. La apariencia de un cuadro de dilogo vara
en funcin del sistema operativo en el que se ejecute la aplicacin de Silverlight.
Cuadros de mensaje
Silverlight proporciona un objeto MessageBox que se puede utilizar para mostrar un mensaje y solicitar una
respuesta. Para mostrar un cuadro de mensaje, se llama al mtodo Show(String) esttico. De manera
opcional, se puede especificar un ttulo y un botn de cancelacin para el cuadro de mensaje mediante el

Silverlight
mtodo Show(String, String, MessageBoxButton). El cuadro de mensaje es un cuadro de dilogo modal, lo

que significa que el usuario no podr continuar hasta que haya respondido al cuadro de mensaje. Se puede
utilizar el objeto MessageBoxResult devuelto por el mtodo Show para determinar si el usuario ha hecho
clic en Aceptar o en Cancelar y para reaccionar en consecuencia.
En el siguiente ejemplo de cdigo, se indica cmo mostrar un cuadro de mensaje con un ttulo y el botn
Aceptar.
MessageBox.Show("The application is starting...", "Start Dialog", MessageBoxButton.OK)
Cuadros de dilogo comunes

Silverlight proporciona tres cuadros de dilogo modales de uso comn: un cuadro de dilogo para abrir
archivos, un cuadro de dilogo para guardar archivos y otro cuadro de dilogo para especificar la
configuracin de impresin. En las secciones siguientes, se describen estos cuadros de dilogo ms
detalladamente.
Restricciones de seguridad para los cuadros de dilogo comunes
Por motivos de seguridad, si una aplicacin de Silverlight es una aplicacin en espacio aislado, los cuadros
de dilogo de archivo y de impresin los debe iniciar el usuario. Esto significa que se deben mostrar a partir
de una accin iniciada por el usuario, como el controlador de eventos Click de un botn. Si se intenta
mostrar un cuadro de dilogo desde cdigo no iniciado por el usuario, se producir una excepcin
SecurityException. Cuando se usa el depurador de Visual Studio con un cuadro de dilogo, se produce una
excepcin SecurityException si se establece un punto de interrupcin entre la creacin del cuadro de
dilogo y su presentacin. Debido a las restricciones de seguridad, este es el comportamiento esperado. Si
se establece un punto de interrupcin despus de invocar ShowDialog, no se producir ninguna excepcin.
Si se intenta mostrar el cuadro de dilogo a partir de los controladores de eventos KeyDown y otras
llamadas sincrnicas al cdigo de la aplicacin, como los controladores de eventos LayoutUpdated o
SizeChanged, se producir una excepcin. Sin embargo, no se producir una excepcin si la aplicacin se
hospeda en Internet Explorer, que se ejecuta en modo protegido.
El complemento Silverlight tiene compatibilidad limitada con los cuadros de dilogo cuando se encuentra
en modo de pantalla completa. En la mayora de los casos, el cuadro de dilogo en modo de pantalla
completa har que el complemento se revierta al modo incrustado. Sin embargo, para evitar que se
produzcan problemas en algunos exploradores, debera salir del modo de pantalla completa antes de usar
estas clases. En las aplicaciones de Silverlight que se ejecutan fuera del explorador, se puede preguntar al
usuario si desea habilitar los cuadros de dilogo en modo de pantalla completa. Asimismo, las restricciones
referentes a la iniciacin por parte del usuario son flexibles para las aplicaciones de confianza.
Abrir archivo (Cuadro de dilogo)
Silverlight proporciona un control OpenFileDialog que permite al usuario seleccionar uno o varios archivos
en el equipo local o un equipo en red. En la siguiente ilustracin, se muestra el control OpenFileDialog en
una aplicacin de Silverlight que se ejecuta en Windows 7 y se hospeda en Internet Explorer.
Abrir archivo (Cuadro de dilogo)

Silverlight
Si desea mostrar un cuadro de dilogo para abrir un archivo, puede usar el mtodo ShowDialog.
ShowDialog devuelve true si el usuario ha seleccionado un archivo y ha hecho clic en Abrir; devuelve false si
el usuario ha hecho clic en Cancelar. Tal y como se ha mencionado anteriormente, para que se muestre el
cuadro de dilogo, el usuario debe realizar alguna accin, por ejemplo, hacer clic en un botn.
La carpeta inicial que aparece la primera vez que se muestra el control OpenFileDialog de una aplicacin se
basa en la configuracin del usuario. En las siguientes presentaciones del control OpenFileDialog, se utiliza
la carpeta del ltimo archivo seleccionado. Por motivos de seguridad, no se puede especificar una carpeta
inicial para el control OpenFileDialog.
Es posible filtrar los tipos de archivo que se muestran en OpenFileDialog mediante la propiedad Filter. A
continuacin, se muestra un ejemplo de una configuracin de filtro.
Text Files (.txt)| *.txt"
Se puede habilitar al usuario para que pueda seleccionar varios archivos mediante la propiedad Multiselect.
Una vez seleccionados los archivos, es posible recuperar informacin sobre los mismos mediante la
propiedad File o Files, en funcin de que se hayan seleccionado uno o varios archivos.
En el siguiente ejemplo, se refleja cmo mostrar un control OpenFileDialog.
Private ofd As OpenFileDialog
Private Sub OpenButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
ofd = New OpenFileDialog()
ofd.Filter = "Text Files (.txt)| *.txt"
ofd.Multiselect = False
Dim result As System.Nullable(Of Boolean) = ofd.ShowDialog()
Dim fileContents As String

If result = True Then
Using textStream As System.IO.StreamReader = ofd.File.OpenText()
fileContents = textStream.ReadToEnd()
End Using
End If
End Sub
<Button Height="50" Margin="5" Width="100" x:Name="OpenButton" Content="Open" Click="OpenButton_Click"/>
Guardar archivo (Cuadro de dilogo)

Silverlight proporciona un control SaveFileDialog que permite al usuario guardar un archivo en el equipo
local o un equipo en red.
En la siguiente ilustracin, se muestra un control SaveFileDialog en una aplicacin de Silverlight que se
ejecuta en Windows 7 y se hospeda en Internet Explorer.
Guardar archivo (Cuadro de dilogo)

Silverlight
Para mostrar un cuadro de dilogo que permite guardar un archivo, se usa el mtodo ShowDialog.
ShowDialog devuelve true si el
si el usuario ha hecho clic en Guardar; devuelve false si el usuario ha hecho clic en Cancelar. Tal y como se
ha mencionado anteriormente, para que se muestre el cuadro de dilogo, el usuario debe realizar alguna
accin, por ejemplo, hacer clic en un botn.
De manera similar a lo que sucede con el control OpenFileDialog, es posible filtrar los tipos de archivo que
se muestran en el control SaveFileDialog mediante la propiedad Filter. Una vez especificada, la descripcin
del filtro aparece en la lista desplegable Guardar como tipo del cuadro de dilogo. A continuacin se
incluye un ejemplo de una descripcin de filtro.
Text Files (.txt)| *.txt"
Es posible especificar la extensin de archivo predeterminada que se anexa al archivo guardado mediante la
propiedad DefaultExt.
Para recuperar el nombre del archivo guardado, se usa la propiedad SafeFileName. Tal y como indica el
nombre de la propiedad, por razones de seguridad, SafeFileName devuelve nicamente el nombre del
archivo sin su ruta de acceso.
En el ejemplo de cdigo siguiente, se muestra cmo establecer la propiedad Filter y mostrar un control
SaveFileDialog.
Private sfd As SaveFileDialog
Private Sub SaveButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
sfd = New SaveFileDialog()
sfd.Filter = "Video Files (.wmv) | *.wmv"
Dim result As System.Nullable(Of Boolean) = sfd.ShowDialog()

If result = True Then
MessageBox.Show("File saved to" & sfd.SafeFileName)
End If
End Sub
<Button Height="50" Margin ="5" Width="100" x:Name="SaveButton" Content="Save" Click="SaveButton_Click"/>
Imprimir (Cuadro de dilogo)

El cuadro de dilogo de impresin de Silverlight permite al usuario seleccionar las opciones de impresin y
realizar una operacin de impresin. Para Silverlight 4 o posterior, se agrega un objeto PrintDocument a la
aplicacin y se llama al mtodo Print. No hay ninguna clase para un cuadro de dilogo de impresin
independiente. Al igual que los dems cuadros de dilogo, el cuadro de dilogo de impresin se muestra
nicamente despus de una accin iniciada por el usuario.
Dentro del cuadro de dilogo de impresin, el usuario puede seleccionar la configuracin de impresora que
desee y, a continuacin, hacer clic en Imprimir para continuar con la operacin de impresin o en Cancelar

Silverlight
para cancelar la operacin de impresin. En la ilustracin siguiente, se muestra un ejemplo del cuadro de
dilogo de impresin para Windows.
Imprimir (Cuadro de dilogo)
En el siguiente ejemplo, se refleja cmo mostrar un cuadro de dilogo de impresin.

Private pd As System.Windows.Printing.PrintDocument
Private Sub PrintButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Create a print document.
pd = New System.Windows.Printing.PrintDocument()
' Show the print dialog.

pd.Print()
End Sub
<Button Height="50" Margin="5" Width="100" x:Name="PrintButton" Content="Print" Click="PrintButton_Click"/>
Para que se lleve a cabo la operacin de impresin, es preciso controlar el evento PrintPage del documento
de impresin y especificar el elemento que se desea imprimir.
Cuadros de dilogo personalizados

Hay diversas clases que permiten agregar cuadros de dilogo personalizados a las aplicaciones de
Silverlight. En esta seccin, se describen estas clases ms detalladamente.
ChildWindow
Es posible crear cuadros de dilogo modales mediante el control ChildWindow. Para mostrar un control
ChildWindow, se llama al mtodo Show. Para recuperar la respuesta del usuario, se debe controlar el evento
Closed. En el controlador de eventos, se debe convertir el parmetro sender en un tipo ChildWindow y
recuperar el valor de DialogResult.
Normalmente, se deriva de ChildWindow para crear un cuadro de dilogo personalizado, si bien se puede
crear directamente una instancia de una ventana secundaria.
Se puede agregar fcilmente una ventana secundaria a una aplicacin mediante Visual Studio. En el cuadro
de dilogo Agregar nuevo elemento, seleccione la plantilla Ventana secundaria de Silverlight, tal y como
se muestra en la siguiente ilustracin.

Silverlight
La plantilla Ventana secundaria de Silverlight agrega al proyecto una nueva clase derivada de la ventana
secundaria, incluidos el archivo XAML y el archivo de cdigo subyacente. El archivo XAML contiene los
botones Aceptar y Cancelar y el archivo de cdigo subyacente contiene para cada botn los controladores
de eventos Click que establecen el resultado apropiado.
Control emergente
Es posible mostrar un control de usuario en un control Popup similar a un cuadro de dilogo. Para ello, se
crea un control de usuario derivado de la clase UserControl y se establece la propiedad Child de Popup en
una instancia del control de usuario. Para mostrar un objeto Popup, se establece la propiedad IsOpen en
true.
Para establecer la posicin de un objeto Popup con respecto a la esquina superior izquierda del
complemento Silverlight, se usan las propiedades VerticalOffset y HorizontalOffset.
5.5.3.1. Cmo: Utilizar el cuadro de dilogo Abrir archivo

Puede permitir que los usuarios seleccionen archivos en una aplicacin basada en Silverlight mediante la
clase OpenFileDialog. Despus de que el usuario haya seleccionado uno o varios archivos, puede procesar
los archivos seleccionados.
Nota:
Si un archivo seleccionado se enva al servidor para su procesamiento, deber informar al usuario.
Para mostrar el cuadro de dilogo Abrir archivo y procesar las acciones del
usuario
1. Cree una instancia de la clase OpenFileDialog.
2. A ttulo opcional, especifique la cadena de filtro de archivos y el ndice del filtro estableciendo las
propiedades FilterIndex y Filter.
3. Llame al mtodo ShowDialog para que muestre el cuadro de dilogo Abrir archivo.
4. Cuando el mtodo devuelva el resultado, determine si el cuadro de dilogo se cerr con el botn
Aceptar o con el botn Cancelar. Si se cerr con el botn Aceptar, procese la seleccin del
usuario.
En el ejemplo siguiente se indica cmo mostrar el cuadro de dilogo, probar la seleccin del usuario y, a
continuacin, procesar el archivo.
<UserControl x:Class="SL_OpenFileDialog_VB.Page"
<Button x:Name="bOpenFileDialog" Content="Open File"
Height="30" Width="60" Margin="10"
HorizontalAlignment="Left" VerticalAlignment="Top"
Click="bOpenFileDialog_Click" />
<TextBox x:Name="tbResults" Text="Silverlight Results"
Height="30" Width="300" Margin="10,50"

Silverlight
HorizontalAlignment="Left" VerticalAlignment="Top"
Background="Beige" />
</Grid>
</UserControl>
Public Sub New()

End Sub
Private Sub bOpenFileDialog_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

' Create an instance of the open file dialog box.
Dim openFileDialog1 As OpenFileDialog = New OpenFileDialog
' Set filter options and filter index.
openFileDialog1.Filter = "Text Files (*.txt)|*.txt|All Files (*.*)|*.*"
openFileDialog1.FilterIndex = 1
openFileDialog1.Multiselect = True
' Call the ShowDialog method to show the dialogbox.
dim UserClickedOK as Boolean = openFileDialog1.ShowDialog
' Process input if the user clicked OK.
If (UserClickedOK = True) Then
'Open the selected file to read.
Dim fileStream As System.IO.Stream = openFileDialog1.File.OpenRead
Using reader As New System.IO.StreamReader(fileStream)
' Read the first line from the file and write it to the text box.
tbResults.Text = reader.ReadLine
End Using
fileStream.Close()
End If
End Sub
5.5.4. Cmo: Agregar un control al cuadro de herramientas

Silverlight Designer para Visual Studio facilita el uso de controles de otro proveedor en las aplicaciones de
Silverlight. En este tema, se muestra cmo agregar al cuadro de herramientas un control de un ensamblado
de otro proveedor y cmo utilizarlo en una aplicacin de Silverlight.
Para usar en la aplicacin un control de Silverlight de otro proveedor
1. Abra el archivo XAML de la ventana principal de su proyecto en Silverlight Designer. Por ejemplo,
puede abrir MainPage.xaml o UserControl1.xaml.
2. En el Cuadro de herramientas, seleccione la pestaa donde desee agregar el control.
3. Haga clic con el botn secundario en el Cuadro de herramientas y, en el men contextual,
seleccione Elegir elementos.
Se abrir el cuadro de dilogo Elegir elementos del cuadro de herramientas. En la siguiente
ilustracin, se muestra el cuadro de dilogo Elegir elementos del cuadro de herramientas.
4. Haga clic en la pestaa Componentes Silverlight.

Silverlight
5. En la lista, busque el control que desee utilizar.

6. Si el control que desea utilizar no aparece en la lista, haga clic en el botn Examinar. En el cuadro
de dilogo Abrir, navegue hasta el ensamblado que tenga el control deseado. Seleccione el
ensamblado y haga clic en Abrir.
Nota:
Los ensamblados y ejecutables deben ser ensamblados y ejecutables de Silverlight. Si se intentan
agregar controles de ensamblados que no son ensamblados ni ejecutables de Silverlight, aparecer
un cuadro de dilogo para indicar que no hay componentes para agregar al cuadro de
herramientas.
7. Los controles del ensamblado aparecen en el cuadro de dilogo Elegir elementos del cuadro de
herramientas.
8. Active la casilla situada junto al control que desee agregar y, a continuacin, haga clic en Aceptar.
El control seleccionado aparece en la parte inferior de la pestaa seleccionada en el Cuadro de
herramientas.
9. Desde el Cuadro de herramientas, arrastre el control hasta la superficie de diseo.
El control seleccionado se mostrar en la superficie de diseo. Adems, el ensamblado del control
se agrega como referencia de proyecto y se agrega al archivo XAML una asignacin de espacio de
nombres XAML.
5.5.5. Cmo: Agregar elementos de pestaa a un control Tab

La clase TabControl de Silverlight se emplea como contenedor para los objetos TabItem que comparten el
mismo espacio en la pantalla. En tiempo de diseo, puede agregar elementos de fichas a un control
TabControl en Silverlight Designer. En este tema se explican tres maneras de agregar elementos de fichas a
un TabControl.
Utilizar el diseador
Puede agregar un elemento de fichas a TabControl haciendo clic con el botn secundario en la superficie de
diseo.
Para agregar elementos de fichas a un TabControl utilizando el diseador
1. En Silverlight Designer, arrastre un control TabControl del cuadro de herramientas hasta la
superficie de diseo o seleccione un control TabControl existente. Cuando se arrastra un control
TabControl desde el cuadro de herramientas hasta la superficie de diseo, se agrega
automticamente TabItem al control.
2. En la parte superior del TabControl, haga clic con el botn secundario en TabItem.
3. Seleccione Agregar ficha del men contextual. En la siguiente ilustracin se muestra el men
contextual.
Se agrega un nuevo TabItem a TabControl.

Silverlight
Nota:
De forma predeterminada, Silverlight Designer usa Grid como contenedor raz del elemento de
pestaa. Si necesita un contenedor raz diferente, puede eliminar Grid y agregar otro contenedor,
por ejemplo, un control StackPanel.
Uso del Editor de colecciones

Tambin puede agregar elementos de fichas a un TabControl utilizando el editor de colecciones. Cuando se
utiliza el Editor de colecciones para configurar elementos de fichas, la vista Diseo y la vista XAML se
actualizan automticamente.
Para agregar elementos de fichas a un TabControl utilizando el editor de
colecciones
1. En Silverlight Designer, seleccione un control TabControl.
2. En la ventana Propiedades, busque la propiedad Items y haga clic en el botn de puntos
suspensivos en la columna de valores de la propiedad.
Aparecer el cuadro de dilogo Editor de colecciones.
3. Haga clic en Agregar para agregar un nuevo elemento.

4. (Opcional) Establezca las propiedades del elemento de fichas.
5. (Opcional) Repita los pasos 3 y 4 para agregar ms elementos de fichas.
6. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a Silverlight Designer.
Utilizar la vista XAML

Tambin puede agregar manualmente elementos de pestaa a un control TabControl escribiendo cdigo en
la vista XAML. La vista Diseo se actualiza automticamente con los nuevos elementos de fichas.
Para agregar elementos de pestaa a un control TabControl mediante la vista
XAML
1. En la vista XAML, busque un elemento TabControl.
2. Agregue un elemento TabItem como elemento secundario de TabControl. El XAML debe ser similar
al siguiente.
<sdk:TabControl Name="tabControl1" Height="100" Width="200">
<sdk:TabItem Header="tabItem1" Name="tabItem1">
</sdk:TabItem>
</sdk:TabControl>
En el XAML anterior, sdk tiene la siguiente asignacin de espacio de nombres XML.

Silverlight
5.5.6. Cmo: Crear aplicaciones cuyo tamao pueda ser modificado por el
usuario con GridSplitter
Se puede usar el control GridSplitter junto con el control contenedor Grid para crear diseos cuyo tamao
pueda ajustar el usuario en tiempo de ejecucin. Por ejemplo, en una aplicacin que tiene una interfaz
dividida en reas, el usuario puede arrastrar un divisor para agrandar el rea que desee ver mejor. En este
tema, se incluyen algunos procedimientos recomendados de GridSplitter y se describe cmo crear un
control GridSplitter vertical y horizontal.
Cuando se agrega un control GridSplitter a un control Grid, el primero es un elemento secundario del
control Grid y debe colocarse en una fila y una columna como cualquier otro control secundario. El control
GridSplitter debe tener un ancho o alto distinto de cero, para que el usuario pueda agarrarlo y arrastrarlo en
tiempo de ejecucin.
Algunos procedimientos recomendados para GridSplitter incluyen los siguientes:
Coloque GridSplitter en una fila o columna dedicada que no contenga ningn otro control.
Establezca el alto de la fila o el ancho de la columna que contiene el GridSplitter en Auto.
Dedique un control Grid nico al control GridSplitter. Agregue paneles contenedores adicionales a
Grid para completar el diseo.
Crear un control GridSplitter vertical

A continuacin, se describen los pasos para crear un control GridSplitter vertical.
Para crear un GridSplitter vertical
1. En la vista de diseo, seleccione el control Grid.
2. Agregue columnas al control GridSplitter.
Nota:
En ocasiones, puede que sea difcil colocar filas y columnas en el diseador. En ese caso, puede
configurar Grid utilizando el editor XAML. Vea un ejemplo de marcado XAML en la seccin de
ejemplo al final de este tema.
3. Desde el Cuadro de herramientas, arrastre un control GridSplitter hasta la primera columna.

4. En la ventana Propiedades, establezca las siguientes propiedades del control GridSplitter:
Propiedad Valor
Grid.Column 0
Grid.RowSpan Nmero total de filas de Grid.
Ancho Un nmero distinto de cero. Por ejemplo: 10.
Alto Auto
HorizontalAlignment Right
VerticalAlignment Stretch
Margin 0

6. Establezca en Auto la propiedad Width del objeto ColumnDefinition que contiene el control
GridSplitter.
Crear un control GridSplitter horizontal

A continuacin, se describen los pasos para crear un control GridSplitter horizontal.
Para crear un GridSplitter horizontal

Silverlight
2. Agregue filas al control GridSplitter.
Nota:
En ocasiones, puede que sea difcil colocar filas y columnas en el diseador. En ese caso, puede
configurar Grid utilizando el editor XAML. Vea un ejemplo de marcado XAML en la seccin de
ejemplo al final de este tema.
3. Desde el Cuadro de herramientas, arrastre un control GridSplitter hasta la fila superior.

4. En la ventana Propiedades, establezca las siguientes propiedades del control GridSplitter:
Propiedad Valor
Grid.ColumnSpan Nmero total de columnas de Grid.
Grid.Row 0
Ancho Auto
Alto Un nmero distinto de cero. Por ejemplo: 10.
HorizontalAlignment Stretch
VerticalAlignment Bottom
Margin 0

6. Establezca en Auto la propiedad Height del objeto RowDefinition que contiene el control
GridSplitter.
Ejemplo
El siguiente XAML crea un control GridSplitter horizontal y otro vertical.
<Grid x:Name="LayoutRoot" Background="White" Height="400" Width="400" ShowGridLines="True">
<sdk:GridSplitter Grid.Column="0" Grid.RowSpan="5" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
<sdk:GridSplitter Grid.Row="0" Grid.ColumnSpan="4" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
<Rectangle Grid.Column="1" Fill="LightCoral" />
<Rectangle Grid.Row="1" Fill="LightBlue" />
</Grid>
5.5.7. Cmo: Controlar el evento Checked del control CheckBox

Cuando un usuario hace clic en un control CheckBox, se puede producir uno de los tres eventos posibles,
dependiendo del estado actual de CheckBox. Se produce el evento Checked, Unchecked o Indeterminate.
Puede controlar estos eventos y realizar alguna accin segn cul sea el estado de la casilla.
Ejemplo
En el cdigo siguiente se muestra cmo controlar los eventos Checked y Indeterminate.
Private Sub HandleCheck(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim cb As CheckBox = CType(sender, CheckBox)
If (cb.Name = "cb1") Then
text1.Text = "Two state CheckBox checked."
Else
text2.Text = "Three state CheckBox checked."
End If
End Sub
Private Sub HandleUnchecked(ByVal sender As Object, ByVal e As RoutedEventArgs)


Silverlight
If (cb.Name = "cb1") Then
text1.Text = "Two state CheckBox unchecked."
Else
text2.Text = "Three state CheckBox unchecked."
End If
End Sub
Private Sub HandleThirdState(ByVal sender As Object, ByVal e As RoutedEventArgs)

text2.Text = "Three state CheckBox indeterminate."
End Sub


<CheckBox x:Name="cb1" Content="Two State CheckBox"
Checked="HandleCheck" Unchecked="HandleUnchecked" Margin="5" />
<TextBlock x:Name="text1" Margin="5" />


<CheckBox x:Name="cb2" Content="Three State CheckBox"
IsThreeState="True" Checked="HandleCheck"
Indeterminate="HandleThirdState" Unchecked="HandleUnchecked" Margin="5" />
<TextBlock x:Name="text2" Margin="5" />
5.5.8. Cmo: Mostrar datos en un control ListBox

Hay muchas maneras diferentes de mostrar datos en un control ListBox. ListBox es un control ItemsControl,
lo que significa que se pueden agregar directamente elementos al cuadro de lista mediante XAML o
establecer su propiedad ItemsSource en una coleccin. Al establecer la propiedad ItemsSource, tambin se
puede establecer una plantilla ItemTemplate para personalizar la apariencia de cada ListBoxItem. En los
procedimientos siguientes se muestran algunas de las maneras en que se puede especificar el contenido de
ListBox.
Para rellenar un control ListBox con elementos XAML
Cree los elementos XAML como elementos secundarios directos de ListBox.
<ListBox Width="150" Margin="0,5,0,10">
<TextBlock Text="TextBlock" />
<TextBox Text="TextBox" />
<Button Content="Button" />
<Rectangle Fill="LightBlue" Height="20" Width="100" Margin="2,2,2,2"/>
<Ellipse Fill="Coral" Height="20" Width="150" Margin="2,2,2,2"/>
</ListBox>
Para rellenar un control ListBox con la propiedad ItemsSource

Establezca la propiedad ItemsSource en la coleccin que desee mostrar. De manera opcional,
establezca la propiedad DisplayMemberPath para especificar la propiedad que se va a mostrar en el
control ListBox.
<UserControl x:Class="ListBoxSnippetEx.Page"
xmlns:src="clr-namespace:ListBoxSnippetEx" >
<Grid>
<Grid.Resources>
<src:Customers x:Key="customers"/>
</Grid.Resources>
<ListBox ItemsSource="{StaticResource customers}" Width="250" Margin="0,5,0,10"
DisplayMemberPath="LastName"/>
</Grid>
</UserControl>
Public Class Customer

Private _firstName As String
Private _lastName As String
Private _address As String
Public Property FirstName() As String

Get
Return _firstName
End Get

_firstName = value
End Set

Silverlight
End Property
Public Property LastName() As String

Get
Return _lastName
End Get

_lastName = value
End Set
End Property
Public Property Address() As String

Get
Return _address
End Get

_address = value
End Set
End Property
Public Sub New(ByVal firstName As String, ByVal lastName As String, ByVal address As String)
Me.FirstName = firstName
Me.LastName = lastName
Me.Address = address
End Sub
End Class
Public Class Customers

Inherits ObservableCollection(Of Customer)
Public Sub New()

Add(New Customer("Michael", "Anderberg", "12 North Third Street, Apartment 45"))
Add(New Customer("Chris", "Ashton", "34 West Fifth Street, Apartment 67"))
Add(New Customer("Cassie", "Hicks", "56 East Seventh Street, Apartment 89"))
Add(New Customer("Guido", "Pica", "78 South Ninth Street, Apartment 10"))
End Sub
End Class
Para dar formato a los elementos de un control ListBox

1. Establezca la propiedad ItemsSource en la coleccin que desee mostrar.
2. Establezca la propiedad ItemTemplate en la plantilla DataTemplate que va a dar formato a los
elementos.
Nota:
Asegrese de agregar una referencia al espacio de nombres local en el archivo XAML, como la que
figura a continuacin.
xmlns:src="clr-namespace:ListBoxSnippetEx"
<UserControl x:Class="ListBoxSnippetEx.Page"
xmlns:src="clr-namespace:ListBoxSnippetEx" >
<Grid>
<Grid.Resources>
<src:Customers x:Key="customers"/>
</Grid.Resources>
<ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Padding="5,0,5,0" Text="{Binding FirstName}" />
<TextBlock Text="{Binding LastName}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding Address}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
Public Class Customer

Silverlight
Private _firstName As String
Private _lastName As String
Private _address As String

Get
Return _firstName
End Get

_firstName = value
End Set
End Property

Get
Return _lastName
End Get

_lastName = value
End Set
End Property
Public Property Address() As String

Get
Return _address
End Get

_address = value
End Set
End Property
Public Sub New(ByVal firstName As String, ByVal lastName As String, ByVal address As String)
Me.FirstName = firstName
Me.LastName = lastName
Me.Address = address
End Sub
End Class
Public Class Customers

Inherits ObservableCollection(Of Customer)
Public Sub New()

Add(New Customer("Michael", "Anderberg", "12 North Third Street, Apartment 45"))
Add(New Customer("Chris", "Ashton", "34 West Fifth Street, Apartment 67"))
Add(New Customer("Cassie", "Hicks", "56 East Seventh Street, Apartment 89"))
Add(New Customer("Guido", "Pica", "78 South Ninth Street, Apartment 10"))
End Sub
End Class
5.5.9. Cmo: Cambiar el aspecto y comportamiento del control

AutoCompleteBox
El control AutoCompleteBox es muy personalizable en cuanto a su aspecto y comportamiento. En este tema
se muestra cmo cambiar el aspecto y comportamiento de AutoCompleteBox mediante el establecimiento
de sus propiedades, la administracin de los eventos y las llamadas a mtodos en el control.
Cambio de aspecto de AutoCompleteBox

AutoCompleteBox permite que se cambie su aspecto mediante la creacin de nuevos estilos.
Para cambiar el aspecto del elemento de cuadro de texto del control
Cree un estilo que seale al tipo TextBox como destino y establezca la propiedad TextBoxStyle en el
estilo. El siguiente cdigo XAML muestra un estilo declarado como un recurso y establecido como
el valor de la propiedad TextBoxStyle.
<Style x:Key="myTBStyle" TargetType="TextBox">
<Setter Property="Background" Value="LightYellow" />
<Setter Property="Foreground" Value="DarkSlateGray" />
<Setter Property="FontWeight" Value="Bold" />

Silverlight
<Setter Property="BorderBrush" Value="DarkGray" />
</Style>
<sdk:AutoCompleteBox Width="150" Height="30" x:Name="myACB"
TextBoxStyle="{StaticResource myTBStyle}"
ItemContainerStyle="{StaticResource myLBStyle}" />
Para cambiar el elemento de lista desplegable del control

Cree un estilo que seale al tipo ListBox como destino y establezca la propiedad ItemContainerStyle
en el estilo. En el cdigo XAML siguiente se muestra un estilo declarado como un recurso y
establecido como el valor de la propiedad ItemContainerStyle.
<Style x:Key="myLBStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Khaki" />
<Setter Property="Foreground" Value="DarkSlateGray" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="BorderBrush" Value="DarkGray" />
</Style>
<sdk:AutoCompleteBox Width="150" Height="30" x:Name="myACB"
TextBoxStyle="{StaticResource myTBStyle}"
ItemContainerStyle="{StaticResource myLBStyle}" />
Cambio del modo en que AutoCompleteBox filtra los elementos

Se puede especificar la forma en que AutoCompleteBox filtra los elementos. Por ejemplo, se puede
especificar si busca coincidencias al principio de una palabra, en una palabra, u otras opciones. Tambin es
posible que necesite un filtro de objeto o texto personalizado para los objetos que se muestran en
AutoCompleteBox pero no puede cambiar el objeto. En este caso, puede crear un filtro de objeto o texto
personalizado para AutoCompleteBox si establece la propiedad ItemFilter o TextFilter en un mtodo que
coincida con la firma del delegado AutoCompleteFilterPredicate(Of T).
Para cambiar el modo en que AutoCompleteBox filtra los elementos
Establezca la propiedad FilterMode en un valor AutoCompleteFilterMode.
En el cdigo XAML siguiente se muestra cmo establecer la propiedad FilterMode para buscar una
cadena que contiene otra cadena y que distingue entre maysculas y minsculas.
<input:AutoCompleteBox FilterMode="ContainsCaseSensitive" Height="40" Width="200" x:Name="ACB" />
Para crear un filtro de cadena personalizado

Establezca la propiedad TextFilter en un mtodo que coincida con la firma del tipo de delegado
AutoCompleteFilterPredicate(Of T) que acepte una cadena. El mtodo debera ocuparse del filtrado
de cadena necesario para AutoCompleteBox.
En el ejemplo de cdigo siguiente se muestra cmo asociar la propiedad al mtodo de delegado,
as como el filtrado de cadena personalizado.
Private employees As New List(Of Employee)()
Public Sub New()
' Add some items to the employee list.
employees.Add(New Employee("Sells", "Chris", "csells", 1234))
employees.Add(New Employee("Cabatana", "Reina", "rcaba", 5678))
employees.Add(New Employee("Sprenger", "Christof", "cspreng", 9123))
employees.Add(New Employee("Brandel", "Jonas", "jbrandel", 4567))
employees.Add(New Employee("Bye", "Dennis", "dbye", 8912))
employees.Add(New Employee("Reid", "Miles", "mreid", 3456))
' Set the item source.
myACB.ItemsSource = employees
' Set the TextFilter property to the search method.
myACB.TextFilter = AddressOf SearchEmployees
End Sub
Private Function SearchEmployees(ByVal search As String, ByVal value As String) As Boolean
value = value.ToLower()
' Split the string a new line.
Dim words As String() = value.Split(System.Environment.NewLine.ToCharArray(),
StringSplitOptions.RemoveEmptyEntries)
Dim names As String() = words(0).Split(" "c)
' Look for a match in the first line; discarding the "employee:" entry.
For Each name As String In names

Silverlight
If name <> "employee:" Then
If name.StartsWith(search) Then
Return True
End If
End If
Next
' If no match, return false.
Return False
End Function
Public Class Employee
Private _LastName As String
Get
Return _LastName
End Get
_LastName = value
End Set
End Property
Private _FirstName As String
Get
Return _FirstName
End Get
_FirstName = value
End Set
End Property
Private _EmailName As String
Public Property EmailName() As String
Get
Return _EmailName
End Get
_EmailName = value
End Set
End Property
Private _ID As Integer
Public Property ID() As Integer
Get
Return _ID
End Get
Set(ByVal value As Integer)
_ID = value
End Set
End Property
Public Sub New(ByVal empLastName As String, ByVal empFirstName As String, ByVal empEmail As String, ByVal
empID As Integer)
LastName = empLastName
FirstName = empFirstName
EmailName = empEmail
ID = empID
End Sub
Public Overloads Overrides Function ToString() As String
Return ((("Employee: " & FirstName & " ") + LastName + System.Environment.NewLine & "Email: ") +
EmailName + System.Environment.NewLine & "ID: ") + ID.ToString()
End Function
End Class
<StackPanel x:Name="LayoutRoot" Background="LightGray">

<TextBlock FontWeight="Bold" Text="AutoCompleteBox Custom Filter Example" Margin="5"/>
<TextBlock Text="Employee:" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<sdk:AutoCompleteBox Height="75" Width="200" VerticalAlignment="Center" HorizontalAlignment="Right"
x:Name="myACB" FilterMode="Custom" ToolTipService.ToolTip="Enter employee name."/>
</StackPanel>
</StackPanel>
Para crear un filtro de objeto personalizado

Establezca la propiedad ItemFilter en un mtodo que coincida con la firma del tipo de delegado
AutoCompleteFilterPredicate(Of T) que acepte un objeto. El mtodo debera ocuparse del filtrado
de objeto necesario para AutoCompleteBox.
El cdigo siguiente constituye un ejemplo de cmo se establece la propiedad ItemFilter, as como
el filtrado de objeto personalizado.
Private employees As New List(Of Employee)()

Silverlight
Public Sub New()
' Add some items to the employee list.
employees.Add(New Employee("Sells", "Chris", "csells", 1234))
employees.Add(New Employee("Cabatana", "Reina", "rcaba", 5678))
employees.Add(New Employee("Sprenger", "Christof", "cspreng", 9123))
employees.Add(New Employee("Brandel", "Jonas", "jbrandel", 4567))
employees.Add(New Employee("Bye", "Dennis", "dbye", 8912))
employees.Add(New Employee("Reid", "Miles", "mreid", 3456))
' Set the item source.
myACB.ItemsSource = employees
' Set the ItemFilter property to the search method.
myACB.ItemFilter = AddressOf SearchEmployees
End Sub
Private Function SearchEmployees(ByVal search As String, ByVal value As Object) As Boolean
' Cast the value to an Employee.
Dim emp As Employee = TryCast(value, Employee)
If emp IsNot Nothing Then
' Look for a match in the first and last names.
If emp.LastName.ToLower().StartsWith(search) Then
Return True
ElseIf emp.FirstName.ToLower().StartsWith(search) Then
Return True
End If
End If
' If no match, return false.
Return False
End Function
Public Class Employee
Private _LastName As String
Get
Return _LastName
End Get
_LastName = value
End Set
End Property
Private _FirstName As String
Get
Return _FirstName
End Get
_FirstName = value
End Set
End Property
Private _EmailName As String
Public Property EmailName() As String
Get
Return _EmailName
End Get
_EmailName = value
End Set
End Property
Private _ID As Integer
Public Property ID() As Integer
Get
Return _ID
End Get
_ID = value
End Set
End Property
Public Sub New(ByVal empLastName As String, ByVal empFirstName As String, ByVal empEmail As String, ByVal
empID As Integer)
LastName = empLastName
FirstName = empFirstName
EmailName = empEmail
ID = empID
End Sub
Public Overloads Overrides Function ToString() As String
Return ((("Employee: " & FirstName & " ") + LastName + System.Environment.NewLine & "Email: ") +
EmailName + System.Environment.NewLine & "ID: ") + ID.ToString()
End Function
End Class
<StackPanel x:Name="LayoutRoot" Background="LightGray">

Silverlight
<TextBlock FontWeight="Bold" Text="AutoCompleteBox Custom Filter Example" Margin="5"/>
<TextBlock Text="Employee:" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<sdk:AutoCompleteBox Height="75" Width="200" VerticalAlignment="Center" HorizontalAlignment="Right"
x:Name="myACB" FilterMode="Custom" ToolTipService.ToolTip="Enter employee name."/>
</StackPanel>
</StackPanel>
Llenado manual de la lista desplegable AutoCompleteBox

Es posible que desee llenar AutoCompleteBox con el resultado de una llamada asincrnica a un servicio
Web u otro origen de datos y que, por consiguiente, la lista desplegable se llene manualmente. Con este fin,
se puede invalidar fcilmente el comportamiento de filtrado predeterminado de AutoCompleteBox.
Para llenar manualmente la lista desplegable AutoCompleteBox
1. Opcionalmente, establezca MinimumPopulateDelayen 100 o ms para retrasar la operacin de
llenado. Esto disminuye el nmero de llamadas para llenar AutoCompleteBox mientras el usuario
escribe.
2. Opcionalmente, establezca MinimumPrefixLength en un valor mayor que 1 para reducir el nmero
de llamadas a la operacin de llenado.
3. Administre el evento Populating y, para cancelarlo, establezca la propiedad PopulatingEventArgs.
Cancel en true. As se notifica al control que se llenar manualmente.
4. Llame al mtodo que realizar la operacin de filtrado. Si llama a un servicio Web, se usar un
mtodo de devolucin de llamada. En este mtodo, cuando se complete la operacin de filtrado,
llame a PopulateComplete. De esta forma, se notifica al control que se ha terminado de llenarlo.
En el cdigo siguiente se muestra cmo establecer las propiedades MinimumPopulateDelay y
MinimumPrefixLength para controlar el evento Populating, y cmo llamar a PopulateComplete
cuando finalice la operacin. En el cdigo se llama a un servicio Web asincrnicamente, y se usa el
XML devuelto para llenar el control AutoCompleteBox.
<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal">
<TextBlock Text="News Topic:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<sdk:AutoCompleteBox VerticalAlignment="Center" HorizontalAlignment="Right" Height="30"
Width="100" MinimumPopulateDelay="200" MinimumPrefixLength="3" x:Name="myACB"
Populating="AutoCompleteBox_Populating" />
</StackPanel>
' Handle the Populating event, but cancel it. Make the call to the web service.
Private Sub AutoCompleteBox_Populating(ByVal sender As Object, ByVal e As PopulatingEventArgs)
e.Cancel = True
CallToWebService()
End Sub
' Call the topic service at the live search site.

Private wc As WebClient
Private Sub CallToWebService()
wc = New WebClient()
wc.DownloadStringAsync(New Uri("http://api.search.live.net/qson.aspx?query=" & _
myACB.SearchText & "&sources=news"))
AddHandler wc.DownloadStringCompleted, AddressOf wc_DownloadStringCompleted
End Sub
Private Sub wc_DownloadStringCompleted(ByVal sender As Object, _

ByVal e As DownloadStringCompletedEventArgs)
If e.[Error] IsNot Nothing Then
Exit Sub
End If
Dim data As New List(Of String)()

Try
Dim jso As JsonObject = TryCast(DirectCast(JsonObject.Parse(e.Result), _
JsonObject)("SearchSuggestion"), JsonObject)
Dim originalSearchString As String = jso("Query")
If originalSearchString = myACB.SearchText Then
For Each suggestion As JsonObject In DirectCast(jso("Section"), JsonArray)
data.Add(suggestion.Values.First())
Next
' Diplay the AutoCompleteBox drop down with any suggestions

Silverlight
myACB.ItemsSource = data
myACB.PopulateComplete()
End If
Catch
End Try
End Sub
End Class
5.5.10. Cmo: Usar TreeView para mostrar datos jerrquicos

Los controles TreeViewItem y TreeView se pueden usar con objetos HierarchicalDataTemplate para mostrar
datos jerrquicos con facilidad. En este tema se describe cmo se crean las plantillas y la estructura
TreeView.
Para crear las plantillas
Declare las plantillas en orden ascendente. Establezca la propiedad HierarchicalDataTemplate.
ItemsSource en el origen de datos de los subnodos y establezca la propiedad
HierarchicalDataTemplate.ItemTemplate en una plantilla que defina la estructura de esos nodos. En
el ejemplo siguiente se muestran dos recursos HierarchicalDataTemplate. La primera plantilla se
aplica a los nodos ms bajos en el rbol y la segunda plantilla se aplica a los elementos que
contienen esos nodos.
<sdk:HierarchicalDataTemplate x:Key="ChildTemplate" >
<TextBlock FontStyle="Italic" Text="{Binding Path=Title}" />
</sdk:HierarchicalDataTemplate>
<sdk:HierarchicalDataTemplate x:Key="NameTemplate"
ItemsSource="{Binding Path=ChildTopics}"
ItemTemplate="{StaticResource ChildTemplate}">
<TextBlock Text="{Binding Path=Title}" FontWeight="Bold" />
Para crear la estructura TreeView

Cree un control TreeView y establezca su propiedad ItemsControl.ItemTemplate en la plantilla de
datos de nivel superior. Normalmente, la plantilla de datos de nivel superior es la ltima declarada
si las plantillas se declaran como recursos.
<sdk:TreeView Width="400" Height="300" ItemsSource="{Binding}"
ItemTemplate="{StaticResource NameTemplate}" x:Name="myTreeView" />
Ejemplo
En el ejemplo siguiente se muestran dos plantillas de datos jerrquicos declaradas en orden ascendente. En
el ejemplo se muestra un control TreeView con la propiedad ItemsControl.ItemTemplate establecida en la
plantilla que se aplica a los nodos de nivel superior.
Public Shared Topics As New ObservableCollection(Of Topic)()
Public Sub New()
Topics.Add(New Topic("Using Controls and Dialog Boxes", -1))

Topics.Add(New Topic("Getting Started with Controls", 1))
Dim DataGridTopic As New Topic("DataGrid", 4)
DataGridTopic.ChildTopics.Add( _
New Topic("Default Keyboard and Mouse Behavior in the DataGrid Control", -1))
New Topic("How to: Add a DataGrid Control to a Page", -1))
New Topic("How to: Display and Configure Row Details in the DataGrid Control", 1))
Topics.Add(DataGridTopic)
myTreeView.DataContext = Topics
End Sub
End Class
Public Class Topic

Private _Title As String
Public Property Title() As String
Get
Return _Title
End Get

Silverlight
_Title = value
End Set
End Property
Private _Rating As Integer
Public Property Rating() As Integer
Get
Return _Rating
End Get
_Rating = value
End Set
End Property
Private childTopicsValue As New ObservableCollection(Of Topic)()
Public Property ChildTopics() As ObservableCollection(Of Topic)
Get
Return childTopicsValue
End Get
Set(ByVal value As ObservableCollection(Of Topic))
childTopicsValue = value
End Set
End Property
Public Sub New()
End Sub
Public Sub New(ByVal title__1 As String, ByVal rating__2 As Integer)
Title = title__1
Rating = rating__2
End Sub
End Class
<StackPanel x:Name="LayoutRoot" Background="White">

<sdk:HierarchicalDataTemplate x:Key="ChildTemplate" >
<TextBlock FontStyle="Italic" Text="{Binding Path=Title}" />
<sdk:HierarchicalDataTemplate x:Key="NameTemplate"
ItemsSource="{Binding Path=ChildTopics}"
ItemTemplate="{StaticResource ChildTemplate}">
<TextBlock Text="{Binding Path=Title}" FontWeight="Bold" />
<sdk:TreeView Width="400" Height="300" ItemsSource="{Binding}"
ItemTemplate="{StaticResource NameTemplate}" x:Name="myTreeView" />
</StackPanel>
5.5.11. InkPresenter
El elemento InkPresenter proporciona una superficie de dibujo que admite las caractersticas de entrada
manuscrita. InkPresenter se deriva de Canvas y puede mostrar uno o varios objetos UIElement y un objeto
StrokeCollection.
5.5.11.1. Informacin general sobre entradas manuscritas

La entrada manuscrita hace referencia a contenido escrito a mano o dibujado con un lpiz, un mouse o de
forma tctil. La entrada manuscrita tiene distintos usos en las aplicaciones basadas en Silverlight.
Escenarios comunes de entrada manuscrita

Anotaciones
Las anotaciones manuscritas constituyen un modo de hacer ms interactivo y personal el contenido de
Silverlight. Usar los elementos necesarios para implementar anotaciones manuscritas en Silverlight es una
tarea fcil y flexible. Silverlight es una de las pocas tecnologas web que admiten la recopilacin de entradas
manuscritas y la presentacin de entradas de lpiz de alta calidad desde dispositivos Tablet PC.
Blogs
Los blogs son personales. Agregar entradas manuscritas a un blog le da un toque nico y personal. Escribir,
dibujar y realizar anotaciones en fotografas y vdeos es una forma de ampliar las posibilidades de un blog.
Juegos

Silverlight
El uso de la entrada manuscrita en Silverlight abre nuevos escenarios para la interaccin natural en el
contenido de los juegos en lnea. Silverlight simplifica la implementacin de estos escenarios. La flexibilidad
del modelo de entrada permite a su vez una gran flexibilidad al implementarlo en el contenido de los
juegos.
Dispositivos compatibles de entrada manuscrita

Entrada del lpiz
Los equipos con lpiz (como un Tablet PC o incluso un equipo de escritorio que disponga de un
digitalizador externo) pueden beneficiarse de una entrada de lpiz de total fidelidad en Silverlight. Estos
dispositivos permiten una entrada manuscrita que puede integrarse en las aplicaciones basadas en
Silverlight para crear escritos, dibujos, anotaciones, pinturas al leo y otros contenidos con un lpiz.
Entrada tctil
Silverlight es compatible con dispositivos de pantalla tctil, como los que se incluyen en algunos
dispositivos Tablet PC y PC ultra mvil (UMPC). La entrada tctil permite a los usuarios interactuar con el
contenido de Silverlight de un modo natural, cuando el uso de un teclado o un lpiz resulta incmodo o
innecesario.
Entrada del mouse
Puede utilizar el mouse para escribir a mano en una aplicacin basada en Silverlight. Sin embargo, la
entrada manuscrita generada con el mouse tiene una resolucin inferior a la de la entrada de lpiz generada
con un digitalizador. La entrada manuscrita generada por el mouse puede usarse del mismo modo que la
entrada manuscrita generada por el lpiz.
Introduccin a la entrada manuscrita en Silverlight

Elemento InkPresenter
El elemento InkPresenter proporciona una superficie de dibujo que admite las caractersticas de entrada
manuscrita. InkPresenter se deriva de Canvas y puede mostrar uno o varios objetos UIElement y un objeto
StrokeCollection.
En el siguiente ejemplo de cdigo se muestra cmo crear un elemento InkPresenter en XAML.
<Canvas>
<TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" />
<Rectangle Height="500" Width="500" Margin="50,50,0,0" Stroke="Black" />
<InkPresenter x:Name="MyIP" Height="500" Width="500"
Margin="50,50,0,0"
MouseLeftButtonDown="MyIP_MouseLeftButtonDown"
LostMouseCapture="MyIP_LostMouseCapture"
MouseMove="MyIP_MouseMove"
Background="Transparent" Opacity="1" />
</Canvas>
En el ejemplo anterior, se agrega un Rectangle a Canvas con el mismo margen que el elemento
InkPresenter. Esto se debe a que InkPresenter no incluye propiedades para proporcionar lmites visuales. La
propiedad Stroke de Rectangle est establecida en Black, lo que hace que acte como borde de
InkPresenter. El orden Z de InkPresenter debe ser superior al de Rectangle. De lo contrario, Rectangle
ocultar InkPresenter.
Para anotar fotografas con un lpiz o un mouse, Image y InkPresenter se agregan a un elemento Canvas. En
el siguiente ejemplo de cdigo se muestra cmo anotar una fotografa.
<Canvas>
<Image Source="flower.jpg" Stretch="Fill" Width="500" Height="500" />
<InkPresenter x:Name="MyIP" Background="Transparent" Width="500" Height="500"
MouseLeftButtonDown="MyIP_MouseLeftButtonDown"
MouseMove="MyIP_MouseMove"
LostMouseCapture="MyIP_LostMouseCapture">
</InkPresenter>
</Canvas>
Datos de las entradas manuscritas

En Silverlight, la entrada manuscrita es un objeto StrokeCollection, que contiene objetos Stroke individuales.
Cada Stroke corresponde a una secuencia de descenso del lpiz, movimiento y subida del lpiz. Un Stroke

Silverlight
puede ser un punto, una lnea recta o una lnea curva. Cada Stroke contiene un objeto StylusPointCollection,
que a su vez contiene objetos StylusPoint individuales. Los objetos StylusPoint se recogen al mover el lpiz
mientras est en contacto con el digitalizador. Stroke tambin incluye una serie de caractersticas, como
alto, ancho, color y color del contorno, todas ellas incluidas en la clase DrawingAttributes.
Recopilacin de entradas manuscritas
Puede crear o capturar los trazos mediante programacin, respondiendo a los eventos en InkPresenter. Los
eventos tpicos para hacer esto son MouseLeftButtonDown, MouseMove y LostMouseCapture.
Nota:
Use los eventos del mouse para detectar las acciones de un dispositivo de lpiz. Los eventos
MouseLeftButtonDown, LostMouseCapture y MouseMove corresponden a acciones de descenso del lpiz,
movimiento y subida del lpiz, respectivamente.
En el siguiente ejemplo de cdigo se muestra cmo recoger y mostrar los datos de trazo en InkPresenter.
Public Sub New()
MyBase.New()
SetBoundary()
End Sub
'A new stroke object, MyStroke, is created and is added to the StrokeCollection object of the InkPresenter, MyIP
Private Sub MyIP_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseEventArgs)
MyIP.CaptureMouse()
Dim MyStylusPointCollection As StylusPointCollection = New StylusPointCollection
MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP))
NewStroke = New Stroke(MyStylusPointCollection)
MyIP.Strokes.Add(NewStroke)
End Sub
'StylusPoint objects are collected from the MouseEventArgs and added to MyStroke.
Private Sub MyIP_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
If (Not (NewStroke) Is Nothing) Then
NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP))
End If
End Sub
'MyStroke is completed
Private Sub MyIP_LostMouseCapture(ByVal sender As Object, ByVal e As MouseEventArgs)
NewStroke = Nothing
End Sub
'Set the Clip property of the inkpresenter so that the strokes are contained within the boundary of the inkpresenter
Private Sub SetBoundary()
Dim MyRectangleGeometry As RectangleGeometry = New RectangleGeometry
MyRectangleGeometry.Rect = New Rect(0, 0, MyIP.ActualWidth, MyIP.ActualHeight)
MyIP.Clip = MyRectangleGeometry
End Sub
En el ejemplo anterior, cuando el elemento InkPresenter recibe un evento MouseLeftButtonDown, se crea y

se agrega un nuevo objeto Stroke al objeto StrokeCollection del elemento InkPresenter. Al mover el lpiz
mientras est en contacto con la pantalla, se llama al evento MouseMove y los objetos StylusPoint se
recogen y se agregan a Stroke. Cuando se genera el evento LostMouseCapture, se completa el Stroke
creado.
5.5.11.2. Cmo: Borrar entradas de lpiz en un control InkPresenter

Silverlight no tiene tipos y mtodos especficos para borrar los trazos de lpiz despus de haberlos obtenido
o cargado. Sin embargo, puede utilizar los mtodos HitTest y HitTest para implementar la funcin de
borrado. Los dos mtodos toman una coleccin StylusPointCollection como entrada y devuelven un valor
que indica si los trazos de lpiz intersecan con la coleccin. A continuacin, segn el valor devuelto, se
puede modificar la coleccin de trazos de lpiz y borrar los que se desee. Los modos de borrado ms
comunes son el borrado de trazos y el borrado de puntos.
Los fragmentos de cdigo de este tema forman parte de un ejemplo mayor. Puede descargar el ejemplo
completo en la ubicacin siguiente.

Silverlight
Requisitos previos
En este tema se supone que el usuario entiende cmo obtener entradas de lpiz en un control InkPresenter.
Borrado de trazos
El borrado de trazos elimina trazos completos. Por ejemplo, un trazado de lpiz o de mouse que interseca
con un trazo puede iniciar un borrado de trazos. El borrado de trazos se puede implementar pasando la
coleccin StylusPointCollection obtenida por el trazado del mouse o el lpiz al mtodo HitTest de la
coleccin de trazos de lpiz. El valor devuelto indicar qu trazo se debe quitar de la coleccin.
En los pasos siguientes se describe cmo implementar un algoritmo de borrado de trazos. En este
algoritmo, el usuario hace clic con el mouse o con el lpiz y mueve el puntero sobre un trazo para borrarlo.
Para implementar el borrado de trazos
1. En el controlador de eventos MouseLeftButtonDown, obtenga los puntos del lpiz y almacnelos en
un objeto StylusPointCollection.
Private Sub _presenter_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
If _mode = InkMode.StrokeErase Then
_erasePoints = e.StylusDevice.GetStylusPoints(_presenter)
End If
End Sub
2. En el controlador de eventos MouseMove, agregue los puntos del lpiz al objeto

StylusPointCollection creado en el paso anterior (_erasePoints). Compare los puntos del lpiz
obtenidos con la coleccin de trazos del elemento InkPresenter mediante el mtodo HitTest.
Elimine los trazos devueltos por el mtodo HitTest mediante el mtodo Remove.
Private Sub _presenter_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
If _mode = InkMode.StrokeErase AndAlso _erasePoints IsNot Nothing Then
_erasePoints.Add(e.StylusDevice.GetStylusPoints(_presenter))
' Compare the collected stylus points with the stroke collection of the ink presenter.
Dim hitStrokes As StrokeCollection = _presenter.Strokes.HitTest(_erasePoints)
'Delete the strokes that intersect with the collected stylus points.
If hitStrokes.Count > 0 Then
For Each hitStroke As Stroke In hitStrokes
_presenter.Strokes.Remove(hitStroke)
Next
End If
End If
End Sub
Borrado de puntos
El borrado de puntos elimina nicamente una parte del trazo. La implementacin del borrado de puntos es
similar al borrado de trazos. Sin embargo, en el borrado de puntos, un trazo que interseca con el trazado
del mouse o del lpiz se reemplaza con dos trazos.
En los pasos siguientes se describe cmo implementar un algoritmo de borrado de puntos. En este
algoritmo, el usuario hace clic con el mouse o con el lpiz y mueve el puntero sobre un trazo para dividirlo
en dos.
Para implementar el borrado de puntos
1. En el controlador de eventos MouseLeftButtonDown, obtenga los puntos del lpiz y almacnelos en
un objeto StylusPointCollection. Almacene el ltimo punto del lpiz en la coleccin de puntos del
lpiz por separado. Guardar el ltimo punto permite asegurarse de que el punto en que se llam al
evento de clic del mouse se procese tambin en el controlador de movimiento de mouse
subsiguiente.
Private Sub _presenter_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
If _mode = InkMode.PointErase Then
Dim pointErasePoints As StylusPointCollection = e.StylusDevice.GetStylusPoints(_presenter)
'Store the last point in the stylus point collection.
_lastPoint = pointErasePoints(pointErasePoints.Count - 1)
End If
End Sub
2. En el controlador de eventos MouseMove, agregue los puntos del lpiz al objeto

StylusPointCollection creado en el paso anterior. Compare los puntos del lpiz obtenidos con la

Silverlight
coleccin de trazos del elemento InkPresenter mediante el mtodo HitTest y almacene los trazos
que intersequen. Quite la interseccin de puntos entre el trazo y el trazado del mouse o del lpiz.
En el mtodo ProcessPointErase del paso siguiente se implementa la eliminacin de los puntos que
intersecan.
Private Sub _presenter_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
If _mode = InkMode.PointErase AndAlso _lastPoint IsNot Nothing Then
Dim pointErasePoints As StylusPointCollection = e.StylusDevice.GetStylusPoints(_presenter)
pointErasePoints.Insert(0, _lastPoint.Value)
'Compare collected stylus points with the ink presenter strokes and store the intersecting strokes.
Dim hitStrokes As StrokeCollection = _presenter.Strokes.HitTest(pointErasePoints)
If hitStrokes.Count > 0 Then
For Each hitStroke As Stroke In hitStrokes
'For each intersecting stroke, split the stroke into two while removing the intersecting points.
ProcessPointErase(hitStroke, pointErasePoints)
Next
End If
_lastPoint = pointErasePoints(pointErasePoints.Count - 1)
End If
End Sub
3. Implemente el mtodo ProcessPointErase para reemplazar el trazo que interseca con dos trazos. El
mtodo ProcessPointErase toma un objeto Stroke denominado stroke y una coleccin
StylusPointCollection denominada pointErasePoints como entrada y quita los puntos que
intersecan de InkPresenter. Determine la interseccin partiendo del primer punto en de stroke y
agregue cada punto del lpiz de stroke a splitStroke1 hasta llegar a un punto del lpiz que
interseque con pointErasePoints. Repita el proceso empezando por el ltimo punto de stroke y
agregue cada punto del lpiz a splitStroke2 hasta llegar a un punto del lpiz que interseque con el
objeto pointErasePoints de entrada. Por ltimo, reemplace stroke con splitStroke1 y splitStroke2.
Para ello, puede utilizar el mtodo remove y agregar splitstroke1 y splitstroke2 a InkPresenter.
Private Sub ProcessPointErase(ByVal stroke As Stroke, ByVal pointErasePoints As StylusPointCollection)
Dim splitStroke1 As Stroke, splitStroke2 As Stroke, hitTestStroke As Stroke
' Determine first split stroke.

splitStroke1 = New Stroke()
hitTestStroke = New Stroke()
hitTestStroke.StylusPoints.Add(stroke.StylusPoints)
hitTestStroke.DrawingAttributes = stroke.DrawingAttributes
'Iterate through the stroke from index 0 and add each stylus point to splitstroke1 until
'a stylus point that intersects with the input stylus point collection is reached.
While True
Dim sp As StylusPoint = hitTestStroke.StylusPoints(0)
hitTestStroke.StylusPoints.RemoveAt(0)
If Not hitTestStroke.HitTest(pointErasePoints) Then
Exit While
End If
splitStroke1.StylusPoints.Add(sp)
End While
' Determine second split stroke.

splitStroke2 = New Stroke()
hitTestStroke = New Stroke()
hitTestStroke.StylusPoints.Add(stroke.StylusPoints)
hitTestStroke.DrawingAttributes = stroke.DrawingAttributes
While True
Dim sp As StylusPoint = hitTestStroke.StylusPoints(hitTestStroke.StylusPoints.Count - 1)
hitTestStroke.StylusPoints.RemoveAt(hitTestStroke.StylusPoints.Count - 1)
If Not hitTestStroke.HitTest(pointErasePoints) Then
Exit While
End If
splitStroke2.StylusPoints.Insert(0, sp)
End While
' Replace stroke with splitstroke1 and splitstroke2.

If splitStroke1.StylusPoints.Count > 1 Then
splitStroke1.DrawingAttributes = stroke.DrawingAttributes
_presenter.Strokes.Add(splitStroke1)
End If
If splitStroke2.StylusPoints.Count > 1 Then
splitStroke2.DrawingAttributes = stroke.DrawingAttributes
_presenter.Strokes.Add(splitStroke2)
End If
_presenter.Strokes.Remove(stroke)
End Sub

Silverlight
5.5.12. Informacin general sobre el control RichTextBox

RichTextBox es un control que permite mostrar o modificar contenido enriquecido, como prrafos,
hipervnculos e imgenes incorporadas. En este tema, se presenta el control RichTextBox, se describen
algunas de sus caractersticas y se muestran ejemplos de cmo utilizarlo en XAML y cdigo.
TextBlock, TextBox o RichTextBox

Silverlight incluye tres controles de texto bsicos: TextBlock, TextBox y RichTextBox. El control de texto
usado depende del escenario. En la siguiente tabla, se reflejan algunos escenarios y el control recomendado.
Escenario Control recomendado

Mostrar texto sin formato. TextBlock
Mostrar texto con formato, prrafos, hipervnculos o imgenes incorporadas. RichTextBox
Escribir o modificar texto sin formato, como el texto de un formulario. TextBox
Escribir o modificar texto con formato, prrafos, hipervnculos o imgenes
RichTextBox
incorporadas.
Modificar un documento, un artculo o un blog que requiere formato, prrafos,
RichTextBox
hipervnculos o imgenes incorporadas.
Aplicar formato de caracteres o de prrafos. RichTextBox
Modelo de contenido
RichTextBox admite un modelo de contenido basado en bloques. La propiedad de contenido del control
RichTextBox es Blocks, que es una coleccin de elementos Paragraph. El elemento Paragraph puede
contener elementos derivados de Inline. En la siguiente ilustracin, se resume el modelo de contenido del
control RichTextBox y se muestra cmo los elementos derivados de Block e Inline encajan en este modelo.
Diagrama del modelo de contenido de RichTextBox
Elementos de bloque
Los elementos de bloque son clases que heredan de Block. Actualmente, Paragraph y Section se derivan de
Block, pero Section no forma parte del modelo de documento de RichTextBox.
Elemento de
Descripcin
bloque
Paragraph se utiliza para agrupar el contenido en un prrafo. El uso ms sencillo y comn de
Paragraph Paragraph es crear un prrafo de texto. Un objeto Paragraph tambin puede contener
elementos incorporados.
Elementos incorporados

Silverlight
Los elementos incorporados son clases que heredan de Inline; un elemento incorporado est incluido en un
elemento de bloque u otro elemento incorporado. Los elementos incorporados se utilizan a menudo como
contenedor directo del contenido que se representa en la pantalla. Por ejemplo, un elemento de bloque
Paragraph puede contener un elemento incorporado Run, pero es Run el que contiene en realidad el texto
que se representa en la pantalla. El contenido de cada elemento Paragraph puede incluir muchos tipos de
elementos, incluidos los siguientes:
Elemento
Descripcin
incorporado
Run se utiliza para contener texto sin formato. Podra pensarse que el objeto Run se
Run utiliza en gran medida en el contenido; sin embargo, en el marcado no es necesario
utilizar los elementos Run de forma explcita.
Span agrupa otros elementos de contenido inline. No se aplica ninguna representacin
inherente al contenido dentro de un elemento Span. Es decir, no se da formato al
Span contenido si se coloca dentro de un elemento Span sin ningn atributo. Sin embargo, los
elementos que heredan de Span, como Hyperlink, Bold, Italic y Underline, aplican
formato al texto.
InlineUIContainer permite incrustar elementos UIElement (por ejemplo, controles Image
InlineUIContainer
o Button) en un elemento de contenido Inline.
Crear un control RichTextBox

Al igual que sucede con los dems controles de Silverlight, un control RichTextBox puede crearse en XAML
o en cdigo. A continuacin, se muestra cmo crear un control RichTextBox en XAML y en cdigo.

<StackPanel>
<RichTextBox/>
</StackPanel>
Private Sub BlankRTB()

'A RichTextBox with no intial content in it.
Dim MyRTB As New RichTextBox()
End Sub
A continuacin, se muestra cmo crear un control RichTextBox con un prrafo y texto en negrita en XAML y
en cdigo. El valor de la propiedad VerticalScrollBarVisibility se establece en Auto.

<RichTextBox VerticalScrollBarVisibility="Auto">
<Paragraph>
A RichTextBox with <Bold>initial content</Bold> in it.
</Paragraph>
</RichTextBox>
'A RichTextBox with intial content in it.

Private Sub ContentRTB()
'Create a new RichTextBox with its VerticalScrollBarVisibility property set to Auto.
MyRTB.VerticalScrollBarVisibility = ScrollBarVisibility.Auto
' Create a Run of plain text and some bold text.

Dim myRun1 As New Run()
myRun1.Text = "A RichTextBox with "
Dim myBold As New Bold()
myBold.Inlines.Add("initial content ")
Dim myRun2 As New Run()
myRun2.Text = "in it."
' Create a paragraph and add the Run and Bold to it.
Dim myParagraph As New Paragraph()
myParagraph.Inlines.Add(myRun1)
myParagraph.Inlines.Add(myBold)
myParagraph.Inlines.Add(myRun2)
' Add the paragraph to the RichTextBox.

MyRTB.Blocks.Add(myParagraph)
'Add the RichTextBox to the StackPanel.

MySP.Children.Add(MyRTB)
End Sub

Silverlight
Elementos como Paragraph y Bold determinan cmo aparece el contenido en el control RichTextBox.
Cuando un usuario edita el contenido de RichTextBox, modifica dicho contenido.
Hipervnculos
RichTextBox admite hipervnculos. Se puede usar el elemento Hyperlink para mostrar hipervnculos en el
control RichTextBox. Los hipervnculos proporcionan un comportamiento integrado al situar el mouse sobre
ellos as como compatibilidad con el foco. Utilice la propiedad NavigateUri del elemento Hyperlink para
especificar la direccin URL.
Nota:
Es preciso establecer la propiedad IsReadOnly del control RichTextBox en true para que funcione el
elemento Hyperlink.
A continuacin, se muestra cmo crear un control RichTextBox con un hipervnculo en XAML y en cdigo.

<RichTextBox IsReadOnly="True">
<Paragraph>
Displaying text with <Hyperlink NavigateUri="http://www.msdn.com">hyperlink</Hyperlink>.
</Paragraph>
</RichTextBox>
'A RichTextBox with hyperlink.

Private Sub HyperlinkRTB()
'Create a new RichTextBox.
' Create a Run of plain text and hyperlink.

Dim myRun As New Run()
myRun.Text = "Displaying text with "
Dim MyLink As New Hyperlink()
MyLink.Inlines.Add("hyperlink")
MyLink.NavigateUri = New Uri("http://www.msdn.com")
' Create a paragraph and add the Run and hyperlink to it.
myParagraph.Inlines.Add(myRun)
myParagraph.Inlines.Add(MyLink)


End Sub
Imgenes incorporadas u otros elementos

Es posible mostrar un elemento UIElement, como un control Image o un control Button, en un control
RichTextBox. Esto permite escenarios de texto enriquecido, como mostrar el contenido de un cliente de chat
y mostrar emoticonos. Los elementos de la interfaz de usuario estn activos cuando el control RichTextBox
est en modo de solo lectura y estn inactivos en modo de edicin. Por ejemplo, pueden responder a
entradas y recibir el foco nicamente cuando estn en modo de solo lectura. Se usa la etiqueta
InlineUIContainer para agregar contenido derivado de UIElement.
A continuacin, se muestra cmo agregar una imagen a un control RichTextBox en XAML y en cdigo.
<RichTextBox>
<Paragraph>
Displaying text with inline image
<InlineUIContainer>
<Image Source="./flower.jpg" Height="50" Width="50" />
</InlineUIContainer>
</Paragraph>
</RichTextBox>
'A RichTextBox with an image.

Private Sub ImageRTB()
' Create a Run of plain text and image.

Dim myRun As New Run()

Silverlight
myRun.Text = "Displaying text with inline image"
Dim MyImage As New Image()
MyImage.Source = New BitmapImage(New Uri("flower.jpg", UriKind.RelativeOrAbsolute))
MyImage.Height = 50
MyImage.Width = 50
Dim MyUI As New InlineUIContainer()
MyUI.Child = MyImage
' Create a paragraph and add the paragraph to the RichTextBox.

' Add the Run and image to it.

myParagraph.Inlines.Add(MyUI)

End Sub
Modo de solo lectura

El control RichTextBox tiene un modo de solo lectura. Es posible mostrar el contenido enriquecido en modo
de solo lectura. Los elementos de la interfaz de usuario y los hipervnculos de un control RichTextBox estn
activos nicamente en modo de solo lectura. Por ejemplo, pueden responder a entradas y recibir el foco
nicamente cuando estn en modo de solo lectura. Para especificar el modo de solo lectura, se establece la
propiedad IsReadOnly de RichTextBox en true. A continuacin, se muestra cmo establecer la propiedad
IsReadOnly en XAML y en cdigo.
<RichTextBox IsReadOnly="True">
<Paragraph>
<Hyperlink NavigateUri="http://www.msdn.com">Hyperlinks</Hyperlink> are enabled in a read-only RichTextBox.
</Paragraph>
</RichTextBox>
Private Sub ReadOnlyRTB()

Dim MyRTB As RichTextBox = New RichTextBox
' Create a Run of plain text and hyperlink.
Dim myRun As Run = New Run
myRun.Text = " are enabled in a read-only RichTextBox."
Dim MyLink As Hyperlink = New Hyperlink
MyLink.Inlines.Add("Hyperlinks")
MyLink.NavigateUri = New Uri("http://www.msdn.com")
' Create a paragraph and add the Run and hyperlink to it.
Dim myParagraph As Paragraph = New Paragraph
myParagraph.Inlines.Add(MyLink)
End Sub
Recorrer el contenido
Es posible recorrer el contenido de un control RichTextBox mediante la clase TextPointer y sus miembros.
Un objeto TextPointer representa una posicin en el contenido de un control RichTextBox. La posicin
puede encontrarse entre caracteres del contenido o entre las etiquetas de elemento que definen la
estructura del contenido. Si la posicin est entre caracteres del contenido, se trata de una posicin de
insercin. Es decir, se puede agregar nuevo contenido en esa posicin sin infringir ninguna regla semntica
para el contenido asociado. En la prctica, una posicin de insercin se puede encontrar en cualquier parte
del contenido donde se pueda colocar un cursor. En la mayora de los casos, si la posicin se encuentra
entre las etiquetas de elemento que definen la estructura del contenido, no se trata de una posicin de
insercin. Un ejemplo de una posicin de TextPointer vlida que no sea una posicin de insercin es la
posicin entre dos etiquetas de prrafo adyacentes (es decir, entre la etiqueta de cierre del prrafo anterior
y la etiqueta de apertura del prrafo siguiente).
Entre las operaciones que se pueden realizar con la clase TextPointer se encuentran las siguientes:
Realice una comparacin de ordinales de la posicin actual con una segunda posicin especificada.

Silverlight
Obtener el objeto TextElement o el control RichTextBox que establece el mbito de la posicin

especificada.
Traduzca entre posiciones TextPointer y desplazamientos de smbolos en el contenido.
Realice la prueba de posicionamiento visual traduciendo entre una posicin TextPointer y Point que
representa las coordenadas relativas.
Busque una posicin de insercin cercana o compruebe si la posicin actual es una posicin de
insercin
Seleccionar texto y aplicarle formato en tiempo de ejecucin

En tiempo de ejecucin, se puede dar formato al texto de un control RichTextBox en el nivel de bloque y el
nivel de elemento incorporado. En el siguiente ejemplo, se muestra cmo alinear a la derecha todo el
contenido de un control RichTextBox.

<StackPanel>
<RichTextBox x:Name="MyRTB" Height="100" Width="400" />
<Button x:Name="MyButton1" Content="Right-Align" Height="30" Width="100" Click="button_Click" />
</StackPanel>
'Right-align the content in RichTextBox on clicking the button.

Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim MyBC As BlockCollection = InlineAssignHelper(MyBC, MyRTB.Blocks)
For Each b As Block In MyBC
b.TextAlignment = TextAlignment.Right
Next
End Sub
Private Shared Function InlineAssignHelper(Of T)(ByRef target As T, ByVal value As T) As T
target = value
Return value
End Function
Un escenario ms comn sera seleccionar una parte del contenido y, a continuacin, aplicar el formato a la
seleccin. La clase TextSelection representa una seleccin de texto en el control RichTextBox. Para obtener
acceso al texto seleccionado en el control RichTextBox, se usa su propiedad Selection. Para realizar
operaciones con el texto seleccionado, se pueden usar los mtodos GetPropertyValue y
ApplyPropertyValue. En el siguiente ejemplo, se muestra cmo aplicar formato de negrita, cursiva y
subrayado al texto seleccionado.

<StackPanel>
<RichTextBox x:Name="MyRTB" Width="600" Height="400" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="Bold" Height="30" Margin="2" Width="50" Click="BtnBold_Click" />
<Button Content="Italic" Height="30" Margin="2" Width="50" Click="BtnItalic_Click" />
<Button Content="Underline" Height="30" Margin="2" Width="65" Click="BtnUnderline_Click" />
</StackPanel>
</StackPanel>
'Set Bold formatting to selected content

Private Sub BtnBold_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
If MyRTB IsNot Nothing Then
If TypeOf MyRTB.Selection.GetPropertyValue(Run.FontWeightProperty) Is FontWeight AndAlso _
(CType(MyRTB.Selection.GetPropertyValue(Run.FontWeightProperty), FontWeight) = FontWeights.Normal) Then
MyRTB.Selection.ApplyPropertyValue(Run.FontWeightProperty, FontWeights.Bold)
Else
MyRTB.Selection.ApplyPropertyValue(Run.FontWeightProperty, FontWeights.Normal)
End If
End If
End Sub
'Set Italic formatting to selected content

Private Sub BtnItalic_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
If MyRTB IsNot Nothing Then
If TypeOf MyRTB.Selection.GetPropertyValue(Run.FontStyleProperty) Is FontStyle _
AndAlso (CType(MyRTB.Selection.GetPropertyValue(Run.FontStyleProperty), FontStyle) = FontStyles.Normal) Then
MyRTB.Selection.ApplyPropertyValue(Run.FontStyleProperty, FontStyles.Italic)
Else
MyRTB.Selection.ApplyPropertyValue(Run.FontStyleProperty, FontStyles.Normal)
End If
End If
End Sub

Silverlight
'Set Underline formatting to selected content

Private Sub BtnUnderline_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
If (Not (MyRTB) Is Nothing) Then
If (MyRTB.Selection.GetPropertyValue(Run.TextDecorationsProperty) Is Nothing) Then
MyRTB.Selection.ApplyPropertyValue(Run.TextDecorationsProperty, TextDecorations.Underline)
Else
MyRTB.Selection.ApplyPropertyValue(Run.TextDecorationsProperty, Nothing)
End If
End If
End Sub
Asimismo, existe la posibilidad de seleccionar texto mediante programacin. Para seleccionar texto
mediante programacin en un control RichTextBox, se usa el mtodo Select. El mtodo Select toma dos
objetos TextPointer como parmetros y selecciona el texto entre los dos objetos. En el siguiente ejemplo de
cdigo, se utiliza el mtodo Select para seleccionar y subrayar mediante programacin la ltima palabra de
un control RichTextBox. En este ejemplo, se usa un carcter de espacio para delimitar las palabras. Este
ejemplo de cdigo forma parte de un ejemplo ms extenso referente a la clase TextPointer.
'This method underlines the last word in a RichTextBox
Public Sub UnderlineLastWord()
Dim EndofContent As TextPointer = MyRTB1.ContentEnd.GetNextInsertionPosition(LogicalDirection.Backward)
Dim currentPointer As TextPointer = EndofContent.GetNextInsertionPosition(LogicalDirection.Backward)
If (currentPointer Is Nothing) Then
Return
End If
Dim currentChar As String = GetCurrentChar(MyRTB1, currentPointer, LogicalDirection.Backward)
While ((currentChar <> " ") _
AndAlso (currentChar <> ""))
currentPointer = currentPointer.GetNextInsertionPosition(LogicalDirection.Backward)
currentChar = GetCurrentChar(MyRTB1, currentPointer, LogicalDirection.Backward)
End While
If (currentChar = " ") Then
MyRTB1.Selection.Select(currentPointer.GetNextInsertionPosition(LogicalDirection.Forward), EndofContent)
Else
MyRTB1.Selection.Select(currentPointer, EndofContent)
End If
MyRTB1.Selection.ApplyPropertyValue(Run.TextDecorationsProperty, TextDecorations.Underline)
End Sub
Private Function GetCurrentChar(ByVal RTB As RichTextBox, ByVal pointer As TextPointer, ByVal direction As
LogicalDirection) As String
Dim nextPointer As TextPointer = pointer.GetNextInsertionPosition(direction)
If (Not (nextPointer) Is Nothing) Then
RTB.Selection.Select(pointer, nextPointer)
If (RTB.Selection.Text.Length <> 0) Then
Return RTB.Selection.Text(0).ToString
End If
End If
Return ""
End Function
XAML
Para obtener y establecer una representacin en XAML del contenido de un control RichTextBox, se usa la
propiedad Xaml. La cadena de XAML devuelta por la propiedad Xaml incluir solo los siguientes elementos:
Paragraph
Run
LineBreak
Span
Bold
Hyperlink
Underline
Italic
Nota:
Observe que la cadena de XAML devuelta por la propiedad Xaml no incluir ningn objeto UIElement del
contenido. Los objetos InlineUIContainer se convertirn en objetos Run vacos.
En la siguiente tabla, se muestran varios elementos y las correspondientes propiedades que se incluyen en
la cadena devuelta por la propiedad Xaml.
Elemento Propiedades

Silverlight
FontSize
FontFamily
Foreground
FontWeight
FontStyle
TextElement
FontStretch
Nota:
La propiedad Xaml solo admite valores de atributo que se pueden representar como una
cadena. Por ejemplo, para establecer la propiedad Foreground, solo se puede utilizar un
objeto SolidColorBrush y no un objeto LinearGradientBrush.
FlowDirection
Run
Text
Section HasTrailingParagraphBreakOnPaste
Block TextAlignment
TargetName
NavigateUri
Hyperlink
MouseOverForeground
MouseOverTextDecorations
En el siguiente cdigo, se ilustra cmo mostrar el XAML mediante la propiedad Xaml.

'Set the xamlTb TextBox with the current XAML of the RichTextBox and make it visible. Any changes to the XAML made
'in xamlTb is also reflected back on the RichTextBox. Note that the Xaml string returned by RichTextBox.Xaml will
'not include any UIElement contained in the current RichTextBox. Hence the UIElements will be lost when you
'set the Xaml back again from the xamlTb to the RichTextBox.
Public Sub btnMarkUp_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs)
If btnMarkUp.IsChecked.Value Then
xamlTb.Visibility = System.Windows.Visibility.Visible
xamlTb.IsTabStop = True
xamlTb.Text = rtb.Xaml
Else
rtb.Xaml = xamlTb.Text
xamlTb.Visibility = System.Windows.Visibility.Collapsed
xamlTb.IsTabStop = False
End If
End Sub
Undo
El control RichTextBox permite realizar varias operaciones de reversin en respuesta a las acciones del
usuario. Adems, tambin se puede revertir una operacin de reversin, lo que se denomina rehacer.
Cuando se deshace o se rehace una accin, el control RichTextBox intenta establecer el estado de seleccin
basndose en esas operaciones.
La operacin de deshacer se admite nicamente si el valor de la propiedad IsReadOnly de un control
RichTextBox es false. Asimismo, las operaciones de reversin no se pueden realizar mediante programacin.
5.5.13. Texto y fuentes

Silverlight proporciona varios elementos para presentar el texto, junto con un conjunto de propiedades para
crear una variedad de texto con formato.
Elementos de texto
En trminos generales, un elemento de texto en Silverlight es:
Un control TextBlock.
Un Control diseado para mostrar texto o que incluye texto en alguna parte de su plantilla y
presentacin habituales, como un control TextBox o RichTextBox.
Una clase derivada de TextElement que se puede usar para aplicar formato al texto que se muestra
en un control TextBlock o RichTextBox.
Ciertos tipos especficos de los controles, como DataGridTextColumn.

Silverlight
Estos elementos comparten la caracterstica de tener un conjunto de propiedades que controlan cmo se
muestra el texto en el elemento o en el contenido del elemento. Estas propiedades son: FontFamily,
FontSize, FontStretch, FontStyle, FontWeight y Foreground. La implementacin de las propiedades no
necesariamente se comparte entre los elementos como parte de una herencia comn, pero las
implementaciones son similares en cada elemento de texto.
TextBlock
El objeto TextBlock es el elemento principal para mostrar texto de solo lectura en aplicaciones basadas en
Silverlight. En el XAML siguiente, se muestra cmo definir un elemento TextBlock y establecer su propiedad
Text en una cadena.
<TextBlock Text="Hello, world!" />
En la ilustracin siguiente se muestra el resultado del XAML anterior.

Representacin de TextBlock con propiedades de fuente predeterminadas
TextBlock tambin admite un modelo de texto bsico para su contenido, que se describe en la seccin
"Modelo de texto de TextBlock" en este mismo tema.
Controles de texto
TextBlock no es el nico elemento de la interfaz de usuario de Silverlight que muestra texto directamente.
TextBox, PasswordBox y RichTextBox tambin son elementos de texto. Estas clases se derivan de la clase
Control, que implementa varias propiedades pertinentes para el texto y las fuentes. Sin embargo, no
siempre es cierto que una clase derivada de Control sea capaz de mostrar texto o incluso admita un modelo
de contenido que pueda contener un elemento de texto. A continuacin, se muestra una lista con las
propiedades de texto y fuentes pertinentes que se implementan en la clase Control:
Control.FontFamily
Control.FontSize
Control.FontStretch
Control.FontStyle
Control.FontWeight
Por otra parte, aunque no se usa exclusivamente como una propiedad de fuente, Foreground proporciona
Brush para el texto mostrado en elementos de texto de Silverlight.
Herencia de propiedades de fuente en controles de texto
Uno de los motivos por los cuales las propiedades de fuente y texto se implementan en el nivel de Control
es que los controles puedan admitir la herencia de los valores de las propiedades de fuente. Esto permite
definir un control con componentes que procedan de una plantilla y hacer que las propiedades de fuente
del control primario se apliquen a cualquiera de los componentes o contenido que muestren cadenas de
texto.
Por ejemplo, ComboBox es un control de elementos en el que se pueden mostrar otros elementos o texto.
Si se establecen las propiedades de fuente de ComboBox, los otros elementos o el texto mostrado heredan
automticamente las propiedades de fuente (sin requerir ningn tipo de control especial por parte de la
lgica del control). En el caso del texto mostrado, la herencia de las propiedades de fuente es especialmente
til, porque no habra ninguna otra forma de aplicar atributos a ese texto. Los componentes y el contenido
de texto de un control personalizado pueden heredar sus propiedades de fuente basadas en Control
exactamente de la misma manera.
La herencia de las propiedades de fuente funciona cuando el componente es un control TextBlock. Esto es
as aunque TextBlock no es tcnicamente un control y no comparte las implementaciones de propiedad con
su control primario. Esa es una de las razones por las que son paralelas las propiedades de fuente entre los
controles y TextBlock.
Si se establecen las propiedades de los elementos de texto a travs de Style o una plantilla aplicada, los
elementos secundarios heredan las propiedades en tiempo de ejecucin. Los cambios en tiempo de

Silverlight
ejecucin de las propiedades de los elementos de texto tambin propagan sus nuevos valores a los
elementos de texto secundarios herederos.
Especificacin de propiedades de texto y fuente

Al utilizar elementos de texto, se pueden especificar varios atributos de fuente de los elementos de texto en
XAML, que ponen en un plano paralelo las propiedades disponibles en la clase de ese elemento. En la tabla
siguiente se indican los atributos de fuente que se pueden especificar para cada uno de los elementos de
texto.
Propiedad Descripcin Notas

El valor predeterminado es "Portable User Interface", que se
describe en la seccin "Fuentes locales compatibles" de este tema.
Especifica la familia de
FontFamily puede incluir una cadena de URI que haga referencia a
fuentes deseada,
FontFamily un archivo de fuentes (y a una familia dentro del archivo, separada
como "Times New
por un carcter #). Esto es para los casos en que, en lugar de usar
Roman".
las fuentes del sistema del usuario, se distribuye el archivo de
fuentes como parte del ensamblado primario de la aplicacin.
Especifica el tamao
El valor predeterminado es 11 pxeles. (Nota: si usa exclusivamente
de fuente deseado en
FontSize la API de JavaScript para Silverlight, el valor predeterminado
pxeles. Los valores no
posiblemente sea diferente.
deben ser negativos.
El valor predeterminado es Normal. El efecto de FontStretch
depende de la familia de fuentes concreta que se use y solo puede
Especifica el ancho del
especificar fuentes que ya existan en una familia de fuentes. No
FontStretch glifo deseado de la
ajusta el tamao de los glifos mediante programacin. (Nota: podra
fuente.
considerar la aplicacin de una transformacin al texto si no hay
una asignacin FontStretch disponible).
El valor predeterminado es Normal. El efecto de FontWeight
Especifica si el estilo depende de la familia de fuentes concreta que se use y, por lo
FontStyle de fuente deseado es general, solo puede especificar fuentes que ya existan en una
normal o cursiva. familia de fuentes. Silverlight no crea mediante programacin una
transformacin de distorsin para simular el formato de cursiva.
El valor predeterminado es Normal. El efecto de FontWeight
depende de la familia de fuentes concreta que se use y, por lo
general, solo puede especificar fuentes que ya existan en una
Especifica el grosor del familia de fuentes. Silverlight no crea grosores alternativos mediante
FontWeight glifo deseado de la programacin, salvo cuando una familia contiene una fuente de
fuente. grosor normal, pero no una fuente de grosor de negrita. En este
caso, Silverlight simular una fuente de grosor de negrita
aumentando el ancho de los trazos mediante un algoritmo de
grficos bidimensionales.
De forma predeterminada, no hay decoracin. Para especificar la
Especifica un tipo de decoracin de subrayado, establezca el atributo TextDecorations en
TextDecorations decoracin posible, un Underline. TextDecorations est disponible como propiedad de
subrayado. TextBlock y de elementos insertados, pero no est disponible para
elementos de texto basados en Control.
En el XAML siguiente, se muestra cmo definir un elemento TextBlock y especificar todos los atributos de
fuente mostrados en la tabla anterior (salvo TextDecorations).
Nota:
Dependiendo de la fuente seleccionada por Silverlight, los atributos de fuente especificados pueden no ser
los que se utilizan durante la representacin. Para obtener ms informacin, vea la seccin "Seleccin de
fuentes" ms adelante en este mismo tema.
<TextBlock
Text="Font Attributes"
FontFamily="Verdana"
FontSize="36"

Silverlight
FontStretch="UltraExpanded"
FontStyle="Italic"
FontWeight="ExtraBlack" />
En la ilustracin siguiente se muestra el resultado del ejemplo de contenido XAML anterior.

Representacin de TextBlock con valores de propiedad de fuente definidos
Fuentes en Silverlight
Las fuentes que se pueden usar en un equipo cliente dependen de la versin de Silverlight. En Silverlight 4,
se puede utilizar en el equipo cliente cualquier fuente para cualquier elemento de texto.
En Silverlight 3, se puede usar en el equipo cliente un subconjunto de las fuentes. Para los elementos de
texto en Silverlight 3, se pueden usar las siguientes fuentes latinas si estn disponibles en el equipo local.
Arial
Arial Black
Arial Unicode MS
Calibri
Cambria
Cambria Math
Comic Sans MS
Candara
Consolas
Constantia
Corbel
Courier New
Georgia
Lucida Grande/Lucida Sans Unicode
Segoe UI
Symbol
Tahoma
Times New Roman
Trebuchet MS
Verdana
Wingdings
Wingdings 2
Wingdings 3
Lucida Grande y Lucida Sans Unicode son alias de la misma fuente y se especifican como un par por
motivos de compatibilidad. Portable User Interface es una fuente compuesta. Usa varias fuentes para
implementar el intervalo de idiomas internacionales admitido por Silverlight. Entre estas se incluyen "Lucida
Sans Unicode" y "Lucida Grande" para muchos sistemas de escritura occidentales, as como muchas otras
para los sistemas de escritura de Asia Oriental.
Si desea trabajar con texto de Asia Oriental, los elementos de texto de Silverlight 3 pueden utilizar las
siguientes fuentes de Asia Oriental si estn disponibles en el equipo local:
Batang
Meiryo
MS Gothic
MS Mincho
MS PGothic
MS PMincho
PMingLiU
SimSun
En los equipos con Microsoft Windows, los elementos de texto de Silverlight 3 tambin pueden utilizar las
siguientes fuentes de Asia Oriental si estn disponibles en el equipo local:

Silverlight
BatangChe
DFKai-SB
Dotum
DutumChe
FangSong
GulimChe
Gungsuh
GungsuhChe
KaiTi
Malgun Gothic
Microsoft JhengHei
Microsoft YaHei
MingLiU
MingLiu_HKSCS
MingLiu_HKSCS-ExtB
MingLiu-ExtB
MS UI Gothic
NSimSun
NSimSun-18030
PMingLiu-ExtB
SimHei
SimSun-18030
SimSun-ExtB
Si Silverlight 3 se ejecuta en equipos Macintosh, los elementos de texto tambin pueden usar las siguientes
fuentes de Asia Oriental si estn disponibles en el equipo local:
AppleGothic
Gulim
Hiragino Kaku Gothic Pro
STHeiti
Seleccin de fuentes
La fuente que se especifica no tiene por qu ser la fuente que usa Silverlight. Silverlight elige la fuente entre
las fuentes locales compatibles, las fuentes proporcionadas en un archivo empaquetado al que se hace
referencia en la propiedad FontFamily, o el archivo. zip o .ttf basado en secuencia que se pasa a la
propiedad FontSource. El resultado que se muestra es la coincidencia ms adecuada en funcin de los
valores de las propiedades FontFamily, FontStretch, FontStyle y FontWeight. Es importante especificar estas
cuatro propiedades de fuente para garantizar que la seleccin de la fuente del elemento de texto sea
adecuada y coherente.
Especificacin de fuentes no predeterminadas
Silverlight no incluye ninguna fuente en su paquete de instalacin, sino que se basa en las fuentes locales
del sistema para obtener sus valores predeterminados. Si desea usar una fuente para un elemento de texto
que no se encuentra en la lista de fuentes locales admitidas, puede especificar la fuente en XAML mediante
la propiedad FontFamily o en el cdigo mediante la propiedad FontSource. La propiedad FontFamily puede
especificar un archivo de fuentes nico o un archivo zip que contenga los archivos de fuentes, y puede
incorporar una secuencia de reserva. Cualquier archivo de fuentes al que se haga referencia para el uso de
FontFamily en XAML se debe incrustar como recurso dentro de un ensamblado. Cuando se usa FontSource,
el cdigo puede cargar el archivo de fuentes de origen para la fuente (o un zip de fuentes) desde una
secuencia, como un almacenamiento aislado, o desde un empaquetado de XAP.
Colores y pinceles para el primer plano del texto

La propiedad Foreground permite especificar un objeto Brush para el texto representado. En el siguiente
XAML, se muestra el uso ms sencillo de Foreground, el cual consiste en usar una cadena de color con
nombre que aplica al texto un objeto SolidColorBrush de ese color. Observe que Foreground se establece
por separado en TextBlock y en cada uno de los elementos de texto Run que contiene.


Silverlight
<TextBlock
FontFamily="Verdana"
Foreground="Navy">
Navy
<Run Text="DodgerBlue " Foreground="DodgerBlue"/>
<Run Text="LightSteelBlue " Foreground="LightSteelBlue"/>
</TextBlock>
Un color slido no es la nica manera de aplicar un primer plano a una fuente. En Silverlight se puede usar
cualquiera de las clases derivadas de Brush, incluidas RadialGradientBrush, LinearGradientBrush, ImageBrush
y VideoBrush. Si especifica estos pinceles en XAML, debe usar la sintaxis de elementos de propiedad o una
referencia tal como una referencia de recurso. En el cdigo XAML siguiente se muestra un ejemplo de cmo
se usa la sintaxis de elementos de propiedad y cmo se especifica ImageBrush para el texto:
<TextBlock Text="SHRUBBERY">
<TextBlock.Foreground>
<ImageBrush ImageSource="forest.jpg"/>
</TextBlock.Foreground>
</TextBlock>
En la ilustracin siguiente, se muestra el texto representado del XAML anterior.

TextBlock que representa un pincel de imagen
Modelo de texto de TextBlock

Cuando se establece el texto de un control TextBlock, tambin se puede usar un formato de texto interno
intuitivo en lugar de un conjunto de propiedades Text explcitas, como en el ejemplo siguiente:
<TextBlock>Hello, world!</TextBlock>
Nota:
El espacio en blanco inicial o final no se conserva al establecer la propiedad Text; solamente se conserva el
espacio en blanco interno.
Uso de los objetos Run y LineBreak

En lugar de mostrar una sola cadena, un control TextBlock tambin puede mostrar una serie de cadenas
incluidas en diferentes elementos Run, donde cada elemento puede tener un formato diferente en el nivel
de caracteres. El objeto LineBreak representa una nueva lnea explcita en un control TextBlock y,
generalmente, se usa entre elementos Run circundantes. LineBreak y Run comparten una clase base (Inline)
que permite que TextBlock contenga una coleccin InlineCollection fuertemente tipada del contenido del
modelo de texto. Dicha coleccin InlineCollection es tambin la propiedad del contenido XAML TextBlock y
el resultado final es que, para especificar los elementos en el modelo TextBlock, simplemente se especifican
los distintos elementos LineBreak y Run como elementos secundarios de TextBlock.
En el XAML siguiente, se muestra cmo definir varias cadenas en un control TextBlock con diferentes
formatos mediante objetos Run, separados por objetos LineBreak.

<Canvas>
<TextBlock
FontFamily="Arial" Width="400" Text="Sample text formatting runs">
<LineBreak/>
<Run Foreground="Maroon" FontFamily="Courier New" FontSize="24">Courier New 24</Run>
<LineBreak/>
<Run Foreground="Teal" FontFamily="Times New Roman" FontSize="18" FontStyle="Italic">Times New Roman Italic
18</Run>
<LineBreak/>
<Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="14" FontWeight="Bold">Verdana Bold 14</Run>
</TextBlock>
</Canvas>
En la ilustracin siguiente, se muestra el texto con formato representado del XAML anterior.
TextBlock rendering multiple Run objects

Silverlight
LineBreak hace que el texto de cada Run se muestre en una lnea independiente. Sin LineBreak, el texto de
cada Run fluira junto, como una sola lnea, y a menudo quedara cortado, ya que se excedera el ancho del
objeto TextBlock o el ancho del rea de contenido de Silverlight. En la ilustracin siguiente se muestra cmo
se representara el texto con formato si no se utilizaran objetos LineBreak.
TextBlock que representa varios objetos Run sin objetos LineBreak
Acceso al modelo de texto de TextBlock en el cdigo

En realidad hay dos propiedades que participan en el modelo de texto TextBlock: Text y Inlines. No se
recomienda cambiar el valor de Text en tiempo de ejecucin, ya que se podra eliminar el formato de
elemento de fuente de cada uno de los elementos Run, as como quitar los elementos LineBreak de un
control TextBlock que se cre originalmente con elementos insertados y no solo Text.
Ajustar el texto
La propiedad TextWrapping declara cmo debe ajustarse el texto en un objeto TextBlock. De forma
predeterminada, el texto de un control TextBlock no se ajusta. Cuando el texto no se ajusta, puede darse
uno de los dos casos siguientes, en funcin de otra configuracin:
Si TextBlock no tiene establecido un valor Width explcito, TextBlock se expande segn el tamao
del texto que contenga, y se actualiza el valor de ActualWidth. Sin embargo, TextBlock siempre est
dentro de algn otro elemento contenedor primario e, inevitablemente, en alguna parte a la
cadena de elementos primarios de diseo, hay una restriccin de ancho. Esto har que el texto se
recorte si supera la restriccin de ancho activa del diseo.
Si TextBlock tiene establecido un valor Width explcito, el propio control TextBlock recorta el texto
si supera el valor Width fijo.
Para usar el ajuste de texto, establezca TextWrapping en el valor de enumeracin Wrap. Por ejemplo, en
XAML:
<TextBlock Text="The quick red fox jumped over the lazy brown dog." TextWrapping="Wrap" />.
El ajuste de texto tiene el siguiente comportamiento:

Si TextBlock no tiene establecido ningn valor Width explcito, el texto se ajusta segn la restriccin
de ancho activa del diseo.
Si TextBlock tiene establecido un valor Width explcito, el texto se ajusta segn el valor fijo de
Width.
Se puede detectar el texto recortado mediante programacin, porque el valor ActualWidth de un control
TextBlock siempre notifica el tamao expandido del texto, aun cuando no se ajusta dentro del contenedor
de diseo. Si se sabe dnde leer el valor de la propiedad Width del contenedor de diseo que realiza el
recorte, se podrn comparar estos dos valores.
En las siguientes ilustraciones, se muestra el comportamiento del ajuste de texto.
TextBlock que representa texto no ajustado y ajustado
Cmo TextWrapping afecta a ActualWidth y ActualHeight

Silverlight
Texto multilnea de TextBlock

Ya sea debido al ajuste o a elementos LineBreak explcitos, el texto de un control TextBlock es
potencialmente texto multilnea. Hay dos propiedades de TextBlock que determinan cmo se muestra un
texto multilnea: LineHeight y LineStackingStrategy. La propiedad LineHeight establece el alto de cada lnea
de contenido del control TextBlock global. La propiedad LineHeight es realmente el alto entre lneas base,
de modo que, si se establece un valor de LineHeight menor que el valor de FontSize, es posible que el texto
quede recortado en la dimensin vertical. Normalmente, LineHeight se deja sin establecer y se confa en un
comportamiento predeterminado que presenta un alto de lnea efectivo basado en FontSize ms un
desplazamiento. Si se usa, LineStackingStrategy afecta a ese algoritmo predeterminado.
LineStackingStrategy.MaxHeight (valor predeterminado) basa el alto de lnea efectivo en el alto mximo de
cualquier carcter de la fuente. LineStackingStrategy.BlockLineHeight basa el alto de lnea efectivo en la
medida de diseo de la fuente en "bloque", que tambin se almacena como un valor en la fuente.
Aplicacin de transformaciones al texto de TextBlock
Las transformaciones pueden modificar la presentacin del texto en la aplicacin. Las transformaciones se
pueden aplicar a un gran nmero de diferentes elementos de la interfaz de usuario, incluidos elementos de
texto. Un escenario en el que se podran usar transformaciones en el texto es para animar la transformacin,
para obtener un efecto visual. A continuacin figuran algunas transformaciones que se pueden usar para un
texto:
RotateTransform para invertir el texto.
ScaleTransform para texto que supera el tamao mximo admitido en la fuente de forma inherente.
SkewTransform para simular el formato de cursiva o la distorsin.
TranslateTransform para desplazamientos y efectos de sombreado.
Al aplicar transformaciones al texto, se debera considerar primero si hay alguna otra manera de obtener los
mismos, o similares, resultados mediante una propiedad especfica de los elementos de texto. Por ejemplo,
si una familia de fuentes admite un FontStyle en cursiva, el resultado ser ms atractivo visualmente que si
se aplica una transformacin SkewTransform.
Animacin de texto de TextBlock
El valor de muchas propiedades de texto se puede animar, incluidos el tamao de texto de FontSize, la
posicin mediante un elemento TranslateTransform, y el color.
La animacin de propiedades de texto (en especial el tamao o el pincel de primer plano) puede usar
muchos recursos del sistema. Esto se debe a que cuando Silverlight representa el texto, utiliza el ajuste a la
rejilla base o "hinting" para suavizar cada glifo del texto. Si anima el tamao de texto (mediante Transform o
FontSize), Silverlight ajustar a la rejilla los glifos de cada fotograma, lo que resulta costoso y puede
deformar el fotograma. Si la aplicacin requiere cambios de escala dinmicos de texto grande, quizs sea
ms conveniente usar una de las dos alternativas siguientes:
Simular el texto con grficos vectoriales, como Path.
Establecer la propiedad adjunta TextOptions.TextHintingMode en el valor Animated en el elemento
donde se anima el texto.
Silverlight incluye un control TextBox y el control PasswordBox derivado, en su conjunto bsico de controles.
El control TextBox se utiliza normalmente para capturar la entrada de texto de un usuario. El control
PasswordBox se utiliza normalmente en los escenarios de autenticacin. La principal diferencia entre estos

Silverlight
controles reside en que se muestran los caracteres que se escriben en un control TextBox y se ocultan los
caracteres que se escriben en un control PasswordBox.
Cuando un control TextBox tiene el foco del teclado o cuando el puntero del mouse se mueve sobre l, el
cursor cambia normalmente a IBeam. Este comportamiento se basa en las plantillas predeterminadas y se
puede modificar para cada instancia.
Ajuste del texto de TextBox
El control TextBox admite el ajuste de texto. De forma predeterminada, la propiedad TextWrapping se
establece en NoWrap. Sin ajuste de texto, si el texto escrito supera el valor explcito de Width o una
restriccin de ancho impuesta por un contenedor de diseo primario, se desplazar de forma que el cursor
siempre permanezca a la vista. Si se establece el valor de TextWrapping en Wrap, el texto no se desplazar
horizontalmente y se ajustar dentro del control TextBox. Sigue siendo posible que se den situaciones en las
que el texto de entrada no se vea si se supera el valor de Height o el alto de representacin efectivo del
control TextBox.
Texto multilnea de TextBox
TextBox puede admitir texto multilnea, si AcceptsReturn se establece en true. En este modo, la tecla
ENTRAR/RETORNO se registra como una nueva lnea. En este caso, cualquier carcter escrito para la lnea
nueva se incluye potencialmente en los valores de SelectedText o Text.
Modelo de seleccin de TextBox
TextBox incluye varias API relacionadas con las reas de texto seleccionadas:
Las propiedades SelectionBackground y SelectionForeground determinan cmo se muestra el rea
seleccionada.
La propiedad SelectedText obtiene el texto seleccionado y tambin puede establecerse.
Las propiedades SelectionStart y SelectionLength obtienen el intervalo de seleccin dentro del
control Text global, y se pueden establecer.
El evento SelectionChanged se produce cuando cambia el valor de SelectedText o SelectionStart.
De forma predeterminada, para seleccionar un texto, se arrastra el mouse o se mantiene presionado la tecla
MAYS mientras se presiona una de las teclas de direccin. Por esta y otras razones, el control TextBox a
veces administra y suprime algunos de los eventos de entrada generales, como MouseLeftButtonDown o
KeyDown de algunas teclas especficas. Esas teclas son las teclas que pueden mover el cursor, como las
teclas de direccin.
RichTextBox
RichTextBox es un control que permite mostrar o modificar contenido enriquecido, como prrafos,
hipervnculos e imgenes incorporadas.
Otros controles relacionados con el texto

En esta seccin, se describen otros controles que estn relacionados de alguna manera con la visualizacin
de texto.
Label
Label es un control que muestra el contenido y puede asociarse a otro control. Label se deriva de
ContentControl y tambin puede mostrar un texto. Label tiene la propiedad Target y es compatible con la
automatizacin de modo que se puede asociarlo a otro control al que hace referencia. Normalmente, el
control Label utiliza simplemente una cadena como Content, pero es posible proporcionar un elemento
contenedor para tener un mayor control sobre el formato de texto. El control Label est disponible en las
bibliotecas de cliente del SDK de Silverlight.
AutoCompleteBox
AutoCompleteBox es un control compuesto que consta de un control TextBox para las entradas del usuario
y una lista desplegable que contiene las posibles coincidencias con la entrada en el control TextBox.
AutoCompleteBox tiene la propiedad Text, pero en lugar de exponer directamente las diversas propiedades
de los elementos de texto, expone un estilo TextBoxStyle para que se puedan aplicar establecedores de

Silverlight
estilo que afectan al elemento TextBox del control compuesto. AutoCompleteBox est disponible en las
bibliotecas de cliente del SDK de Silverlight.
ItemsControls
ItemsControl o HeaderedItemsControl incluye la capacidad de mostrar elementos de texto mediante
ranuras de contenido. El texto incluido en los elementos es solo una cadena de texto, y no admite la
aplicacin de estilos por separado o un modelo de objeto de texto. Sin embargo, se puede usar la
caracterstica de herencia de valores de propiedad de las propiedades de elementos de texto para
establecer los valores del elemento primario del control, que despus se aplica al texto de los elementos.
ComboBox tiene una funcionalidad similar (tambin es un control ItemsControl).
Popup, Tooltip
Popup se usa a menudo para mostrar texto, pero no tiene ninguna propiedad que tome una cadena. En su
lugar, tiene una propiedad Child que puede tomar cualquier UIElement. Normalmente, TextBlock se usa
como valor Child, se establece un valor Text y, opcionalmente, se aplican estilos al texto mediante las otras
propiedades de TextBlock.
ToolTip usa la propiedad adjunta ToolTipService.ToolTip para la posicin y se puede usar una cadena para
este valor sin ni siquiera incluir un elemento ToolTip en el cdigo XAML. De lo contrario, se debera
especificar un elemento de objeto ToolTip como valor de elemento de la propiedad ToolTipService.ToolTip.
Por ejemplo, se puede utilizar un control TextBlock y establecer su propiedad Text.
El contenido de Popup o ToolTip no heredarn las propiedades de elemento de fuente, ni siquiera del
elemento raz de la pgina XAML. Esto se debe a que se considera que estos objetos estn fuera del rbol
visual general de Silverlight cuando se muestran, y los valores de propiedad de los elementos de texto
heredan del rbol visual. Si desea aplicar estilos al texto de un control Popup o ToolTip, establezca los
atributos o aplique los estilos en un control TextBlock explcito que declare como contenido. De lo contrario,
el texto usar los valores predeterminados de la ranura de contenido, que son los valores predeterminados
de TextBlock.
Administracin de los eventos de teclado y texto de los elementos de

texto
Una tarea muy comn en las aplicaciones de Silverlight consiste en administrar las entradas que se realizan
a travs del teclado. Estas entradas se administran en un nivel general mediante dos eventos que se
implementan en UIElement: KeyUp y KeyDown. Sin embargo, en muchas ocasiones, no se usan estos
eventos en concreto para procesar las entradas de texto o teclado en elementos de texto o controles de
texto especficos. En su lugar, se utilizan eventos especficos del control.
TextBlock es, en concepto, un elemento de la interfaz de usuario de solo lectura, y los usuarios no pueden
cambiar el texto directamente. Tampoco se puede establecer el foco en un control TextBlock, y, para
originar eventos de tecla, es necesario que el foco est en un elemento.
TextBox est pensado para los datos introducidos por el usuario, puede recibir el foco y origina eventos de
tecla. Sin embargo, la clase TextBox tiene el control de nivel de clase de KeyUp y KeyDown. Esto significa
que, si registra los controladores de eventos de estas teclas, por ejemplo, con el cdigo XAML <TextBox
KeyDown="tb1_KeyDown" .../>, en ocasiones no se invocarn sus controladores porque la lgica de la clase
TextBox podra marcar el evento como administrado antes de que su instancia lo reciba. Esto forma parte
del diseo intencionado del control. Algunas teclas no se consideran texto sino que se consideran
especficas del comportamiento de la interfaz de usuario del control. Por consiguiente, los eventos KeyUp y
KeyDown no generan eventos TextChanged ni SelectionChanged.
Si se encuentra con una situacin en la que necesite administrar especficamente los eventos KeyUp y
KeyDown para todos los casos de teclas de TextBox o una clase derivada, an podr registrar un
controlador si usa el mtodo AddHandler para adjuntar los controladores.
KeyUp y KeyDown son eventos enrutados. Esto significa que, si TextBoxno los administra, pueden traspasar
el rbol visual e invocar los controladores en los elementos primarios sucesivos.
A menudo, TextBox se usa en escenarios de enlace de datos bidireccional. TextBox.Text es nico por el
hecho de que, de forma predeterminada, actualiza el destino solo cuando TextBox pierde el foco, para evitar

Silverlight
la propagacin de los datos con cada pulsacin de tecla del usuario antes de que el usuario haya terminado
de escribir el texto.
Glyphs
La clase Glyphs tambin se usa para mostrar texto. Glyphs administra el texto en un nivel inferior que
TextBlock o TextBox. La clase Glyphs est pensada para tratar cada glifo en su contenido de texto como una
posible entidad independiente, con la capacidad de controlar por separado los desplazamientos de bloque
y otras caractersticas. En lugar de la propiedad Text, Glyphs tiene la propiedad UnicodeString. Glyphs no
tiene ningn valor predeterminado activo, ni siquiera para la familia de fuentes ni el tamao de fuente. Se
espera que los usuarios de Glyphs empaqueten un subconjunto del archivo de fuentes para un valor de
FontUri. En general, el modelo de Glyphs es muy prctico cuando se usan herramientas que generan los
tipos de informacin de texto de bajo nivel que la clase Glyphs puede utilizar.
Glyphs no se considera un elemento de texto para la herencia de los valores de propiedad de los elementos
de texto. Ninguna de las propiedades de Glyphs se alinea directamente con las propiedades de los
elementos de fuente, como FontFamily o FontSize, debido al diferente enfoque que tiene Glyphs con
respecto a la presentacin de texto.
5.5.14. WebBrowser y WebBrowserBrush

Los controles WebBrowser y WebBrowserBrush se han diseado para que se usen conjuntamente a fin de
mostrar contenido HTML enriquecido en aplicaciones Silverlight que se ejecutan fuera del explorador.
WebBrowser
A partir de Silverlight 3, existe la posibilidad de crear aplicaciones Silverlight que se ejecutan fuera del
entorno de hospedaje del explorador. El control WebBrowser permite mostrar contenido HTML en este
entorno de hospedaje.
El control WebBrowser se puede agregar en XAML o en cdigo. De forma predeterminada, el control
WebBrowser no tiene tamao. Por consiguiente, es preciso especificar las propiedades Height y Width para
que el control se muestre en la aplicacin. Cuando se muestra el control WebBrowser en una aplicacin que
se ejecuta en el explorador, se ve un rectngulo con el alto y el ancho especificados en lugar del control.
El contenido HTML que se va a mostrar en el control WebBrowser se puede establecer de varias maneras.
Se puede llamar al mtodo NavigateToString y pasar una cadena que contenga el contenido HTML
que se desea mostrar.
Se puede establecer la propiedad Source en un identificador URI completo o relativo.
Se puede llamar al mtodo Navigate y pasar un identificador URI completo o relativo para el
contenido HTML que se desea mostrar.
Nota de seguridad:
Por razones de seguridad, asegrese de que el contenido HTML que se va a mostrar con el mtodo
NavigateToString proceda de un origen de confianza.
En el ejemplo siguiente, se muestra cmo establecer el contenido HTML de un control WebBrowser

mediante la propiedad Source.
<TextBlock Text="WebBrowser Control" />
<WebBrowser Source="http://localhost/HTMLPage1.html" Height="160" Width="160" x:Name="WB1"/>
<Button Width="200" x:Name="Button1" Content="Click for HTML content" Click="Button1_Click" />
Adems, se puede llamar a los scripts en el contenido HTML llamando al mtodo InvokeScript y pasando el
nombre del script que se desea ejecutar. El script debe encontrarse en el contenido HTML cargado; de lo
contrario, se producir una excepcin.
Se puede usar el mtodo Notify del objeto Window.external para la comunicacin entre JavaScript en el
contenido HTML y el cdigo administrado. Cuando esto sucede, se produce el evento ScriptNotify.
En el ejemplo siguiente, se muestra cmo usar el mtodo InvokeScript y controlar el evento ScriptNotify. En
este ejemplo, se llama al mtodo InvokeScript, que a su vez invoca la funcin LoadSearch en el siguiente
HTML. El archivo HTML debe estar hospedado en el mismo dominio que la aplicacin de Silverlight.

Silverlight
<html>
<head>
<title></title>
<script type="text/javascript" >
function LoadSearch(searchString) {
window.location = "http://www.bing.com/search?q=" + searchString
window.external.notify("Search completed")
}
</script>
</head>
<body>
Silverlight WebBrowser control.
</body>
</html>

Public Sub New()
End Sub
Private Sub WB1_ScriptNotify(ByVal sender As Object, ByVal e As NotifyEventArgs)

Button1.Content = e.Value
Button1.IsEnabled = False
End Sub
Private Sub Button1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

Dim results As Object = WB1.InvokeScript("LoadSearch", New String() {"Silverlight"})
End Sub
End Class
<StackPanel x:Name="LayoutRoot" Height="358" Width="489" Background="LightBlue">

<WebBrowser x:Name="WB1" Source="http://localhost/HTMLPage1.htm" Height="272" Width="379"
ScriptNotify="WB1_ScriptNotify" Margin="5" />
<Button Width="200" x:Name="Button1" Content="Click to search!" Click="Button1_Click" />
</StackPanel>
No se permite girar, aplicar efectos ni crear controles WebBrowser parcialmente opacos. Adems, no se
puede utilizar el control WebBrowser para superponer contenido de Silverlight sobre contenido HTML. Para
estos escenarios, se debe utilizar WebBrowserBrush.
Nota:
Si desea utilizar el control WebBrowser en Silverlight Designer, deber agregarlo al Cuadro de
herramientas; para ello, haga clic con el botn secundario en el Cuadro de herramientas y seleccione Elegir
elementos.
WebBrowserBrush
WebBrowserBrush es un tipo de objeto Brush similar a VideoBrush. Sin embargo, en lugar de dibujar un rea
con contenido de vdeo, la dibuja con contenido HTML. Este contenido HTLM lo proporciona un control
WebBrowser. Al igual que con los dems pinceles, se puede utilizar un control WebBrowserBrush para
dibujar los siguientes elementos:
El relleno (Fill) de una forma, como Rectangle.
El contenido de la geometra de una forma Path.
Background de un Canvas.
Foreground de un TextBlock.
A diferencia de lo que sucede con los otros tipos de pinceles, el contenido del control WebBrowserBrush
debe actualizarse manualmente llamando al mtodo Redraw.
Para usar un control WebBrowserBrush, se crea un control WebBrowser y se establece su propiedad Source.
Se aplica el control WebBrowserBrush al objeto que se desea dibujar y se establece la propiedad
SourceName del objeto WebBrowserBrush en el nombre del control WebBrowser que se ha creado.
Si cambia el contenido del control WebBrowser, es preciso llamar al mtodo Redraw para actualizar el
control WebBrowserBrush. Adems, el usuario no puede interactuar con el contenido que se muestra con
un control WebBrowserBrush. En el siguiente ejemplo, se refleja cmo mostrar contenido con un control

Silverlight
WebBrowserBrush. En este ejemplo, el contenido del control WebBrowserBrush se actualiza cuando el

usuario mueve el mouse.
Private Sub LayoutRoot_MouseMove(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
WBB1.Redraw()
End Sub
<StackPanel x:Name="LayoutRoot" Background="Blue" MouseMove="LayoutRoot_MouseMove">

<WebBrowser Name="WB1" Source="Hello.html" Height="150" Width="150" />
<Rectangle Height="150" Width="150" >
<Rectangle.Fill>
<WebBrowserBrush SourceName="WB1" Opacity=".5" x:Name="WBB1"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
Usar WebBrowser y WebBrowserBrush conjuntamente

Por lo general, los controles WebBrowser y WebBrowserBrush se utilizan conjuntamente cuando se desea
mostrar, girar, aplicar efectos o interactuar con contenido HTML.
5.5.14.1. Cmo: Usar WebBrowser y WebBrowserBrush para contenido HTML

enriquecido
Puede darse el caso de que desee mostrar contenido HTML en una aplicacin de Silverlight que se ejecuta
fuera del explorador. Quizs desee girar o aplicar efectos al contenido HTML, pero a la vez mantener la
capacidad del usuario para interactuar con el contenido. Para ello, debe agregar los controles WebBrowser y
WebBrowserBrush a la aplicacin e intercambiarlos dependiendo de si el usuario interacta con el
contenido o no. En el siguiente ejemplo de cdigo, se muestra cmo usar los controles WebBrowser y
WebBrowserBrush.
Ejemplo
Este ejemplo de cdigo contiene un control WebBrowser denominado WB1 y un control WebBrowserBrush
denominado htmlBrush. La propiedad de origen del control WebBrowser est establecida en
http://www.bing.com. En cambio, el origen del control WebBrowserBrush est establecido en el control
WebBrowser.
Inicialmente, el control WebBrowserBrush est oculto y se muestra el control WebBrowser. Cuando el
usuario mueve el mouse, se oculta el control WebBrowser y se muestra el control WebBrowserBrush, con
una transformacin aplicada al pincel. Cuando el usuario hace clic en el contenido HTML, indicando que
desea interactuar con el HTML, se vuelve a mostrar el control WebBrowser y se oculta el control
WebBrowserBrush.
El contenido del control WebBrowserBrush se actualiza a intervalos regulares de modo que se mantenga
sincronizado con el control WebBrowser. En el siguiente ejemplo, se utiliza un objeto DispatcherTimer para
invocar Redraw en el control WebBrowserBrush cada 100 milisegundos.
Para probar este ejemplo, debe habilitar la aplicacin de modo que pueda ejecutarse fuera del explorador.
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Threading

Private WithEvents dt As New DispatcherTimer()
Public Sub New()
dt.Interval = New TimeSpan(100)
End Sub

Silverlight
Private Sub dt_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles dt.Tick
htmlBrush.Redraw()
End Sub
Private animating As Boolean = False
Private Sub LayoutRoot_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)

dt.Start()
If Not animating Then
WB1.Visibility = Visibility.Collapsed
Brush.Visibility = Visibility.Visible
Spin.Begin()
animating = True
End If
End Sub
Private Sub brush_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)

Spin.[Stop]()
WB1.Visibility = Visibility.Visible
Brush.Visibility = Visibility.Collapsed
animating = False
End Sub
End Class
<UserControl x:Class="WebBrowserBrushEx.MainPage"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="412">
<Grid x:Name="LayoutRoot" Background="LightBlue" MouseMove="LayoutRoot_MouseMove" ShowGridLines="True">
<RowDefinition />
<Grid.Resources>
<Storyboard x:Name="Spin" >
<DoubleAnimation
Storyboard.TargetName="myTransform"
From="0" To="360" Duration="0:0:5"
RepeatBehavior="Forever" />
</Storyboard>
</Grid.Resources>
<TextBlock Margin="5" Text="Right-click to install the out-of-browser application" />
<WebBrowser Grid.Row="1" Visibility="Visible" Name="WB1" Height="350" Width="350" Source="http://www.bing.com" />

<Rectangle Grid.Row="1" x:Name="brush" Width="350" Height="350" Visibility="Collapsed"
MouseLeftButtonDown="brush_MouseLeftButtonDown" >
<Rectangle.Fill>

<WebBrowserBrush x:Name="htmlBrush" SourceName="WB1"/>
</Rectangle.Fill>
<RotateTransform x:Name="myTransform" Angle="45" CenterX="175" CenterY="175" />
</Rectangle>
</Grid>
</UserControl>
5.6. Personalizacin de controles

Silverlight permite personalizar los controles de varias maneras. Puede personalizar la mayora de los
controles al modificar su plantilla predeterminada. En este tema se describen los conceptos bsicos que
debe conocer para modificar el aspecto visual de un control existente o crear un nuevo control desde el
principio.
Control personalizado
Los controles personalizados separan la lgica del aspecto visual. Un control personalizado se usa cuando
se desea que exista una clara separacin entre el aspecto visual y la lgica. De esta forma, los diseadores
pueden modificar el aspecto visual con posterioridad sin obtener acceso al cdigo ni modificarlo.

Silverlight
Las dos maneras de modificar el aspecto de un control personalizado son el uso de estilos y la modificacin
de plantillas (lo que tambin se conoce como cambio de aspecto visual).
Estilos
Los estilos son bsicamente una coleccin de valores de propiedad. El uso de estilos es una manera de
cambiar fcilmente las caractersticas visuales de un control.
Plantillas
Una plantilla es un archivo XAML que define el aspecto visual y el comportamiento visual de un control. Se
puede reemplazar completamente el aspecto del control si se modifica o reemplaza su control
ControlTemplate predeterminado. Se puede modificar ControlTemplate para agregar, reorganizar o eliminar
los elementos de un control. En la ilustracin siguiente se muestra una comparacin de dos botones. En el
primer botn se modifica un estilo y en el segundo se modifica ControlTemplate.
Contrato de control
Los controles personalizados mantienen una separacin estricta entre la lgica y los elementos visuales.
Aunque dicha separacin tiene ventajas, como la posibilidad de personalizar los elementos visuales sin
afectar a la lgica, puede ser complicado para los diseadores de controles saber qu elementos necesita el
control. Esto se logra a travs del contrato de control. Un contrato de control es un acuerdo entre los
elementos lgicos y visuales del control. Por lo general, un contrato de control se compone de:
Las propiedades visuales expuestas en la clase de control.
Los elementos previstos en la plantilla.
La lgica prevista asociada a los elementos de la plantilla.
Modelo de estados y elementos

Silverlight implementa el contrato de control a travs de un modelo de elementos y estados. El modelo de
elementos y estados mantiene la separacin entre la lgica y los elementos visuales, sin dejar de mantener
un contrato de control explcito entre el diseador y el programador. Los conceptos principales del modelo
de elementos y estados son los elementos, los estados, los grupos de estados y las transiciones visuales.
Puede encontrar los elementos y estados con nombre principales de un control de Silverlight en la seccin
Sintaxis de la pgina de clase del control. Por ejemplo, puede encontrar los elementos y estados con
nombre de un cuadro de texto en la seccin Sintaxis del tema TextBox. Encontrar una lista ms completa
de los elementos y estados de la mayora de los controles en el tema Estilos y plantillas de controles. Por
ejemplo, los elementos y estados con nombre de un cuadro de texto se muestran en Estilos y plantillas de
TextBox.
Nota:
Se recomienda usar el modelo de elementos y estados para crear un control, aunque el tiempo de ejecucin
de Silverlight no lo requiere. Sin embargo, si desea que el control se abra y se represente correctamente en
Expression Blend, debe seguir el modelo de elementos y estados compatible.
Elementos
Los elementos son componentes con nombre que estn incluidos en la plantilla de control. La lgica del
control espera que estos elementos estn en la plantilla de control.
En la ilustracin siguiente se muestran los elementos del control ComboBox. El control ComboBox tiene
cinco elementos con nombre: ContentPresenter, ContentPresenterBorder, DropDownToggle, ScrollViewer y
Popup. A cada uno de ellos se obtiene acceso mediante el cdigo del control. Cuando se presiona

Silverlight
DropDownToggle, se abre el elemento Popup y muestra los elementos de ComboBox. Al hacer clic en un
elemento, se muestra en ContentPresenter.
Estados
Un estado visual es la manera en que se muestra el control en un estado determinado. Por ejemplo, en la
ilustracin siguiente se muestra cmo un botn tiene un color de fondo diferente en los estados Normal,
MouseOver y Pressed.
Grupos de estados
Los grupos de estados son un conjunto de estados mutuamente excluyentes. Los distintos grupos de
estados son ortogonales. Esto significa que un control puede encontrarse en dos estados diferentes al
mismo tiempo solo si los estados pertenecen a distintos grupos de estados.
Un control CheckBox tiene cuatro grupos de estados: CommonStates, CheckStates, FocusStates y
ValidationStates. Por consiguiente, CheckBox puede encontrarse en estado Normal y Checked al mismo
tiempo, porque estos estados pertenecen a distintos grupos de estados. Sin embargo, un control CheckBox
no puede encontrarse al mismo tiempo en estado Normal y Pressed, porque ambos estados pertenecen al
grupo CommonStates. En la ilustracin siguiente se muestran los grupos de estados CommonStates y
CheckStates de CheckBox.
Transiciones visuales
Las transiciones visuales representan el aspecto visual de un control cuando pasa de un estado a otro. En la
ilustracin siguiente, el color de fondo del control Button personalizado cambia gradualmente de ms claro
a ms oscuro a medida que pasa del estado MouseOver al estado Pressed.
5.6.1. Personalizar la apariencia de un control existente mediante una plantilla

ControlTemplate
Una plantilla ControlTemplate especifica la estructura y el comportamiento visuales de un control. Puede
personalizar el aspecto de un control proporcionndole una nueva plantilla ControlTemplate. Cuando se
crea una plantilla ControlTemplate, se reemplaza el aspecto de un control existente sin cambiar su
funcionalidad. Por ejemplo, puede hacer que los botones de la aplicacin sean redondos en lugar de
rectangulares como suelen ser, pero cada botn seguir generando el evento Click.

Silverlight
En este tema se explica las distintas partes de la plantilla ControlTemplate, se muestra cmo se crea una
plantilla ControlTemplate simple para un control Button y se explica cmo entender el contrato de un
control para que pueda personalizar su aspecto. Dado que las plantillas ControlTemplate se crean en XAML,
puede cambiar un aspecto del control sin escribir ningn cdigo. En los ejemplos de este tema se muestra
el marcado XAML que se utiliza para personalizar el aspecto de Button. Para obtener el ejemplo completo
que se explica en este tema, vea Tutorial: Personalizar la apariencia de un botn mediante una plantilla
ControlTemplate. Tambin puede utilizar un diseador como Microsoft Expression Blend 2 Service Pack 1
para conseguir el mismo fin.
Requisitos previos
En este tema se supone que entiende la creacin y el uso de controles y estilos, como se describen en
Introduccin a los controles, y que conoce los fundamentos de personalizacin de controles que se explican
en Personalizacin de controles.
Nota:
Los conceptos descritos en este tema se aplican a los elementos que heredan de la clase Control, salvo
UserControl. No se puede aplicar una plantilla ControlTemplate a un control UserControl.
Cundo se debe crear una plantilla ControlTemplate

Los controles tienen muchas propiedades, como Background, Foreground y FontFamily, que puede
establecer para especificar aspectos diferentes del aspecto del control, pero los cambios que puede realizar
estableciendo estas propiedades son limitados. Por ejemplo, puede establecer la propiedad Foreground en
azul y la propiedad FontStyle en cursiva en un control CheckBox.
Sin la capacidad de crear una nueva plantilla ControlTemplate para los controles, todos los controles de
todas las aplicaciones basadas en Silverlight tendran el mismo aspecto general, lo que limitara la capacidad
de crear una aplicacin con una apariencia personalizada. De forma predeterminada, todos los controles
CheckBox tienen caractersticas similares. Por ejemplo, el contenido de CheckBox aparece siempre a la
derecha del indicador de seleccin y la marca de verificacin siempre se utiliza para indicar que el control
CheckBox est activado.
Una plantilla ControlTemplate se crea cuando se desea personalizar el aspecto del control ms all de las
posibilidades que ofrece establecer sus propiedades. En el ejemplo del control CheckBox, supongamos que
desea que el contenido de la casilla se encuentre encima del indicador de seleccin y que aparezca una X
para indicar que CheckBox est activado. Especificar que esta es la plantilla ControlTemplate de CheckBox.
Haga clic en el vnculo siguiente para ver un control CheckBox que utiliza una plantilla ControlTemplate
predeterminada, y un control CheckBox que utiliza una plantilla ControlTemplate personalizada para colocar
el contenido de CheckBox por encima del indicador de seleccin y mostrar una X cuando CheckBox est
activado.
La plantilla ControlTemplate para el control CheckBox de este ejemplo es relativamente compleja, por ello
en este tema se utiliza un ejemplo ms sencillo para crear una plantilla ControlTemplate para un control
Button.
Cmo definir la plantilla ControlTemplate en XAML

La propiedad Template especifica la plantilla ControlTemplate de un control. Al igual que muchas
propiedades, la propiedad Template se puede establecer de las maneras siguientes:
Localmente, se establece la propiedad Template en una plantilla ControlTemplate definida de
manera insertada.
Localmente, se establece la propiedad Template en una referencia a una plantilla ControlTemplate
que se define como un recurso.
Se establece la propiedad Template y se define una plantilla ControlTemplate en un estilo Style.
En el ejemplo siguiente se muestra cmo establecer la propiedad Template localmente y definir la plantilla
ControlTemplate insertada.
<Button Content="Button1">
<Button.Template>
<ControlTemplate TargetType="Button">

Silverlight

</ControlTemplate>
</Button.Template>
</Button>
En el ejemplo siguiente se muestra cmo definir la plantilla ControlTemplate como un recurso y establecer
la propiedad Template en una referencia al recurso.
<StackPanel>
<ControlTemplate TargetType="Button" x:Key="newTemplate">
</ControlTemplate>
<Button Template="{StaticResource newTemplate}" Content="Button1"/>
</StackPanel>
En el ejemplo siguiente se muestra cmo establecer la propiedad Template y definir la plantilla

ControlTemplate en un estilo Style.
<StackPanel>
<Style TargetType="Button" x:Key="newTemplate">
<Setter Property="Template">
<Setter.Value>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Style="{StaticResource newTemplate}" Content="Button1"/>
</StackPanel>
Aunque estos tres mtodos son maneras vlidas de definir una plantilla ControlTemplate, probablemente lo
ms comn sea establecer la propiedad Template en un estilo Style. Cuando una plantilla ControlTemplate
est establecida en un estilo Style, tenga en cuenta que el estilo se limita a establecer la propiedad
Template del mismo modo que si fuera cualquier otra propiedad.
Cambiar la estructura visual de un control

En Silverlight, un control suele estar compuesto de objetos FrameworkElement. Al crear una plantilla
ControlTemplate, se combinan objetos FrameworkElement para crear un control nico. Una plantilla
ControlTemplate debe tener un solo objeto FrameworkElement como su elemento raz. El elemento raz
normalmente contiene otros objetos FrameworkElement. La combinacin de objetos constituye la estructura
visual de control.
En el siguiente ejemplo se crea una plantilla ControlTemplate personalizada para el control Button.
ControlTemplate crea la estructura visual de Button. En este ejemplo no se modifica el aspecto del botn al
elegirlo o hacer clic en l. La modificacin del aspecto del botn cuando se encuentra en un estado
diferente se explica ms adelante en este mismo tema.
En este ejemplo, la estructura visual se compone de las partes siguientes:
Un control Border denominado RootElement que acta como objeto FrameworkElement raz de la
plantilla.
Un control Grid que es un elemento secundario de RootElement.
Un control ContentPresenter que muestra el contenido del botn. ContentPresenter permite
mostrar cualquier tipo de objeto.
<Border x:Name="RootElement">

<Border.Background>
<SolidColorBrush x:Name="BorderBrush" Color="Black"/>
</Border.Background>


Silverlight
<Grid Margin="4" Background="{TemplateBinding Background}">

<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="4,5,4,4" />
</Grid>
</Border>
</ControlTemplate>
Conservar la funcionalidad de las propiedades de un control mediante Template

Binding
Al crear una nueva plantilla ControlTemplate, puede que desee seguir usando las propiedades pblicas para
cambiar el aspecto del control. La extensin de marcado TemplateBinding enlaza una propiedad de un
elemento que se encuentra en una plantilla ControlTemplate a una propiedad pblica definida por el
control. En el ejemplo anterior se utiliza la extensin de marcado TemplateBinding para enlazar propiedades
de elementos que se encuentran en la plantilla ControlTemplate a las propiedades pblicas definidas por el
botn. Por ejemplo, el control Border tiene su propiedad Background establecida en {TemplateBinding
Background}. Dado que Background est enlazado a la plantilla, puede crear varios botones que utilicen la
misma plantilla ControlTemplate y establecer la propiedad Background en valores diferentes para cada
botn. Si la propiedad Background no estuviera enlazado a plantilla en la plantilla ControlTemplate,
establecer la propiedad Background de un botn no afectara en absoluto al aspecto del botn.
La clase Control define varias propiedades que la plantilla de control puede usar para provocar un efecto en
el control cuando se establecen. La forma en que ControlTemplate usa la propiedad depende de la
propiedad. ControlTemplate debe usar la propiedad de una de las siguientes formas:
Un elemento de la plantilla ControlTemplate se enlaza a la propiedad.
Un elemento de ControlTemplate hereda la propiedad de un elemento FrameworkElement
primario.
En la tabla siguiente se muestra la lista de propiedades visuales heredadas por un control de la clase
Control. Tambin indica si la plantilla de control predeterminada de un control utiliza el valor de propiedad
heredado o si es el lmite de la plantilla.
Propiedad Mtodo de uso

Background Enlace de plantillas
BorderThickness Enlace de plantillas
BorderBrush Enlace de plantillas
FontFamily Herencia de propiedades o enlace de plantillas
FontSize Herencia de propiedades o enlace de plantillas
FontStretch Herencia de propiedades o enlace de plantillas
FontWeight Herencia de propiedades o enlace de plantillas
Foreground Herencia de propiedades o enlace de plantillas
HorizontalContentAlignment Enlace de plantillas
Padding Enlace de plantillas
VerticalContentAlignment Enlace de plantillas
En la tabla se muestra solamente la lista de propiedades visuales heredadas de la clase Control. Aparte de
las propiedades de la lista anterior, un control puede heredar tambin las propiedades DataContext,
TextDecorations y Language del elemento de marco de trabajo primario.
Adems, si ContentPresenter se encuentra en la plantilla ControlTemplate de un control ContentControl,
ContentPresenter se enlazar automticamente a las propiedades Content y ContentTemplate. Igualmente,
un control ItemsPresenter que se encuentre en la plantilla ControlTemplate de un control ItemsControl se
enlazar automticamente a las propiedades ItemsPresenter y Items.
En el ejemplo siguiente se crean dos botones que utilizan la plantilla ControlTemplate definida en el
ejemplo anterior. En el ejemplo se establecen las propiedades Background, Foreground y FontSize para cada
botn. Establecer la propiedad Background surte efecto, porque est enlazada a plantilla en la plantilla

Silverlight
ControlTemplate. Aunque las propiedades FontSize y Foreground no estn enlazadas a plantilla,

establecerlas surte efecto porque sus valores se heredan.
<StackPanel>
<Button Style="{StaticResource newTemplate}"
Background="Navy" Foreground="White" FontSize="14"
Content="Button1"/>
<Button Style="{StaticResource newTemplate}"
Background="Purple" Foreground="White" FontSize="14"
Content="Button2" Click="Button_Click"/>
</StackPanel>
Cambiar el aspecto de un control segn su estado

La diferencia entre un botn con su aspecto predeterminado y el botn del ejemplo anterior es que el
botn predeterminado cambia sutilmente cuando se encuentra en estados diferentes. Por ejemplo, el
aspecto del botn predeterminado cambia cuando est presionado, o cuando el puntero del mouse est
encima de l. Si bien la plantilla ControlTemplate no cambia la funcionalidad de un control, s modifica su
comportamiento visual. Un comportamiento visual describe el aspecto de control cuando se encuentra en
un estado determinado. Para entender la diferencia entre la funcionalidad y el comportamiento visual de un
control, tomemos el ejemplo del botn. La funcionalidad del botn consiste en generar el evento Click
cuando se hace clic en l; en cambio, el comportamiento visual del botn consiste en cambiar su aspecto al
elegirlo o presionarlo.
Para especificar el aspecto de un control cuando se encuentra en un estado determinado se utilizan los
objetos VisualState. Un objeto VisualState contiene un objeto Storyboard que cambia el aspecto de los
elementos que se encuentran en la plantilla ControlTemplate. No tendr que escribir cdigo para que esto
suceda, porque la lgica del control cambia de estado mediante VisualStateManager. Cuando el control
entra en el estado especificado por la propiedad VisualState.Name, el guin grfico se inicia. Cuando el
control sale del estado, Storyboard se detiene.
En el ejemplo siguiente se muestra un objeto VisualState que cambia el aspecto de Button cuando el
puntero del mouse est encima de l. La propiedad Name del objeto VisualState coincide con el nombre
especificado por el atributo TemplateVisualStateAttribute para la clase Button. Storyboard cambia el color
del borde del botn cambiando el color de BorderBrush. Si se fija en el ejemplo de ControlTemplate que se
proporciona al principio de este tema, recordar que BorderBrush es el nombre del objeto SolidColorBrush
que se asigna a la propiedad Background del control Border.

<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color" To="Red" />
</Storyboard>
</VisualState>
El control es responsable de definir los estados como parte de su contrato de control; esto se explica con
detalle en Personalizar otos controles entendiendo el contrato de control ms adelante en este mismo
tema. Los estados de un control se especifican mediante el atributo TemplateVisualStateAttribute, que se
coloca en la definicin de clase del control. TemplateVisualStateAttribute especifica el nombre del estado y
el nombre del grupo de estados al que pertenece el estado. En el ejemplo siguiente se muestran los estados
que se especifican para Button.
<TemplateVisualStateAttribute(Name:="Pressed", GroupName:="CommonStates")> _
<TemplateVisualStateAttribute(Name:="Focused", GroupName:="FocusStates")> _
<TemplateVisualStateAttribute(Name:="Normal", GroupName:="CommonStates")> _
<TemplateVisualStateAttribute(Name:="MouseOver", GroupName:="CommonStates")> _
<TemplateVisualStateAttribute(Name:="Disabled", GroupName:="CommonStates")> _
<TemplateVisualStateAttribute(Name:="Unfocused", GroupName:="FocusStates")> _
Public Class Button
Inherits ButtonBase
End Class
La propiedad TemplateVisualStateAttribute.GroupName especifica a qu grupo pertenece un estado. En el

ejemplo anterior, el control Button define dos grupos de estados: el grupo CommonStates contiene los
estados Normal, MouseOver, Pressed y Disabled. Por su parte, el grupo FocusStates contiene los estados
Unfocused y Focused. Los estados contenidos en el mismo grupo de estados son mutuamente excluyentes.
El control siempre se encuentra exactamente en un estado de cada grupo. Por ejemplo, un control Button

Silverlight
puede tener el foco incluso cuando el puntero del mouse no est encima de l, de modo que un control
Button en el estado Focused puede estar en cualquiera de los siguientes estados: MouseOver, Pressed o
Normal.
Los objetos VisualState se agregan los objetos VisualStateGroup. Los objetos VisualStateGroup se agregan a
la propiedad adjunta VisualStateManager.VisualStateGroups, que se establece en el objeto
FrameworkElement raz de la plantilla ControlTemplate. En el ejemplo siguiente se definen los objetos
VisualState para los estados Normal, MouseOver y Pressed, que se encuentran todos en el grupo
CommonStates. El estado Disabled y los estados del grupo FocusStates se omiten para que el ejemplo
resulte breve, pero se incluyen en el ejemplo completo que encontrar en Tutorial: Personalizar la apariencia
de un botn mediante una plantilla ControlTemplate.
<Border x:Name="RootElement">
<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<Storyboard>
</Storyboard>
</VisualState>

<VisualState x:Name="Pressed">
<Storyboard >
Storyboard.TargetProperty="Color" To="Transparent"/>
</Storyboard>
</VisualState>

</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.Background>
<SolidColorBrush x:Name="BorderBrush" Color="Black"/>
</Border.Background>
<Grid Background="{TemplateBinding Background}" Margin="4">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="4,5,4,4" />
</Grid>
</Border>
</ControlTemplate>
Especificar el comportamiento de un control cuando efecta la transicin

entre dos estados
Si ejecuta el ejemplo anterior, observar que el aspecto de un botn cambia al elegirlo. El aspecto del botn
tambin cambia al hacer clic en l, pero a menos que se mantenga presionado el botn durante un
segundo completo, no se ve el efecto. De forma predeterminada, una animacin tarda un segundo en
producirse. Dado que es probable que el usuario haga clic en el botn y lo suelte en mucho menos tiempo,
los comentarios visuales no sern efectivos si se deja ControlTemplate en su estado predeterminado.
Puede especificar la cantidad de tiempo que tardar una animacin en producirse para efectuar una
transicin fluida de un estado a otro en un control; para ello, agregue objetos VisualTransition a la plantilla
ControlTemplate. Al crear un objeto VisualTransition, se puede especificar una o varias de las siguientes
opciones.
El tiempo que tarda en producirse una transicin entre estados.
Los cambios adicionales en el aspecto de control que se producen en el momento de la transicin.
A qu estados se aplica el objeto VisualTransition.

Silverlight
Especificar la duracin de una transicin

Se puede especificar cunto tiempo tarda una transicin estableciendo la propiedad GeneratedDuration. El
ejemplo anterior contiene un objeto VisualState que especifica que el borde del botn se vuelve
transparente al presionarlo, pero la animacin tarda demasiado tiempo y no se aprecia cuando el botn se
presiona y suelta rpidamente. Puede utilizar un objeto VisualTransition para especificar la cantidad de
tiempo que el control tarda en hacer la transicin al estado Pressed. En el ejemplo siguiente se especifica
que el control tarde una centsima de segundo en entrar en el estado Pressed.

<VisualTransition To="Pressed" GeneratedDuration="0:0:0.01" />
Especificar cambios en el aspecto del control durante una transicin

VisualTransition contiene un objeto Storyboard que se inicia cuando el control hace la transicin entre
estados. Por ejemplo, puede especificar que se produzca determinada animacin cuando el control realice
la transicin del estado MouseOver al estado Normal. En el ejemplo siguiente se crea un objeto
VisualTransition que especifica que cuando el usuario mueve el puntero del mouse fuera del botn, su
borde cambia a azul, luego a amarillo y despus a negro en 1,5 segundos.

<VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:1.5">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="Color"
Storyboard.TargetName="BorderBrush"
FillBehavior="HoldEnd" >
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="Blue"
KeyTime="0:0:0.5" />
<LinearColorKeyFrame Value="Yellow"
KeyTime="0:0:1" />
<LinearColorKeyFrame Value="Black"
KeyTime="0:0:1.5" />
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
Especificar cundo se aplica un objeto VisualTransition

En el ejemplo anterior, VisualTransition se aplica cuando el control pasa del estado MouseOver al estado
Normal; en el ejemplo anterior a este, VisualTransition se aplica cuando el control entra en el estado
Pressed. VisualTransition se puede restringir para aplicarse solo a ciertos estados o se puede aplicar en
cualquier momento en el que el control realiza la transicin entre estados. Se realizan restricciones al aplicar
un objeto VisualTransition mediante el establecimiento de las propiedades From y To. En la tabla siguiente
se describen los niveles de restriccin, desde el ms restrictivo al menos restrictivo.
Tipo de restriccin Valor de From Valor de To

Desde un estado especificado a otro estado Nombre de un objeto Nombre de un objeto
especificado VisualState. VisualState.
Desde cualquier estado a un estado Nombre de un objeto
No establecido
especificado VisualState.
Desde un estado especificado a cualquier Nombre de un objeto
No establecido
estado VisualState.
Desde cualquier estado a cualquier otro estado No establecido No establecido
Se pueden tener varios objetos VisualTransition en un objeto VisualStateGroup que hace referencia al
mismo estado, pero se utilizarn en el orden que se especifica en la tabla anterior. En el ejemplo siguiente,
hay dos objetos VisualTransition. Cuando el control realiza la transicin del estado Pressed al estado
MouseOver, se utiliza el objeto VisualTransition que tiene establecidas las dos propiedades From y To.
Cuando el control realiza la transicin de un estado que no es Pressed al estado MouseOver, se utiliza el
otro estado.

<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" />

<VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.01" />
El objeto VisualStateGroup tiene una propiedad Transitions que contiene los objetos VisualTransition que se
aplican a los objetos VisualState de VisualStateGroup. Como autor de ControlTemplate, dispone de libertad
para incluir cualquier objeto VisualTransition que desee. Sin embargo, si las propiedades From y To se
establecen en nombres de estados que no pertenecen a VisualStateGroup, el objeto VisualTransition se
omite.
En el ejemplo siguiente se muestra el objeto VisualStateGroup de CommonStates. En el ejemplo se define
un objeto VisualTransition para cada una de las transiciones siguientes del botn.
Al estado Pressed.
Al estado MouseOver.
Del estado Pressed al estado MouseOver.
Del estado MouseOver al estado Normal.
<VisualStateGroup x:Name="CommonStates">

<VisualStateGroup.Transitions>

<VisualTransition To="Pressed" GeneratedDuration="0:0:0.01" />

<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" />

<VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.01" />

<VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:1.5">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="Color"
Storyboard.TargetName="BorderBrush"
FillBehavior="HoldEnd" >
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="Blue" KeyTime="0:0:0.5" />
<LinearColorKeyFrame Value="Yellow" KeyTime="0:0:1" />
<LinearColorKeyFrame Value="Black" KeyTime="0:0:1.5" />
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>

<VisualState x:Name="Normal" />
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard >
Storyboard.TargetProperty="Color" To="Transparent"/>
</Storyboard>
</VisualState>

</VisualStateGroup>
Personalizar otros controles entendiendo el contrato de control

Un control que utiliza ControlTemplate para especificar su estructura (mediante objetos FrameworkElement
) y comportamiento visuales (mediante objetos VisualState ) utiliza el modelo de control de elementos.
Muchos de los controles que se distribuyen con los controles de Silverlight y de otros fabricantes utilizan
este modelo. Los elementos que un autor de plantillas ControlTemplate debe conocer se comunican
mediante el contrato de control. Si se entienden los elementos de un contrato de control, es posible
personalizar el aspecto de cualquier control que utilice el modelo de control de elementos.
El contrato de un control tiene tres elementos:
Los elementos visuales que usa la lgica del control.

Silverlight
Los estados del control y el grupo al que pertenece cada estado.

Las propiedades pblicas que afectan visualmente al control.
Elementos visuales del contrato de control
A veces, la lgica de un control interacta con un objeto FrameworkElement que se encuentra en una
plantilla ControlTemplate. Por ejemplo, el control podra controlar un evento de uno de sus elementos.
Cuando un control espera encontrar un objeto FrameworkElement determinado en una plantilla
ControlTemplate, debe transmitir esa informacin al autor de ControlTemplate. El control utiliza
TemplatePartAttribute para transmitir el tipo de elemento que se espera y cul debe ser su nombre. El
control Button no tiene elementos del objeto FrameworkElement en su contrato de control; sin embargo,
otros controles, como ComboBox, s.
En el ejemplo siguiente se muestran los objetos TemplatePartAttribute que se especifican para la clase
ComboBox. La lgica del control ComboBox espera encontrar un objeto Popup denominado Popup y un
objeto ContentPresenter denominado ContentPresenter en la plantilla ControlTemplate.
<TemplatePartAttribute(Name:="ContentPresenter", Type:=GetType(ContentPresenter))> _
<TemplatePartAttribute(Name:="Popup", Type:=GetType(Popup))> _
Public Class ComboBox
Inherits ItemsControl
End Class
En el ejemplo siguiente se muestra un objeto ControlTemplate simplificado para ComboBox que incluye los
elementos especificados por los objetos TemplatePartAttribute en la clase ComboBox.
<ControlTemplate TargetType="ComboBox">
<Grid>
<Border x:Name="ContentPresenterBorder">
<Grid>
<ToggleButton x:Name="DropDownToggle"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="-1" HorizontalContentAlignment="Right">
<Path x:Name="BtnArrow" Height="4" Width="8"
Stretch="Uniform" Margin="0,0,6,0" Fill="Black"
Data="F1 M 300,-190L 310,-190L 305,-183L 301,-190 Z " />
</ToggleButton>
<ContentPresenter x:Name="ContentPresenter" Margin="6,2,25,2">
</ContentPresenter>
</Grid>
</Border>
<Popup x:Name="Popup">
<Border x:Name="PopupBorder"
HorizontalAlignment="Stretch" Height="Auto"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="Black" Background="White" CornerRadius="3">
<ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</ControlTemplate>
Estados del contrato de control

Los estados de un control tambin forman parte del contrato de control. En el ejemplo de creacin de una
plantilla ControlTemplate para un control Button se muestra cmo especificar el aspecto de Button segn
sus estados. Como se ha descrito en Cambiar el aspecto de un control segn su estado anteriormente en
este mismo tema, los estados de un control se especifican mediante TemplateVisualStateAttribute. Se crea
un objeto VisualState para cada estado concreto y se colocan todos los objetos VisualState que comparten
la misma propiedad GroupName en un objeto VisualStateGroup.
Propiedades del contrato de control
Las propiedades pblicas que afectan visualmente al control tambin se incluyen en el contrato de control.
Puede establecer estas propiedades para cambiar el aspecto del control sin crear una nueva plantilla
ControlTemplate. Tambin puede utilizar la extensin de marcado TemplateBinding para enlazar
propiedades de elementos que se encuentran en la plantilla ControlTemplate a las propiedades pblicas
que definidas por el control Button.

Silverlight
Para los controles que se distribuyen con Silverlight 4, encontrar en el tema de referencia de control el
elemento visual y los estados incluidos en el contrato de control. Por ejemplo, en la seccin Sintaxis de la
referencia de la clase ComboBox se muestran los objetos TemplatePartAttribute y
TemplateVisualStateAttribute que el control ComboBox especifica. Aunque la aplicacin debera ejecutarse
sin iniciar ninguna excepcin si no se incluye un objeto FrameworkElement o VisualState esperado, es
posible que el control no se comporte segn lo esperado. Cualquier propiedad pblica que afecta
visualmente al control tambin forma parte del contrato de control.
En el ejemplo siguiente se resume el contrato de control del botn.
<TemplateVisualState(Name:="Normal", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="MouseOver", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="Pressed", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="Disabled", GroupName:="CommonStates")> _
<TemplateVisualState(Name:="Unfocused", GroupName:="FocusStates")> _
<TemplateVisualState(Name:="Focused", GroupName:="FocusStates")> _
Public Class Button
Inherits ButtonBase
Public Shared ReadOnly BackgroundProperty As DependencyProperty

Public Shared ReadOnly BorderBrushProperty As DependencyProperty
Public Shared ReadOnly BorderThicknessProperty As DependencyProperty
Public Shared ReadOnly ContentProperty As DependencyProperty
Public Shared ReadOnly ContentTemplateProperty As DependencyProperty
Public Shared ReadOnly FontFamilyProperty As DependencyProperty
Public Shared ReadOnly FontSizeProperty As DependencyProperty
Public Shared ReadOnly FontStretchProperty As DependencyProperty
Public Shared ReadOnly FontStyleProperty As DependencyProperty
Public Shared ReadOnly FontWeightProperty As DependencyProperty
Public Shared ReadOnly ForegroundProperty As DependencyProperty
Public Shared ReadOnly HorizontalContentAlignmentProperty As DependencyProperty
Public Shared ReadOnly PaddingProperty As DependencyProperty
Public Shared ReadOnly TextAlignmentProperty As DependencyProperty
Public Shared ReadOnly TextDecorationsProperty As DependencyProperty
Public Shared ReadOnly TextWrappingProperty As DependencyProperty
Public Shared ReadOnly VerticalContentAlignmentProperty As DependencyProperty
Public Background As Brush

Public BorderBrush As Brush
Public BorderThickness As Thickness
Public Content As Object
Public ContentTemplate As DataTemplate
Public FontFamily As FontFamily
Public FontSize As Double
Public FontStretch As FontStretch
Public FontStyle As FontStyle
Public FontWeight As FontWeight
Public Foreground As Brush
Public HorizontalContentAlignment As HorizontalAlignment
Public Padding As Thickness
Public TextAlignment As TextAlignment
Public TextDecorations As TextDecorationCollection
Public TextWrapping As TextWrapping
Public VerticalContentAlignment As VerticalAlignment
End Class
Al crear una plantilla ControlTemplate, con frecuencia resulta ms fcil empezar con una plantilla
ControlTemplate existente y modificarla. Para cambiar una plantilla ControlTemplate existente, puede
realizar uno de los procedimientos siguientes:
Utilizar un diseador como Microsoft Expression Blend, que proporciona una interfaz grfica de
usuario para crear plantillas de control.
Obtener la plantilla ControlTemplate predeterminada y editarla.
Para crear una plantilla ControlTemplate correctamente, debe entender el contrato del control de que se
trate. Si se comprenden los elementos de un contrato de control, es posible crear una plantilla
ControlTemplate nueva para los controles existentes, y crear una aplicacin con una apariencia exclusiva.

Manual 14 - Silverlight

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual 14 - Silverlight

Hochgeladen von

Copyright:

Verfügbare Formate

Silverlight

1. Informacin general sobre Silverlight

Qu caractersticas tiene Silverlight?

MCT: Luis Dueas Pag 1

Extensiones a JavaScript. Silverlight proporciona extensiones al lenguaje de scripting de explorador

Ejecutar aplicaciones de Silverlight

Crear aplicaciones de Silverlight

1.1. Lo Nuevo en Silverlight 4

MCT: Luis Dueas Pag 2

Ejecucin fuera del explorador

MCT: Luis Dueas Pag 3

MCT: Luis Dueas Pag 4

MCT: Luis Dueas Pag 5

Permite a las herramientas y otros consumidores de XAML integrar de manera ms predecible la

MCT: Luis Dueas Pag 6

MCT: Luis Dueas Pag 7

Compatibilidad con la plataforma Windows Phone

1.2. Gua Bsica de Silverlight

Integrar Silverlight en aplicaciones

MCT: Luis Dueas Pag 8

<Rectangle Fill="Red" Width="150" Height="100"/>

En el ejemplo anterior, se generan unos resultados similares a la siguiente ilustracin.

En el ejemplo anterior, se generan unos resultados similares a la siguiente ilustracin.

MCT: Luis Dueas Pag 9

En el ejemplo anterior, se generan unos resultados similares a la siguiente ilustracin.

Agregar lgica de cdigo

En el archivo de cdigo subyacente, defina el controlador de eventos Click.

En el ejemplo anterior, se generan unos resultados similares a la siguiente ilustracin.

MCT: Luis Dueas Pag 10

En el ejemplo anterior, se generan unos resultados similares a la siguiente ilustracin.

MCT: Luis Dueas Pag 11

Private Sub OnLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)

Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

Private Sub Button_Click_1(ByVal sender As Object, ByVal e As RoutedEventArgs)

MCT: Luis Dueas Pag 12

Ejecutar la aplicacin de Silverlight fuera del explorador

1.3. Arquitectura de Silverlight

Algunas partes de .NET Framework para Silverlight se implementan con la aplicacin.

MCT: Luis Dueas Pag 13

El conjunto combinado de herramientas, tecnologas y servicios que se incluyen en la plataforma de

Componentes de presentacin bsicos

MCT: Luis Dueas Pag 14

Permite la reproduccin y administracin de varios tipos de archivos de audio

.NET Framework para Silverlight.

Caractersticas de programacin adicionales de Silverlight

MCT: Luis Dueas Pag 15

Proporciona acceso seguro del cliente de Silverlight al sistema de archivos del

Herramientas y tecnologas relacionadas

1.4. Sistemas operativos y exploradores compatibles

1.5. Asegurar que las aplicaciones de Silverlight funcionan con Silverlight 4

MCT: Luis Dueas Pag 16

Cambios en el analizador de XAML

Cambios importantes desde Silverlight 3

MCT: Luis Dueas Pag 17

Excepcin AmbiguousMatchException del analizador de XAML cuando una

MCT: Luis Dueas Pag 18

Cambios en modo quirks

MCT: Luis Dueas Pag 19

MCT: Luis Dueas Pag 20

API Silverlight 3 Silverlight 4

MCT: Luis Dueas Pag 21

LastIndexOf Ordinal CurrentCulture

Rellenar ItemsControl con IList, IList<T>

Cambios importantes en la actualizacin