Intro SL Proyecto

Introducción a Silverlight

Parte 1: Creando un Proyecto Silverlight

¿Cómo agrega Ud. Silverlight a su página Web? Un proyecto Silverlight típico 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
cómo crear un proyecto básico, 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 Página HTML

En este paso, Ud. adicionará referencias apuntando a los archivos JavaScript Silverlight.js y
createSilverlight.js en su página 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 múltiples 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.

b. Abra su página HTML y adicione el siguiente “markup” dentro de la sección <head>:
<script type=‖text/javascript‖ src=‖Silverlight.js‖></script>

c. Cree un archivo vacío, y nómbrelo createSilverlight.js. Lo utilizará en el Paso 3.

d. En su página HTML, adicione otra referencia dentro de la sección <head>. Esta vez
especifíquelo como:
<script type=”text/javascript” src=”createSilverlight.js”></script>

e. Su página HTML debe contener los siguientes elementos básicos:

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

1

Paso 2: Crear el Elemento HTML “Host” y el Bloque de Inicialización

a) Cree el elemento HTML “host” adicionando las siguientes tres líneas 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
múltiples instancias del Plug-In Silverlight en la misma página, repita este paso para
cada instancia, y asegúrese que cada ID sea único.

b) Cree un bloque de inicialización: después 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 función crea el Plug-In Silverlight.
createMySilverlightPlugin();

</script>

Si está creando múltiples instancias del Plug-In Silverlight en la misma página, repita
este paso para cada instancia, asegurándose de que cada uno tenga nombres de función
únicos, o que utilice una función que tome un parámetro que utilice para establecer un
ID único. También asegúrese 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:

"-//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>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>

<div id="mySilverlightPluginHost">
</div>
<script type="text/javascript">

var parentElement =
document.getElementById("mySilverlightPluginHost");


</script>

</body>
</html>

2

Paso 3: Defina la Función de Creación que Inicializa su instancia del Plug-In

Abra el archivo createSilverlight.js que creó en el paso 1 y adicione la siguiente función JavaScript:

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

Este script contiene varios parámetros que Ud. querrá ajustar, tales como la altura y el ancho del Plug-In
(permite tamaños 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 múltiples Plug-In Silverlight a la misma página, cree una nueva función para cada
uno, o utilice una función de creación parametrizada. En cualquier caso, asegúrese de que cada resultado
de la llamada a la función 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 archivo HTML.
Si Ud. modifica su parámetre de Archivo Fuente (Source File), también cambie el nombre de
este archivo para que concuerden.

b. (Opcional) Si desea que el proyecto Silverlight maneje eventos, genere código dinámicamente, o
de cualquier manera interactúe 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 página HTML anfitrión. El siguiente ejemplo crea una referencia al archivo
de script llamado my-script.js

<script type=‖text/javascript‖ src=‖my-script.js‖></script>

3

Su archivo HTML debería contener los siguientes elementos:

<head>
<script type="text/javascript" src="my-script.js"></script>
</head>
<body>

</div>

var parentElement =


</script>
</body>
</html>

Creando Múltiples Instancias del Plug-In Silverlight

Si desea crear más de un plug-in Silvelight en su página, repita los pasos 2, 3 y 4 para cada instancia.

- Cada etiqueta <div> del anfitrión (creada en el paso 2a) debe tener un ID único.
- Cada bloque de inicialización (creado en el paso 2b) debe seguir inmediatamente a la etiqueta
<div> creada en el paso precedente (2a).
- Cada parámetro ID de plug-in debe también ser única.

4

Parte 2: Crear un archivo XAML Silverlight

En el paso precedente, Ud. agregó un Plug-In Silverlight a una página HTML, y creó un archivo XAML
en blanco. Acá se muestra cómo 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 anvitrión. Ud. deberá ver un círculo
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

</Canvas>

5

Nota: Si tiene instalado WPF y da doble –click sobre el archivo XML con contenido XAML (en vez de la
página 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 aplicación basada en Silverlight vienen del mismo servidor que sirvió la página
HTML.

6

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

Un Canvas es un objeto diseñado para contener y posicionar formas (shapes) y controles. Cada archivo
XAML Silverlight contiene al menos un Canvas, que le sirve como elemento raíz (root). Esta sección
introduce al objeto canvas y describe cómo adicionar, posicionar y especificar el tamaño 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, insértelo entre las
etiquetas (tags) de <Canvas>. El siguiente ejemplo adiciona un objeto Ellipse a un Canvas. Debido a que
el Canvas es el elemento raíz, es una buena práctica de XML aprovechar el elemento raíz (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

</Canvas>

Un Canvas puede contener cualquier número de objetos, aún otros objetos Canvas.

7

Posicionando un Objeto

Para posicionar un objeto en el Canvas, Ud. especifica las propiedades incluídas de Canvas.Left y
Canvas.Top del objeto en cuestión. La propiedad incluída (attached property) Canvas.Left especifica la
distancia entre un objeto y el borde izquierdo de su Canvas padre, y la propiedad incluída 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‖

</Canvas>

La siguiente ilustración muestra el sistema de coordenadas del Canvas y la posición de la Ellipse.

0,0 Canvas.Top=”30”

Canvas.Left=”30”

8

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 más 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
Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />

<Ellipse
Stroke="Black" StrokeThickness="10" Fill="Lime" />

</Canvas>

9

Ud. puede modificar este comportamiento al especificar la propiedad incluída (attached property)
Canvas.ZIndex en los objetos dentro del Canvas. Los valores mayores están más cerca del primer plano
(foreground); los valores más bajos están más lejos del primer plano. El siguiente ejemplo es similar al
previo, excepto que los z-order de los objetos Ellipse van al revés. La Ellipse que declaramos de primero
(la de color plateado) está ahora al frente.

<Canvas

<Ellipse
Canvas.ZIndex="3"
Stroke="Black" StrokeThickness="10" Fill="Silver" />

<Ellipse
Canvas.ZIndex="2"
Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />

<Ellipse
Canvas.ZIndex="1"
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 tamaño. El siguiente ejemplo crea una Ellipse de 200 pixels
de ancho y 200 pixels de alto. Note que carece de soporte para tamaños en porcentajes.

<Canvas

<Ellipse
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:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="LimeGreen" >

<Ellipse
Canvas.ZIndex="3"

</Canvas>

Cuando corra el ejemplo, el cuadrado verde lima es el Canvas, y el fondo gris es la porción del area del
plug-in anfitrión que no ha sido cubierto por el Canvas. Note que la Ellipse no está cortada, a pesar de que
se sale de los límites del Canvas.

Tanto el Width como el Height toman el valor de cero (0) si no lo establece explícitamente.

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: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 gráficas vectoriales básicas 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) básicas
- Otros elementos Shape
- Pintando Shapes con brochas (brushes)

Shapes (formas) básicas

Silverlight provee tres elementos básicos de Shape: Ellipse, Rectangle y Line

- Un elemento Ellipse describe un óvalo o círculo. Ud. controla su diámetro horizontal
estableciendo la propiedad Width (Ancho), y su diámetro vertical estableciendo su propiedad
Height (Altura).
- Un elemento Rectangle describe un Shape cuadrado o rectangular, opcionalmente con esquinas
redondeadas. Ud. controla su tamaño horizontal estableciendo su propiedad Width, y su tamaño
vertical estableciendo su propiedad Height. Ud. puede también 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 tamaño y
colocación estableciendo sus propiedades X1, Y1 y X2, Y2.

El siguiente ejemplo dibuja una Ellipse, un Rectángulo y una Línea en el Canvas.

<Canvas

<Ellipse Height=‖200‖ Width=‖200‖ Canvas.Left=‖30‖ Canvas.Top=‖30‖

<Rectangle Height=‖300‖ Width=‖100‖

</Canvas>

14

Otros elementos Shape

En adición 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 número arbitrario de lados, mientras
que un Polyline es una serie de lineas conectadas que podrían o podrían no formar un Shape cerrado. El
siguiente ejemplo crea un Polygon y un Polyline.

<Canvas

<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

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

<Path Data="M 0,200 L100,200 50,50z"
Stroke="Black" Fill="Gray"

</Canvas>

15

Para mayor información 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 mayoría de formas contienen dos partes: un stroke (el contorno) y un Fill (relleno), los cuales se
controlan a través de las propiedades Stroke y Fill. La siguiente ilustración etiqueta el stroke y el fill del
rectángulo dibujado en el primer ejemplo.

Stroke

Fill

No todas las formas tienen ambos: Fill y Stroke. Un Line sólo tiene Stroke. Si establece la propiedad Fill
en una línea, 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 Sólidos con un SolidColorBrush

Para pintar un área de un color sólido, 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 notación hexadecimal para describir los valores rojo,
verde, y azul de un color; y opcionalmente su transparencia. Hay varios formatios que puede
utilizar:

o Notación de 6 dígitos. El formato es #rrggbb, don rr es un valor hexadecimal de dos
dígitos 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.

o Notación de 8 dígitos. El formato es el mismo que el de 6 dígitos, excepto por dos
valores adicionales para describir el valor de alpha, u opacidad, del color #aarrggbb. Por
ejemplo, #990033FF.

o También hay notaciones de 3 y 4 dígitos para color de 8-bits, pero éstos no son
comunmente usados.

- Ud. puede utilizar sintaxis de elemento de objeto para crear explícitamente 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

<Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
Fill="Black" /> 

Fill="#000000" /> 

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 más Paradas de
Gradiente (Gradient Stops) que describen los diferentes colores entre los que transiciona el gradiente, y la
localización de dichos colores. La mayoría de gradientes sólo necesitan dos Gradient Stops, pero Ud.
puede agregar tantos Gradient Stops como necesite.

- LinearGradientBrush pinta un gradiente siguiendo una línea. Esta línea 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 posición de la línea.

- RadialGradientBrush pinta una gradiente a lo largo de un círculo. Por defecto, el círculo 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 posición 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


<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.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
</Rectangle.Fill>
</Rectangle>


<Rectangle.Fill>
<RadialGradientBrush>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>

<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="1,0" >
</Rectangle.Fill>
</Rectangle>

</Canvas>

19

Ud. también puede utilizar gradientes para pintar el Stroke (contorno) de un Shape.

La siguiente ilustración muestra las paradas de gradiente del primer LinearGradientBrush de ejemplo
previo.

Gradient Stop #1 Gradient Stop #2 Gradient Stop #3
Color: Yellow Color: Red Color: Blue
Offset: 0.0 Offset: 0.25 Offset: 0.75

Gradient Stop #4
Color: Green
Offset: 1.0

Pintando con Imágenes 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 cómo la brocha estira su imagen. El
siguiente ejemplo usa dos objetos ImageBrush con diferentes valores de Stretch para pinta dos objetos
Rectangle.

<Canvas

<Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<ImageBrush ImageSource="tacuba.jpg"/>
</Rectangle.Fill>
</Rectangle>

Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<ImageBrush ImageSource="tacuba.jpg" Stretch="Uniform"/>
</Rectangle.Fill>
</Rectangle>

</Canvas>

20

Parte 5: Propiedades Gráficas Comunes

Algunas propiedades aplican a todos los objetos UIElement de Silverlight: Canvas, Shapes, el
MediaElement y TextBlock. Este documento describe las propiedades gráficas que tienen en común 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 más cerca está de cero, se vuelve
más 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

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

</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 porción del elemento enmascarado se vuelve transparente.

Ud. puede usar cualquier tipo de brocha como un OpacityMask, pero los más útiles son
LinearGradientBrush, RadialGradientBrush e ImageBrush.

El siguiente ejemplo aplica una máscara de opacidad LinearGradientBrush a un objeto Rectangle.

<Canvas

Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
<Rectangle.OpacityMask>
<GradientStop Offset="0.25" Color="#00000000"/>
<GradientStop Offset="1" Color="#FF000000"/>
</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 región que debe ser dibujada. Todo lo que caiga fuera de la geometría
es invisible, o “clipped” (cortado).

El siguiente ejemplo usa un RectangleGeometry como el Clip de un elemento Ellipse. Como resultado,
sólo muestra la porción de la Ellipse dentro del área definida por RectangleGeometry. La porción fuera
del RectangleGeometry es cortada.

<Canvas

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 específica, 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 más grande o pequeño un objeto horizontalmente o verticalmente por la
cantidad especificada.
- TranslateTransform: Mueve un objeto horizontalmente o verticalmente por la cantidad
especificada.

También hay un tipo especial de transformación, TransformGroup, que Ud. puede utilizar para plicar
mútiples 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 usándolos para transformar elementos
Rectangle.

23

<Canvas

Fill="Black">
<Rectangle.RenderTransform>
<RotateTransform Angle="45"/>
</Rectangle.RenderTransform>
</Rectangle>

Fill="red">
<SkewTransform AngleX="30"/>
</Rectangle>

Fill="blue">
<ScaleTransform ScaleX="1.3" ScaleY=".5"/>
</Rectangle>

Fill="Green">
<TransformGroup>
<RotateTransform Angle="45"/>
<ScaleTransform ScaleX=".5" ScaleY="1.2"/>
<SkewTransform AngleX="30"/>
</TransformGroup>
</Rectangle>

</Canvas>

24

Parte 6: Imágenes

El elemento Image le permite desplegar imágenes 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 imágenes 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 están especificadas, el
bitmap es mostrado en su tamaño nativo.

(Nota: en mi ejemplo, la imagen es tan grande con respecto al area del Plug-In Silverlight que sólo se ve
una esquina de la foto)

<Canvas

<Image Source="tacuba.jpg" />

</Canvas>

25

La Propiedad Stretch

Cuando el tamaño del elemento Image y el tamaño de su bitmap son diferentes, la propiedad Stretch
determina cómo 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

<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 información.

26

Parte 7: Texto

El elemento TextBlock le permite adicionar texto a su contenido Silverlight. Este documento describe
cómo usar el elemento TextBlock.


- El elemento TextBlock
- Propiedades comunes del TextBlock
- El elemento Run
- Especificando múltiples 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

<TextBlock>hello world!</TextBlock>

</Canvas>

27

Propiedades Comunes del TextBlock

En adición 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 tamaño 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
sólido, un gradiente, o una imagen o video. Para mayor información, vea la parte de dibujar con
Shapes y pintar con Brushes.

El siguiente ejemplo demuestra estas propiedades:

<Canvas

<TextBlock FontSize="40"
FontFamily="Georgia"
FontStyle="Italic" FontWeight="Bold"
FontStretch="Expanded"
Canvas.Top="20" Canvas.Left="20">

Hello world!

<TextBlock.Foreground>
<GradientStop Color="SlateBlue" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</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 tamaño de algo, pero no todo, el
text de un TextBlock.

<Canvas

<TextBlock>
Hello <Run FontSize="30">world</Run>
</TextBlock>

</Canvas>

Especificando Múltiples Fonts

No todos los fonts están disponibles en cada computador del usuario final. La propiedad FontFamily
soporta listar múltiples fonts (font fallback) cuando no está disponible el primer font. El font “Portale
User Interface” siempre está disponible en cada máquina, como parte de cómo Silverlight interactúa con
navegadores (browsers). El siguiente ejemplo muestra diferentes especificaciones de FontFamily.

<Canvas

<TextBlock FontFamily="Arial, Times New Roman"
Text="Hello World" FontSize="20"/>
<TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40"
<TextBlock FontFamily="Portable User Interface" Canvas.Top="80"

</Canvas>

29

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 Página
- Propiedades útiles del MediaElement
- Controlando interactivamente el playback de la Media
- Playback de media a Pantalla Completa
- Pintando con Video

Adicionando Media a su Página

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

<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



Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
Opacity="0.6" />

</Canvas>

Propiedades Utiles del MediaElement

En adición a las propiedades que el MediaElement recibe por ser un UIElement, tales como Opacity y
Clip, MediaElement provee varias propiedades específicas a Media.

- Stretch: Especifica cómo 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 información
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 métodos Play, Pause y Stop.
El siguiente ejemplo usa los métodos Play, Pause y Stop para controlar interactivamente el playback de la
media.

<Canvas

<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" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="media_pause"
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="media_begin"
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
<Rectangle.Fill>
<GradientStop Color="Green" Offset="1.0" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>

</Canvas>

33

Código 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 anfitrión de su contenido, y ajuste el tamaño 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
Loaded="canvas_loaded">

<MediaElement x:Name="media"
Width="300" Height="300" />

<Canvas x:Name="buttonPanel">


<Canvas MouseLeftButtonDown="media_stop"
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>

34

<Canvas MouseLeftButtonDown="media_pause"
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="media_begin"
<Rectangle.Fill>
<GradientStop Color="Green" Offset="1.0" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="toggle_fullScreen"
<Rectangle.Fill>
<GradientStop Color="Gray" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5"
Foreground="White" >full screen</TextBlock>
</Canvas>

</Canvas>

</Canvas>

Código 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. Cree un elemento VideoBrush
2. Cree un MediaElement y asígnele 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 sería más común cuando usa un
video como brocha (brush)), establezca la propiedad IsMuted del MediaElement en true.
3. Establezca la propiedad SourceName del VideoBrush al nombre del MediaElement que acaba de
crear.

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

<Canvas

<MediaElement x:Name="myMediaElement"
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
tamaño o la opacidad del MediaElement no lo afecta. El mismo MediaElement puede utilizzarse por
múltiples objetos VideoBrush.

37

Parte 9: Animaciones

Silverlight le permite utilizar markup paa definir animaciones.Este Quickstart introduce características de
animación de Silverlight y lo lleva por el proceso de creación de su primera animación 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 animación
- Otros tipos de animación
- Propiedades de Timelines
- Especificar valores de transición de animación

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. (Más específicamente, la Ellipse necesita
un nombre de forma que pueda ser localizado por una animación definida en otra parte del XAML Es el
destino o target de la animación). Ahora que Ud. tiene un objeto a animar, el siguiente paso es crear un
EventTrigger que comenzará la animación.

Paso 2: Crear un EventTrigger

Un EventTrigger (Disparador por Evento) lleva a cabo una acción 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 animación, use un BeginStoryboard como su acción.

También necesita decidir cuál evento va a disparar la animación. En Silverlight 1.0, es fácil decidir, pues
el objeto EventTigger sólo soporta un solo evento, el evento Loaded. Establezca la propiedad
RoutedEvent a Canvas.Loaded. Esto comenzará la animación cuando cargue el Canvas principal. El
siguiente ejemplo muestra el markup hasta ahora:

38

<Canvas

<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>

</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<Ellipse x:Name="ellipse"
Fill="Black" />

</Canvas>

Ahora está lista para crear un Storyboard y una animación

Paso 3: crear un Storyboard y una animación

Un Storyboard puede describir y controlar una o más animaciones. Para este ejemplo usaremos una sola
animación. 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 número de punto flotante de doble
precisión).

Para que la animación 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 duración (Duration=”0:0:1”). La propiedad
Duration especifica la longitud de tiempo que toma la animación para transicionar desde su valor inicial
hasta su valor final. Un valor de 0:0:1 especifica un Duration de un segundo.

<Canvas

<Canvas.Triggers>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="(Canvas.Left)"
To="300" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>

<Ellipse x:Name="ellipse"
Fill="Black" />

</Canvas>

39

Otros Tipos de Animación

Silverlight también 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 automáticamente. Si quiere animar un Stroke o Fill, recomendamos usar la sintaxis más
verbosa, en donde declara un Brush (brocha) explícitamente 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 animación es más 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 automáticamente por el sistema sólo puede animarse con una propiedad
destino al que llegamos indirectamente.

<Canvas

<Canvas.Triggers>
<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>
</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
dueño del EventTrigger disparado.
- Storyboard.TargetProperty: La propiedad que está animando. Si lo omite, usa el de su padre. La
sintaxis de esta propiedad varía, 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 paréntesis) enfoca la propiedad Opacity.
- BeginTime: El tiempo en que el timeline debe comenzar. Recuerde que la unidad por defecto es
días, así que tenga cuidado – si especifica “2” implica 2 días. 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 animación (más 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 días. Duration también tiene los valores
especiales “Forever” y “Automatic”. El valor por default es “Automatic”.
- FillBehaviour: Cómo 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 animación. “HoldEnd” toma el valor final de la animación. El valor
por defecto es “HoldEnd”.
- RepeatBehaviour: Indica cuántas 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 animación con Duration de 2.5 segundos,
le da tiempo para repetir la animación dos veces.
- Un valor de iteración hace que el timeline corra por el número especificado de iteraciones.
Ud. expresa valores de iteración con la sintaxis: iterationCountx. Por ejemplo, un valor de
“4x” repite el timeline cuatro veces. El valor por defecto es “1x”, que corre sólo una vez.

41

El siguiente ejemplo demuestra estas propiedades de timeline.

<Canvas

<Canvas.Triggers>
<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"
<DoubleAnimation FillBehavior="Stop" To="200"
<DoubleAnimation RepeatBehavior="Forever" To="300"
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>

<TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
<Ellipse x:Name="e2" Fill="Red"
<TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
<Ellipse x:Name="e3" Fill="Purple"
<TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
<Ellipse x:Name="e4" Fill="Blue"
<TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
<Ellipse x:Name="e5" Fill="Green"
<TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
<TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
<Ellipse x:Name="e7" Fill="Orange"
<TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
<Ellipse x:Name="e8" Fill="Red"
<TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>

</Canvas>

42

Especifique Valores de Transicion de la Animación

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 animación. 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 Ratón

Silverlight 1.0 soporta programación en JavaScript, que le permite darle interactividad a su contenido.


- scripting y eventos
- estableciendo propiedades
- estableciendo “attached properties”
- eventos comunes del ratón
- nombrando objetos y recobrándolos
- creando objetos dinámicamente con Silverlight
- creando objetos dinámicamente con Silverlight, con manipulación de cadenas XAML
- controlando animaciones interactivamente
- usando el método getElementById

Scripting y Eventos

Silverlight le permite correr código JavaScript cuando ocurre un evento, como cuando un objeto es
cargado o el ratón 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 función.

someEvent=”myFunction”

… donde someEvent es el evento al cual desea responder, y myFunction es el nombre de la
función que manejará el evento.

2. Defina la función 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 botón izquierdo cuando el cursor
está sobre ese elemento. Ud. escribirá un manejador de eventos para dicho evento, que llamará a la
función de JavaScript alert para crear una caja de diálogo.

El archivo myxaml.xaml:

<Canvas
MouseLeftButtonDown="helloworld">

<TextBlock Text="click me" FontSize="50"/>

</Canvas>

44

El archivo default.htm podría contener la función helloworld():

<head>
<script type="text/javascript" src="my-script.js"></script>
</head>
<body>

</div>

var parentElement =


function helloworld() {
alert("hello world");
}

</script>
</body>
</html>

O bien, colocamos la función helloworld() en un archivo Javascript externo my-script.js que hemos
referenciado en la sección <head>:

function helloworld() {
alert("hello world");
}

Ud. no necesita especificar parámetros cuando declara una función manejadora de eventos (event handler
function). Pero si especifica parámetros, deben ser dos: el primer parámetro, sender, es el elemento que
envía el evento. El segundo parámetro, args, es un objeto que contiene datos sobre el evento. Sin
embargo, no todos los eventos transmiten información específica al evento en args; muchas veces el valor
de dicho parámetro 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 número, 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 método
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 parámetro 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
MouseLeftButtonDown="changecolor">


</Canvas>

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, Canvas.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
botón izquierdo del ratón.

Archivo myxaml.xaml:

<Canvas
Width="300" Height="300">

<TextBlock Text="click me" FontSize="50"
MouseLeftButtonDown="changelocation" />

</Canvas>

Archivo my-script.js:

function changelocation(sender, args) {

sender["Canvas.Top"] = 70;
}

Eventos comunes del ratón

Los objetos UIElemento proveen una cantidad de eventos de ratón diferentes, los cuales puede manejar:
MouseLeftButtonDown, MouseLeftButtonUp, MouseEnter (disparado – raised – cuando el ratón pasa
sobre el elemento, MouseLeave y MouseMove (disparado cuando el ratón es movido dentro del
elemento). Los eventos Mouse tienen un objeto “args” que provee las posiciones “x” y “y” del ratón al
momento de ocurrir el evento. Ud. puede referenciarlos en los manejadores de los eventos del ratón.

47

El siguiente ejemplo utilica cada uno de los eventos del ratón para modificar la apariencia de una Ellipse.

En el archivo myxaml.xaml:

<Canvas

<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 programación Silverlight es el evento Loaded. Usualmente Ud. registra
manejadores (handlers) para este evento con una declaración en el elemento raíz (root), aunque puede
especificarse en cualquier UIElement, no sólo en el raíz. 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 Recobrándolos

Los ejemplos anteriores usaban manejadores de evento (event handlers) JavaScript para modificar el
objeto que disparó el evento, pero qué sucede si desea usar métodos o establecer propiedades de un objeto
distinto al sender? Los elementos silverlight proveen un método 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 botón izquierdo es presionado
sobre el Canvas padre. Cuando el Canvas dispara el evento, la función changeEllipseColor es llamado con
Canvas como sender. La función llama a sender.findName para recuperar el objeto llamado myEllipse y
establecer su propiedad Fill a Red (rojo).


<Canvas
MouseLeftButtonDown="changeEllipseColor">


<Ellipse x:Name="myEllipse"
Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>

</Canvas>


function changeEllipseColor(sender, args) {
sender.findName("myEllipse").Fill = "red";
}

49

Creando objetos dinámicamente con Silverlight

Ud. puede usar el método CreateFromXaml para crear nuevos objetos Silverlight desde JavaScript. Pero
antes de poder utilizar el método 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 método
GetHost para retornar una referencia a la instancia de Plug-In anfitrión.
- De otra forma, utilice el método document.getElementById para recuperar la instancia de plug-
in.

El siguiente ejemplo crea un nuevo objeto Ellipse y lo adiciona al Canvas cada vez que oprime el botón
izquierdo del ratón. Note que a pesar de que está adicionando múltiples objetos si Ud. da click más de una
vez, sólo verá una Ellipse. Esto es porque todas las Ellipses se ven igual, y están en el mismo lugar, una
encima del otro.


<Canvas
MouseLeftButtonDown="createEllipse">

<TextBlock Text="click for circle" FontSize="40"/>

</Canvas>

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 línea, a menos que
combine múltiples cadenas con el operador +. También 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. Sólo
asegúrese de que las comillas simples o dobles estén emparejadas y balanceadas.

50

Creando objetos dinámicamente con Silverlight, con manipulación de cadenas XAML

El previo ejemplo mostró un potencialmente efecto secundario no deseado de adicionar el mismo XAML
a la página más 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.


<Canvas
MouseLeftButtonDown="createEllipse2">

<TextBlock Text="click for Lots of circles" FontSize="20"/>

</Canvas>


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 métodos Begin, Stop, Pause y
Resume para controlarlo interactivamente. Si no desea que el Storyboard comience automáticamente,
declárelo como un Resource (recurso) en vez de declararlo dentro de un EventTrigger.

51

Intro SL Proyecto

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Intro SL Proyecto

Similar a Intro SL Proyecto (20)

Último

Último (18)

Intro SL Proyecto