Personalizando nuestro reproductor SMF – Play Silverlight

Esta entrada tiene por objetivo mostrar el potencial que el reproductor de Silverlight Media Framework ofrece a nivel de personalización, tanto a nivel de interfaz de usuario como de funcionalidad.

En cuanto a interfaz analizaremos las posibilidades que SMF aporta para aplicar estilos a todos los elementos del reproductor, desde las lineas de tiempo hasta el control de volumen. Respecto a funcionalidad, crearemos nuevas clases que añadirán nuevas características tanto al reproductor de SMF – marcadores personalizados -, como al propio elemento multimedia – controles embebidos -.

Aplicando estilos a nuestro reproductor

Una de las características más destacables de Silverlight Media Framework es el alto nivel de personalización de su reproductor a nivel de interfaz de usuario. Si editamos la plantilla del reproductor, nos aparecerá un árbol de elementos con todos los aspectos editables, tal y como se muestra en la siguiente imagen

Elementos reproductor SMF

Elementos reproductor SMF

Al hacer click derecho sobre un elemento y seleccionar Editar Plantilla -> Editar una copia, aparecerán todos los aspectos configurables de dicho elemento. Así, si editamos PositionElement veremos que puede editarse el estilo de la linea de tiempo, del elemento que marca el tiempo actual, de los marcadores, etc.

En la imagen inferior se puede ver la diferencia entre el reproductor estándar y uno personalizado en el que se ha cambiado el color de la línea de controles, aplicando un degradado a verde. Este es un ejemplo muy, muy sencillo pero las posibilidades que SMF ofrece son realmente amplias.

Reproductores estándar y personalizado

Reproductores estándar y personalizado

Extendiendo la elementos del reproductor SMF con marcadores propios

Es el caso de los marcadores, que nos permiten marcar hitos dentro de la línea de tiempo de reproducción

Para ello, crearemos una clase llamada MyMarker, que extenderá de la clase Marker perteneciente al espacio de nombres Microsoft.SilverlightMediaFramework.Player. Añadiremos una propiedad Description de tipo string, que contendrá un texto que describa el marcador, y un evento tipado Selected que se lanzará en el evento OnMarkerClicked.


public class MyMarker : Marker
 {
      public event Action<Marker> Selected;

      public string Description { get; set; }

      public override void OnMarkerClicked(object sender)
      {
          base.OnMarkerClicked(sender);

          if (this.Selected != null)
          {
               this.Selected(this);
          }
      }
 }

Ya en el xaml asociaremos la propiedad MarkerData, que contiene la información relativa a marcadores, a una propiedad de la clase modelo-vista (siguiendo los criterios del patrón MVVM). En el siguiente código se muestra la propiedad antes mencionada (MyMarkerData), y una función con la que se cargarán dos marcadores (se les asigna tiempo, descripción y acción a ejecutar al ser seleccionado).


 public MarkerData MyMarkerData { get; set; }

 private void LoadMarkers()
 {
      this.MyMarkerData.Markers.Clear();

      MyMarker marker1 = new MyMarker
      {
           Description = "Marcador 1",
           Time = TimeSpan.Parse("00:00:02")
      };
      marker1.Selected += new Action<Marker>(MarkerSelected);

      this.MyMarkerData.Markers.Add(marker1);

      MyMarker marker2 = new MyMarker
      {
           Description = "Marcador 2",
           Time = TimeSpan.Parse("00:00:06")
      };
      marker2.Selected += new Action<Marker>(MarkerSelected);

      this.MyMarkerData.Markers.Add(marker2);
 }

Si ejecutamos nuestra aplicación no observaremos cambios en el reproductor. Esto se debe a que, por defecto, los marcadores no vienen con un estilo asociado. Para crearlo, iremos a Expression Blend, editaremos la plantilla del reproductor, a continuación la del elemento PositionElement, después en MarkersElement seleccionaremos Editar plantillas adicionales -> Editar actual y, por último, editaremos la plantilla de MarkerControl. De este último, cambiaremos el borde seleccionando un color de fondo cualquiera.

Además, nuestro marcador personalizado incluía una propiedad Description, que podremos asociar a la propiedad Tooltip para que aparezca al situarnos sobre el marcador. Para ello, en la propiedad Tooltip (sección Propiedades Comunes) del elemento MarkerControl (mencionado anteriormente), haremos que coja la propiedad Description desde el contexto.

Si después volvemos a ejecutar nuestra aplicación aparecerán los marcadores en la línea de tiempo, como se puede ver en la siguiente imagen:

Marcadores personalizados

Marcadores personalizados

Mejorando la interacción con el usuario embebiendo controles

Como decíamos anteriormente, la posibilidad de ampliar y mejorar la funcionalidad del reproductor es una de las características más destacables de SMF. El elemento multimedia, en el que se reproduce el video, hace las veces de contenedor de elementos. Elementos que podrán interactuar fácimente con las propiedades del reproductor, ampliando de esta manera la experiencia de usuario. Pero esto lo veremos en la próxima entrada.

Anuncios
Esta entrada fue publicada en Silverlight, Silverlight Media Framework y etiquetada , , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s