Thursday, August 7, 2008

How to create reflection on images and objects

Different type of objects may have different way to create reflection in Silverlight. If you wish to brush an image, you may need to use ImageBrush object. Or if you need to brush a video, you may need to use VideoBrush. Or otherwise, just duplicate the object, turn it around by using transform.

We are going to use the same sample here.

clip_image002

Inside the StackPanel, the code will look like this

//Create an Image inside a ContentPresenter

<ContentPresenter>
<Image x:Name="imgLogo" Source="images/logo.jpg" >
</Image>
</ContentPresenter>

//Create a Rectangle that will use ImageBrush on the jpg file

<Rectangle x:Name="rectReflect" Height="28" Width="190" Opacity="0.5">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0.5"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>

<Rectangle.Fill>
<ImageBrush ImageSource="images/logo.jpg" Stretch="Uniform"/>
</Rectangle.Fill>

<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" ScaleX="1" ScaleY="-1"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>

No comments: