(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .
        Login with Facebook

Simulating reflection effect in Silverlight

(2 votes)
Denislav Savkov
Denislav Savkov
Joined Feb 11, 2008
Articles:   14
Comments:   6
More Articles
2 comments   /   posted on May 20, 2008
Tags:   reflection , denislav-savkov
Categories:   General , Design

This article is compatible with the latest version of Silverlight.


The reflection effect is widely used in different Silverlight demos and now, in this article, we will show you how to create a control that adds reflection to any class that inherits FrameworkElement:


Download source code


The idea is to have two identical FrameworkElement objects: the first one representing an image and the other one - a reflection of this image. We put four properties to define the reflection: coefficient of opacity; coefficient of fade away; angle of the reflection; and distance between the image and the reflection.

The only thing we do here is change the sign of the Y coordinate (M22 in the Transformation matrix). And for the angle of reflection we name a SkewTransform so that later we can change its value.

<Canvas x:Name="reflectionPlane">


            <SkewTransform x:Name="skew"/>



            <Canvas x:Name="reflectionContainer">



                        <MatrixTransform x:Name="reflectionMatrixTransform">

                            <MatrixTransform.Matrix >

                                <Matrix   M11="1" M12="0"

                                    M21="0" M22="-1"

                                    OffsetX="0" OffsetY="0"/>








. . .

public double ReflectionAngle


   get { return skew.AngleX; }

   set { skew.AngleX = value; }


The reflectionPlane and reflectionContainer canvases keep the settings of the transformations. When we set the element and its reflection we only add them to the children list and the transformations are done automatically.

private FrameworkElement reflectionElement;

public FrameworkElement ReflectionElement


    get { return reflectionElement; }



  // Adjust the height because of the fading effect

        this.reflectionContainer.Height = value.Height;

        reflectionContainer.Children.Remove( reflectionElement );

        reflectionElement = value;

        reflectionContainer.Children.Add( reflectionElement );



Every time we set the FrameworkElement we change the offset of the matrix transformation to adjust the position of the reflection.

private void UpdateSizes()


    Matrix newMatrix;

    newMatrix= this.reflectionMatrixTransform.Matrix;

    newMatrix.OffsetY = this.Height + this.distance / 2; //!

    this.reflectionMatrixTransform.Matrix = newMatrix;

    this.reflectionPlane.SetValue( Canvas.TopProperty, this.Height + this.distance / 2 );


And here is the brush that makes the reflection fade away.

transparent = new GradientStop();

transparent.Color = Color.FromArgb( 0, 0, 0, 0 );

LinearGradientBrush fade = new LinearGradientBrush();

fade.StartPoint = new Point( 0, 0 );

fade.EndPoint = new Point( 0, 1 );

GradientStopCollection fadeAlpha = new GradientStopCollection();

GradientStop opaque = new GradientStop();

opaque.Color = Color.FromArgb( 255, 0, 0, 0 );

opaque.Offset = 1;

fadeAlpha.Add( opaque );

fadeAlpha.Add( transparent );

fade.GradientStops = fadeAlpha;

reflectionContainer.OpacityMask = fade;

In the host project we create a couple of canvases to demonstrate the reflection. We even add an animation to one of them.  And this is what we achieve:



  • -_-

    RE: Simulating reflection effect in Silverlight 2 Beta 1

    posted by Reynaldo Ruiz on Jun 01, 2008 20:20

    Thanks, I was looking for a silverlight code to do this effect.

  • lnikolov

    RE: Simulating reflection effect in Silverlight

    posted by lnikolov on Feb 14, 2011 03:57
    The article has been updated to the latest version of Silverlight and Visual Studio.

Add Comment

Login to comment:
  *      *       
Login with Facebook