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.