Silverlight Video Reflection

Silverlight Beta 1 Conversion

This was originally written on February 5, 2007 for the February CTP, and has now been converted to Silverlight Beta 1. No breaking changes were found in this code, just the nomal plumbing associated with the Beta.

Original Text

I was thinking today about the INETA conference and placing a reflected image on a page. I also remembered telling the folks that once an object is on the canvas it's like any other object. For instance, I was able to clip outside an ellipse and make a wmv file appear to be playing inside the ellipse.For some reason, I thought of those two concepts together and started wondering if I could just that simply reflect a video!And it was just that simple :)

Code to change

To place the wmv file of my Page 3 onto my Reflection Builder, simply take the following lines from the simple animation:


   <MediaElement x:Name="media" Source="bud_ads2.wmv" Width="300" Height="300" >
      <MediaElement.Clip>
         <EllipseGeometry Center="155,150" RadiusX="115" RadiusY="90" />
      </MediaElement.Clip>
   </MediaElement>

You can remove the clipping if you like, by pulling out the 3 center lines.

Place those lines into the Reflection Builder xaml where you find this line:


<Image Source="../images/VistaFish.png" x:Name="MainImagePNG"/>

The only change that will have to be made is to rename the upper MediaElement to be "MainImagePNG", and the lower one to be "ReflImagePNG" since that's what the js is talking to.

Once you make those changes, you can run the Reflection Builder and design your own Animated Reflection, like the one I did above. I changed the MaxFrameRate to 20 and it seemed to sync up the video[Silverlight Beta 1 note: I left the frame rate at 24]. I also set the volume to 0 on the reflected image :)

This was too simple to not try!

XAML for producing this page:


<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   <Canvas x:Name="MainImageCanvas" Canvas.Left="0" Canvas.Top="65">

      <MediaElement x:Name="MainImage" Source="http://www.wynapse.com/images/bud_ads2.wmv" Width="300" Height="300" />

      <Canvas.RenderTransform>
         <TransformGroup>
            <SkewTransform x:Name="MainSkewTransform" AngleY="-19" AngleX="0" CenterX="0" CenterY="0"/>
            <ScaleTransform x:Name="MainScaleTransform" ScaleY="1" ScaleX = "1" CenterX="0" CenterY="0"/>
         </TransformGroup>
      </Canvas.RenderTransform>
   </Canvas>

   <Canvas x:Name="ReflectionImageCanvas" Canvas.Left="227" Canvas.Top="587">

      <MediaElement x:Name="ReflImage" Source="http://www.wynapse.com/images/bud_ads2.wmv" Width="300" Height="300" Volume="0">
         <MediaElement.OpacityMask>
            <LinearGradientBrush  StartPoint="0, .25" EndPoint="0, 1">
               <GradientStop Offset="0.25" Color="#00000000"  />
               <GradientStop Offset="1" Color="#CC000000"  />
            </LinearGradientBrush>
         </MediaElement.OpacityMask>
      </MediaElement>

      <Canvas.RenderTransform>
         <TransformGroup>
            <SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" />
            <ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" />
         </TransformGroup>
      </Canvas.RenderTransform>

   </Canvas>

</Canvas>