Exploring Transformations - Microsoft Silverlight 4 Step by Step

You apply Transformations using the RenderTransform property of an object . In this sec- tion, you’ll write the code to do each transform so you can see how each works . When you combine a transform with an animation (which you’ll see later in this chapter), you can create some very powerful UI effects .

Remember that when you use a transform, you are not changing properties of an object . Instead, you are defining how the object is drawn . So, for example, if your object has a top of 0, and a left of 0, and you use TranslateTransform to move it to a new location, it will still have a top of 0 and a left of 0, despite where it moves to on the screen .

Using RotateTransform

RotateTransform allows you to rotate an element by a specified angle around a specified

center point . You set the angle of rotation using the Angle property . It’s value should be a number of degrees through which you want to rotate the item . Consider the horizontal vec- tor pointing to the right to be 0 degrees, and rotation takes place clockwise, so the vertical vector pointing down is the result of a 90-degree rotation .

You set the center of transformation using the CenterX and CenterY properties to specify the coordinates of the pivot . These default to (0, 0), which makes the default rotation pivot the upper-left corner of the container .

Configure RotateTransform in an application

1 . Create a new Silverlight application and name it SbSCh7_1 .

2 . Add a new Rectangle to the design surface by double -clicking the Rectangle tool in the

Toolbox .

3 . Change the closing rectangle tag from a default closing slash (/>) to a fully qualified

closing tag . In other words, the closing tag should look like this: </Rectangle> .

4 . Between the <Rectangle> tags, add a <Rectangle.RenderTransform> tag . Visual Web

Explorer will automatically generate the closing tag .

5 . Between the <Rectangle.RenderTransform> tags, add a <RotateTransform> tag .

6 . Set the attributes of RotateTransform. You can do this directly (by typing Angle=“45”) .

Alternatively, you can place your pointer on the <RotateTransform> tag, click within it, and set the attribute values in the Properties window . Set the Angle value to 45 .

As you set the property, Visual Web Developer renders the transform in the design window .

7 . Here’s what your code should look like:

</Rectangle>

8 . You’ll notice that the default point of rotation is the top-left corner of the rectangle . To

change the point of rotation, set the CenterX and CenterY properties . These define the center of rotation—effectively, the point around which the object will rotate . So if your rectangle’s dimensions are 200 x 100, as in this example, and you set CenterX to 200 and CenterY to 100, the rectangle will rotate around its bottom right-hand corner .

</Rectangle>

9 . Just as before, Visual Web Developer will display the results in the designer window, so

Using ScaleTransform

You use the ScaleTransform property to change the size of an object based on the horizontal axis, the vertical axis, or both axes .

When scaling an object, you need to specify at least one of the axes along which you want to scale and by how much you want to scale against that axis . You use the ScaleX property to scale the object on the horizontal axis (the X axis) and the ScaleY property to scale the object on the vertical axis (the Y axis) .

Both ScaleX and ScaleY are double values—they represent the value by which you multiply the object’s current size on the specified axis . Values greater than 1 will stretch the object by that multiple . For example, a ScaleX value of 2 will double the size of the object horizontally . Values less than 1 but greater than 0 will shrink the object . Setting ScaleX to 0 .5, for instance, will reduce the size of the object by half horizontally .

Define a ScaleTransform

1 . Open the SbSCh7_1 project you just created .

2 . Delete the RotateTransform tags on your Rectangle, replacing them with a

<ScaleTransform> tag .

3 . Take a look at the Properties window and you’ll see the CenterX, CenterY, ScaleX, and

ScaleY properties .

5 . Set the ScaleY property to .5 and the Rectangle’s height will be reduced by 50 percent .

6 . Like with RotateTransform, ScaleTransform lets specify the point around which you want

to scale the object using the CenterX and CenterY properties .

Using TranslateTransform

A translation is a type of transform that moves an object in a 2-D plane from one position to another . You create a translation by setting up vectors that define the object’s motion along its X and Y axes . These are set using the X and Y properties on the transform . For example, to move an item two units horizontally to the right, you set the X property to 2 . To move it to the left, you use a negative value, such as -2 . Similarly, to move an object vertically, you use the Y property . Positive Y values cause the object to move down the screen, whereas nega- tive Y values move it up .

Add TranslateTransform to your application

1 . Open the SbSCh7_1 project .

2 . Delete the ScaleTransform tags and replace them with a <TranslateTransform> tag . 3 . Select the <TranslateTransform> tag and you’ll see that you can set X and Y values in

the Properties window.

In the designer window, the rectangle will immediately move to the new location .

As mentioned earlier, the top and left coordinates of the rectangle are still 0, 0 . Silverlight treats the rectangle as if it were still at that original location, but renders it at the translated location .

Using SkewTransform

Skewing an object involves shifting it in a progressive, uniform manner along an axis . For example, skewing a square or rectangle turns it into a parallelogram . This visual effect is very useful in creating the illusion of depth on a 2-D surface .

You can apply a skew at a specified angle on either the X or Y axis and apply the skew around a center point . These skews can be combined, allowing you to skew on both axes at the same time .

Skew an object

1 . Open the SbSCh7_1 project .

2 . Delete the TranslateTransform tags and replace them with a <SkewTransform> tag . 3 . Place your cursor in the SkewTransform tag and you’ll be able to set the AngleX, AngleY,

4 . Set the AngleX property to 45 and you’ll see a left-leaning parallelogram in the de-

signer window .

5 . Now change AngleX back to 0 and set AngleY to 45 . You’ll see that the Rectangle is now

skewed along the Y axis .

6 . As you’ve already seen, the CenterX and CenterY properties let you define the center

point of the skew . As you can see from these examples, the default center point of 0, 0 shows that the skew is defined from the object’s top left corner .

You should spend a little time experimenting with the CenterX and CenterY property values to see how they affect the SkewTransform .

Using MatrixTransform

All transformations, at their core, are performed by multiplying the coordinate space of the object by a transformation matrix . Each of the transforms you’ve seen so far in this chapter is a well-known and well-defined transform .

Matrix mathematics and how transforms are implemented are beyond the scope of this book, but for the sake of syntactic completeness, you’ll explore how to define them in Silverlight XAML .

Note that the matrix used in MatrixTransform is an affine matrix, which means the bottom row of the matrix is always set to (0 0 1) . As such, you set only the first two rows . You set the values by using the transform’s Matrix property, which takes a string containing the first two rows of values separated by spaces or commas .

If you understand the Matrix transformations that define computer graphics, you can use this transform to define the first and second rows of your affine matrix .

Add MatrixTransform to your application

1 . Open the SbSCh7_1 project .

2 . Delete the SkewTransform tags and replace them with a <MatrixTransform> tag . 3 . You’ll see that the only property you can enter is the Matrix property . It defaults to

Identity, which is the special name for a matrix that defines no change . (It corresponds

to the value 1, 0, 0, 1, 0, 0 .)

4 . Set the Matrix property to 1, 0, 0, 2, 0, 0 and the height of the rectangle will change . 5 . Now set the Matrix to 1, 0, 1, 2, 0, 1 and you’ll see changes in both the height and the

skew of the object . You’ve combined transforms . If you understand the matrix mathematics behind graphics transforms, you can use this type of transform to define your own transforms .

In document Microsoft Silverlight 4 Step by Step (Page 147-155)