Introducción a SilverlightParte 1: Creando un Proyecto Silverlight¿Cómo agrega Ud. Silverlight a su página Web? Un proyect...
Paso 2: Crear el Elemento HTML “Host” y el Bloque de Inicialización             a)   Cree el elemento HTML “host” adiciona...
Paso 3: Defina la Función de Creación que Inicializa su instancia del Plug-InAbra el archivo createSilverlight.js que creó...
Su archivo HTML debería contener los siguientes elementos:         <!DOCTYPE html PUBLIC           "-//W3C//DTD XHTML 1.0 ...
Parte 2: Crear un archivo XAML SilverlightEn el paso precedente, Ud. agregó un Plug-In Silverlight a una página HTML, y cr...
Nota: Si tiene instalado WPF y da doble –click sobre el archivo XML con contenido XAML (en vez de lapágina Web) se lanzará...
Parte 3: El Objeto Canvas (como el Lienzo de un artista)Un Canvas es un objeto diseñado para contener y posicionar formas ...
Posicionando un Objeto      Para posicionar un objeto en el Canvas, Ud. especifica las propiedades incluídas de Canvas.Lef...
Z-OrderPor defecto, el orden Z (z-order) de los objetos dentro de un Canvas está determinada por la secuencia enque son de...
Ud. puede modificar este comportamiento al especificar la propiedad incluída (attached property)Canvas.ZIndex en los objet...
Controlando Ancho y Alto (Width y Height)Los Canvas, las formas (shapes) y muchos otros elementos tienen propiedades de Wi...
El siguiente ejemplo establece el Width (Ancho) y Height (Alto), pero esta vez del Canvas padre, a unvalor de 200 y le da ...
Objetos Canvas anidados (nested)Los Canvas pueden contener otros objetos Canvas. El siguiente ejemplo crea un Canvas que a...
Parte 4: Dibujando y Pintando (Drawing and Painting)Silverlight soporta gráficas vectoriales básicas al proveer los elemen...
Otros elementos ShapeEn adición a los elementos Ellipse, Line y Rectangle, Silverlight provee tres otros elementos Shape:P...
Para mayor información sobre la sintaxis de marca (markup) de los path, busque Path Markup Syntax enel SDK de Silverlight....
Pintando con Colores Sólidos con un SolidColorBrushPara pintar un área de un color sólido, Ud. utiliza un SolidColorBrush....
Pintando Gradientes con LinearGradientBrush y RadialGradientBrushSilverlight soporta gradientes tanto lineares como radial...
El siguiente ejemplo utiliza objetos LinearGradientBrush y RadialGradientBrush para pintar cuatroobjetos rectangulares.   ...
Ud. también puede utilizar gradientes para pintar el Stroke (contorno) de un Shape.La siguiente ilustración muestra las pa...
Parte 5: Propiedades Gráficas ComunesAlgunas propiedades aplican a todos los objetos UIElement de Silverlight: Canvas, Sha...
La Propiedad OpacityMaskLa propiedad OpacityMask le permite controlar el valor alpha de diferentes porciones de un UIEleme...
La Propiedad ClipLa propiedad Clip le permite dibujar porciones de un elemento. Para usar la propiedad Clip, Ud. proveeun ...
<Canvas   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rec...
Parte 6: ImágenesEl elemento Image le permite desplegar imágenes de mapa de bits (bitmap) en Silverlight. Esta partecontie...
La Propiedad StretchCuando el tamaño del elemento Image y el tamaño de su bitmap son diferentes, la propiedad Stretchdeter...
Parte 7: TextoEl elemento TextBlock le permite adicionar texto a su contenido Silverlight. Este documento describecómo usa...
Propiedades Comunes del TextBlockEn adición a las propiedades que recibe por ser un UIElement, tales como Clip y Opacity, ...
El Elemento RunUd. puede mezclar diferentes fonts en el mismo TextBlock usando el elemento Run. Run tiene las mismaspropie...
30
Parte 8: Media (Audio y Video)Silverlight provee un objeto MediaElement que Ud. puede utilizar para mostrar archivos WMV(W...
Al igual que otros objetos UIElement, Ud. puede colocar dibujos encima de objetos MediaElement. Elsiguiente ejemplo agrega...
Controlando Interactivamente el Playback de la MediaUd. puede controlar interactivamente el playback de la media utilizand...
Código JavaScript        function media_stop(sender, args) {            sender.findName("media").stop();        }        f...
<!-- Pauses media playback. -->             <Canvas MouseLeftButtonDown="media_pause"                Canvas.Left="70" Canv...
}         function toggle_fullScreen(sender, args)         {             var silverlightPlugin = sender.getHost();        ...
El parar (stop), pausar o correr (play) el MediaElement afecta al VideoBrush asociado, pero al cambiar eltamaño o la opaci...
Parte 9: AnimacionesSilverlight le permite utilizar markup paa definir animaciones.Este Quickstart introduce característic...
<Canvas           xmlns="http://schemas.microsoft.com/client/2007"           xmlns:x="http://schemas.microsoft.com/winfx/2...
Otros Tipos de AnimaciónSilverlight también soporta animar colores (ColorAnimation) y puntos (PointAnimation). Cuando está...
Tanto Storyboard y DoubleAnimation son tipos del objeto Timeline. Los Timelines tienen variaspropiedades útiles:    -   St...
El siguiente ejemplo demuestra estas propiedades de timeline.        <Canvas           xmlns="http://schemas.microsoft.com...
Especifique Valores de Transicion de la AnimaciónDoubleAnimation, ColorAnimation, y PointAnimation tienen propiedades From...
Parte 10: Scripting y Eventos del RatónSilverlight 1.0 soporta programación en JavaScript, que le permite darle interactiv...
El archivo default.htm podría contener la función helloworld():        <!DOCTYPE html PUBLIC          "-//W3C//DTD XHTML 1...
Estableciendo propiedadesUd. puede establecer propiedades de los objetos Silverlight utilizando JavaScript. Cuando una pro...
El siguiente ejemplo establece la propiedad Canvas.Top de un TextBlock con el valor 70, al oprimir elbotón izquierdo del r...
El siguiente ejemplo utilica cada uno de los eventos del ratón para modificar la apariencia de una Ellipse.En el archivo m...
Nombrando Objetos y RecobrándolosLos ejemplos anteriores usaban manejadores de evento (event handlers) JavaScript para mod...
Creando objetos dinámicamente con SilverlightUd. puede usar el método CreateFromXaml para crear nuevos objetos Silverlight...
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Introduccion silverlight
Upcoming SlideShare
Loading in …5
×

Introduccion silverlight

504 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
504
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduccion silverlight

  1. 1. Introducción a SilverlightParte 1: Creando un Proyecto Silverlight¿Cómo agrega Ud. Silverlight a su página Web? Un proyecto Silverlight típico tiene cuatro archivos: unarchivo HTML que contiene (“hostea”) la instancia del Plug-In Silverlight, un archivo silverlight.js, unarchivo XAML, y un archivo JavaScript que le da soporte al archivo HTML. Este documento describecó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 HTMLEn este paso, Ud. adicionará referencias apuntando a los archivos JavaScript Silverlight.js ycreateSilverlight.js en su página HTML y creará un elemento para contener (“host”) su Plug-InSilverlight. El archivo Silverlight.js es un archivo de soporte JavaScript que permite que su contenidoSilverlight sea visualizado en múltiples plataformas. Ud. creará el archivo createSilverlight.js como partedel Paso 2. a. Obtenga el archivo Silverlight.js. Ud. puede obtener de la carpeta Tools (Herramientas) del Silverlight SDK. b. Abra su página HTML y adicione el siguiente “markup” dentro de la sección <head>: <script type=‖text/javascript‖ src=‖Silverlight.js‖></script> c. Cree un archivo vacío, y nómbrelo createSilverlight.js. Lo utilizará en el Paso 3. d. En su página HTML, adicione otra referencia dentro de la sección <head>. Esta vez especifíquelo como: <script type=”text/javascript” src=”createSilverlight.js”></script> e. Su página HTML debe contener los siguientes elementos básicos: <!DOCTYPE html PUBLIC ―//W3C//DTD XHTML 1.0 Transitional//EN‖ ―http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd‖> <html xmlns=‖http://www.w3.org/1999/xhtml‖ xml:lang=‖en‖> <head> <title>A Sample HTML page</title> <script type=‖text/javascript‖ src=‖Silverlight.js‖></script> <script type=‖text/javascript‖ src=‖createSilverlight.js‖></script> </head> <body> </body> </html> 1
  2. 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:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> </head> <body> <!—Lugar donde va el Plug-In Silverlight --> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Recobra el elemento div que Ud. creó en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta función crea el Plug-In Silverlight. createMySilverlightPlugin(); </script> </body></html> 2
  3. 3. Paso 3: Defina la Función de Creación que Inicializa su instancia del Plug-InAbra el archivo createSilverlight.js que creó en el paso 1 y adicione la siguiente función JavaScript:function createMySilverlightPlugin(){ Silverlight.createObject( "myxaml.xaml", // Valor de Propiedad Source. parentElement, // Referencia DOM a DIV tag hosteador. "mySilverlightPlugin", // Valor de ID del plug-in. { // Propiedades por cada instancia. width:300, // Ancho del plug-in en pixels. height:300, // Altura del plug-in en pixels. inplaceInstallPrompt:false, // Determina si desplegar prompt // para instalar in-place // si detecta versión inválida. background:#D6D6D6, // Color del fondo del plug-in. isWindowless:false, // Determina si mostrar plug-in // en modo Windowless. framerate:24, // Valor propiedad MaxFrameRate. version:1.0 // Versión de Silverlight a usar. }, { onError:null, // Valor propiedad OnError -- // nombre función del event handler. onLoad:null // Valor propiedad OnLoad -- // nombre función del event handler. }, null); // Valor Contexto – event handler.}Este script contiene varios parámetros que Ud. querrá ajustar, tales como la altura y el ancho del Plug-In(permite tamaños en porcentajes), el nombre del archivo que contiene su contenido Silverlight, y un valorque 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 cadauno, o utilice una función de creación parametrizada. En cualquier caso, asegúrese de que cada resultadode 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 SilverlightAhora que su archivo HTML ha sido configurado, pasamos a crear su contenido. a. Cree un archivo en blanco llamado “myxaml.xml” en el mismo diectorio que su archivo HTML. Si Ud. modifica su parámetre de Archivo Fuente (Source File), también cambie el nombre de este archivo para que concuerden. b. (Opcional) Si desea que el proyecto Silverlight maneje eventos, genere código dinámicamente, o de cualquier manera interactúe con el usuario, necesitará contener un archivo de script adicional. Cree un archivo JavaScript para contener el script y luego adicione una referencia hacia dicho archivo desde en su página HTML anfitrión. El siguiente ejemplo crea una referencia al archivo de script llamado my-script.js <script type=‖text/javascript‖ src=‖my-script.js‖></script> 3
  4. 4. Su archivo HTML debería contener los siguientes elementos: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <script type="text/javascript" src="my-script.js"></script> </head> <body> <!—Lugar donde va el Plug-In Silverlight --> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Recobra el elemento div que Ud. creó en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta función crea el Plug-In Silverlight. createMySilverlightPlugin(); </script> </body> </html>Creando Múltiples Instancias del Plug-In SilverlightSi desea crear más de un plug-in Silvelight en su página, repita los pasos 2, 3 y 4 para cada instancia. - Cada etiqueta <div> del anfitrión (creada en el paso 2a) debe tener un ID único. - Cada bloque de inicialización (creado en el paso 2b) debe seguir inmediatamente a la etiqueta <div> creada en el paso precedente (2a). - Cada parámetro ID de plug-in debe también ser única. 4
  5. 5. Parte 2: Crear un archivo XAML SilverlightEn el paso precedente, Ud. agregó un Plug-In Silverlight a una página HTML, y creó un archivo XAMLen 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 XAMLPaso 1: Cree un Lienzo (Canvas) y declaraciones para los namespacesAbra el archivo XAML myxaml.xml que Ud. creó en el paso pevio. Cree un lienzo (Canvas) y lasdeclaraciones 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 denamespace Silverlight y un atributo xmlns que declara el namespace Silverlight junto a un atributoxmlns: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 XAMLPara ver su contenido XAML, dé doble click sobre el archivo HTML anvitrión. Ud. deberá ver un círculode color azulado con un borde negro.El archivo XAML queda así: <Canvas xmlns=‖http://schemas.microsoft.com/client/2007‖ xmlns:x=‖http//schemas.microsoft.com/winfx/2006/xaml‖> <Ellipse Height=‖200‖ Width=‖200‖ Stroke=‖Black‖ StrokeThickness=‖10‖ Fill=‖SlateBlue‖ /> </Canvas> 5
  6. 6. Nota: Si tiene instalado WPF y da doble –click sobre el archivo XML con contenido XAML (en vez de lapágina Web) se lanzará WPF en vez de Silverlight. El acto de dar doble-click sobre un archivo XAMLno es parte de la experiencia del usuario final de Silverlight, ya que la espectativa es que archivos XAMLproporcionados para una aplicación basada en Silverlight vienen del mismo servidor que sirvió la páginaHTML. 6
  7. 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 archivoXAML Silverlight contiene al menos un Canvas, que le sirve como elemento raíz (root). Esta secciónintroduce al objeto canvas y describe cómo adicionar, posicionar y especificar el tamaño de sus objetoshijo. Esta parte contiene las siguientes secciones: - Adicionar un objeto a su Canvas - Posicionar un objeto - Controlar el ancho y el alto - Objetos Canvas anidadosAdicionar un objeto a su CanvasUn Canvas contiene y posiciona otros objetos. Para adicionar un objeto a un Canvas, insértelo entre lasetiquetas (tags) de <Canvas>. El siguiente ejemplo adiciona un objeto Ellipse a un Canvas. Debido a queel Canvas es el elemento raíz, es una buena práctica de XML aprovechar el elemento raíz (root) parahacer allí las declaraciones xmlns (namespace). <Canvas xmlns=‖http://schemas.microsoft.com/Client/2007‖ xmlns=‖http://schemas.microsoft.com/winfx/2006/xaml‖ > <Ellipse Height=‖200‖ Width=‖200‖ Stroke=‖Black‖ StrokeThickness=‖10‖ Fill=‖SlateBlue‖ /> </Canvas>Un Canvas puede contener cualquier número de objetos, aún otros objetos Canvas. 7
  8. 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‖ Height=‖200‖ Width=‖200‖ Stroke=‖Black‖ StrokeThickness=‖10‖ Fill=‖SlateBlue‖ /> </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
  9. 9. Z-OrderPor defecto, el orden Z (z-order) de los objetos dentro de un Canvas está determinada por la secuencia enque son declarados. Los objetos declarados más tarde aparecen enfrente de objetos declarados al inicio. Elsiguiente ejemplo crea tres objetos Ellipse. Observe que la Ellipse declarada de último (el de color lima)está en el primer plano (foreground), enfrente de los otros objetos Ellipse. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="5" Canvas.Top="5" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Silver" /> <Ellipse Canvas.Left="50" Canvas.Top="50" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" /> <Ellipse Canvas.Left="95" Canvas.Top="95" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime" /> </Canvas> 9
  10. 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 alprevio, 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 xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.ZIndex="3" Canvas.Left="5" Canvas.Top="5" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Silver" /> <Ellipse Canvas.ZIndex="2" Canvas.Left="50" Canvas.Top="50" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" /> <Ellipse Canvas.ZIndex="1" Canvas.Left="95" Canvas.Top="95" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="Lime" /> </Canvas> 10
  11. 11. Controlando Ancho y Alto (Width y Height)Los Canvas, las formas (shapes) y muchos otros elementos tienen propiedades de Width (Ancho) yHeight (Altura) que le permiten especificar su tamaño. El siguiente ejemplo crea una Ellipse de 200 pixelsde ancho y 200 pixels de alto. Note que carece de soporte para tamaños en porcentajes. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas> 11
  12. 12. El siguiente ejemplo establece el Width (Ancho) y Height (Alto), pero esta vez del Canvas padre, a unvalor de 200 y le da un fondo verde lima. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200" Background="LimeGreen" > <Ellipse Canvas.ZIndex="3" Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>Cuando corra el ejemplo, el cuadrado verde lima es el Canvas, y el fondo gris es la porción del area delplug-in anfitrión que no ha sido cubierto por el Canvas. Note que la Ellipse no está cortada, a pesar de quese 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
  13. 13. Objetos Canvas anidados (nested)Los Canvas pueden contener otros objetos Canvas. El siguiente ejemplo crea un Canvas que a su vezcontiene otros dos objetos Canvas. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30" Background="blue"/> <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30" Background="red"/> </Canvas> 13
  14. 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ásicasSilverlight 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 xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse Height=‖200‖ Width=‖200‖ Canvas.Left=‖30‖ Canvas.Top=‖30‖ Stroke=‖Black‖ StrokeThickness=‖10‖ Fill=‖SlateBlue‖ /> <Rectangle Height=‖300‖ Width=‖100‖ </Canvas> 14
  15. 15. Otros elementos ShapeEn 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, mientrasque un Polyline es una serie de lineas conectadas que podrían o podrían no formar un Shape cerrado. Elsiguiente ejemplo crea un Polygon y un Polyline. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Polyline Points="150,150 150,250 250,250 250,150" Stroke="Black" StrokeThickness="10" /> <Polygon Points="10,10 10,110 110,110 110,10" Stroke="Black" StrokeThickness="10" Fill="Lightblue" /> </Canvas>El elemento Path puede usarse para representar formas (Shapes) complejos que incluyen curvas y arcos.Para usar un elemento Path, Ud. utiliza un tipo especial de sintaxis de atributos para especificar supropiedad Data. El siguiente ejemplo crea tres elementos Path. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" Stroke="Black" Fill="SlateBlue" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 0,100 C 10,300 300,-200 250,100z" Stroke="Red" Fill="Orange" Canvas.Left="10" Canvas.Top="10" /> <Path Data="M 0,200 L100,200 50,50z" Stroke="Black" Fill="Gray" Canvas.Left="150" Canvas.Top="70" /> </Canvas> 15
  16. 16. Para mayor información sobre la sintaxis de marca (markup) de los path, busque Path Markup Syntax enel 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 secontrolan a través de las propiedades Stroke y Fill. La siguiente ilustración etiqueta el stroke y el fill delrectángulo dibujado en el primer ejemplo. Stroke FillNo todas las formas tienen ambos: Fill y Stroke. Un Line sólo tiene Stroke. Si establece la propiedad Fillen 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 puedeutilizar: SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush 16
  17. 17. Pintando con Colores Sólidos con un SolidColorBrushPara pintar un área de un color sólido, Ud. utiliza un SolidColorBrush. XAML provee varias formas decrear 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 xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10" Fill="Black" /> <!-- SolidColorBrush por nombre de color --> <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10" Fill="#000000" /> <!-- SolidColorBrush por notacion hexadecimal de 6 digitos --> <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110" Fill="#ff000000" /> <!-- SolidColorBrush por notacion hexadecimal de 8 digitos --> <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110"> <Ellipse.Fill> <!-- SolidColorBrush por sintaxis de object element --> <SolidColorBrush Color="Black" /> </Ellipse.Fill> </Ellipse> </Canvas> 17
  18. 18. Pintando Gradientes con LinearGradientBrush y RadialGradientBrushSilverlight soporta gradientes tanto lineares como radiales. Los gradientes tienen uno o más Paradas deGradiente (Gradient Stops) que describen los diferentes colores entre los que transiciona el gradiente, y lalocalizació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 RadiosYPara adicionar Gradient Stops a un Gradient Brush, Ud. crea objetos GradientStop. Establezca lapropiedad Offset de un GradientStop a un valor entre 0 y 1, para establecer su posición relativa en elgradiente. Establezca la propiedad Color del GradientStop a un color nombrado o valor hexadecimal. 18
  19. 19. El siguiente ejemplo utiliza objetos LinearGradientBrush y RadialGradientBrush para pintar cuatroobjetos rectangulares. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <!-- Linear gradients --> <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <!-- Radial gradients --> <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="1,0" > <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas> 19
  20. 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 ejemploprevio.Gradient Stop #1 Gradient Stop #2 Gradient Stop #3 Color: Yellow Color: Red Color: Blue Offset: 0.0 Offset: 0.25 Offset: 0.75 Gradient Stop #4 Color: Green Offset: 1.0Pintando con Imágenes usando ImageBrushOtro tipo de brocha (brush) es el ImageBrush. Por defecto, la imagen es estirada hasta llenar la formacompleta, pero Ud. puede utilizar la propiedad Stretch para controlar cómo la brocha estira su imagen. Elsiguiente ejemplo usa dos objetos ImageBrush con diferentes valores de Stretch para pinta dos objetosRectangle. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="tacuba.jpg"/> </Rectangle.Fill> </Rectangle> <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <ImageBrush ImageSource="tacuba.jpg" Stretch="Uniform"/> </Rectangle.Fill> </Rectangle> </Canvas> 20
  21. 21. Parte 5: Propiedades Gráficas ComunesAlgunas propiedades aplican a todos los objetos UIElement de Silverlight: Canvas, Shapes, elMediaElement y TextBlock. Este documento describe las propiedades gráficas que tienen en común estosobjetos.Esta parte contiene las siguientes secciones - La propiedad Opacity - La propiedad OpacityMask - La propiedad Clip - La propiedad RenderTransformLa propiedad OpacityLa propiedad Opacity le permite controlar el valor alpha, o de transparencia, de un UIElement. Ud. puedeestablecer la propiedad opacity a un valor entre cero y uno. Mientras más cerca está de cero, se vuelvemás transparente el objeto. En el valor cero, el objeto es completamente invisible. El valor por defecto deOpacity es 1.0, lo cual es completamente opaco. El siguiente ejemplo crea dos formas con diferente valorde opacidad.<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/> <Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /></Canvas> 21
  22. 22. La Propiedad OpacityMaskLa 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) dederecha a izquierda. La propiedad OpacityMask toma un objeto Brush (Brocha). El Brush es mapeado alelemento y el canal alpha de cada uno de los pixeles de la brocha es usado para determinar la opacidadresultante de los pixeles correspondientes del elemento. Si una porcion dada del Masking Brush estransparente, esa porción del elemento enmascarado se vuelve transparente.Ud. puede usar cualquier tipo de brocha como un OpacityMask, pero los más útiles sonLinearGradientBrush, RadialGradientBrush e ImageBrush.El siguiente ejemplo aplica una máscara de opacidad LinearGradientBrush a un objeto Rectangle. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> <Rectangle.OpacityMask> <LinearGradientBrush> <GradientStop Offset="0.25" Color="#00000000"/> <GradientStop Offset="1" Color="#FF000000"/> </LinearGradientBrush> </Rectangle.OpacityMask> </Rectangle> </Canvas> 22
  23. 23. La Propiedad ClipLa propiedad Clip le permite dibujar porciones de un elemento. Para usar la propiedad Clip, Ud. proveeun objeto Geometry que describe la región que debe ser dibujada. Todo lo que caiga fuera de la geometríaes 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 fueradel RectangleGeometry es cortada. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue"> <Ellipse.Clip> <RectangleGeometry Rect="0, 0, 100, 100"/> </Ellipse.Clip> </Ellipse> </Canvas>La Propiedad RenterTransformLa propiedad RenderTransform le permite usar objetos Transform para rotar, skew (inclina), escalar, otrasladar (mover) un elemento. La siguiente lista describe los diferentes objetos Transform que Ud. puedeutilizar 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 plicarmú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 elementosRectangle. 23
  24. 24. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" Fill="Black"> <Rectangle.RenderTransform> <RotateTransform Angle="45"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10" Fill="red"> <Rectangle.RenderTransform> <SkewTransform AngleX="30"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190" Fill="blue"> <Rectangle.RenderTransform> <ScaleTransform ScaleX="1.3" ScaleY=".5"/> </Rectangle.RenderTransform> </Rectangle> <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130" Fill="Green"> <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="45"/> <ScaleTransform ScaleX=".5" ScaleY="1.2"/> <SkewTransform AngleX="30"/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle></Canvas> 24
  25. 25. Parte 6: ImágenesEl elemento Image le permite desplegar imágenes de mapa de bits (bitmap) en Silverlight. Esta partecontiene las siguientes secciones: - El elemento Image - La propiedad Stretch - Otras formas de usar bitmapsEl Elemento ImageEl elemento Image provee una forma conveniente de desplegar imágenes JPG y PNG en Silverlight. Paramostrar 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 unaimagen tipo bitmap. Debido a que las propiedades del Image: Width y Height no están especificadas, elbitmap 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 veuna esquina de la foto) <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Image Source="tacuba.jpg" /> </Canvas> 25
  26. 26. La Propiedad StretchCuando el tamaño del elemento Image y el tamaño de su bitmap son diferentes, la propiedad Stretchdetermina cómo se estira el bitmap para que se ajuste al elemento Image. La propiedad Stretch toma lossiguientes valores: None, Fill, Uniform, UniformToFill. El siguiente ejemplo demuestra las propiedadesNone, Uniform, y Fill. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Image Source="tacuba.jpg" Stretch="None" Height="95" Width="200" Canvas.Left="45" /> <Image Source="tacuba.jpg" Stretch="Fill" Height="95" Width="200" Canvas.Left="45" Canvas.Top="100" /> <Image Source="tacuba.jpg" Stretch="Uniform" Height="95" Width="200" Canvas.Left="45" Canvas.Top="200" /> </Canvas>Otras Formas de utilizar BitmapsPara usar un Bitmap como un fondo, utilice el objeto ImageBrush. Vea la parte de Dibujar y Pintar paramayor información. 26
  27. 27. Parte 7: TextoEl elemento TextBlock le permite adicionar texto a su contenido Silverlight. Este documento describecómo usar el elemento TextBlock.Esta parte contiene las siguientes secciones: - El elemento TextBlock - Propiedades comunes del TextBlock - El elemento Run - Especificando múltiples FontsEl Elemento TextBlockPara adicionar texto a su contenido Silverlight, cree un elemento TextBlock y adicione el contenidotextual entre las etiquetas (tags) <TextBlock>. El siguiente ejemplo usa un TextBlock para desplegartexto. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock>hello world!</TextBlock> </Canvas> 27
  28. 28. Propiedades Comunes del TextBlockEn adición a las propiedades que recibe por ser un UIElement, tales como Clip y Opacity, el elementoTextBlock 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 xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock FontSize="40" FontFamily="Georgia" FontStyle="Italic" FontWeight="Bold" FontStretch="Expanded" Canvas.Top="20" Canvas.Left="20"> Hello world! <TextBlock.Foreground> <LinearGradientBrush> <GradientStop Color="SlateBlue" Offset="0.0" /> <GradientStop Color="Black" Offset="1.0" /> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock> </Canvas> 28
  29. 29. El Elemento RunUd. puede mezclar diferentes fonts en el mismo TextBlock usando el elemento Run. Run tiene las mismaspropiedades de font que TextBlock, pero no puede ser posicionado con las propiedades Canvas.Left yCanvas.Top. El siguiente ejemplo usa un elemento Run para cambiar el tamaño de algo, pero no todo, eltext de un TextBlock. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock> Hello <Run FontSize="30">world</Run> </TextBlock> </Canvas>Especificando Múltiples FontsNo todos los fonts están disponibles en cada computador del usuario final. La propiedad FontFamilysoporta listar múltiples fonts (font fallback) cuando no está disponible el primer font. El font “PortaleUser Interface” siempre está disponible en cada máquina, como parte de cómo Silverlight interactúa connavegadores (browsers). El siguiente ejemplo muestra diferentes especificaciones de FontFamily. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <TextBlock FontFamily="Arial, Times New Roman" Text="Hello World" FontSize="20"/> <TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40" Text="Hello World" FontSize="20"/> <TextBlock FontFamily="Portable User Interface" Canvas.Top="80" Text="Hello World" FontSize="20"/> </Canvas> 29
  30. 30. 30
  31. 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 VideoAdicionando Media a su PáginaPara adicionar media a sus archivos, Ud. crea un MediaElement y establece su propiedad Source para quereferencie su archivo fuente de la Media, utilizando un camino (path) tipo URI. El siguiente es unejemplo. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <MediaElement Source="SilverlightWithWebServices.wmv" Width="300" Height="300" /> </Canvas> 31
  32. 32. Al igual que otros objetos UIElement, Ud. puede colocar dibujos encima de objetos MediaElement. Elsiguiente ejemplo agrega una Ellipse enfrente del MediaElement del ejemplo previo. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <!-- <MediaElement Source="SilverlightWithWebServices.wmv" Width="300" Height="300" /> --> <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" Opacity="0.6" /> </Canvas>Propiedades Utiles del MediaElementEn adición a las propiedades que el MediaElement recibe por ser un UIElement, tales como Opacity yClip, 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
  33. 33. Controlando Interactivamente el Playback de la MediaUd. 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 lamedia. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <MediaElement x:Name="media" Source="SilverlightWithWebServices.wmv" Width="300" Height="300" /> <!-- Stops media playback.--> <Canvas MouseLeftButtonDown="media_stop" Canvas.Left="10" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas> <!-- Pauses media playback. --> <Canvas MouseLeftButtonDown="media_pause" Canvas.Left="70" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas> <!-- Begins media playback. --> <Canvas MouseLeftButtonDown="media_begin" Canvas.Left="130" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="55"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> </Canvas> </Canvas> 33
  34. 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-inSilverlight anfitrión de su contenido, y ajuste el tamaño del MediaElement al ActualWidth yActualHeight reportado por el modelo de objetos de Silverlight.El siguiente ejemplo adiciona playback de pantalla completa a los controles interactivos definidos en elejemplo previo. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="canvas_loaded"> <MediaElement x:Name="media" Source="SilverlightWithWebServices.wmv" Width="300" Height="300" /> <Canvas x:Name="buttonPanel"> <!-- Stops media playback.--> <Canvas MouseLeftButtonDown="media_stop" Canvas.Left="10" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Orange" Offset="0.0" /> <GradientStop Color="Red" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> </Canvas> 34
  35. 35. <!-- Pauses media playback. --> <Canvas MouseLeftButtonDown="media_pause" Canvas.Left="70" Canvas.Top="265"> <Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> </Canvas> <!-- Begins media playback. --> <Canvas MouseLeftButtonDown="media_begin" Canvas.Left="130" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="55"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="LimeGreen" Offset="0.0" /> <GradientStop Color="Green" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> </Canvas> <!-- Switches to full screen mode. --> <Canvas MouseLeftButtonDown="toggle_fullScreen" Canvas.Left="190" Canvas.Top="265"> <Rectangle Stroke="Black" RadiusX="5" RadiusY="5" Height="30" Width="85"> <Rectangle.Fill> <RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Gray" Offset="0.0" /> <GradientStop Color="Black" Offset="1.0" /> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Canvas.Left="5" Canvas.Top="5" Foreground="White" >full screen</TextBlock> </Canvas> </Canvas> </Canvas>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
  36. 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 VideoUd. puede utilizar un VideoBrush para pintar formas y texto con video. Para utilizar un VideoBrush, sigaestos 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 xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <MediaElement x:Name="myMediaElement" Source="SilverlightWithWebServices.wmv" Width="300" Height="300" Opacity="0" IsMuted="True" /> <TextBlock Canvas.Left="10" Canvas.Top="10" FontFamily="Verdana" FontSize="80" FontWeight="Bold">Watch<LineBreak/>This <TextBlock.Foreground> <VideoBrush SourceName="myMediaElement" /> </TextBlock.Foreground> </TextBlock> </Canvas> 36
  37. 37. El parar (stop), pausar o correr (play) el MediaElement afecta al VideoBrush asociado, pero al cambiar eltamaño o la opacidad del MediaElement no lo afecta. El mismo MediaElement puede utilizzarse pormúltiples objetos VideoBrush. 37
  38. 38. Parte 9: AnimacionesSilverlight le permite utilizar markup paa definir animaciones.Este Quickstart introduce características deanimació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ónPaso a Paso: Animar un ObjetoPaso 1: Encuente algo a AnimarPrimero, Ud. necesita algo a animar. Para este ejemplo, usaremos una Ellipse. El siguiente ejemplo creauna 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 necesitaun nombre de forma que pueda ser localizado por una animación definida en otra parte del XAML Es eldestino o target de la animación). Ahora que Ud. tiene un objeto a animar, el siguiente paso es crear unEventTrigger que comenzará la animación.Paso 2: Crear un EventTriggerUn EventTrigger (Disparador por Evento) lleva a cabo una acción cuando algo lo dispara. Como loimplica su nombre, ese “algo” es un evento, especificado por la propiedad RoutedEvent. Debido a queUd. 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, puesel objeto EventTigger sólo soporta un solo evento, el evento Loaded. Establezca la propiedadRoutedEvent a Canvas.Loaded. Esto comenzará la animación cuando cargue el Canvas principal. Elsiguiente ejemplo muestra el markup hasta ahora: 38
  39. 39. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="Black" /> </Canvas>Ahora está lista para crear un Storyboard y una animaciónPaso 3: crear un Storyboard y una animaciónUn Storyboard puede describir y controlar una o más animaciones. Para este ejemplo usaremos una solaanimación. En Silverlight, Ud. anima objetos aplicando animaciones a propiedades del objeto. Utilice unaDoubleAnimation para animar la propiedad Canvas.Left de la Ellipse. Ud. utiliza un DoubleAnimationdebido a que la propiedad animada, Canvas.Left, es de tipo Double (un número de punto flotante de dobleprecisió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 propiedadDuration especifica la longitud de tiempo que toma la animación para transicionar desde su valor inicialhasta su valor final. Un valor de 0:0:1 especifica un Duration de un segundo. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Canvas.Left)" To="300" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30" Fill="Black" /> </Canvas> 39
  40. 40. Otros Tipos de AnimaciónSilverlight también soporta animar colores (ColorAnimation) y puntos (PointAnimation). Cuando estáanimando colores, recuerde que “color” es diferente de “SolidColorBrush”. El primero es una propiedaddel segundo. Cuando Ud. especifica un nombre de color o valor hexadecimal para establecer propiedadesde Stroke y Fill de un Shape, en realidad Silverlight convierte esa cadena de caracteres a unSolidColorBrush automáticamente. Si quiere animar un Stroke o Fill, recomendamos usar la sintaxis másverbosa, en donde declara un Brush (brocha) explícitamente y le da la oportunidad de darle un nombre alBrush directamente.El siguiente ejemplo anima el color de dos Ellipses. El Fill de la primera Ellipse fue especificadoexplicitamente con un SolidColorBrush. El ejemplo le da un nombre al SolidColorBrush y anima supropiedad Color. La segunda animación es más compleja, ya que el Fill será establecido con un nombrede 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, elSolidColorBrush generado automáticamente por el sistema sólo puede animarse con una propiedaddestino al que llegamos indirectamente. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="e1_brush" Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:5" /> <ColorAnimation Storyboard.TargetName="e2" Storyboard.TargetProperty="(Fill).(Color)" From="Red" To="Blue" Duration="0:0:5" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"> <Ellipse.Fill> <SolidColorBrush x:Name="e1_brush" Color="black"/> </Ellipse.Fill> </Ellipse> <Ellipse x:Name="e2" Fill="Black" Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/> </Canvas> 40
  41. 41. Tanto Storyboard y DoubleAnimation son tipos del objeto Timeline. Los Timelines tienen variaspropiedades ú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
  42. 42. El siguiente ejemplo demuestra estas propiedades de timeline. <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard Storyboard.TargetName="e1" Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0:0:1"> <DoubleAnimation To="300" /> <DoubleAnimation To="300" Storyboard.TargetName="e2"/> <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width" /> <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/> <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/> <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/> <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/> <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="e1" Fill="Black" Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/> <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock> <Ellipse x:Name="e2" Fill="Red" Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/> <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock> <Ellipse x:Name="e3" Fill="Purple" Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/> <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock> <Ellipse x:Name="e4" Fill="Blue" Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/> <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock> <Ellipse x:Name="e5" Fill="Green" Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/> <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock> <Ellipse x:Name="e6" Fill="Black" Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/> <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock> <Ellipse x:Name="e7" Fill="Orange" Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/> <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock> <Ellipse x:Name="e8" Fill="Red" Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/> <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock> </Canvas> 42
  43. 43. Especifique Valores de Transicion de la AnimaciónDoubleAnimation, ColorAnimation, y PointAnimation tienen propiedades From y To que especifican losvalores de inicio y final de la propiedad animada. Si no especifica el From, usará el valor actual de lapropiedad 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
  44. 44. Parte 10: Scripting y Eventos del RatónSilverlight 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 getElementByIdScripting y EventosSilverlight le permite correr código JavaScript cuando ocurre un evento, como cuando un objeto escargado o el ratón entra en un objeto. Tales scripts son llamados “event handler” (manejadores deevento).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 eventollamado MouseLeftButtonDown que ocurre cuando el usuario oprime el botón izquierdo cuando el cursorestá sobre ese elemento. Ud. escribirá un manejador de eventos para dicho evento, que llamará a lafunción de JavaScript alert para crear una caja de diálogo.El archivo myxaml.xaml: <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="helloworld"> <TextBlock Text="click me" FontSize="50"/> </Canvas> 44
  45. 45. El archivo default.htm podría contener la función helloworld(): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> <script type="text/javascript" src="my-script.js"></script> </head> <body> <!—Lugar donde va el Plug-In Silverlight --> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Recobra el elemento div que Ud. creó en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta función crea el Plug-In Silverlight. createMySilverlightPlugin(); function helloworld() { alert("hello world"); } </script> </body> </html>O bien, colocamos la función helloworld() en un archivo Javascript externo my-script.js que hemosreferenciado 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 handlerfunction). Pero si especifica parámetros, deben ser dos: el primer parámetro, sender, es el elemento queenvía el evento. El segundo parámetro, args, es un objeto que contiene datos sobre el evento. Sinembargo, no todos los eventos transmiten información específica al evento en args; muchas veces el valorde dicho parámetro es null y no es útil para su manejador de evento. 45
  46. 46. Estableciendo propiedadesUd. puede establecer propiedades de los objetos Silverlight utilizando JavaScript. Cuando una propiedadtoma un valor que es una cadena o un número, lo puede establecer de manera normal con JavaScript. Si lapropiedad 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étodocreateFromXaml para instanciar un nuevo valor de propiedad.El siguiente ejemplo se registra para el evento MouseLeftButtonDown de un Canvas. En el manejador deevento (event handler) el parámetro sender provee acceso al Canvas. El ejemplo establece la propiedadBackground del Canvas a rojo, y muestra el valor actual de su propiedad Height.Archivo myxaml.xaml: <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" MouseLeftButtonDown="changecolor"> <TextBlock Text="click me" FontSize="50"/> </Canvas>Archivo my-script.js: function changecolor(sender, args) { sender.background = "red"; alert("Altura es " + sender.Height); }Estableciendo “attached properties”Para establecer el valor de una “attached property” (como, por ejemplo, Canvas.Top), en JavaScript,utilice la siguiente sintaxis: Object[“attachedPropertyName”]=value;… en donde attachedPropertyName es el nombre de la propiedad adjuntada que desea establecer. 46
  47. 47. El siguiente ejemplo establece la propiedad Canvas.Top de un TextBlock con el valor 70, al oprimir elbotón izquierdo del ratón.Archivo myxaml.xaml: <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300"> <TextBlock Text="click me" FontSize="50" MouseLeftButtonDown="changelocation" /> </Canvas>Archivo my-script.js: function changelocation(sender, args) { sender["Canvas.Top"] = 70; }Eventos comunes del ratónLos objetos UIElemento proveen una cantidad de eventos de ratón diferentes, los cuales puede manejar:MouseLeftButtonDown, MouseLeftButtonUp, MouseEnter (disparado – raised – cuando el ratón pasasobre el elemento, MouseLeave y MouseMove (disparado cuando el ratón es movido dentro delelemento). Los eventos Mouse tienen un objeto “args” que provee las posiciones “x” y “y” del ratón almomento de ocurrir el evento. Ud. puede referenciarlos en los manejadores de los eventos del ratón. 47
  48. 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 xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Ellipse x:Name="e1" MouseMove="e1Move" MouseEnter="e1Enter" MouseLeave="e1Leave" MouseLeftButtonDown="e1Down" MouseLeftButtonUp="e1Up" Height="100" Width="100" Canvas.Left="80" Canvas.Top="30" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas>En el archivo my-script.js: function e1Enter(sender, args) { sender.stroke = "red"; } function e1Leave(sender, args) { sender.stroke = "black"; } function e1Down(sender, args) { sender.fill = "Green"; } function e1Up(sender, args) { sender.fill = "LightBlue"; } function e1Move(sender, args) { sender.fill = "yellow"; }Otro útil evento en la programación Silverlight es el evento Loaded. Usualmente Ud. registramanejadores (handlers) para este evento con una declaración en el elemento raíz (root), aunque puedeespecificarse en cualquier UIElement, no sólo en el raíz. El evento Loaded provee una buena oportunidadpara aplicar cambios de último minuto cuando despliega el contenido Silverlight. El siguiente ejemplo usaun evento Loaded para cambiar el Fill de una Ellipse de Blue a Red. 48
  49. 49. Nombrando Objetos y RecobrándolosLos ejemplos anteriores usaban manejadores de evento (event handlers) JavaScript para modificar elobjeto que disparó el evento, pero qué sucede si desea usar métodos o establecer propiedades de un objetodistinto al sender? Los elementos silverlight proveen un método llamado FindName que le permitenrecuperar objetos Silverlight desde cualquier marco de referencia dentro del contenido Silverlight. Parautilizar FindName para recuperar un objeto, Ud. debe primero especificar el atributo x:Name (o elatributo/propiedad Name, que es esencialmente equivalente) para darle al objeto un nombre cuando lodeclara en XAML.El siguiente ejemplo cambia la propiedad Fill de una Ellipse cuando el botón izquierdo es presionadosobre el Canvas padre. Cuando el Canvas dispara el evento, la función changeEllipseColor es llamado conCanvas como sender. La función llama a sender.findName para recuperar el objeto llamado myEllipse yestablecer su propiedad Fill a Red (rojo).En el archivo myxaml.xaml: <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="changeEllipseColor"> <TextBlock Text="click me" FontSize="50"/> <Ellipse x:Name="myEllipse" Height="200" Width="200" Canvas.Left="30" Canvas.Top="80" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/> </Canvas>En el archivo my-script.js: function changeEllipseColor(sender, args) { sender.findName("myEllipse").Fill = "red"; } 49
  50. 50. Creando objetos dinámicamente con SilverlightUd. puede usar el método CreateFromXaml para crear nuevos objetos Silverlight desde JavaScript. Peroantes de poder utilizar el método CreateFrom Xaml, debe obtener una referencia a la instancia del Plug-InSilverlight. - 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ónizquierdo del ratón. Note que a pesar de que está adicionando múltiples objetos si Ud. da click más de unavez, sólo verá una Ellipse. Esto es porque todas las Ellipses se ven igual, y están en el mismo lugar, unaencima del otro.En el archivo myxaml.xaml: <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MouseLeftButtonDown="createEllipse"> <TextBlock Text="click for circle" 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 quecombine 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 concomillas simples le permite utilizar doble comillas para los valores en la cadena XAML, o viceversa. Sóloasegúrese de que las comillas simples o dobles estén emparejadas y balanceadas. 50

×