introduccion silverlight

1

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>

2

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>

3

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


},

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>

4

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.

5

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>

6

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.

7

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.

8

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.

Canvas.Left=”30”

Canvas.Top=”30” 0,0

9

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>

10

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>

11

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>

12

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.

13

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>

14

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>

15

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>

16

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.

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

Stroke

Fill

17

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>

18

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.

19

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>

20

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.

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>

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

21

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>

22

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>

23

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.

24

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

25

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>

26

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.

27

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>

28

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>

29

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>

31

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>

32

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.

33

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>

34

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>


</Canvas>

35



<Canvas MouseLeftButtonDown="media_pause"




<Rectangle.Fill>





</Rectangle.Fill>

</Rectangle>


</Canvas>



<Canvas MouseLeftButtonDown="media_begin"




<Rectangle.Fill>





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



</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;

36

}

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>

37

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.

38

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:

39

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

40

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>

41

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.

42

El siguiente ejemplo demuestra estas propiedades de timeline.

<Canvas



<Canvas.Triggers>



<BeginStoryboard>

<Storyboard


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>

43

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.

44

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>

45

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





<head>





</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.

46

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.

47

El siguiente ejemplo establece la propiedad Canvas.Top de un TextBlock con el valor 70, al oprimir el

botón izquierdo del ratón.


<Canvas



Width="300" Height="300">

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

MouseLeftButtonDown="changelocation" />

</Canvas>


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.

48

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.

49

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"




</Canvas>


function changeEllipseColor(sender, args) {

sender.findName("myEllipse").Fill = "red";

}

50

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.

51

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.

52


<Canvas



<Canvas.Resources>

<Storyboard x:Name="animation"


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>


<GradientStop Color="White" Offset="0.0" />



</Ellipse.Fill>

</Ellipse>

<Canvas MouseLeftButtonDown="animation_stop" Canvas.Left="20" Canvas.Top="60">



<Rectangle.Fill>





</Rectangle.Fill>

</Rectangle>


</Canvas>

<Canvas MouseLeftButtonDown="animation_pause"




<Rectangle.Fill>





</Rectangle.Fill>

</Rectangle>


</Canvas>

<Canvas MouseLeftButtonDown="animation_begin" Canvas.Left="130"

Canvas.Top="60">



<Rectangle.Fill>





</Rectangle.Fill>

</Rectangle>

<TextBlock Canvas.Left="5" Canvas.Top="5">begin</TextBlock>

</Canvas>

</Canvas>

53


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 método getElementById

Cuando está escribiendo script que no es disparado por un evento Silverlight (tales como el manejador de

eventos HTML), Ud. no tendrá un parámetro Sender que pueda proveer acceso a los métodos 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 método FindName.

El siguiente ejemplo usa el método document.getElementById() para encontrar la instancia del Plug-In

Silverlight con nombre mySilverlightPlugin. Luego utiliza el método FindName para recuperar la

instancia de Ellipse llamada myEllipse y cambia su propiedad Fill a red (rojo).


<Canvas



MouseLeftButtonDown="changeEllipseColor2">


<Ellipse x:Name="myEllipse"




</Canvas>


function changeEllipseColor2() {

var varPlugIn = document.getElementById("mySilverlightPlugin");

varPlugIn.content.findName("myEllipse").fill = "red";

}

54

En el ejemplo anterior, mySilverlightPlugIn es el DOM ID de HTML de la instancia de Plug-In

Silverlight que creó en su archivo HTML anfitrión, 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:





<head>





</head>

<body>



</div>



var parentElement =




</script>

</body>

</html>

En el archivo createSilverlight.js, tiene:

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


onLoad:null // Valor propiedad OnLoad --


},

null); // Valor Contexto – event handler.

}

56

Parte 11: Ejemplo de Controles

Esta pate contiene ejemplos que muestran cómo utilizar Silverlight para crear controles interactivos.


- Ejemplo de hyperlink

- Ejemplo de botón

- Ejemplo de Slider

Ejemplo de Hyperlink

El siguiente ejemplo crea un hyperlink a partir de un TextBlock y una Line.


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





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

}

57

Nota: hay una forma alternativa más conveniente de crear un hyperlink. Ver documentación de la

propiedad TextDecorations del objeto TextBlock en el SDK Silverlight.

Ejemplo de Botón

El siguiente ejemplo crea un botón a partir de dos elementos Rectangle y un TextBlock.







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


Opacity="0"

x:Name="button_highlight"/>

<TextBlock Text="Presione!" FontSize="20" Canvas.Left="22" Canvas.Top="12"/>

</Canvas>

</Canvas>

58


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;


if (mouseOver) {

alert("you pressed the button!");

}

}

function button_MouseEnter(sender,args) {

mouseOver = true;


}

function button_MouseLeave(sender,args) {

mouseOver = false;


}

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;

}

}

59

Ejemplo de Slider

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





Loaded="slider_Loaded">



<Canvas x:Name="slider"

Canvas.Top="50" Canvas.Left="20"


Background="transparent">

<Line x:Name="slider_line"

Stroke="black" StrokeThickness="1"

X1="0" Y1="25" X2="200" Y2="25" />

<Rectangle

Fill="Transparent"


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) {


sender.captureMouse();

mouseDownValue = slider_GetValue(slider);

mouseDownPosition = args.getPosition(null).x;

}

function slider_thumb_MouseLeftButtonUp(sender, args) {


slider.releaseMouseCapture();

mouseDownValue = -1;

}

60

function slider_thumb_MouseMove(sender, args) {


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;


}

if (newValue < - thumbCenter) {

newValue = - thumbCenter;


}

var thumb = sender.findName("slider_thumb");

thumb["Canvas.Left"] = newValue;

}

introduccion silverlight

Technology