Wiring Up All the Controls
With the UI created and ready for coding, it's now time to wire up all the controls so that they will function as one. First, define the following events handlers:
- DownloadProgressChanged(): Should be invoked continuously when the MediaElement control downloads the media from the remote server. It's used to update the red progress bar, which indicates the progress of the download.
- EllMarkerMouseDown(): Invoked when the user clicks on the marker using the left mouse button.
- EllMarkerMouseUp(): Invoked when the user releases the left mouse button.
- MediaPlayerMouseMove(): Invoked when the mouse moves across the Silverlight page.
- MediaPlayerMouseLeave(): Invoked when the mouse leaves the Silverlight page.
- MediaEnded(): Invoked when the media has finished playing. The media will be reset to its starting position (so is the marker).
- PlayPauseButtonUp(): Invoked when the user clicks on the Play/Pause button.
Now, assign the various event handlers to the various controls as shown in Listing 2
After the event handlers are assigned, it's time to define the event handlers themselves. Double-click on the Page.xaml.js file located under the Page.xaml item in the Project window.
First, declare the following global variables at the top of the Page.xaml.js file:
var playing = false;
var markerClicked = false;
//---all the major elements on the page---
When the page loads, get a reference to all the major controls on the page (see Listing 3
Before you define the various event handlers, you need to define two helper functions: ConvertToTimeSpan() and DisplayCurrentPlayBack().
The ConvertToTimeSpan() function converts value in seconds to the TimeSpan format of hh:mm:ss. For example, 61 seconds converts to 00:01:01. You need this function because the MediaElement control's Position property only accepts values of type TimeSpan. The ConvertToTimeSpan() function is defined as shown in Listing 4.
//---shows the current playback -- marker and position---
//---find duration of movie---
duration = Math.round(MediaElement1.NaturalDuration.Seconds * 100) /
//---find current position---
var position = MediaElement1.Position.Seconds;
//---move the marker---
ellMarker["Canvas.Left"] = Math.round((position / duration) *
//---format - elapsed time/total time---
var str = ConvertToTimeSpan(position) + "/" +
textblock.Text = str;