Monday, February 9, 2009

Cool Tip: Skinning the media player

Gallery Server Pro uses Silverlight to provide a rich user experience for all media types that Silverlight currently supports. In Silverlight 2, that includes Windows Media Video (.wmv), Windows Media Audio (.wma), MP3 audio (.mp3), Advanced Streaming Format (.asf), and Advanced Stream Redirector (.asx) files. Future versions of Silverlight are expected to add even more.

There are several skins available that allow you to change the appearance and function of the player control. By default, the AudioGray skin is for audio and Professional is used for video:

Sample audio using the AudioGray Silverlight skin

Sample video using the Professional Silverlight skin


Gallery Server Pro includes eight different skins. A skin is a .xaml file and is stored in the gs\skins\mediaplayer directory. Here is a quick preview of all the skins:

Basic (Basic.xaml)

Lightweight .xaml file. Does not include any visible controls. Start/pause a video by clicking it with the mouse.

Sample video using the Basic Silverlight skin

Simple (Simple.xaml)

Does not include borders just like the Basic skin, but a control panel appears when the mouse hovers over the video.

Sample video using the Simple Silverlight skin

Classic (Classic.xaml)

Sample video using the Classic Silverlight skin

Console (Console.xaml)

Sample video using the Console Silverlight skin 

Expression (Expression.xaml)
This skin uses a semi-transparent control panel that appears when you hover over the video, as seen below. Normally, the controls are hidden.

Sample video using the Expression Silverlight skin

Futuristic (Futuristic.xaml)

Sample video using the Futuristic Silverlight skin

Professional (Professional.xaml)

Sample video using the Professional Silverlight skin

AudioGray (AudioGray.xaml)

This skin is used for audio-only media.

Sample audio using the AudioGray Silverlight skin


You can change to a different skin by editing the galleryserverpro.config file. For the adventurous you can even modify an existing skin or create your own by using any text editor or a XAML editor like Microsoft Expression Blend.

For more information about changing skins in your gallery, check out the document: How To: Skinning the Silverlight Media Player