So, let’s quickly dive in and get started. Our objective here is to build a media player control which can be used to download streaming content and play the media while preserving the aspect ratio to respond to poor quality videos. Hope it will be fun.
Step 1: Getting Started
The media player is a complex control. It will in-turn host several other controls which will handle the basic functionality for the media player. In the course of this document, we will explore how to work with the following aspects of the media player:
|
1. Play
2. Pause
3. Stop
4. Forward
5. Backward
|
6. Mute
7. Status display
8. Aspect ratio preservation
9. Full screen
10. Timeline /Streaming
|
Step 1.0: creating the user interface. 
The diagram above depicts the individual sections of the media player control. The hosting UI element contains three main regions, namely the media element, which hosts the streaming media, the controls sections at the bottom of the player and the download progress/ timeline control. A similar UI may be created using the Expressions Blend editor.
Step 1.1: Hooking up events
If we move to the code-behind file for the user control, it will have very little content. However, unlike other versions of Silverlight, now we can directly access the child elements of the user control from the code-behind and hook up events. We may add event handlers in the code or in XAML. Once we have placed a media element on the host UI, we can call the appropriate events for the media element on hitting one of our control panel elements.
We will start by hooking up the basic functionality after we have placed a media element control on the host UI.
<MediaElement x:Name="thePlayer" AutoPlay="False" Visibility="Visible"/>
Step 1.1.1: Handling Play
The following XAML snippet creates a play button on the host page:
<Image x:Name="BtnPlay” Source="Images/MyPlayImage.png" Stretch="Fill" Cursor="Hand">
The following code snippet adds a click event handler in the code behind:
this.BtnPlay.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnPlay_MouseLeftButtonDown);
The following code snippet triggers the media element’s event to play the media:
thePlayer.Play();
Step 1.1.2: Handling Pause
The following XAML snippet creates a pause button on the host page:
<Image x:Name="BtnPause" Source="Images/MyPauseImage.png" Stretch="Fill" Cursor="Hand">
The following code snippet adds a click event handler in the code behind:
this.BtnPause.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnPause_MouseLeftButtonDown);
The following code snippet triggers the media element’s event to pause the media:
thePlayer.Pause();
Step 1.1.3: Handling Stop
The following XAML snippet creates a stop button on the host page:
<Image x:Name="BtnStop" Source="Images/MyStopImage.png" Stretch="Fill" Cursor="Hand">
The following code snippet adds a click event handler in the code behind:
this.BtnPause.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnStop_MouseLeftButtonDown);
The following code snippet triggers the media element’s event to stop the media:
thePlayer.Stop();
Step 1.1.4: Handling Forward
The following XAML snippet creates a forward button on the host page:
<Image x:Name="BtnFwd" Source="Images/MyFwdImage.png" Stretch="Fill" Cursor="Hand">
The following code snippet adds a click event handler in the code behind:
this.BtnFwd.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnFwd_MouseLeftButtonDown);
The following code snippet triggers the media element’s event to forward the media:
thePlayer.Position = // Desired position (forwards on the timeline) on forward click ;
Step 1.1.5: Handling Backward
The following XAML snippet creates a backward button on the host page:
<Image x:Name="BtnBwd" Source="Images/MyBwdImage.png" Stretch="Fill" Cursor="Hand">
The following code snippet adds a click event handler in the code behind:
this.BtnBwd.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnBwd_MouseLeftButtonDown);
The following code snippet triggers the media element’s event to reverse the media:
thePlayer.Position = // Desired position (backwards on the timeline) on forward click ;
Step 1.1.6: Handling Mute
The following XAML snippet creates a mute button on the host page:
<Image x:Name="BtnMute" Source="Images/MyMuteImage.png" Stretch="Fill" Cursor="Hand">
The following code snippet adds a click event handler in the code behind:
this.BtnMute.MouseLeftButtonDown += new MouseButtonEventHandler(this.BtnMute_MouseLeftButtonDown);
The following code snippet triggers the media element’s event to mute the media:
thePlayer.IsMuted = true; //(To toggle back, set the property to false)
Step 1.1.7: Handling Status Display
To handle status of the media, we could use several approaches. I will depict it using a very simple method. We will have a storyboard with a time-line of a second. This is an empty storyboard, which will virtually server as our timer. We will hook up to the events of the story board and display the current media position in a label.
The following XAML snippet creates a storyboard on the host page:
<Storyboard x:Name="Timer" Duration="00:00:01"/>
The following code snippet adds a click event handler in the code behind:
this.Timer.Completed += new EventHandler(this.Timer_Completed);
The following code snippet triggers the storyboard’s event to display the media status:
this.statusText.Text = // Display text;
The following properties of the media element will be handy while seeking such display information:
thePlayer.Position
thePlayer.NaturalDuration
Step 1.1.8: Handling Aspect Ratio
To preserve the aspect ratio of a media, use the following properties of the media element:
thePlayer.Stretch = Stretch.None; // Doesn’t strech media, ideal for poor quality videos
thePlayer.Stretch = Stretch.Uniform; // Strtches the video preserving the aspect ratios
Step 1.1.9: Handling Full Screen
To take a media element into the full screen mode, we have to investigate the following properties of the host control element:
Application.Current.Host.Content.IsFullScreen = true;
Declare an event in the media player, raise the event on clicking the full-screen button and use the aforesaid code snippet in the event handler. Once in full screen mode, it will respond to the ‘Esc’ key to take you back to the normal mode.
Step 1.1.10: Handling Stream download/ Timeline
To handle a media element’s stream download, we have to investigate the following properties/ events:
this.thePlayer.DownloadProgressChanged += new RoutedEventHandler(this.ThePlayer_DownloadProgressChanged);
private void ThePlayer_DownloadProgressChanged(object sender, RoutedEventArgs e)
{
if (thePlayer.DownloadProgress <= 1) // Signifies incomplete download
{
// Do you custom task here, probably changing the gradient of the timeline UI element or the value of a slider element. This property may be appropriately data bound.
}
}
Step 2: Hosting the player
The media player can be hosted as a Silverlight control on any other Silverlight host control. The host control can hook up to and trigger events of the media player appropriately (especially the full screen and similar events. To use any Silverlight control on another host control, we may use the following syntax:
Include:
xmlns:mediaplayer="clr-namespace:MyNamespace;assembly=MyAssembly"
Create control using:
<mediaplayer:myplayer></mediaplayer:myplayer>
To conclude, its exciting that the rich media object model in Silverlight exposes so much for the developers to build on. The UI for the player might be customized completely using Expressions Blend. Hope this tutorial helped in explaing how easy it is to play with media controls in Silverlight.
