C# 2008 Programmer's Reference

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

<Canvas
 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'
 MouseLeave='MediaPlayerMouseLeave'
 MouseLeftButtonUp='EllMarkerMouseUp'>
 <MediaElement
  x:Name='MediaElement1'
  Width='466' Height='340'
  Stretch='Fill' Canvas.Left='3' Canvas.Top='3'
  AutoPlay='false' Source='WindowsMedia.wmv'
  MediaEnded='MediaEnded'
  DownloadProgressChanged='DownloadProgressChanged'/>
 <Canvas
  Width='24' Height='24'
  Canvas.Left='5' Canvas.Top='348'
  x:Name='btnPlayPause'
  MouseLeftButtonUp='PlayPauseButtonUp'>
  <Canvas Width='24' Height='24' x:Name='canvasPlay'>
   <Rectangle
    Width='24' Height='24'
    Fill = '#FFFFFFFF' Stroke='#FF000000'
    RadiusX='3' RadiusY='3'
    x:Name='RectPlay' StrokeThickness='2'/>
   <Polygon
    Points='8,5 8,19 18,13' StrokeThickness='5'
    Fill='Red' Width='24' Height='24'/>
  </Canvas>
  <Canvas
   Width='24' Height='24'
   x:Name='canvasPause'
   MouseEnter='PauseButtonMouseEnter'
   MouseLeave='PauseButtonMouseLeave'
   Opacity='0'>
   <Rectangle
    Width='24' Height='24' Fill='#FFFFFFFF'
    Stroke='#FF000000' RadiusX='3' RadiusY='3'
    x:Name='RectPause' StrokeThickness='2'/>
   <Rectangle
    Width='6' Height='14'
    Fill='#FF141414' Stroke='#FF000000'
    Canvas.Left='13' Canvas.Top='5'
    x:Name='rectPauseBar1'/>
   <Rectangle
    Width='6' Height='14'
    Fill='#FF141414' Stroke='#FF000000'
    Canvas.Left='5' Canvas.Top='5'
    x:Name='rectPauseBar2'/>
  </Canvas>
 </Canvas>
 <Canvas
  Width='255' Height='27'
  Canvas.Left='36' Canvas.Top='346'
  x:Name='canvasProgress'>
  <Rectangle
   Width='244' Height='8'
   Fill='#FF414141' Stroke='#FF000000'
   Canvas.Top='10'
   x:Name='rectProgressWell' Canvas.Left='8.5'/>
  <Rectangle
   Width='3' Height='8'
   Fill='#FF9D0808' Stroke='#FF000000'
   Canvas.Top='10'
   x:Name='rectDownloadProgress'
   StrokeThickness='0' Canvas.Left='8.5'/>
  <Ellipse
   Width='16' Height='16'
   Stroke='#FF000000'
   Canvas.Top='6' Canvas.Left='0'
   x:Name='ellMarker'
   MouseLeftButtonDown='EllMarkerMouseDown'
   MouseLeftButtonUp='EllMarkerMouseUp'>
   <Ellipse.Fill>
    <RadialGradientBrush>
     <GradientStop Color='#FF000000' Offset='0'/>
     <GradientStop Color='#FFF6F6EC' Offset='1'/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
 </Canvas>
 <TextBlock
  Width='148' Height='21'
  Text='TextBlock' TextWrapping='Wrap'
  Canvas.Left='321' Canvas.Top='348'
  x:Name='TextBlock'/>
</Canvas>

Now double-click on the Page.xaml.js file in the Project window to open it. Declare the following global variables at the top of the file:

//---global variables---
var playing = false;
var markerClicked = false;
var duration=0;
var intervalID;