C# 2008 Programmer's Reference

 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
 Width='640' Height='480'
 Background='White'
 x:Name='Page'>
 <MediaElement
  x:Name='WindowsMedia_wmv'
  Width='238' Height='156'
  Source='WindowsMedia.wmv' Stretch='Fill'
  Canvas.Top='124' Canvas.Left='8'
  AutoPlay='False'
  MouseEnter='MouseEnter'
  MouseLeave='MouseLeave'
  MouseLeftButtonDown='MouseClick'>
  <MediaElement.RenderTransform>
   <TransformGroup>
    <ScaleTransform ScaleX='1' ScaleY='1'/>
    <SkewTransform AngleX='0' AngleY='-25'/>
    <RotateTransform Angle='0'/>
    <TranslateTransform X='0' Y='0'/>
   </TransformGroup>
  </MediaElement.RenderTransform>
 </MediaElement>
</Canvas>

This transforms the video into the shape shown in Figure 19-54.

Figure 19-54

Add another <MediaElement> element (highlighted code) to simulate the mirror effect:

<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='238' Height='156'
  Source='WindowsMedia.wmv' Stretch='Fill'
  Canvas.Top='124' Canvas.Left='8'
  AutoPlay='False'
  MouseEnter='MouseEnter'
  MouseLeave='MouseLeave'
  MouseLeftButtonDown='MouseClick'>
  <MediaElement.RenderTransform>
   <TransformGroup>
    <ScaleTransform ScaleX='1' ScaleY='1'/>
    <SkewTransform AngleX='0' AngleY='-25'/>
    <RotateTransform Angle='0'/>
    <TranslateTransform X='0' Y='0'/>
   </TransformGroup>
  </MediaElement.RenderTransform>
 </MediaElement>
 <MediaElement
  x:Name='WindowsMedia_wmv1'
  AutoPlay='False'
  MouseEnter='MouseEnter'
  MouseLeave='MouseLeave'
  MouseLeftButtonDown='MouseClick'
  Width='238.955' Height='99.454'
  Source='WindowsMedia.wmv'
  Stretch='Fill'
  Canvas.Left='149.319' Canvas.Top='379.884'>
  <MediaElement.RenderTransform>
   <TransformGroup>
    <ScaleTransform ScaleX='1' ScaleY='-1'/>
    <SkewTransform AngleX='55' AngleY='-25'/>
    <TranslateTransform X='0' Y='0'/>
   </TransformGroup>
  </MediaElement.RenderTransform>
 </MediaElement>
</Canvas>

You now have two videos with the second video mirroring the first (see Figure 19-55).

Figure 19-55

To create the translucent effect for the mirror image, set the Opacity attribute to a value between 0 and 1 (in this case it's set to 0.3):

<MediaElement
 x:Name='WindowsMedia_wmv1'
 AutoPlay='False'
 MouseEnter='MouseEnter'
 MouseLeave='MouseLeave'
 MouseLeftButtonDown='MouseClick'
 Width='238.955' Height='99.454'
 Source='WindowsMedia.wmv'
 Stretch='Fill'
 Canvas.Left='149.319' Canvas.Top='379.884'
 Opacity='0.3'>

Modify the following block of code in Page.xaml.js highlighted here:

//---make these variables global---
var obj, obj1;
if (!window.Media) Media = {};
Media.Page = function() {}
Media.Page.prototype = {
 handleLoad: function(control, userContext, rootElement) {
  this.control = control; // Sample event hookup:
  rootElement.addEventListener('MouseLeftButtonDown',
   Silverlight.createDelegate(this, this.handleMouseDown));
  //---the original video---
  obj = this.control.content.findName ('WindowsMedia_wmv');