Reflection Effect in WPF (XAML Code)

Refection effect in wpf(Windows Presentation foundation) very simple application. First of all start a wpf project then drag and drop rectangle control on the mainWindow. In this illustration I’m using rectangle control you can either use border control and image control according to your requirements. Fill the desired gradient in rectangle you just dropped on the mainWindow.

 Xaml code looks like this:

        <Rectangle Height="92" HorizontalAlignment="Left" Margin="128,43,0,0" Name="rectangle1" Stroke="White" VerticalAlignment="Top" Width="228">

            <Rectangle.Fill>

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

                    <GradientStop Color="#FFBA6767" Offset="0" />

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

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

Now add another rectangle control on the mainWindow. Width and height must be same and fill the same gradient in the 2^nd rectangle.  You can either code it again like this:

        <Rectangle Height="92" HorizontalAlignment="Left" Margin="128,43,0,0" Name="rectangle2" Stroke="White" VerticalAlignment="Top" Width="228">

            <Rectangle.Fill>

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

                    <GradientStop Color="#FFBA6767" Offset="0" />

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

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

Or you can just write:

<Rectangle Height="101" HorizontalAlignment="Left" Margin="128,139,0,0" Name="rectangle2" Stroke="White" VerticalAlignment="Top" Width="228" >

            <Rectangle.Fill>

                <VisualBrush Visual="{Binding ElementName=rectangle1}">

               </VisualBrush>

            </Rectangle.Fill>

        </Rectangle>

You got two rectangles which are identical. Now you have to transform this rectangle vertically. In this situation you have to choose visualbrush.transform property and use scaleY to -1 like this:

<VisualBrush.Transform>

                        <ScaleTransform ScaleX="1" ScaleY="-1"

                    CenterY="30"/>

                    </VisualBrush.Transform>

Now you have to add some opacity mask on the 2^nd rectangle. To do this just use linear gradient.

        <Rectangle Height="101" HorizontalAlignment="Left" Margin="128,139,0,0" Name="rectangle2" Stroke="White" VerticalAlignment="Top" Width="228" >

            <Rectangle.Fill>

                <VisualBrush Visual="{Binding ElementName=rectangle1}">

                    <VisualBrush.Transform>

                        <ScaleTransform ScaleX="1" ScaleY="-1"

                    CenterY="30"/>

                    </VisualBrush.Transform>

                </VisualBrush>

            </Rectangle.Fill>

            <Rectangle.OpacityMask>

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

                    <GradientStop Offset="0" Color="Black"></GradientStop>

                    <GradientStop Offset="0.6" Color="Transparent"></GradientStop>

                </LinearGradientBrush>

            </Rectangle.OpacityMask>

        </Rectangle>

Here is the screen shot:

Complete Code:

    <Grid Background="Black">

        <Rectangle Height="92" HorizontalAlignment="Left" Margin="128,43,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="228">

            <Rectangle.Fill>

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

                    <GradientStop Color="#FFBA6767" Offset="0" />

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

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Height="101" HorizontalAlignment="Left" Margin="128,137,0,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="228" Opacity="0.5">

            <Rectangle.Fill>

                <VisualBrush Visual="{Binding ElementName=rectangle1}">

                    <VisualBrush.Transform>

                        <ScaleTransform ScaleX="1" ScaleY="-1"

                    CenterY="30"/>

                    </VisualBrush.Transform>

                </VisualBrush>

            </Rectangle.Fill>

            <Rectangle.OpacityMask>

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

                    <GradientStop Offset="0" Color="Black"></GradientStop>

                    <GradientStop Offset="0.6" Color="Transparent"></GradientStop>

                </LinearGradientBrush>

            </Rectangle.OpacityMask>

        </Rectangle>

    </Grid>