A Transformation defines how to map points from one coordinate space to another coordinate space. Transformations allow you to modify the rendering an element while maintaining original values. Like most objects in Silverlight, Transformations are easily animated and provide a base for most interactive interfaces.
In this tutorial, we will reuse the emoticon from the Drawing tutorial to experiment with the different type of Transformations available in Expression Blend and Silverlight.
Select the head Ellipse, rightEye, leftEye and the mouth Path by clicking and holding the Shift key in the Objects panel or by drawing a rectangle around the elements using the Selection Tool (V). Right-click on the grouped elements and select Group Into -> Grid. Name the Grid face.
When you resize elements on the Artboard by dragging selection points you are modifying the actual Height and Widths of the elements. This is the same as changing the Width and Height properties in the Layout Section on the Properties panel. Resize the emoticon to fit in the upper left corner. Once you resize the elements be sure to resize the grids to make them easier to work with.
Select the face Grid, use Copy and Paste to create another emoticon. Rename the newly created face_copy to faceScale and position it to the right of the original emoticon. On the Properties panel, find the Transform Section and click the Scale tab. Change X to 2 and Y to 0.8.
Copy and Paste another face, rename to faceRotate and position below the original. Place the mouse on a corner handle of the Selection box and slowly move away from the corner until the icon becomes a curved two-headed arrow. Click and drag to rotate the emoticon. This is the same as changing the Angle on the Rotate tab in the Transform Section.
When applying the previous rotation, you may have noticed that the Center Point of the Transformation defaults to 0.5,0.5 or the horizontal and vertical center of the element. Select the mouth Path on faceRotate and drag the small white circle, found in the center, to the upper right corner of the mouth. Now rotate the mouth and notice it pivot on the new location of the circle. The Center Point can also be modified on the Center Point tab in the Transform Section.
Copy and Paste another face, rename to faceSkew and position it to the right of faceRotate. Place the mouse on the top center handle of the Selection box and slowly move away until the icon becomes a forward slash flanked by arrows. Click and drag to Skew the emoticon. This is the same as changing the X and Y properties on the Skew tab in the Transform Section.
Copy and Paste another face, rename to faceProjection and position it to the right of faceSkew. Find the Projection Tabs in the Transform section. A PlaneProjection Transformation allows you modify the X, Y and Z projection properties of an element. Its not true 3D, but 2.5D sometimes referred to as "Postcards in Space". You can set the X, Y and Z properties directly or use the projection ball found on the Rotation tab. Copy and modify a few emoticons to get a feel for how the Transformation works.