Creating a Customizable Media Player in Silverlight 4


Silverlight, a Microsoft product, is the application framework that provides rich interaction in thin (Web) environment. It is often weighed against Adobe’s Flash. Silverlight has come a long way from the version 1.0 to the Silverlight 4.0. Refer to the section titled “References” at the end of the article that provides you the necessary links to understand the improvements in features of each version.

The User interface layout of the Silverlight application is created using XAML – markup.

The Wiki link of Microsoft clearly states the flow of a Silverlight application:

“A Silverlight application starts by invoking the Silverlight control from the Hyper Text Markup Language (HTML) page, which then loads up a XAML file. The XAML file contains a Canvas object, which acts as placeholder for other elements.”

Let’s see how we can develop our own customizable media player using Silverlight.

First, create a Silverlight Application. You would choose to create a Silverlight Application from the File – New Project menu. The following window would appear.

Figure 1

Give a name for the project, and click on OK. It would create two projects for you.

Note the sample aspx and HTML pages that are added by default. Similarly in the Silverlight Library project, the App and MainPage XAML files are added by default too.

We will modify the first project–Silverlight Library to contain the Media Player Control. The Media Player control would comprise two user controls.

The second project – the Web application would be used to pass parameters to the Silverlight application and is used to host the Silverlight Media Player Control.

The diagram below shows the composition of the Media Player control. (The final user control is called CustomizedMediaPlayer).

The Media Element is part of the default Silverlight controls. Note that there is also a Media Control available in the Silverlight Toolkit. At the end of the article, there is a link that talks about the Silverlight Toolkit.

The same link also provides you the link to download the Toolkit. It is a simple installation and ease to use.

Figure 1

Back to our application, modify the App.XAML.cs to hook the Startup, Exit and Unhandled Exception events. The sample code is as shown below:

public App()
//hook events
     this.Startup            += this.Application_Startup;
     this.Exit               += this.Application_Exit;
     this.UnhandledException += this.Application_UnhandledException;

Modify the Application_Startup method code like below:

private void Application_Startup(object sender, StartupEventArgs e)
  //Set Page as the Root Visual.
  this.RootVisual = new Page();

 Dictionary<string, string> inputs = new                            
 Dictionary<string, string>();

 if (e.InitParams != null)
       //Add the data in the initParams
      //to the Resource.
        foreach (var data in e.InitParams)
            inputs.Add(data.Key, data.Value);
 inputs.Add(“Skin”, “SimpleResources”);

InitParameters: To pass information from an ASPX page to a Silverlight library, you would make use of the Property called InitParameters. They are of key-value type of collection and are comparable to vars in Flash. Yes, it would be set up in the markup of the HTML page.

One has to just pass a comma separated Key-Value pairs like shown below:


After the parameters are defined and set values, you would use the Application_Startup event handler to capture the init params. Look above for example.

The Control and the Skin parameter allow you to set the skins for the control.

Figure 3

The attached solution with this article consists of two Media player controls in the Silverlight library.

The Customized Media Player control in the Silverlight Library is the Media Control. It’s comprised of ucMediaElement and ucMediaElementControl.

The ucMediaControl contains the Media Element and the ucMediaElementControl contains the controls required to navigate in the Media Control.

Let’s first create the ucMediaControl: The markup would look like below:

<UserControl x_Class=”SilverLightLibrary.ucMediaElement”
   xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows” >         <Grid x_Name=”LayoutRoot” Background=”White” >
               <RowDefinition x_Name=”VideoRow” Height=”Auto” />
               <ColumnDefinition x_Name=”VideoColumn” />
<Border CornerRadius=”1″ BorderThickness=”2″ Margin=”2″ BorderBrush=”{StaticResource MyBorderBrush}”>
           <MediaElement Name=”mediaPlayer” Grid.Row=”0″></MediaElement>

The ucMediaControl element contains a Grid. The grid has a Row and a Column. The MediaElement is present in the Row. Note the use of the Borderbrush property for the border element. It is loaded from Resources.

More by Author

Must Read