Combining Transforms - Microsoft Silverlight 4 Step by Step

For those who don’t understand matrix mathematics that well—don’t worry, you’re not alone—Silverlight provides the ability to combine transforms without having to crunch numbers . To do this, you use the <TransformGroup> tag, which allows you to stack multiple transforms within it .

Combine transforms inside TransformGroup

1 . Open the SbSCh7_1 project .

2 . Delete the MatrixTransform tags and replace them with a <TransformGroup> tag . 3 . Within TransformGroup, add a ScaleTransform and set its ScaleX property to 1 .5 and its

ScaleY property to .5 .

4 . Now, also within TransformGroup, add a SkewTransform with its AngleX property set to 30 .

5 . Within TransformGroup, add a RotateTransform with its Angle set to 45 .

6 . Finally, within TransformGroup, add a TranslateTransform and set its X property to 50 . 7 . Your code should now look like this:

<Rectangle Height="100" HorizontalAlignment="Left"

Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="200">

<Rectangle.RenderTransform> <TransformGroup>

8 . As you add the transforms, the designer updates the rendering of the Rectangle . When

you’re done, you’ll see that the Rectangle has been simultaneously scaled, skewed, ro- tated, and translated .

Using PerspectiveTransform

Perspective transforms, in a nutshell, are transforms that can be applied to XAML elements to simulate rotating them in a 3-D space . Note that a perspective transform isn’t true 3-D—it lacks 3-D mesh models, shading, hidden line removal, and so on . Nonetheless, it’s good for simulating 3-D effects with XAML .

Imagine the screen to be a 3-D space with the X axis going left to right, the Y axis going up and down and the Z axis representing the depth that goes in and out of the screen (away from you and toward you) . If you want to rotate the image so that it appears to be in 3-D, with the perspective being that the left of the image is towards the back of the screen and the right of the image is in the forefront of the screen, you would rotate the image around the Y axis . Similarly, if you want to rotate the image so that the top or bottom of the image is towards the back of the screen and the rest is in the forefront, then you’d rotate around the X axis .

At first, you might expect to rotate around the Z axis, but that’s the depth or in/out plane . A rotation on the Z axis, in 3-D space, would just change the angle at which you’re viewing the picture .

A perspective transform is a little different than the transforms you’ve already explored . It is a Projection transform, and not a Render transform . The difference is that this transform isn’t based on a mathematical matrix calculation that changes the coordinate space . Instead, it’s based on code built into Silverlight to render the content based on 3-D calculations . As such, it’s handled a little differently, and it happens only at run time . This means you won’t see changes made to perspective transforms within the designer . You’ll have to run your application to see the results .

Explore perspective transforms

1 . Create a new Silverlight project and name it SbSCh7_2 . 2 . Add a new Image control to the design surface .

3 . Set the Source property of Image . Choose any picture you like .

4 . In the XAML view, edit the closing Image tag to remove the closing slash so that it is a

fully qualified closing tag, like so: </Image> .

5 . Add an <Image.Projection> tag .

6 . Within the <Image.Projection> tag, add a <PlaneProjection> tag .

7 . As discussed earlier, if you want to rotate the image so its left side is toward the back

of the screen plane, and the right is in the forefront of the screen plane, you want to rotate the image around the Y axis . To do this, set the RotationY attribute of the

PlaneProjection . Set the RotationY value to 30 .

8 . Your code should look like this .

</Image>

9 . Press F5 to run your application . You’ll see the image displayed in 3-D space .

10 . To make it look as if the image is tilted, set the RotationX property . Positive values will

tilt the image toward you and negative ones tilt it away from you . So, for example, set

RotationX to -30 . This will tilt the top of the image back away from you .

11 . You can combine the two, so a RotationX of -30 and a RotationY of 30 will give you a re-

12 . When using an Image like this, Silverlight treats the image as if it were transparent .

Thus, if you rotate the image far enough so that you are looking at the backside of it, you’ll see the inverse of the image, as if you were looking through it from the back . To see this, set its rotation to a value greater than 90 . For example, set RotationY to 135 (and remove RotationX if you are using it) . Notice in the following screenshot that the text on the image is inverted because you are viewing the image from the backside .

You can combine a perspective transform with the RenderTransform types that you used earlier . Just add both sets of tags (<Image.Projection> and <Image.RenderTransform> for an Image) as children of the control . Experiment with this to see the different results you can produce .

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