Intro Ducci On Silver Light

Introduccin a Silverlight
Parte 1: Creando un Proyecto Silverlight

Cmo agrega Ud. Silverlight a su pgina Web? Un proyecto Silverlight tpico tiene cuatro archivos: un archivo HTML que contiene (hostea) la instancia del Plug -In Silverlight, un archivo silverlight.js, un archivo XAML, y un archivo JavaScript que le da soporte al archivo HTML. Este documento describe cmo crear un proyecto bsico, y agregarle contenido Silverlight al archivo HTML. Antes de Comenzar Antes de poder crear contenido Silverlight, necesitar los siguientes elementos: El Plug-In de Silverlight Un archivo HTML para mostrar el contenido SilverLight Un editor de texto, como Notepad para editar su archivo HTML.
Paso 1: Agregue referencias al Script en su Pgina HTML En este paso, Ud. adicionar referencias apuntando a los archivos JavaScript Silverlight.js y createSilverlight.js en su pgina HTML y crear un elemento para contener (host) su Plug -In Silverlight. El archivo Silverlight.js es un archivo de soporte JavaScript que permite que su contenido Silverlight sea visualizado en mltiples plataformas. Ud. crear el archivo createSilverlight.js como parte del Paso 2. a. Obtenga el archivo Silverlight.js. Ud. puede obtener de la carpeta Tools (Herramientas) del Silverlight SDK. Abra su pgina HTML y adicione el siguiente markup dentro de la seccin <head>:
<script type=text/javascript src=Silverlight.js></script>
b. c. d.
Cree un archivo vaco, y nmbrelo createSilverlight.js. Lo utilizar en el Paso 3. En su pgina HTML, adicione otra referencia dentro de la seccin <head>. Esta vez especifquelo como: <script type=text/javascript src=createSilverlight.js></script> Su pgina HTML debe contener los siguientes elementos bsicos:
<!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 xml:lang=en> <head> <title>A Sample HTML page</title> <script type=text/javascript src=Silverlight.js></script> <script type=text/javascript src=createSilverlight.js></script> </head> <body> </body> </html>
e.
Paso 2: Crear el Elemento HTML Host y el Bloque de Inicializacin a) Cree el elemento HTML host adicionando las siguientes tres lneas a su archivo HTML, entre las etiquetas (tags) <body>, en donde desea que aparezca su contenido Silverlight.
<!Lugar donde va el Plug-In Silverlight --> <div id=mySilverlightPluginHost> </div>
Ud. puede cambiar el ID de la etiqueta (tag) <div>, si desea. Si Ud. est creando mltiples instancias del Plug-In Silverlight en la misma pgina, repita este paso para cada instancia, y asegrese que cada ID sea nico. b) Cree un bloque de inicializacin: despus del HTML que Ud. adicion en el pase previo, adicione el siguiente script y HTML.
<script type=text/javascript> // Recobra el elemento div que Ud. cre en el paso previo var parentElement = document.getElementById(mySilverlightPluginHost); // Esta funcin crea el Plug-In Silverlight. createMySilverlightPlugin(); </script>
Si est creando mltiples instancias del Plug-In Silverlight en la misma pgina, repita este paso para cada instancia, asegurndose de que cada uno tenga nombres de funcin nicos, o que utilice una funcin que tome un parmetro que utilice para establecer un ID nico. Tambin asegrese de que cada bloque de script siga inmediatamente al DIV correspondiente creado en el paso previo. Ud. ha llegado al fin del paso 2. Su archivo HTML debe contener los siguientes elementos:
<!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" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> </head> <body> <!Lugar donde va el Plug-In Silverlight --> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Recobra el elemento div que Ud. cre en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta funcin crea el Plug-In Silverlight. createMySilverlightPlugin(); </script> </body> </html>
Paso 3: Defina la Funcin de Creacin que Inicializa su instancia del Plug-In Abra el archivo createSilverlight.js que cre en el paso 1 y adicione la siguiente funcin JavaScript:
function createMySilverlightPlugin() { Silverlight.createObject( "myxaml.xaml", parentElement, "mySilverlightPlugin", { width:'300', height:'300', inplaceInstallPrompt:false, background:'#D6D6D6', isWindowless:'false', framerate:'24', version:'1.0' }, { onError:null, onLoad:null }, null); } // // // // Valor propiedad OnError -nombre funcin del event handler. Valor propiedad OnLoad -nombre funcin del event handler.
// // // // // // // // // // // // // //
Valor de Propiedad Source. Referencia DOM a DIV tag hosteador. Valor de ID del plug-in. Propiedades por cada instancia. Ancho del plug-in en pixels. Altura del plug-in en pixels. Determina si desplegar prompt para instalar in-place si detecta versin invlida. Color del fondo del plug-in. Determina si mostrar plug-in en modo Windowless. Valor propiedad MaxFrameRate. Versin de Silverlight a usar.
// Valor Contexto event handler.
Este script contiene varios parmetros que Ud. querr ajustar, tales como la altura y el ancho del Plug-In (permite tamaos en porcentajes), el nombre del archivo que contiene su contenido Silverlight, y un valor que especifica si el comportamiento del Plug-In es sin ventana (windowless). Si est adicionando mltiples Plug-In Silverlight a la misma pgina, cree una nueva funcin para cada uno, o utilice una funcin de creacin parametrizada. En cualquier caso, asegrese de que cada resultado de la llamada a la funcin especifica un valor diferente para el ID del Plug-In (en nuestro ejemplo, mySilverlightPlugin.
Paso 4: Cree sus Archivos de Contenido Silverlight Ahora que su archivo HTML ha sido configurado, pasamos a crear su contenido.
a. Cree un archivo en blanco llamado myxaml.xml en el mismo diectorio que su a rchivo HTML.
Si Ud. modifica su parmetre de Archivo Fuente (Source File), tambin cambie el nombre de este archivo para que concuerden.
b. (Opcional) Si desea que el proyecto Silverlight maneje eventos, genere cdigo dinmicamente, o
de cualquier manera interacte con el usuario, necesitar contener un archivo de script adicional. Cree un archivo JavaScript para contener el script y luego adicione una referencia hacia dicho archivo desde en su pgina HTML anfitrin. El siguiente ejemplo crea una referencia al archivo de script llamado my-script.js
<script type=text/javascript src=my-script.js></script>
Su archivo HTML debera contener los siguientes elementos:

<!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" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <script type="text/javascript" src="my-script.js"></script> </head> <body> <!Lugar donde va el Plug-In Silverlight --> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Recobra el elemento div que Ud. cre en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta funcin crea el Plug-In Silverlight. createMySilverlightPlugin(); </script> </body> </html>
Creando Mltiples Instancias del Plug-In Silverlight Si desea crear ms de un plug-in Silvelight en su pgina, repita los pasos 2, 3 y 4 para cada instancia. Cada etiqueta <div> del anfitrin (creada en el paso 2a) debe tener un ID nico. Cada bloque de inicializacin (creado en el paso 2b) debe seguir inmediatamente a la etiqueta <div> creada en el paso precedente (2a). Cada parmetro ID de plug-in debe tambin ser nica.
Parte 2: Crear un archivo XAML Silverlight

En el paso precedente, Ud. agreg un Plug-In Silverlight a una pgina HTML, y cre un archivo XAML en blanco. Ac se muestra cmo comenzar a crear contenido Silverligth en su archivo XAML. paso 1: crear un Canvas (lienzo) y declaraciones para los namespaces. paso 2: Dibuje algo! paso 3: vea su contenido XAML
Paso 1: Cree un Lienzo (Canvas) y declaraciones para los namespaces Abra el archivo XAML myxaml.xml que Ud. cre en el paso pevio. Cree un lienzo (Canvas) y las declaraciones de namespaces Silverlight y XAML con el siguiente contenido:
<Canvas xmlns=http://schemas.microsoft.com/client/2007 xmlns:x=http//schemas.microsoft.com/winfx/2006/xaml> </Canvas>
Cada archivo XAML Silverlight comienza con una etiqueta <Canvas> que contiene las declaraciones de namespace Silverlight y un atributo xmlns que declara el namespace Silverlight junto a un atributo xmlns:x que declara el namespace del XAML.
Paso 2: Dibuje algo! Escriba lo siguiente en el archivo XAML, entre las etiquetas <Canvas> y almacene el archivo.
<Ellipse Height=200 Width=200 Stroke=Black StrokeThickness=10 Fill=SlateBlue />
Paso 3: Vea su Contenido XAML Para ver su contenido XAML, d doble click sobre el archivo HTML anvitrin. Ud. deber ver un crculo de color azulado con un borde negro. El archivo XAML queda as:
<Canvas xmlns=http://schemas.microsoft.com/client/2007 xmlns:x=http//schemas.microsoft.com/winfx/2006/xaml> <Ellipse Height=200 Width=200 Stroke=Black StrokeThickness=10 Fill=SlateBlue /> </Canvas>
Nota: Si tiene instalado WPF y da doble click sobre el archivo XML con contenido XAML (en vez de la pgina Web) se lanzar WPF en vez de Silverlight. El acto de dar doble-click sobre un archivo XAML no es parte de la experiencia del usuario final de Silverlight, ya que la espectativa es que archivos XAML proporcionados para una aplicacin basada en Silverlight vienen del mismo servidor que sirvi la pgina HTML.
Parte 3: El Objeto Canvas (como el Lienzo de un artista)

Un Canvas es un objeto diseado para contener y posicionar formas (shapes) y controles. Cada archivo XAML Silverlight contiene al menos un Canvas, que le sirve como elemento raz (root). Esta seccin introduce al objeto canvas y describe cmo adicionar, posicionar y especificar el tamao de sus objetos hijo. Esta parte contiene las siguientes secciones: Adicionar un objeto a su Canvas Posicionar un objeto Controlar el ancho y el alto Objetos Canvas anidados
Adicionar un objeto a su Canvas Un Canvas contiene y posiciona otros objetos. Para adicionar un objeto a un Canvas, insrtelo entre las etiquetas (tags) de <Canvas>. El siguiente ejemplo adiciona un objeto Ellipse a un Canvas. Debido a que el Canvas es el elemento raz, es una buena prctica de XML aprovechar el elemento raz (root) para hacer all las declaraciones xmlns (namespace).
<Canvas xmlns=http://schemas.microsoft.com/Client/2007 xmlns=http://schemas.microsoft.com/winfx/2006/xaml > <Ellipse Height=200 Width=200 Stroke=Black StrokeThickness=10 </Canvas>
Fill=SlateBlue />
Un Canvas puede contener cualquier nmero de objetos, an otros objetos Canvas.
Posicionando un Objeto Para posicionar un objeto en el Canvas, Ud. especifica las propiedades includas de Canvas.Left y Canvas.Top del objeto en cuestin. La propiedad includa (attached property) Canvas.Left especifica la distancia entre un objeto y el borde izquierdo de su Canvas padre, y la propiedad includa Canvas.Top especifica la distancia entre el objeto hijo y el borde superior de su Canvas padre. El siguiente ejemplo toma la Ellipse del ejemplo previo y lo mueve 30 pixeles desde la izquierda y 30 pixeles desde la parte superior del Canvas.
<Canvas xmlns=http://schemas.microsoft.com/Client/2007 xmlns=http://schemas.microsoft.com/winfx/2006/xaml > <Ellipse Canvas.Left=30 Canvas.Top=30 Height=200 Width=200 Stroke=Black StrokeThickness=10 </Canvas>
Fill=SlateBlue />
La siguiente ilustracin muestra el sistema de coordenadas del Canvas y la posicin de la Ellipse.
0,0
Canvas.Top=30
Canvas.Left=30
Z-Order Por defecto, el orden Z (z-order) de los objetos dentro de un Canvas est determinada por la secuencia en que son declarados. Los objetos declarados ms tarde aparecen enfrente de objetos declarados al inicio. El siguiente ejemplo crea tres objetos Ellipse. Observe que la Ellipse declarada de ltimo (el de color lima) est en el primer plano (foreground), enfrente de los otros objetos Ellipse.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="5" Canvas.Top="5" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Silver" /> <Ellipse Canvas.Left="50" Canvas.Top="50" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" /> <Ellipse Canvas.Left="95" Canvas.Top="95" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime" /> </Canvas>
Ud. puede modificar este comportamiento al especificar la propiedad includa (attached property) Canvas.ZIndex en los objetos dentro del Canvas. Los valores mayores estn ms cerca del primer plano (foreground); los valores ms bajos estn ms lejos del primer plano. El siguiente ejemplo es similar al previo, excepto que los z-order de los objetos Ellipse van al revs. La Ellipse que declaramos de primero (la de color plateado) est ahora al frente.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.ZIndex="3" Canvas.Left="5" Canvas.Top="5" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Silver" /> <Ellipse Canvas.ZIndex="2" Canvas.Left="50" Canvas.Top="50" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" /> <Ellipse Canvas.ZIndex="1" Canvas.Left="95" Canvas.Top="95" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime" /> </Canvas>
10
Controlando Ancho y Alto (Width y Height) Los Canvas, las formas (shapes) y muchos otros elementos tienen propiedades de Width (Ancho) y Height (Altura) que le permiten especificar su tamao. El siguiente ejemplo crea una Ellipse de 200 pixels de ancho y 200 pixels de alto. Note que carece de soporte para tamaos en porcentajes.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
11
El siguiente ejemplo establece el Width (Ancho) y Height (Alto), pero esta vez del Canvas padre, a un valor de 200 y le da un fondo verde lima.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200" Background="LimeGreen" > <Ellipse Canvas.ZIndex="3" Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
Cuando corra el ejemplo, el cuadrado verde lima es el Canvas, y el fondo gris es la porcin del area del plug-in anfitrin que no ha sido cubierto por el Canvas. Note que la Ellipse no est cortada, a pesar de que se sale de los lmites del Canvas. Tanto el Width como el Height toman el valor de cero (0) si no lo establece explcitamente.
12
Objetos Canvas anidados (nested)
Los Canvas pueden contener otros objetos Canvas. El siguiente ejemplo crea un Canvas que a su vez contiene otros dos objetos Canvas.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30" Background="blue"/> <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30" Background="red"/> </Canvas>
13
Parte 4: Dibujando y Pintando (Drawing and Painting)

Silverlight soporta grficas vectoriales bsicas al proveer los elementos Ellipse, Rectangle, Line, Polyline, Polygon y Path. Colectivamente, estos elementos son conocidos como los elementos Shape. Esta parte contiene las siguientes secciones: Shapes (formas) bsicas Otros elementos Shape Pintando Shapes con brochas (brushes)
Shapes (formas) bsicas Silverlight provee tres elementos bsicos de Shape: Ellipse, Rectangle y Line Un elemento Ellipse describe un valo o crculo. Ud. controla su dimetro horizontal estableciendo la propiedad Width (Ancho), y su dimetro vertical estableciendo su propiedad Height (Altura). Un elemento Rectangle describe un Shape cuadrado o rectangular, opcionalmente con esquinas redondeadas. Ud. controla su tamao horizontal estableciendo su propiedad Width, y su tamao vertical estableciendo su propiedad Height. Ud. puede tambin usar las propiedades RadiusX y RadiusY para controlar la curvatura de sus esquinas. En el caso del elemento Line, en vez de usar Width y Height, Ud. controla su tamao y colocacin estableciendo sus propiedades X1, Y1 y X2, Y2.
El siguiente ejemplo dibuja una Ellipse, un Rectngulo y una Lnea en el Canvas.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse Height=200 Width=200 Canvas.Left=30 Canvas.Top=30 Stroke=Black StrokeThickness=10 Fill=SlateBlue /> <Rectangle Height=300 Width=100 </Canvas>
14
Otros elementos Shape En adicin a los elementos Ellipse, Line y Rectangle, Silverlight provee tres otros elementos Shape: Polygon, Polyline y Path. Un Polygon es un shape cerrado con un nmero arbitrario de lados, mientras que un Polyline es una serie de lineas conectadas que podran o podran no formar un Shape cerrado. El siguiente ejemplo crea un Polygon y un Polyline.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Polyline Points="150,150 150,250 250,250 250,150" Stroke="Black" StrokeThickness="10" /> <Polygon Points="10,10 10,110 110,110 110,10" Stroke="Black" StrokeThickness="10" Fill="Lightblue" /> </Canvas>
El elemento Path puede usarse para representar formas (Shapes) complejos que incluyen curvas y arcos. Para usar un elemento Path, Ud. utiliza un tipo especial de sintaxis de atributos para especificar su propiedad Data. El siguiente ejemplo crea tres elementos Path.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" Stroke="Black" Fill="SlateBlue" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 0,100 C 10,300 300,-200 250,100z" Stroke="Red" Fill="Orange" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 0,200 L100,200 50,50z" Stroke="Black" Fill="Gray" Canvas.Left="150" Canvas.Top="70" /> </Canvas>
15
Para mayor informacin sobre la sintaxis de marca (markup) de los path, busque Path Markup Syntax en el SDK de Silverlight.
Pintando Formas (Shapes) con Brochas (Brushes) La mayora de formas contienen dos partes: un stroke (el contorno) y un Fill (relleno), los cuales se controlan a travs de las propiedades Stroke y Fill. La siguiente ilustracin etiqueta el stroke y el fill del rectngulo dibujado en el primer ejemplo.
Stroke
Fill
No todas las formas tienen ambos: Fill y Stroke. Un Line slo tiene Stroke. Si establece la propiedad Fill en una lnea, no tiene efecto alguno. Ud. puede establecer el Stroke y el Fill con un Brush (Brocha). Hay cinco tipos objetos Brush que puede utilizar: SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush
16
Pintando con Colores Slidos con un SolidColorBrush Para pintar un rea de un color slido, Ud. utiliza un SolidColorBrush. XAML provee varias formas de crear un SolidColorBrush. Ud. puede utilizar sintaxis de atributos para especificar el nombre de un color, tales como Black o Gray Ud. puede usar sintaxis de atributos con notacin hexadecimal para describir los valores rojo, verde, y azul de un color; y opcionalmente su transparencia. Hay varios formatios que puede utilizar: o Notacin de 6 dgitos. El formato es #rrggbb, don rr es un valor hexadecimal de dos dgitos que describe la cantidad de rojo en el color, gg describe la cantidad de verde, y bb describe la cantidad de azul. Por ejemplo, #0033FF. Notacin de 8 dgitos. El formato es el mismo que el de 6 dgitos, excepto por dos valores adicionales para describir el valor de alpha, u opacidad, del color #aarrggbb. Por ejemplo, #990033FF. Tambin hay notaciones de 3 y 4 dgitos para color de 8-bits, pero stos no son comunmente usados.
Ud. puede utilizar sintaxis de elemento de objeto para crear explcitamente un SolidColorBrush y especificar su propiedad Color, usando uno de los formatos de cadena descritos para la sintaxis de atributo.
El siguiente ejemplo muestra varias formas de pintar un objeto de negro.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10" Fill="Black" />  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10" Fill="#000000" />  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110" Fill="#ff000000" />  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110"> <Ellipse.Fill>  <SolidColorBrush Color="Black" /> </Ellipse.Fill> </Ellipse> </Canvas>
17
Pintando Gradientes con LinearGradientBrush y RadialGradientBrush Silverlight soporta gradientes tanto lineares como radiales. Los gradientes tienen uno o ms Paradas de Gradiente (Gradient Stops) que describen los diferentes colores entre los que transiciona el gradiente, y la localizacin de dichos colores. La mayora de gradientes slo necesitan dos Gradient Stops, pero Ud. puede agregar tantos Gradient Stops como necesite.
LinearGradientBrush pinta un gradiente siguiendo una lnea. Esta lnea es diagonal por default, y va desde la esquina superior izquierda hacia la esquina inferior derecha del objeto pintado. Ud. puede utilizar las propiedades StartPoint y EndPoint paa cambiar la posicin de la lnea. RadialGradientBrush pinta una gradiente a lo largo de un crculo. Por defecto, el crculo est centrado en el rea que se est pintando. Ud. puede cambiar el gradiente estableciendo sus propiedades GradientOrigin, Center, RadiusX y RadiosY
Para adicionar Gradient Stops a un Gradient Brush, Ud. crea objetos GradientStop. Establezca la propiedad Offset de un GradientStop a un valor entre 0 y 1, para establecer su posicin relativa en el gradiente. Establezca la propiedad Color del GradientStop a un color nombrado o valor hexadecimal.
18
El siguiente ejemplo utiliza objetos LinearGradientBrush y RadialGradientBrush para pintar cuatro objetos rectangulares.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="1,0" > <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas>
19
Ud. tambin puede utilizar gradientes para pintar el Stroke (contorno) de un Shape. La siguiente ilustracin muestra las paradas de gradiente del primer LinearGradientBrush de ejemplo previo.
Gradient Stop #1 Color: Yellow Offset: 0.0 Gradient Stop #2 Color: Red Offset: 0.25 Gradient Stop #3 Color: Blue Offset: 0.75
Gradient Stop #4 Color: Green Offset: 1.0
Pintando con Imgenes usando ImageBrush Otro tipo de brocha (brush) es el ImageBrush. Por defecto, la imagen es estirada hasta llenar la forma completa, pero Ud. puede utilizar la propiedad Stretch para controlar cmo la brocha estira su imagen. El siguiente ejemplo usa dos objetos ImageBrush con diferentes valores de Stretch para pinta dos objetos Rectangle.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="tacuba.jpg"/> </Rectangle.Fill> </Rectangle> <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="tacuba.jpg" Stretch="Uniform"/> </Rectangle.Fill> </Rectangle> </Canvas>
20
Parte 5: Propiedades Grficas Comunes

Algunas propiedades aplican a todos los objetos UIElement de Silverlight: Canvas, Shapes, el MediaElement y TextBlock. Este documento describe las propiedades grficas que tienen en comn estos objetos. Esta parte contiene las siguientes secciones La propiedad Opacity La propiedad OpacityMask La propiedad Clip La propiedad RenderTransform
La propiedad Opacity La propiedad Opacity le permite controlar el valor alpha, o de transparencia, de un UIElement. Ud. puede establecer la propiedad opacity a un valor entre cero y uno. Mientras ms cerca est de cero, se vuelve ms transparente el objeto. En el valor cero, el objeto es completamente invisible. El valor por defecto de Opacity es 1.0, lo cual es completamente opaco. El siguiente ejemplo crea dos formas con diferente valor de opacidad.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> <Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>
21
La Propiedad OpacityMask La propiedad OpacityMask le permite controlar el valor alpha de diferentes porciones de un UIElement. Por ejemplo, Ud. puede usar el OpacityMask para hacer que un elemento se vuelva transparente (fade) de derecha a izquierda. La propiedad OpacityMask toma un objeto Brush (Brocha). El Brush es mapeado al elemento y el canal alpha de cada uno de los pixeles de la brocha es usado para determinar la opacidad resultante de los pixeles correspondientes del elemento. Si una porcion dada del Masking Brush es transparente, esa porcin del elemento enmascarado se vuelve transparente. Ud. puede usar cualquier tipo de brocha como un OpacityMask, pero los ms tiles son LinearGradientBrush, RadialGradientBrush e ImageBrush. El siguiente ejemplo aplica una mscara de opacidad LinearGradientBrush a un objeto Rectangle.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> <Rectangle.OpacityMask> <LinearGradientBrush> <GradientStop Offset="0.25" Color="#00000000"/> <GradientStop Offset="1" Color="#FF000000"/> </LinearGradientBrush> </Rectangle.OpacityMask> </Rectangle> </Canvas>
22
La Propiedad Clip La propiedad Clip le permite dibujar porciones de un elemento. Para usar la propiedad Clip, Ud. provee un objeto Geometry que describe la regin que debe ser dibujada. Todo lo que caiga fuera de la geometra es invisible, o clipped (cortado). El siguiente ejemplo usa un RectangleGeometry como el Clip de un elemento Ellipse. Como resultado, slo muestra la porcin de la Ellipse dentro del rea definida por RectangleGeometry. La porcin fuera del RectangleGeometry es cortada.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> <Ellipse.Clip> <RectangleGeometry Rect="0, 0, 100, 100"/> </Ellipse.Clip> </Ellipse> </Canvas>
La Propiedad RenterTransform La propiedad RenderTransform le permite usar objetos Transform para rotar, skew (inclina), escalar, o trasladar (mover) un elemento. La siguiente lista describe los diferentes objetos Transform que Ud. puede utilizar con la propiedad RenderTransform. RotateTransform: Rota un objeto por una cantidad especfica, expresada en grados. SkewTransform: Inclina (skews) un objeto por el valor especificado a lo largo de, ya sea el eje X o el eje Y. ScaleTransform: Hace ms grande o pequeo un objeto horizontalmente o verticalmente por la cantidad especificada. TranslateTransform: Mueve un objeto horizontalmente o verticalmente por la cantidad especificada.
Tambin hay un tipo especial de transformacin, TransformGroup, que Ud. puede utilizar para plicar mtiples transformaciones en secuencia a un solo objeto. Por ejemplo, Ud. puede rotar y luego inclinar (skew) un objeto. El siguiente ejemplo demuestra cada uno de los objetos Transform usndolos para transformar elementos Rectangle.
23
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" Fill="Black"> <Rectangle.RenderTransform> <RotateTransform Angle="45"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10" Fill="red"> <Rectangle.RenderTransform> <SkewTransform AngleX="30"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190" Fill="blue"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="1.3" ScaleY=".5"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130" Fill="Green"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="45"/> <ScaleTransform ScaleX=".5" ScaleY="1.2"/> <SkewTransform AngleX="30"/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </Canvas>
24
Parte 6: Imgenes
El elemento Image le permite desplegar imgenes de mapa de bits (bitmap) en Silverlight. Esta parte contiene las siguientes secciones: El elemento Image La propiedad Stretch Otras formas de usar bitmaps
El Elemento Image El elemento Image provee una forma conveniente de desplegar imgenes JPG y PNG en Silverlight. Para mostrar una imagen, establezca la propiedad Source del objeto Image para que especifique el camino (path) hacia el archivo fuente de su imagen. El siguiente ejemplo usa un elemento Image para mostrar una imagen tipo bitmap. Debido a que las propiedades del Image: Width y Height no estn especificadas, el bitmap es mostrado en su tamao nativo. (Nota: en mi ejemplo, la imagen es tan grande con respecto al area del Plug-In Silverlight que slo se ve una esquina de la foto)
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Image Source="tacuba.jpg" /> </Canvas>
25
La Propiedad Stretch Cuando el tamao del elemento Image y el tamao de su bitmap son diferentes, la propiedad Stretch determina cmo se estira el bitmap para que se ajuste al elemento Image. La propiedad Stretch toma los siguientes valores: None, Fill, Uniform, UniformToFill. El siguiente ejemplo demuestra las propiedades None, Uniform, y Fill.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Image Source="tacuba.jpg" Stretch="None" Height="95" Width="200" Canvas.Left="45" /> <Image Source="tacuba.jpg" Stretch="Fill" Height="95" Width="200" Canvas.Left="45" Canvas.Top="100" /> <Image Source="tacuba.jpg" Stretch="Uniform" Height="95" Width="200" Canvas.Left="45" Canvas.Top="200" /> </Canvas>
Otras Formas de utilizar Bitmaps Para usar un Bitmap como un fondo, utilice el objeto ImageBrush. Vea la parte de Dibujar y Pintar para mayor informacin.
26
Parte 7: Texto
El elemento TextBlock le permite adicionar texto a su contenido Silverlight. Este documento describe cmo usar el elemento TextBlock. Esta parte contiene las siguientes secciones: El elemento TextBlock Propiedades comunes del TextBlock El elemento Run Especificando mltiples Fonts
El Elemento TextBlock Para adicionar texto a su contenido Silverlight, cree un elemento TextBlock y adicione el contenido textual entre las etiquetas (tags) <TextBlock>. El siguiente ejemplo usa un TextBlock para desplegar texto.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock>hello world!</TextBlock> </Canvas>
27
Propiedades Comunes del TextBlock En adicin a las propiedades que recibe por ser un UIElement, tales como Clip y Opacity, el elemento TextBlock provee varias propiedades adicionales, incluyendo los siguientes: FontSize: El tamao del font, en pixeles. FontStyle: El estilo del font. Las opciones son Normal o Italic. FontStretch: Estiramiento del font. Las opciones son UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, Medium, SemiExpanded, Expanded, ExtraExpanded o UltraExpanded. FontWeight: El peso del font. Las opciones son: Thin, Extralight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack. FontFamily: El nombre de la familia del typeface (tipo de letra). Foreground: La brocha (Brush) que pinta el texto dentro del TextBlock. Ud. puede usar un color slido, un gradiente, o una imagen o video. Para mayor informacin, vea la parte de dibujar con Shapes y pintar con Brushes.
El siguiente ejemplo demuestra estas propiedades:

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock FontSize="40" FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold" FontStretch="Expanded" Canvas.Top="20" Canvas.Left="20"> Hello world! <TextBlock.Foreground> <LinearGradientBrush> <GradientStop Color="SlateBlue" Offset="0.0" /> <GradientStop Color="Black" Offset="1.0" /> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock> </Canvas>
28
El Elemento Run Ud. puede mezclar diferentes fonts en el mismo TextBlock usando el elemento Run. Run tiene las mismas propiedades de font que TextBlock, pero no puede ser posicionado con las propiedades Canvas.Left y Canvas.Top. El siguiente ejemplo usa un elemento Run para cambiar el tamao de algo, pero no todo, el text de un TextBlock.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock> Hello <Run FontSize="30">world</Run> </TextBlock> </Canvas>
Especificando Mltiples Fonts No todos los fonts estn disponibles en cada computador del usuario final. La propiedad FontFamily soporta listar mltiples fonts (font fallback) cuando no est disponible el primer font. El font Portale User Interface siempre est disponible en cada mquina, como parte de cmo Silverlight interacta con navegadores (browsers). El siguiente ejemplo muestra diferentes especificaciones de FontFamily.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock FontFamily="Arial, Times New Roman" Text="Hello World" FontSize="20"/> <TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40" Text="Hello World" FontSize="20"/> <TextBlock FontFamily="Portable User Interface" Canvas.Top="80" Text="Hello World" FontSize="20"/> </Canvas>
29
30
Parte 8: Media (Audio y Video)

Silverlight provee un objeto MediaElement que Ud. puede utilizar para mostrar archivos WMV (Windows Media Video) y WMA (Windows Media Audio), as como ciertos tipos de archivos MP3. Este documento contiene las siguientes secciones. Adicione Media a su Pgina Propiedades tiles del MediaElement Controlando interactivamente el playback de la Media Playback de media a Pantalla Completa Pintando con Video
Adicionando Media a su Pgina Para adicionar media a sus archivos, Ud. crea un MediaElement y establece su propiedad Source para que referencie su archivo fuente de la Media, utilizando un camino (path) tipo URI. El siguiente es un ejemplo.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <MediaElement Source="SilverlightWithWebServices.wmv" Width="300" Height="300" /> </Canvas>
31
Al igual que otros objetos UIElement, Ud. puede colocar dibujos encima de objetos MediaElement. El siguiente ejemplo agrega una Ellipse enfrente del MediaElement del ejemplo previo.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" Opacity="0.6" /> </Canvas>
Propiedades Utiles del MediaElement En adicin a las propiedades que el MediaElement recibe por ser un UIElement, tales como Opacity y Clip, MediaElement provee varias propiedades especficas a Media. Stretch: Especifica cmo se estira el video para llenar el MediaElement. Los valores posibles son: None, Uniform, UniformToFill y Fill. El valor por defecto es: Fill. Para mayor informacin de la propiedad Stretch, vea el SDK Silverlight. IsMuted: Especifica si el MediaElemente est en mute (silenciado). Un valor de true silencia el MediaElement. El valor por defecto es false. Volume: Especifica el volumen del audio del MediaElement como un valor de 0 a 1, con 1 siendo el de mayor volumen. El valor por defecto es 0.5.
Vea el Silverlight SDK para propiedades MediaElement adicionales.
32
Controlando Interactivamente el Playback de la Media Ud. puede controlar interactivamente el playback de la media utilizando los mtodos Play, Pause y Stop. El siguiente ejemplo usa los mtodos Play, Pause y Stop para controlar interactivamente el playback de la media.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <MediaElement x:Name="media" Source="SilverlightWithWebServices.wmv" Width="300" Height="300" />  <Canvas MouseLeftButtonDown="media_stop" Canvas.Left="10" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="media_pause" Canvas.Left="70" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="media_begin" Canvas.Left="130" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="55"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> </Canvas> </Canvas>
33
Cdigo JavaScript
function media_stop(sender, args) { sender.findName("media").stop(); } function media_pause(sender, args) { sender.findName("media").pause(); } function media_begin(sender, args) { sender.findName("media").play();
Playback de Media en Pantalla Completa (Full Screen) Para playback del media en pantalla completa, establezca la propiedad FullScreen en true del plug-in Silverlight anfitrin de su contenido, y ajuste el tamao del MediaElement al ActualWidth y ActualHeight reportado por el modelo de objetos de Silverlight. El siguiente ejemplo adiciona playback de pantalla completa a los controles interactivos definidos en el ejemplo previo.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="canvas_loaded"> <MediaElement x:Name="media" Source="SilverlightWithWebServices.wmv" Width="300" Height="300" /> <Canvas x:Name="buttonPanel">  <Canvas MouseLeftButtonDown="media_stop" Canvas.Left="10" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas>
34
 <Canvas MouseLeftButtonDown="media_pause" Canvas.Left="70" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="media_begin" Canvas.Left="130" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="55"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> </Canvas>  <Canvas MouseLeftButtonDown="toggle_fullScreen" Canvas.Left="190" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="85"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Gray" Offset="0.0" /> <GradientStop Color="Black" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5" Foreground="White" >full screen</TextBlock> </Canvas> </Canvas> </Canvas>
Cdigo JavaScript:
function media_stop(sender, args) { sender.findName("media").stop(); } function media_pause(sender, args) { sender.findName("media").pause(); } function media_begin(sender, args) { sender.findName("media").play(); } function canvas_loaded(sender, args) { var plugin = sender.getHost(); plugin.content.onfullScreenChange = onFullScreenChanged;
35
} function toggle_fullScreen(sender, args) { var silverlightPlugin = sender.getHost(); silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen; } function onFullScreenChanged(sender, args) { var silverlightPlugin = sender.getHost(); var buttonPanel = sender.findName("buttonPanel"); if (silverlightPlugin.content.fullScreen == true) { buttonPanel.opacity = 0; } else { buttonPanel.opacity = 1; } var mediaPlayer = sender.findName("media"); mediaPlayer.width = silverlightPlugin.content.actualWidth; mediaPlayer.height = silverlightPlugin.content.actualHeight; }
Pintando con Video Ud. puede utilizar un VideoBrush para pintar formas y texto con video. Para utilizar un VideoBrush, siga estos pasos: 1. 2. Cree un elemento VideoBrush Cree un MediaElement y asgnele un nombre. El MediaElement procesa el flujo (stream) de video para el VideoBrush. A menos que desee ver dos copias del video, Ud. deber establecer la Opacidad del MediaElement en 0.0. Si no desea audio (lo cual sera ms comn cuando usa un video como brocha (brush)), establezca la propiedad IsMuted del MediaElement en true. Establezca la propiedad SourceName del VideoBrush al nombre del MediaElement que acaba de crear.
3.
El siguiente ejemplo usa un VideoBrush para pinter el Foreground de un TextBlock.

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <MediaElement x:Name="myMediaElement" Source="SilverlightWithWebServices.wmv" Width="300" Height="300" Opacity="0" IsMuted="True" /> <TextBlock Canvas.Left="10" Canvas.Top="10" FontFamily="Verdana" FontSize="80" FontWeight="Bold">Watch<LineBreak/>This <TextBlock.Foreground> <VideoBrush SourceName="myMediaElement" /> </TextBlock.Foreground> </TextBlock>
</Canvas>
36
El parar (stop), pausar o correr (play) el MediaElement afecta al VideoBrush asociado, pero al cambiar el tamao o la opacidad del MediaElement no lo afecta. El mismo MediaElement puede utilizzarse por mltiples objetos VideoBrush.
37
Parte 9: Animaciones
Silverlight le permite utilizar markup paa definir animaciones.Este Quickstart introduce caractersticas de animacin de Silverlight y lo lleva por el proceso de creacin de su primera animacin Silverlight. Este Quickstart contiene las siguientes secciones: Paso a paso: animar un objeto o Paso 1: encontrar algo a animar o Paso 2: crear un EventTrigger o Paso 3: crear un Storyboard y una animacin Otros tipos de animacin Propiedades de Timelines Especificar valores de transicin de animacin
Paso a Paso: Animar un Objeto Paso 1: Encuente algo a Animar Primero, Ud. necesita algo a animar. Para este ejemplo, usaremos una Ellipse. El siguiente ejemplo crea una Ellipse e inicialmente lo pinta de negro.
Note que la Ellipse tiene un nombre: x:Name=Ellipse La Ellipse necesita un nombre de forma que pueda ser animado. (Ms especficamente, la Ellipse necesita un nombre de forma que pueda ser localizado por una animacin definida en otra parte del XAML Es el destino o target de la animacin). Ahora que Ud. tiene un objeto a animar, el siguiente paso es crear un EventTrigger que comenzar la animacin. Paso 2: Crear un EventTrigger Un EventTrigger (Disparador por Evento) lleva a cabo una accin cuando algo lo dispara. Como lo implica su nombre, ese algo es un evento, especificado por la propiedad RoutedEvent. Debido a que Ud. desea que el EventTrigger inicia una animacin, use un BeginStoryboard como su accin. Tambin necesita decidir cul evento va a disparar la animacin. En Silverlight 1.0, es fcil decidir, pues el objeto EventTigger slo soporta un solo evento, el evento Loaded. Establezca la propiedad RoutedEvent a Canvas.Loaded. Esto comenzar la animacin cuando cargue el Canvas principal. El siguiente ejemplo muestra el markup hasta ahora:
38
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="Black" /> </Canvas>
Ahora est lista para crear un Storyboard y una animacin Paso 3: crear un Storyboard y una animacin Un Storyboard puede describir y controlar una o ms animaciones. Para este ejemplo usaremos una sola animacin. En Silverlight, Ud. anima objetos aplicando animaciones a propiedades del objeto. Utilice una DoubleAnimation para animar la propiedad Canvas.Left de la Ellipse. Ud. utiliza un DoubleAnimation debido a que la propiedad animada, Canvas.Left, es de tipo Double (un nmero de punto flotante de doble precisin). Para que la animacin opere, debe darle un nombre al que se va a aplicar (Storyboard.TargetName=ellipse), una propiedad destino (Storyboard.TargetProperty=(Canvas.Left), un valor hacia el que se va a animar (To=300) y una duracin (Duration=0:0:1). La propiedad Duration especifica la longitud de tiempo que toma la animacin para transicionar desde su valor inicial hasta su valor final. Un valor de 0:0:1 especifica un Duration de un segundo.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Canvas.Left)" To="300" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="Black" /> </Canvas>
39
Otros Tipos de Animacin Silverlight tambin soporta animar colores (ColorAnimation) y puntos (PointAnimation). Cuando est animando colores, recuerde que color es diferente de SolidColorBrush. El primero es una propiedad del segundo. Cuando Ud. especifica un nombre de color o valor hexadecimal para establecer propiedades de Stroke y Fill de un Shape, en realidad Silverlight convierte esa cadena de caracteres a un SolidColorBrush automticamente. Si quiere animar un Stroke o Fill, recomendamos usar la sintaxis ms verbosa, en donde declara un Brush (brocha) explcitamente y le da la oportunidad de darle un nombre al Brush directamente. El siguiente ejemplo anima el color de dos Ellipses. El Fill de la primera Ellipse fue especificado explicitamente con un SolidColorBrush. El ejemplo le da un nombre al SolidColorBrush y anima su propiedad Color. La segunda animacin es ms compleja, ya que el Fill ser establecido con un nombre de color. Cuando corra el markup, el sistema crear un SolidColorBrush del color apropiado y lo utilizar para pintar la Ellipse. Debido a que carecemos de un tag <SolidColorBrush> al que podamos nombrar, el SolidColorBrush generado automticamente por el sistema slo puede animarse con una propiedad destino al que llegamos indirectamente.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="e1_brush" Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:5" /> <ColorAnimation Storyboard.TargetName="e2" Storyboard.TargetProperty="(Fill).(Color)" From="Red" To="Blue" Duration="0:0:5" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"> <Ellipse.Fill> <SolidColorBrush x:Name="e1_brush" Color="black"/> </Ellipse.Fill> </Ellipse> <Ellipse x:Name="e2" Fill="Black" Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/> </Canvas>
40
Tanto Storyboard y DoubleAnimation son tipos del objeto Timeline. Los Timelines tienen varias propiedades tiles: Storyboard.TargetName: el nombre del objeto que est animando. Si no especifica un Storyboard.Targetname, el timeline utiliza el de su padre. Si no especifica el Storyboard.TargetName en ninguno de los padres, el timeline se enfoca en el elemento que es dueo del EventTrigger disparado. Storyboard.TargetProperty: La propiedad que est animando. Si lo omite, usa el de su padre. La sintaxis de esta propiedad vara, dependiendo del tipo de propiedad animado: o Para enfocarse en un attached property, use la siguiente sintaxis: (ownerType.propertyName). Por ejemplo (Canvas.Top) enfoca la propiedad Canvas.Top. o Para enfocar cualquier otro tipo de propiedad, utilice la sintaxis: propertyName. Por ejemplo, Opacity (sin parntesis) enfoca la propiedad Opacity. BeginTime: El tiempo en que el timeline debe comenzar. Recuerde que la unidad por defecto es das, as que tenga cuidado si especifica 2 implica 2 das. Use la siguiente sintaxis paa especificar horas, minutos y segundos: horas:minutos:segundos. Por ejemplo, 0:0:2 para 2 segundos. Si no especifica BeginTime, el valor por defecto es 0 segundos. Duration: La longitud de tiempo que corre una pasada de la animacin (ms tarde hay otra propiedad para repetir las pasadas). Usa la misma sintaxis que BeginTime, por lo que debe tener cuidado si utiliza valores como 2, que significa: 2 das. Duration tambin tiene los valores especiales Forever y Automatic. El valor por default es Automatic. FillBehaviour: Cmo debe comportarse un timeline cuando termina. Esta propiedad puede tomar uno de dos valores: Stop o HoldEnd. Stop reotrna el valor de la propiedad al valor inicial, antes de que comenzara la animacin. HoldEnd toma el valor final de la animacin. El valor por defecto es HoldEnd. RepeatBehaviour: Indica cuntas veces debe correr el TimeLine. Esta propiedad puede tomar tres tipos de valores: un conteo de iteraciones, un valor de tiempo, o el valor especial Forever. - Forever hace que el timeline repita indefinidamente. - Un tiempo finito hace que el timeline corre por el tiempo especificado. Por ejemplo, al establecer un RepeatBehaviour de 0:0:5 en una animacin con Duration de 2.5 segundos, le da tiempo para repetir la animacin dos veces. - Un valor de iteracin hace que el timeline corra por el nmero especificado de iteraciones. Ud. expresa valores de iteracin con la sintaxis: iterationCountx. Por ejemplo, un valor de 4x repite el timeline cuatro veces. El valor por defecto es 1x, que corre slo una vez.
41
El siguiente ejemplo demuestra estas propiedades de timeline.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard Storyboard.TargetName="e1" Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0:0:1"> <DoubleAnimation To="300" /> <DoubleAnimation To="300" Storyboard.TargetName="e2"/> <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width" /> <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/> <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/> <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/> <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/> <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="e1" Fill="Black" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/> <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock> <Ellipse x:Name="e2" Fill="Red" Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/> <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock> <Ellipse x:Name="e3" Fill="Purple" Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/> <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock> <Ellipse x:Name="e4" Fill="Blue" Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/> <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock> <Ellipse x:Name="e5" Fill="Green" Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/> <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock> <Ellipse x:Name="e6" Fill="Black" Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/> <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock> <Ellipse x:Name="e7" Fill="Orange" Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/> <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock> <Ellipse x:Name="e8" Fill="Red" Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/> <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock> </Canvas>
42
Especifique Valores de Transicion de la Animacin DoubleAnimation, ColorAnimation, y PointAnimation tienen propiedades From y To que especifican los valores de inicio y final de la propiedad animada. Si no especifica el From, usar el valor actual de la propiedad como valor inicial de la animacin. En vez de especificar un valor final con la propiedad To, Ud. puede utilizar una propiedad By paa establecer un valor de offset.
43
Parte 10: Scripting y Eventos del Ratn

Silverlight 1.0 soporta programacin en JavaScript, que le permite darle interactividad a su contenido. Esta parte contiene las siguientes secciones: scripting y eventos estableciendo propiedades estableciendo attached properties eventos comunes del ratn nombrando objetos y recobrndolos creando objetos dinmicamente con Silverlight creando objetos dinmicamente con Silverlight, con manipulacin de cadenas XAML controlando animaciones interactivamente usando el mtodo getElementById
Scripting y Eventos Silverlight le permite correr cdigo JavaScript cuando ocurre un evento, como cuando un objeto es cargado o el ratn entra en un objeto. Tales scripts son llamados event handler (manejadores de evento). Para definir un event handler, siga estos pasos:
1.
En su archivo XAML, agregue el siguiente atributo al objeto que disparar su funcin. someEvent=myFunction donde someEvent es el evento al cual desea responder, y myFunction es el nombre de la funcin que manejar el evento.
2.
Defina la funcin en su archivo JavaScript.
Ahora probaremos un ejemplo. En Silverlight, todos los elementos Canvas y Shapes tienen un evento llamado MouseLeftButtonDown que ocurre cuando el usuario oprime el botn izquierdo cuando el cursor est sobre ese elemento. Ud. escribir un manejador de eventos para dicho evento, que llamar a la funcin de JavaScript alert para crear una caja de dilogo. El archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="helloworld"> <TextBlock Text="click me" </Canvas> FontSize="50"/>
44
El archivo default.htm podra contener la funcin helloworld():

<!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" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <script type="text/javascript" src="my-script.js"></script> </head> <body> <!Lugar donde va el Plug-In Silverlight --> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Recobra el elemento div que Ud. cre en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta funcin crea el Plug-In Silverlight. createMySilverlightPlugin(); function helloworld() { alert("hello world"); } </script> </body> </html>
O bien, colocamos la funcin helloworld() en un archivo Javascript externo my-script.js que hemos referenciado en la seccin <head>:
function helloworld() { alert("hello world"); }
Ud. no necesita especificar parmetros cuando declara una funcin manejadora de eventos (event handler function). Pero si especifica parmetros, deben ser dos: el primer parmetro, sender, es el elemento que enva el evento. El segundo parmetro, args, es un objeto que contiene datos sobre el evento. Sin embargo, no todos los eventos transmiten informacin especfica al evento en args; muchas veces el valor de dicho parmetro es null y no es til para su manejador de evento.
45
Estableciendo propiedades Ud. puede establecer propiedades de los objetos Silverlight utilizando JavaScript. Cuando una propiedad toma un valor que es una cadena o un nmero, lo puede establecer de manera normal con JavaScript. Si la propiedad toma un objeto Silverlight, y tiene un convertidor de tipo, tales como SolidColorBrush o Point, Ud. puede establecer el valor usando una cadena (string). De otra forma, Ud. necesitar usar el mtodo createFromXaml para instanciar un nuevo valor de propiedad. El siguiente ejemplo se registra para el evento MouseLeftButtonDown de un Canvas. En el manejador de evento (event handler) el parmetro sender provee acceso al Canvas. El ejemplo establece la propiedad Background del Canvas a rojo, y muestra el valor actual de su propiedad Height.
Archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" MouseLeftButtonDown="changecolor"> <TextBlock Text="click me" </Canvas> FontSize="50"/>
Archivo my-script.js:
function changecolor(sender, args) { sender.background = "red"; alert("Altura es " + sender.Height); }
Estableciendo attached properties Para establecer el valor de una attached property (como, por ejemplo, Canv as.Top), en JavaScript, utilice la siguiente sintaxis: Object[attachedPropertyName]=value; en donde attachedPropertyName es el nombre de la propiedad adjuntada que desea establecer.
46
El siguiente ejemplo establece la propiedad Canvas.Top de un TextBlock con el valor 70, al oprimir el botn izquierdo del ratn.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300"> <TextBlock Text="click me" FontSize="50" MouseLeftButtonDown="changelocation" /> </Canvas>
function changelocation(sender, args) { sender["Canvas.Top"] = 70; }
Eventos comunes del ratn Los objetos UIElemento proveen una cantidad de eventos de ratn diferentes, los cuales puede manejar: MouseLeftButtonDown, MouseLeftButtonUp, MouseEnter (disparado raised cuando el ratn pasa sobre el elemento, MouseLeave y MouseMove (disparado cuando el ratn es movido dentro del elemento). Los eventos Mouse tienen un objeto args que provee las posiciones x y y del ratn al momento de ocurrir el evento. Ud. puede referenciarlos en los manejadores de los eventos del ratn.
47
El siguiente ejemplo utilica cada uno de los eventos del ratn para modificar la apariencia de una Ellipse. En el archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse x:Name="e1" MouseMove="e1Move" MouseEnter="e1Enter" MouseLeave="e1Leave" MouseLeftButtonDown="e1Down" MouseLeftButtonUp="e1Up" Height="100" Width="100" Canvas.Left="80" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas>
En el archivo my-script.js:
function e1Enter(sender, args) { sender.stroke = "red"; } function e1Leave(sender, args) { sender.stroke = "black"; } function e1Down(sender, args) { sender.fill = "Green"; } function e1Up(sender, args) { sender.fill = "LightBlue"; } function e1Move(sender, args) { sender.fill = "yellow"; }
Otro til evento en la programacin Silverlight es el evento Loaded. Usualmente Ud. registra manejadores (handlers) para este evento con una declaracin en el elemento raz (root), aunque puede especificarse en cualquier UIElement, no slo en el raz. El evento Loaded provee una buena oportunidad para aplicar cambios de ltimo minuto cuando despliega el contenido Silverlight. El siguiente ejemplo usa un evento Loaded para cambiar el Fill de una Ellipse de Blue a Red.
48
Nombrando Objetos y Recobrndolos
Los ejemplos anteriores usaban manejadores de evento (event handlers) JavaScript para modificar el objeto que dispar el evento, pero qu sucede si desea usar mtodos o establecer propiedades de un objeto distinto al sender? Los elementos silverlight proveen un mtodo llamado FindName que le permiten recuperar objetos Silverlight desde cualquier marco de referencia dentro del contenido Silverlight. Para utilizar FindName para recuperar un objeto, Ud. debe primero especificar el atributo x:Name (o el atributo/propiedad Name, que es esencialmente equivalente) para darle al objeto un nombre cuando lo declara en XAML. El siguiente ejemplo cambia la propiedad Fill de una Ellipse cuando el botn izquierdo es presionado sobre el Canvas padre. Cuando el Canvas dispara el evento, la funcin changeEllipseColor es llamado con Canvas como sender. La funcin llama a sender.findName para recuperar el objeto llamado myEllipse y establecer su propiedad Fill a Red (rojo). En el archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="changeEllipseColor"> <TextBlock Text="click me" FontSize="50"/>
<Ellipse x:Name="myEllipse" Height="200" Width="200" Canvas.Left="30" Canvas.Top="80" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas>
function changeEllipseColor(sender, args) { sender.findName("myEllipse").Fill = "red"; }
49
Creando objetos dinmicamente con Silverlight Ud. puede usar el mtodo CreateFromXaml para crear nuevos objetos Silverlight desde JavaScript. Pero antes de poder utilizar el mtodo CreateFrom Xaml, debe obtener una referencia a la instancia del Plug-In Silverlight. Si Ud. ya tiene una referencia a cualquier objeto Silverlight, Ud. puede utilizar el mtodo GetHost para retornar una referencia a la instancia de Plug-In anfitrin. De otra forma, utilice el mtodo document.getElementById para recuperar la instancia de plugin.
El siguiente ejemplo crea un nuevo objeto Ellipse y lo adiciona al Canvas cada vez que oprime el botn izquierdo del ratn. Note que a pesar de que est adicionando mltiples objetos si Ud. da click ms de una vez, slo ver una Ellipse. Esto es porque todas las Ellipses se ven igual, y estn en el mismo lugar, una encima del otro. En el archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="createEllipse"> <TextBlock Text="click for circle" </Canvas> FontSize="40"/>
Y en el archivo my-script.js:
function createEllipse(sender, args) { var slControl = sender.getHost(); var e = slControl.content.createFromXaml( '<Ellipse Height="200" Width="200" Fill="Blue"/>'); var canvas = sender; canvas.children.Add(e); }
Note que JavaScript requiere que las cadenas de caracteres quepan en una sola lnea, a menos que combine mltiples cadenas con el operador +. Tambin note el uso de tanto comillas simples () ycomillas dobles () en la cadena XAML <Ellipse>. El comenzar y finalizar la cadena de JavaScript con comillas simples le permite utilizar doble comillas para los valores en la cadena XAML, o viceversa. Slo asegrese de que las comillas simples o dobles estn emparejadas y balanceadas.
50
Creando objetos dinmicamente con Silverlight, con manipulacin de cadenas XAML El previo ejemplo mostr un potencialmente efecto secundario no deseado de adicionar el mismo XAML a la pgina ms de una vez. Si Ud. desea adicionar objetos con XAML, es frecuentemente deseable cambiar el XAML en algo cada vez. Ud. puede hacer esto ajustando la cadena XAML inmediatamente antes de cada llamada. En el archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="createEllipse2"> <TextBlock Text="click for Lots of circles" </Canvas> FontSize="20"/>
var opacitychange = 1; var canvastop = 0; var canvasleft = 0; function createEllipse2(sender, args) { var slControl = sender.getHost(); xamlstring = '<Ellipse Height="10" Width="10" Fill="Red"'; xamlstring += " Opacity = '" + (opacitychange-=0.1) + "'"; xamlstring += " Canvas.Left = '" + (canvasleft+=15) + "'"; xamlstring += " Canvas.Top = '" + (canvastop+=15) + "'"; xamlstring += "/>"; var e = slControl.content.createFromXaml(xamlstring); var canvas = sender; canvas.children.Add(e); }
Controlando animaciones interactivamente Ud. puede utilizar manejadores de eventos (event handlers) para controlar animaciones. Asigne un nombre al Storyboard que Ud. desea controlar y luego puede utilizar sus mtodos Begin, Stop, Pause y Resume para controlarlo interactivamente. Si no desea que el Storyboard comience automticamente, declrelo como un Resource (recurso) en vez de declararlo dentro de un EventTrigger.
51
En el archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Resources> <Storyboard x:Name="animation" Storyboard.TargetName="e1" Storyboard.TargetProperty="(Canvas.Left)"> <DoubleAnimation RepeatBehavior="Forever" To="300"/> </Storyboard> </Canvas.Resources> <Ellipse x:Name="e1" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="White" Offset="0.0" /> <GradientStop Color="Black" Offset="0.5" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Canvas MouseLeftButtonDown="animation_stop" Canvas.Left="20" Canvas.Top="60"> <Rectangle Stroke="Black" Height="40" Width="40" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas> <Canvas MouseLeftButtonDown="animation_pause" Canvas.Left="70" Canvas.Top="60"> <Rectangle Stroke="Black" Height="40" Width="50" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas> <Canvas MouseLeftButtonDown="animation_begin" Canvas.Left="130" Canvas.Top="60"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="40" Width="50"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">begin</TextBlock> </Canvas> </Canvas>
52
function animation_stop(sender, args) { sender.findName("animation").stop(); } function animation_pause(sender, args) { sender.findName("animation").pause(); } function animation_begin(sender, args) { sender.findName("animation").begin(); }
Usando el mtodo getElementById Cuando est escribiendo script que no es disparado por un evento Silverlight (tales como el manejador de eventos HTML), Ud. no tendr un parmetro Sender que pueda proveer acceso a los mtodos FindName o GetHost. En este caso, Ud. puede usar document.getElementById() para encontrar el plug-in Silverlight, y luego utilizar el objeto Plug-In Silverlight para llamar al mtodo FindName. El siguiente ejemplo usa el mtodo document.getElementById() para encontrar la instancia del Plug-In Silverlight con nombre mySilverlightPlugin. Luego utiliza el mtodo FindName para recuperar la instancia de Ellipse llamada myEllipse y cambia su propiedad Fill a red (rojo). En el archivo myxaml.xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="changeEllipseColor2"> <TextBlock Text="click me" FontSize="50"/>
<Ellipse x:Name="myEllipse" Height="200" Width="200" Canvas.Left="30" Canvas.Top="80" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas>
function changeEllipseColor2() { var varPlugIn = document.getElementById("mySilverlightPlugin"); varPlugIn.content.findName("myEllipse").fill = "red"; }
53
En el ejemplo anterior, mySilverlightPlugIn es el DOM ID de HTML de la instancia de Plug-In Silverlight que cre en su archivo HTML anfitrin, cuando llam al Silverlight.createObject, como se describe en la primera parte de este documento. Para referencia, en el archivo HTML default.htm, Ud. tiene lo siguiente:
<!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" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <script type="text/javascript" src="my-script.js"></script> </head> <body> <!Lugar donde va el Plug-In Silverlight --> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Recobra el elemento div que Ud. cre en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta funcin crea el Plug-In Silverlight. createMySilverlightPlugin(); </script> </body> </html>
En el archivo createSilverlight.js, tiene:

function createMySilverlightPlugin() { Silverlight.createObject( "myxaml.xaml", parentElement, "mySilverlightPlugin", { width:'300', height:'300', inplaceInstallPrompt:false, background:'#D6D6D6', isWindowless:'false', framerate:'24', version:'1.0' }, { onError:null, onLoad:null }, null); } // // // // Valor propiedad OnError -nombre funcin del event handler. Valor propiedad OnLoad -nombre funcin del event handler.
// // // // // // // // // // // // // //
Valor de Propiedad Source. Referencia DOM a DIV tag hosteador. Valor de ID del plug-in. Propiedades por cada instancia. Ancho del plug-in en pixels. Altura del plug-in en pixels. Determina si desplegar prompt para instalar in-place si detecta versin invlida. Color del fondo del plug-in. Determina si mostrar plug-in en modo Windowless. Valor propiedad MaxFrameRate. Versin de Silverlight a usar.
// Valor Contexto event handler.
54
55
Parte 11: Ejemplo de Controles

Esta pate contiene ejemplos que muestran cmo utilizar Silverlight para crear controles interactivos. Esta parte contiene las siguientes secciones: Ejemplo de hyperlink Ejemplo de botn Ejemplo de Slider
Ejemplo de Hyperlink El siguiente ejemplo crea un hyperlink a partir de un TextBlock y una Line. Archivo myxaml.xaml:
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  <Canvas Width="90" Height="30" Canvas.Left="20" Canvas.Top="20" Background="transparent" Cursor="Hand" MouseEnter="hyperlink_MouseEnter" MouseLeave="hyperlink_MouseLeave" MouseLeftButtonDown="hyperlink_MouseLeftButtonDown"> <TextBlock Text="hyperlink" Foreground="Blue"/> <Line Stroke="blue" StrokeThickness="1" X1="0" Y1="20" X2="65" Y2="20" x:Name="hyperlink_line" Opacity="0"/> </Canvas> </Canvas>
function hyperlink_MouseLeftButtonDown(sender, args) { window.location = "about-frames.html"; } function hyperlink_MouseEnter(sender,args) { sender.findName("hyperlink_line").opacity = 1; } function hyperlink_MouseLeave(sender,args) { sender.findName("hyperlink_line").opacity = 0; }
56
Nota: hay una forma alternativa ms conveniente de crear un hyperlink. Ver documentacin de la propiedad TextDecorations del objeto TextBlock en el SDK Silverlight.
Ejemplo de Botn El siguiente ejemplo crea un botn a partir de dos elementos Rectangle y un TextBlock. Archivo myxaml.xaml:
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  <Canvas x:Name="button" Canvas.Top="10" Canvas.Left="20" MouseLeftButtonDown="button_MouseLeftButtonDown" MouseLeftButtonUp="button_MouseLeftButtonUp" MouseEnter="button_MouseEnter" MouseLeave="button_MouseLeave"> <Canvas.RenderTransform> <TransformGroup> <TranslateTransform x:Name="button_transform" X="0" Y="0"/> </TransformGroup> </Canvas.RenderTransform> <Rectangle Stroke="#FF000000" Fill="sc#1, 0.8123474, 0.8123474, 0.8123474" Width="128.8" Height="56" x:Name="button_rectangle"/> <Rectangle Stroke="sc#1, 0.912730157, 0.37122494, 0.17111966" StrokeThickness="5" Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1" Opacity="0" x:Name="button_highlight"/> <TextBlock Text="Presione!" FontSize="20" Canvas.Left="22" Canvas.Top="12"/> </Canvas> </Canvas>
57
var mouseOver = false; var pressed = false; function button_MouseLeftButtonDown(sender,args) { sender.captureMouse(); mouseOver = true; pressed = true; updateVisuals(sender); } function button_MouseLeftButtonUp(sender,args) { sender.releaseMouseCapture(); pressed = false; updateVisuals(sender); if (mouseOver) { alert("you pressed the button!"); } } function button_MouseEnter(sender,args) { mouseOver = true; updateVisuals(sender); } function button_MouseLeave(sender,args) { mouseOver = false; updateVisuals(sender); } function updateVisuals(sender) { //background if (pressed && mouseOver) { sender.findName("button_rectangle").fill = "sc#1, 0.548430264, 0.5354195, 0.5354195"; var transform = sender.findName("button_transform"); transform.x = 2; transform.y = 2; } else { sender.findName("button_rectangle").fill = "sc#1, 0.8123474, 0.8123474, 0.8123474"; var transform = sender.findName("button_transform"); transform.x = 0; transform.y = 0; } // highlight if (mouseOver || pressed) { sender.findName("button_highlight").opacity = 1; } else { sender.findName("button_highlight").opacity = 0; } }
58
Ejemplo de Slider El siguiente ejemplo crea un Slider a partir de un Line y un Path.
<Canvas Width="300" Height="300" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="slider_Loaded">  <Canvas x:Name="slider" Canvas.Top="50" Canvas.Left="20" Width="200" Height="45" Background="transparent"> <Line x:Name="slider_line" Stroke="black" StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25" /> <Rectangle Fill="Transparent" Width="200" Height="45" MouseLeftButtonDown="slider_MouseLeftButtonDown" /> <Path x:Name="slider_thumb" Stroke="#FF000000" Fill="sc#1, 0.548430264, 0.5354195, 0.5354195" Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp" MouseMove="slider_thumb_MouseMove" MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" /> </Canvas> </Canvas>
var mouseDownPosition = 0; var mouseDownValue = -1; var thumbCenter = 5.75; function slider_Loaded(sender, args) { slider_SetValue(sender, 0); } function slider_MouseLeftButtonDown(sender, args) { var coordinate = args.getPosition(null).x; var slider = sender.findName("slider"); coordinate -= slider["Canvas.Left"]; slider_SetValue(slider, coordinate - thumbCenter); } function slider_thumb_MouseLeftButtonDown(sender, args) { var slider = sender.findName("slider"); sender.captureMouse(); mouseDownValue = slider_GetValue(slider); mouseDownPosition = args.getPosition(null).x; } function slider_thumb_MouseLeftButtonUp(sender, args) { var slider = sender.findName("slider"); slider.releaseMouseCapture(); mouseDownValue = -1; }
59
function slider_thumb_MouseMove(sender, args) { var slider = sender.findName("slider"); if (mouseDownValue != -1) { var newValue = mouseDownValue + (args.getPosition(null).x mouseDownPosition); slider_SetValue(slider, newValue); } } function slider_GetValue(sender) { var thumb = sender.findName("slider_thumb"); return thumb["Canvas.Left"]; } function slider_SetValue(sender, newValue) { if (newValue > sender.width ) { newValue = sender.width; mouseDownValue = -1; } if (newValue < - thumbCenter) { newValue = - thumbCenter; mouseDownValue = -1; } var thumb = sender.findName("slider_thumb"); thumb["Canvas.Left"] = newValue; }
60

Intro Ducci On Silver Light

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Intro Ducci On Silver Light

Cargado por

Copyright:

Formatos disponibles

Introduccin a Silverlight

Parte 1: Creando un Proyecto Silverlight

// Valor Contexto event handler.

Su archivo HTML debera contener los siguientes elementos:

Parte 2: Crear un archivo XAML Silverlight

<Canvas xmlns=http://schemas.microsoft.com/client/2007 xmlns:x=http//schemas.microsoft.com/winfx/2006/xaml> </Canvas>

Parte 3: El Objeto Canvas (como el Lienzo de un artista)

Un Canvas puede contener cualquier nmero de objetos, an otros objetos Canvas.

La siguiente ilustracin muestra el sistema de coordenadas del Canvas y la posicin de la Ellipse.

Objetos Canvas anidados (nested)

Parte 4: Dibujando y Pintando (Drawing and Painting)

El siguiente ejemplo dibuja una Ellipse, un Rectngulo y una Lnea en el Canvas.

El siguiente ejemplo muestra varias formas de pintar un objeto de negro.

Gradient Stop #4 Color: Green Offset: 1.0

Parte 5: Propiedades Grficas Comunes

El siguiente ejemplo demuestra estas propiedades:

Parte 8: Media (Audio y Video)

Vea el Silverlight SDK para propiedades MediaElement adicionales.

El siguiente ejemplo usa un VideoBrush para pinter el Foreground de un TextBlock.

El siguiente ejemplo demuestra estas propiedades de timeline.

Parte 10: Scripting y Eventos del Ratn

Defina la funcin en su archivo JavaScript.

El archivo default.htm podra contener la funcin helloworld():

Nombrando Objetos y Recobrndolos

En el archivo createSilverlight.js, tiene:

// Valor Contexto event handler.

Parte 11: Ejemplo de Controles

Ejemplo de Slider El siguiente ejemplo crea un Slider a partir de un Line y un Path.

También podría gustarte