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:

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

Quedando de esta forma:

Después seleccionamos un rectángulo :

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

Quedando de esta forma:

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

Ahora los agruparemos en contenedores llamados Canvas:

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.

Damos en la vista de Split

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:

 

<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

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:

 

Referencia tomada del Introducing Silverlight 1.0 de Microsoft Press.