Posted by: dotnetninja | April 23, 2008

Silverlight and VideoBrush

Two weeks ago I wanted to convert a WPF user control which I have created for one year ago with WPF 3.0. The user control was a simple video player showing thumbnails of the videos from the server and has an nice “mirror” reflection.

When control was loaded video part and reflection were animated for better user experience (wow effect). Most of the control was created using Microsoft Expression Blend preview.

The reflection was created using VisualBrush, and not like I saw at that time on many examples on the internet by adding separate MediaElement. With two MediaElements you have to load the same video and it is not recommended.

Main part of the WPF XAML is show here:

<Width:Grid x:Name="videoPart" xmlns:Width="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="328" Height="248" Background="#FFFFFFFF" RenderTransformOrigin="1,1">
<Width:Grid.RenderTransform>
<Width:TransformGroup>
<Width:ScaleTransform ScaleX="1" ScaleY="1"/>
<Width:SkewTransform AngleX="0" AngleY="0"/>
<Width:RotateTransform Angle="0"/>
<Width:TranslateTransform X="0" Y="0"/>
</Width:TransformGroup>
</Width:Grid.RenderTransform>
<MediaElement Name="player" Margin="4,4,4,4" LoadedBehavior="Manual"/>
</Width:Grid>
<Rectangle Width="328" Height="248" x:Name="rectangle">
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=videoPart}">
<VisualBrush.Transform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="248"/>
</TransformGroup>
</VisualBrush.Transform>
</VisualBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.506,0.609" StartPoint="0.5,0.161">
<GradientStop Color="#4C000000" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
</Grid>

How to recreate this in Silverlight? I have seen community requests that Microsoft include VisualBrush for the Silverlight which at that time was not the case.

To achive this effect (for video) we could use VideoBrush element. VideoBrush paints an area with video content provided by MediaElement.

When MediaElement loads media and that MediaElement is used by a VideoBrush as its SourceName, the video referenced as the MediaElement
Source is downloaded and decoded only one time. You do not suffer significant performance penalties by using a MediaElement and VideoBrush together, even if you choose to have both the MediaElement and VideoBrush display the video.

Source is downloaded and decoded only one time. You do not suffer significant performance penalties by using a MediaElement and VideoBrush together, even if you choose to have both the MediaElement and VideoBrush display the video.

SilverLight XAML:

<Width:Grid x:Name="videoGrid" xmlns:Width="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Width="328" Height="248" RenderTransformOrigin="1,1">
<Width:Grid.RenderTransform>
<Width:TransformGroup>
<Width:ScaleTransform/>
<Width:SkewTransform/>
<Width:RotateTransform/>
<Width:TranslateTransform Y="15"/>
</Width:TransformGroup>
</Width:Grid.RenderTransform>
<Width:MediaElement x:Name="video" Width="328" Height="248"/>
</Width:Grid>
<Rectangle Width="328" Height="248" x:Name="rectangle">
<Rectangle.Fill>
<VideoBrush SourceName="video"/>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.506,0.609" StartPoint="0.5,0.161">
<GradientStop Color="#4C000000" Offset="1"/>
<GradientStop Color="#00FFFFFF" Offset="0"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="263"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>

Here is the finally example with same principle and link (for now):


Responses

  1. […] of building a reflection of a video.  I just love VideoBursh abilities in Silverlight!https://dotnetninja.wordpress.com/2008/04/23/silverlight-and-videobrush/Silverlight 2 layout controlsCheck out this article on using Silverlight 2's layout […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: