Creating Image Reflection in Silverlight 2.0

INTRODUCTION

Silverlight 2.0 provides robust features to enable developers to
create rich and funky user interfaces. In this post I will share with you
some basics of XAML Transforms. Using these techniques we shall create a
simple image mirroring  or image reflection solution.

I have used Microsoft Expression Blend 2.0 with SP1 (The SP1 has the features to develop the Apps for Silverlight 2.0) for this solution. Alternatively you can you Visual Studio 2008 , but I strongly recommend to use Expression
Blend as it gives more control of design of User Interfaces.

XAML Transforms

The best feature of Silverlight is that it is based on vector graphics
and it supports transformations.
By using RenderTransform property of Silverlight control you can set the size,
location, rotation and skew of the control.

There are four different types of transformations that are available which
are as follows

  1. Scale Transform
  2. Rotate Transform
  3. Skew Transform
  4. Translate Transform

I shall walkthrough you with each of them in brief.

Scale Transform : This transform allows you to adjust the horizontal and vertical scales. You can use ScaleX and ScaleY properties to adjust the locations of the control. These values are based on 1 being the current size of the control. Hence if you want to double the height of the control you can do this by setting the ScaleX property to 2. The same funda applies if you want to adjust the width by setting ScaleY property.

Rotate Transform: This transform allows you to adjust the rotation. This can be done by setting Angle property of this transform.The value of this property can be set within the range of 0 to 360 degrees. If you want to rotate the controls in anti clock wise then you need to set the negative values i.e. for 0 to -360 degrees.

Skew Transform: This transform allows you to set the horizontal and vertical skews of the control. You can use AngleX for setting horizontal skew and AngleY for setting vertical skew. Again the values are based on degrees and range is within 0 to 360

Translate Transform : This transform allows to adjust the horizontal and vertical positions of the control which is relative to its original position . This can be done by setting x and y properties.

 

THE SOLUTION

As mentioned above by using these transformations I have created a Image reflection solution.
It will be displayed as it is shown in the mirror. Below the screen shot of the solution.

silverlightimagereflection

Besides using the Transforms properties I have also used the Opacity property. This property defines the transparency of the control and has values ranging from 0 to 100, where 0 is invisible and 100 is highly
visible. I have attached the sample solution so that you can play with it and explore the wonderful XAML transforms.

 

CONCLUSION

I have just touch base the XAML Transforms. I belive this is the first step of creating Silverlight drawings and funky user interfaces.Before signing off I want to  share a Tip , If you apply XAML transforms to container controls like Grid, StackPanel and Canvas the child controls automatically inherits those transformations. Thanks to the power of Dependency properties.

Download Code (Please rename the download file  from .doc to .rar)

Advertisements

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