Wei-Meng Lee - C# 2008 Programmer's Reference

Press F5 to test the page. Both videos start to play when the mouse hovers over either of the two videos (see Figure 19-56).

Figure 19-56

The MediaElementelement is a bare-bones control that simply plays back a media file — it does not have visual controls for you to pause or advance the media (although you can programmatically do that). In this section, you build a Silverlight application that resembles the YouTube player, allowing you to visually control the playback of the media as well as customize its look and feel. Figure 19-57 shows the end product.

Figure 19-57

Using Expression Blend 2, create a new Silverlight project and name it MediaPlayer.

Add a Windows Media file ( .wmv) file to the project by right-clicking on the project name and selecting Add Existing Item. For this project, use the same file as in the previous example, WindowsMedia.wmv.

The first step is to design the user interface of the media player. Figure 19-58 shows the various controls that you will add to the page. The outline is used to identify the major parts of the player.

Figure 19-58

Figure 19-59 shows the organization and hierarchy of the various controls. Those controls correspond to the controls listed in Figure 19-58.

Figure 19-59

The most delicate part of the media player is the slider used to indicate the progress of the media playback. As shown in Figure 19-60, the slider ( canvasProgress) consists of two Rectangleelements and an Ellipseelement. The first Rectangle element ( rectProgressWell) represents the entire duration of the movie. This control also forms the path that the marker (ellMarker, an Ellipse element) slides on. The second Rectanglecontrol ( rectDownloadProgress) is used to indicate the percentage of the media downloaded from the remote server. The lower part of Figure 19-60 shows this control in action (partially filled).

Figure 19-60

Here's the complete XAML code for the media player:

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="472" Height="376"

Background="#FFD6D4C8" x:Name="Page">

x:Name="MediaElement1"

Width="466" Height="340"

Stretch="Fill"

Canvas.Left="3" Canvas.Top="3"

AutoPlay="false" Source="WindowsMedia.wmv"/>

Width="24" Height="24"

Canvas.Left="5" Canvas.Top="348"

x:Name="btnPlayPause">

Width="24" Height="24"

x:Name="canvasPlay">

Width="24" Height="24" Fill="#FFFFFFFF"

Stroke="#FF000000"

RadiusX="3" RadiusY="3"

x:Name="RectPlay" StrokeThickness="2"/>

Points="8,5 8,19 18,13"

StrokeThickness="5" Fill="Red"

Width="24" Height="24"/>

Width="24" Height="24"

x:Name="canvasPause"

MouseEnter="PauseButtonMouseEnter"

MouseLeave="PauseButtonMouseLeave"

Opacity="0">

Width="24" Height="24"

Fill="#FFFFFFFF"

Stroke="#FF000000"

RadiusX="3" RadiusY="3"

x:Name="RectPause" StrokeThickness="2"/>

Width="6" Height="14"

Fill="#FF141414"

Stroke="#FF000000"

Canvas.Left="13" Canvas.Top="5"

x:Name="rectPauseBar1"/>

Width="6" Height="14"

Fill="#FF141414"

Stroke="#FF000000"

Canvas.Left="5" Canvas.Top="5"

x:Name="rectPauseBar2"/>

Width="255" Height="27"

Canvas.Left="36" Canvas.Top="346"

x:Name="canvasProgress">

Width="244" Height="8"

Fill="#FF414141" Stroke="#FF000000"

Canvas.Top="10"

x:Name="rectProgressWell"

Canvas.Left="8.5"/>

Width="3" Height="8"

Fill="#FF9D0808" Stroke="#FF000000"

Canvas.Top="10"

x:Name="rectDownloadProgress"

StrokeThickness="0" Canvas.Left="8.5"/>

Width="16" Height="16"

Stroke="#FF000000"

Canvas.Top="6" Canvas.Left="0"

x:Name="ellMarker">

Width="148" Height="21"

Text="TextBlock" TextWrapping="Wrap"

Canvas.Left="321" Canvas.Top="348"

x:Name="TextBlock"/>

With the UI created and ready for coding, you're ready to wire up all the controls so that they will function as one. You'll define the event handlers in the following table.

First, assign the various event handlers to the elements as shown in the following highlighted code:

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="472" Height="376"

Background="#FFD6D4C8"

x:Name="Page"

MouseMove="MediaPlayerMouseMove"