Creando un Reproductor en Silverlight 1.0

Hola por ahí me comentaron por email que les explique los pasos de como crear un reproductor en Silverlight, vale son sencillos:

Iniciamos en la versión que deseen de Expression Blend, yo usaré por su puesto la última versión la 2.5:

TutorialSilverlight1_01

Creamos nuestro Fondo, y añadimos un control llamado MediaElement :

TutorialSilverlight1_02

TutorialSilverlight1_03

Quedando de esta forma:

TutorialSilverlight1_04

Después seleccionamos un rectángulo :

TutorialSilverlight1_05

Damos en la punta del rectángulo hasta quedar de esta forma:

TutorialSilverlight1_06

Quedando de esta forma:

TutorialSilverlight1_07

Creamos path o trazos para simular las funciones de nuestros botones:

TutorialSilverlight1_08

Ahora los agruparemos en contenedores llamados Canvas:

TutorialSilverlight1_09

Seleccionamos el MediaElement y en la parte de sus propiedades, vamos al tag Media y seleccionamos el recurso a utilizar desde una dirección X, automáticamente Expression Blend importará el archivo al proyecto haciendo una copia de dicho.

TutorialSilverlight1_10

TutorialSilverlight1_11

Damos en la vista de Split

TutorialSilverlight1_12

Escribimos un nombre al mediaElement:

<MediaElement Width=”463″ Height=”224″ Source=”silverlight.wmv”
         Canvas.Top=”-8″ Canvas.Left=”-8″ x:Name=”miVideo” />

Seleccionamos cada botón y nos selecciona la parte de XAML ahora agregaremos un método de mouse para poder hacer referencia en el código JavaScript:

 TutorialSilverlight1_13

<Canvas Width=”141″ Height=”38″ Canvas.Left=”97″ Canvas.Top=”273″
     MouseLeftButtonDown=”Reproducir” >

Igual para los demás botones:

MouseLeftButtonDown=”Pausar”

MouseLeftButtonDown=”Detener”

Nos vamos al archivo Page.xaml.js

TutorialSilverlight1_14

Escribimos debajo del código:

function Reproducir(sender, eventArgs)
{
    sender.findName(“miVideo”).play();
}
function Pausar(sender, eventArgs)
{
    sender.findName(“miVideo”).pause();
}
function Detener(sender, eventArgs)
{
    sender.findName(“miVideo”).stop();
}

Nos referimos a los métodos del mouse, en donde lo unico que le decimos, que encuentre el control con el nombre de miVideo y que ejecute sus métodos de Play, Pause, y Stop()  y listo ejecutamos, y tenemos esto:

TutorialSilverlight1_15 

Referencia tomada del Introducing Silverlight 1.0 de Microsoft Press.

Un comentario en “Creando un Reproductor en Silverlight 1.0”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *