C# 2008 Programmer's Reference

book's code download). After this, the WindowsMedia.wmv file will be added to the project.

Double-click WindowsMedia.wmv in the Project window to add it to the page (see Figure 19-50).

Figure 19-50 

You need Windows Media Player 10 or later for this project to work.

The WindowsMedia.wmv file in now contained within a MediaElement control (see also Figure 19-51):

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='640' Height='480'
 Background='White'
 x:Name='Page'>
 <MediaElement
  x:Name='WindowsMedia_wmv'
  Width='320' Height='240'
  Source='WindowsMedia.wmv' Stretch='Fill'
  Canvas.Top='8' Canvas.Left='8'
  AutoPlay='True'/>
</Canvas>

Figure 19-51

Press F5 to test the page. The video automatically starts to play when the page has finished loading (see Figure 19-52).

Figure 19-52

Disabling Auto-Play

While automatically playing a video is a useful feature, sometimes you might want to disable this. For example, if you have multiple videos embedded in a page, this feature is actually more nuisance than helpful. To disable the auto-play feature, just set the AutoPlay attribute in the <MediaElement> element to False, like this:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='640' Height='480'
 Background='White'
 x:Name='Page'>
 <MediaElement
  x:Name='WindowsMedia_wmv'
  Width='320' Height='240'
  Source='WindowsMedia.wmv' Stretch='Fill'
  Canvas.Top='8' Canvas.Left='8'
  AutoPlay='False'
 />
</Canvas>

So how and when do you get it to play? You can programmatically play the video when the user's mouse enters the video and pause it when the mouse leaves the video. Also, if the user clicks on the video, the video can stop and return to the beginning. To do so, set the following highlighted attributes:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'
 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='640' Height='480'
 Background='White'
 x:Name='Page'>
 <MediaElement
  x:Name='WindowsMedia_wmv'
  Width='320' Height='240'
  Source='WindowsMedia.wmv' Stretch='Fill'
  Canvas.Top='8' Canvas.Left='8'
  AutoPlay='False'
  MouseEnter='MouseEnter'
  MouseLeave='MouseLeave'
  MouseLeftButtonDown='MouseClick'
 />
</Canvas>

Basically, you are setting the event handlers for the various events handled by the <MediaElement> element. To write the event handler, go to the Project window and double- click on the Page.xaml.js file. 

Append the Page.xaml.js file with the following code:

function MouseEnter(sender, eventArgs) {
 var obj = sender.findName('WindowsMedia_wmv');
 obj.play();
}
function MouseLeave(sender, eventArgs) {
 var obj = sender.findName('WindowsMedia_wmv');
 obj.pause();
}
function MouseClick(sender, eventArgs) {
 var obj = sender.findName('WindowsMedia_wmv');
 obj.stop();
}

The findName() method allows you to programmatically get a reference to the specified element (via its x:Name attribute) on the Silverlight page. In this case, you are referencing an instance of the MediaElement element. This object supports the play, pause, and stop methods.

Press F5 to test the application again. This time, the video will start to play when the mouse hovers over it and pauses when the mouse leaves it. To restart the video to the beginning, simply click on the video.

Creating the Mirror Effect

One interesting thing you can do with a video is to create a mirror effect. For example, Figure 19-53 shows a video playing with a mirror image at the bottom of it.

Figure 19-53

Modify the original Canvas control by switching the page to XAML view and adding the following highlighted code:

<Canvas
 xmlns='http://schemas.microsoft.com/client/2007'