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 :

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 . Esta vez especifíquelo como:

e.

Su página HTML debe contener los siguientes elementos básicos: A Sample HTML page

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) , en donde desea que aparezca su contenido Silverlight.

Ud. puede cambiar el ID de la etiqueta (tag) , 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. // 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();

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: A Sample HTML page // 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();

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", parentElement, "mySilverlightPlugin", { width:'300', height:'300', inplaceInstallPrompt:false, background:'#D6D6D6', isWindowless:'false', framerate:'24', version:'1.0'

// // // // // // // // // // // // // //

Valor de Propiedad Source. Referencia DOM a DIV tag hosteador. Valor de ID del plug-in. Propiedades por cada instancia. Ancho del plug-in en pixels. Altura del plug-in en pixels. Determina si desplegar prompt para instalar in-place si detecta versión inválida. Color del fondo del plug-in. Determina si mostrar plug-in en modo Windowless. Valor propiedad MaxFrameRate. Versión de Silverlight a usar.

// // // //

Valor propiedad OnError -nombre función del event handler. Valor propiedad OnLoad -nombre función del event handler.

}, { onError:null, onLoad:null }, 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

3

Su archivo HTML debería contener los siguientes elementos: A Sample HTML page // 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();

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



Cada archivo XAML Silverlight comienza con una etiqueta 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 y almacene el archivo.

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

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





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.



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.

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.

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.

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.

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.

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.

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.

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 Color: Yellow Offset: 0.0

Gradient Stop #2 Color: Red Offset: 0.25

Gradient Stop #3 Color: Blue Offset: 0.75

Gradient Stop #4 Color: Green Offset: 1.0

Pintando con 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.

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.

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.

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.

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



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)

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.

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. Esta parte contiene las siguientes secciones: -

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) . El siguiente ejemplo usa un TextBlock para desplegar texto. hello world!

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: Hello world!

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. Hello world

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.

29

30

Parte 8: Media (Audio y Video) Silverlight provee un objeto MediaElement que Ud. puede utilizar para mostrar archivos WMV (Windows Media Video) y WMA (Windows Media Audio), así como ciertos tipos de archivos MP3. Este documento contiene las siguientes secciones. -

Adicione Media a su 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.

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.

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. stop pause play

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

34

pause play full screen

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

3.

Cree un elemento VideoBrush 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. 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. WatchThis



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



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.

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 al que podamos nombrar, el SolidColorBrush generado automáticamente por el sistema sólo puede animarse con una propiedad destino al que llegamos indirectamente.

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.

e1 e2 e3 e4 e5 e6 e7 e8

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. Esta parte contiene las siguientes secciones: -

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:



44

El archivo default.htm podría contener la función helloworld(): A Sample HTML page // 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(); function helloworld() { alert("hello world"); }

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



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:

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:

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). En el archivo myxaml.xaml:



En el archivo my-script.js: 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 plugin.

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. En el archivo myxaml.xaml:



Y en el archivo my-script.js: function createEllipse(sender, args) { var slControl = sender.getHost(); var e = slControl.content.createFromXaml( ''); 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 . 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. En el archivo myxaml.xaml:



En el archivo my-script.js: var opacitychange = 1; var canvastop = 0; var canvasleft = 0; function createEllipse2(sender, args) { var slControl = sender.getHost(); xamlstring = '