none
Mirror reflection effect

    Question

  • hi,

    I am trying to get a mirror reflection effect below my image.i read over the net that image brush and with opacity this can be done but its not working for me.Sad

    Here's the code i wrote for it:

    <UserControl x:Class="FacebookContentExpress.SilverlightUI"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300" VerticalAlignment="Center" HorizontalAlignment="Center">

    <Grid x:Name="LayoutRoot" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto">

    <Grid.Background>

    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

    <GradientStop Color="#FF880000"/>

    <GradientStop Color="#FF000000" Offset="1"/>

    </LinearGradientBrush>

    </Grid.Background>

    <Grid.RowDefinitions>

    <RowDefinition Height="250"/>

    <RowDefinition Height="50"/>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="auto"/>

    <ColumnDefinition Width="auto"/>

    </Grid.ColumnDefinitions>

    <Image x:Name="bookcover" Margin="10" Source="D:/Office work/Facebook/images/book.jpg" Grid.Row="0"

    VerticalAlignment="Top" HorizontalAlignment="Center" Grid.Column="0" Stretch="None" />

    <Rectangle x:Name="recVideo" Width="auto" Height="40" StrokeThickness="4" RenderTransformOrigin="0.5,0.5" Grid.Column="1" Grid.Row="1" >

    <Rectangle.OpacityMask>

    <LinearGradientBrush EndPoint="0.50900000333786,0.83899998664856" StartPoint="0.5,-0.208000004291534">

    <GradientStop Color="#4D000000"/>

    <GradientStop Color="#00FFFFFF" Offset="1"/>

    </LinearGradientBrush>

    </Rectangle.OpacityMask>

    <Rectangle.Fill>

    <ImageBrush ImageSource="bookcover">

    <ImageBrush.Transform>

    <TransformGroup>

    <ScaleTransform ScaleY="-1"/>

    <TranslateTransform Y="280"/>

    </TransformGroup>

    </ImageBrush.Transform>

    </ImageBrush>

    </Rectangle.Fill>

    </Rectangle>

    </Grid>

    </UserControl>

    Thursday, July 24, 2008 7:28 AM

Answers

  • I found a much easier way to do it:

     

    1.         Group everything you want to reflect into a Canvas, and select the Canvas.

    2.         Ctrl + C to copy the Canvas, and Ctrl + V to paste.

    3.         Select the new Canvas, in the “Properties” Pane, expand “Transform”. Select the third tab “ScaleTransform”. Type -1 in the “Y” TextBox.

    4.         With the new Canvas selected, drag the mouse to move it, and place it below the original one.

    5.         You can do more with the new Canvas. For example, set its Opacity to less than 100%, so it looks like a water mark. Set its OpacityMask to a GradientBrush, so it looks more like a water mark.

     

    Thanks to Yi-Lun Luo - MSFT.

    The actual post http://silverlight.net/forums/t/8643.aspx

     

    Now i am searching how to get the reflection till a limit that is this way the complete image comes as reflection but i only need like halfway reflection.

    Friday, July 25, 2008 3:29 AM

All replies

  • Hi anoop tripathi,

    Try this 'Simulating reflection effect in Silverlight 2', might be helpful to you.

    Good luck!

    Thursday, July 24, 2008 8:15 AM
  • I found a much easier way to do it:

     

    1.         Group everything you want to reflect into a Canvas, and select the Canvas.

    2.         Ctrl + C to copy the Canvas, and Ctrl + V to paste.

    3.         Select the new Canvas, in the “Properties” Pane, expand “Transform”. Select the third tab “ScaleTransform”. Type -1 in the “Y” TextBox.

    4.         With the new Canvas selected, drag the mouse to move it, and place it below the original one.

    5.         You can do more with the new Canvas. For example, set its Opacity to less than 100%, so it looks like a water mark. Set its OpacityMask to a GradientBrush, so it looks more like a water mark.

     

    Thanks to Yi-Lun Luo - MSFT.

    The actual post http://silverlight.net/forums/t/8643.aspx

     

    Now i am searching how to get the reflection till a limit that is this way the complete image comes as reflection but i only need like halfway reflection.

    Friday, July 25, 2008 3:29 AM