I haven’t really written much about transforms in a long while. We looked at them in depth during the Silverlight 1.0 time frame and then more or less took them for granted ever since.
A Transform is just a change
A transform is just an instruction in Xaml to change the object in a particular way, and wouldn’t be interesting, except that you can have that change happen to your object either when that object is in a “state” (e.g., mouseOver) or as part of an animation (“move from here to there and get twice as big over the next 5 seconds”). In that case, the ability to specify all that in Xaml (as opposed to code) really is quite interesting.
Playing With Transforms
To see some of this in action, create a project in Expression Blend and create four rows and 2 columns of approximately equal size (or, if like me, you have OCD, put the design surface in split mode and set the column and row sizes exactly.
Once you’re done admiring your grid, draw a circle in the upper left cell (hold the shift key while you draw an ellipse.) In the properties window set its name to Circle1 and set its Width and Height to 90, its alignments to center and its margins to zero. Fill it with a nice blue. Then make 3 more circles, filling the upper two rows, giving each circle its own color.
Fill the bottom two rows with rectangles sized 120 by 80, also centered in each cell with no margin. Take a moment to name the circles Circle1, Circle2, etc. and the rectangles Rect1, Rect2, etc. and give them each a distinct color.
When you are done, your grid should look more or less like this,
Click on the first circle (you can click on Circle1 in the Objects and Timeline window) and open the Transform tab in the Properties window. Notice that the Transform Window has six tabs, if you hover over each in turn they are identified as
- · Translate
- · Rotate
- · Scale
- · Skew
- · Center Point
- · Flip
Translate
A TranslateTransform moves the object. Set the X value to 225 and the Y value to 125. Suddenly your circle is visiting with the red circle that was down and to the right. You have “translated” its 0,0 position to a new position in the grid.
Rotate
No surprise what this does. Click on the rectangle in the lower left corner and then click on the rotate tab. You are prompted to enter an angle; enter the value 45 and watch the rectangle swivel 45 degrees as shown here
Scale
As you would expect, scale lets you grow or shrink an object. Let’s set the scale of the green rectangle to 1.5 and of the purple rectangle to .5, and finally, let’s set the yellow rectangle’s X scale to 1.5 and its Y scale to .5. Finally, let’s scale the X and Y of the purple circle up by 1.5 but with the green, let’s scale the X up by 1.5 but leave the Y alone. The result is shown here,
Restore
Before we look at Skew translations we need to restore the circles and rectangles to their original sizes and shapes. To do so, click each shape in turn and then look at the RenderTransform label in the Transform window. You’ll see a small white dot indicating that the object has been transformed. Click on that dot as shown here,
This will bring up the Advanced Property Options Dialog, the first choice of which is Reset; click on this to reset all the transforms for this object. Do this for each of the shapes in turn; they will each be restored to their starting size, shape and orientation.
Skew
A skew changes the lines of an objects along its x or y axis and can either distort the apparent slope of an object (e.g., turning a square into a parallelogram) or can even simulate three dimensions.
Replace the rectangles with 80 by 80 squares. Let’s skew the first (left-most) one by setting its X value to 45 and its Center (the next tab to the right) to 0,0.
You can combine skewing on one axis with changing the center to give the illusion of an object bisecting the surface of the plane. Click on the middle square and set its Y skew to 45° (thus turning the skewed figure on its side) and also set its center to 0.5, 0.5;
Hope that is helpful
—————
[footnote 1 – this is just an excerpt from unedited text, placed here not to push the book but to provide what I hope will be helpful information. The book is mentioned only because the material is copyright 2008 O’Reilly Media ]
