Basics of Transformation in XAML Silverlight

Introduction

Transformation is one of the exciting features of Silverlight where we change the position or direction of the axes of an art, here parallel lines remain parallel. Transformation is a way to modify appearance of an element. Without affecting layout of element ‘RenderTransform’ property let us transform the element. Look at the image given below:

In above image, Canvas has one child:

Grid: It has following properties:

Ø  Width/Height: Its height and width.

Ø  Background: It’s background color that is ‘Orange’.

Ø  Margins: It has margin 50 from left and 20 from top with respect to Canvas.

Now this Grid has one child:

TextBlock: It has following properties:

¨       Text: Text is ‘Abhimanyu’.

¨       Foreground: It is black.

¨       HorizontalAlignment: It is ‘Center’ to Grid.

Now we are applying the ‘RenderTransform’ to ‘Grid’ by 20 degree. If we apply ‘RenderTransform’ to ‘Grid’, notice Grid’s child (TextBlock here) is also rotated. So, remember transforms applied to an element will affect the children too.

By default ‘RotateTransform’ angle is zero, but if we change this angle to any positive then it will rotate as follows:

In above screenshot, ‘RenderTransformOrigin’ is also 0,0 by default, let’s change and look at the results. Look at the screenshot below, where we’ll be demonstrating with these all.

In above screenshot, I kept ‘RotateTransform’ angle by 0, so that you can understand ‘RenderTransformOrigin’ well. ‘RenderTransformOrigin’ means putting the rotation point on stage, I will be using 0.5, 0.5 meaning center of art. Now let’s change the ‘RotateTransform’ angle by some positive value like 20 degree. Look at screenshot below:

In above screenshot, I am using ‘RenderTransformOrigin’ by 0.5, 0.5 and ‘RotateTransform’ angle by 20 degree.

That’s all about the basics of transformation, in next post we will talk about its types.