Creating Image Reflection in Silverlight 2.0

Goldytech
Posted by in Silverlight category on for Intermediate level | Views : 6209 red flag

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.
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).

Page copy protected against web site content infringement by Copyscape

About the Author

Goldytech
Full Name: Muhammad Afzal Qureshi
Member Level: Bronze
Member Status: Member
Member Since: 8/4/2009 10:58:17 PM
Country: India

http://goldytech.wordpress.com
Hello Everyone Myself Muhammad Afzal , aka GoldyTech. Thats my pen name. I reside in India and work as a solution Architect on .NET platform. I hope you must have enjoyed reading my blog. Please leave your comments or suggestions good or bad and help me to improve

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)