Playing with Media in Silverlight 1.0 : Page 3

Figure 4. A Mirror Image: One interesting thing you can do with a video is to create a mirror effect.

To achieve the mirror image, first modify the original Canvas object by switching it to XAML view and adding the code in bold in Listing 1.

This will transform the video into the shape shown in Figure 5.

Next, add another <MediaElement> element as shown in bold in Listing 2 to simulate the mirror effect.

You will now have two videos with the second video mirroring the first (see Figure 6).

To create the translucent effect for the mirror image, set the Opacity attribute to a value between 0 and 1:

<MediaElement x:Name="WindowsMedia_wmv1" 
   AutoPlay="False" 
   MouseEnter="MouseEnter"
   MouseLeave="MouseLeave"
   MouseLeftButtonDown="MouseClick"
   Width="319.125" Height="125.423" 
   Source="WindowsMedia.wmv" 
   Stretch="Fill" 
   Canvas.Left="188.405" Canvas.Top="523.848" 
   Opacity="0.3">

Figure 5. A Mirror Image: The video with the transformation applied.		Figure 6. Two Videos: The page with two videos.

Notice that instead of programmatically finding the media object (using the findName() method) in each event handler, you can also locate them in the handleLoad() function. Also, as there are two identical videos in the page, you do not need the audio playback in the mirroring video. Hence, you turn off the volume by setting the volume property to 0 (the value is from 0 to 1).

Press F5 to test the page. You will see that both videos start to play when the mouse hovers over the top video.

Scratching the Surface
This article has only touched the surface of the facilities provided by the <MediaElement> object in Silverlight. For a more in depth look at the media capabilities of Silverlight, check out the documentation here.