Personalizar un skin del control Media de ASP.NET Futures

En un artículo anterior realizamos una introducción al control Media de ASP.NET Futures, donde vimos lo simple que resultaba crear un sencillo -pero efectivo-reproductor de audio y/o video utilizando dicho control.


Gracias a su propiedad MediaSkin, podemos seleccionar la carátula o skin que actuará como interfaz de usuario; y aunque el conjunto de carátulas disponibles resulta suficiente para los escenarios de ejecución más comunes, este control nos permite llegar un poco más lejos, al proporcionarnos la posibilidad de manipular cualquiera de los skins de que dispone, para darles un toque más personal.


Tomemos como ejemplo una página a la que hemos añadido un control Media, estableciendo el valor AudioGray como skin. El primer paso a dar para efectuar la personalización de dicho skin pasa por hacer clic en la etiqueta inteligente de este control, seleccionando la opción «Configure skin».



Esta acción producirá la apertura de un cuadro de diálogo, que nos permitirá exportar el skin en formato XAML a un archivo externo.



Una vez exportado el skin a un archivo, que llamaremos por ejemplo AudioGray.xaml, lo editaremos para alterar su apariencia. Dicho proceso de edición podemos llevarlo a cabo utilizando el editor XAML de Visual Studio, pero resulta mucho más recomendable emplear una herramienta como Expression Blend, ya que facilitará en gran medida nuestra labor, al permitirnos modificar visualmente las propiedades de los diversos elementos del skin, evitándonos tener que trabajar directamente con el código XAML.


Después de abrir el archivo del skin en Expression Blend, desde el panel «Objects and Timeline» iremos navegando por su estructura de elementos. Cada vez que seleccionemos uno, nos situaremos en el panel «Properties», modificando su color en el apartado «Brushes», como vemos en la siguiente imagen.



Terminadas las modificaciones, grabaremos el archivo con el nombre AudioColorines.xaml. Para utilizarlo como nuevo skin lo asignaremos a la propiedad XamlUrl del control Media.

<asp:Media ID=»medReproductor» runat=»server» Height=»35px» MediaSkin=»AudioGray»
    MediaUrl=»GardenParty.mp3″ Width=»320px» XamlUrl=»~/AudioColorines.xaml»/>

El control, una vez aplicado nuestro skin personalizado, mostrará el siguiente aspecto.



Como podemos ver, cambiar la apariencia de este control se convierte en una operación muy sencilla de realizar.


El proyecto con el código fuente de este ejemplo puede descargarse desde el siguiente enlace.


Un saludo.

2 Comentarios

  1. anonymous

    hola suena interesante espero sigan poniendo este tipo de cosas

  2. lmblanco

    Hola Josue

    Gracias por tu opinión, y me alegra que te haya gustado el post.

    Un saludo,
    Luismi

Responder a Cancelar respuesta

Tema creado por Anders Norén