My previous article on Silverlight
demonstrated how to use the MediaElement control to playback media files. This bare-bones control simply plays back a media fileit does not have visual controls allowing you to pause or advance the media (although you can do this programmatically). This article will show you how to build a Silverlight application that reassembles the YouTube player, allowing you to visually control the playback of the media.
Designing the User Interface
Using Expression Blend 2, create a new Silverlight project and name it MediaPlayer. Add a Windows Media file (.wmv) file to the project; right-click on the project name and select Add Existing Item…. Name it WindowsMedia.wmv.
Figure 1 shows the organization and hierarchy of the various controls. Each of the control(s) outlined in red corresponds to the controls highlighted in Figure 2.
Figure 1. Major Components: The major components of the media player.
Figure 2. Major Components: The hierarchy of the controls.
The most delicate part of the media player is the slider, which is used to indicate the progress of the media playback. The slider (canvasProgress) consists of two Rectangle controls and an Ellipse control. The first Rectangle control (rectProgressWell) represents the entire duration of the movie. This control also forms the path that the marker (ellMarker, an Ellipse control) can slide on. The second Rectangle control (rectDownloadProgress) is used to indicate the percentage of the media downloaded from the remote server.
Listing 1 shows the full XAML code for the media player.