Before we dive into manipulating objects, we need to have an object to manipulate.

Open Visual Studio 2010 and create a new Silverlight 4 project named Chapter3-ManipulateVisuals. Once the project is ready, add a Rectangle object to MainPage.xaml using the following code snippet:

<Rectangle Height="100" Width="100" Fill="Red">
</Rectangle>

This rectangle will be the base of all our visual manipulations. Build and run your application, and you should get the result, as shown in the following screenshot:

The first transformation we are going to discuss is skew transformation. Skew takes a rectangular element and turns it into a parallelogram by skewing the values of the x or y axis by a specified degree. Let's skew our rectangle 45 degrees on the x axis. Add the following code snippet between the opening and closing Rectangle elements:

<Rectangle.RenderTransform>
<SkewTransform AngleX="45"/>
</Rectangle.RenderTransform>

By using the RenderTransform attached property, we can define a transform of our choice. In our example, we have used the SkewTransform element, and set its AngleX property to 45 degrees. By using the AngleX property, we have moved the x axis 45 degrees to the right from the top-left corner of the object:

Change the AngleX property to AngleY, and you'll see that now the y axis moves by 45 degrees as well.

Other properties you could use with the SkewTransform element are CenterX and CenterY, which specify the origin point for the skew transformation.

Using the rotate transform allows us to rotate an object clockwise around a specific point and by a specified angle. By default, rotations are done around the top-left corner. The RotateTransform element exposes three main properties—Angle, CenterX, and CenterY. Angle allows us to set the angle by which we wish to rotate our object. CenterX and CenterY allow us to set the point around which the object should rotate.

To demonstrate the use of rotation, replace the line of code having the SkewTransform element in the preceding section with the following line of code:

<RotateTransform Angle="-45"/>

By setting the Angle property to -45, we are rotating the rectangle -45 degrees from the top-left corner. Build and run your application, and you should get the result, as shown in the following screenshot:

Here's a small quiz. Can you guess what happens if you transform an object 180 degrees? What about 360 degrees?

The scale transform, as its name suggests, allows us to expand or contract an object, an effect similar to zooming in or out from an object.

The ScaleTransform element exposes four main properties—ScaleX, ScaleY, and the two usual properties CenterX and CenterY.

ScaleX and ScaleY represent the amount by which you wish to scale the object. For example, setting both to 1 will show no effect because you multiply the size by 1. Set these properties to 2, and you will get an object twice as big as its original size. Just with the other transformations, the default point of origin is the top-left corner, but this can be changed very easily by setting the CenterX and CenterY properties to the desired point. Replace the line of code having the RotateTransform element in the preceding section with the following line of code:

<ScaleTransform ScaleX="2" ScaleY="2" />

If you build and run your application now, you will get the result, as shown in the following screenshot:

The rectangle is indeed twice as big, but because we haven't set the CenterX and CenterY properties, the sizing took place from the top-left corner. If we wish to position the rectangle at the center again, all we have to do is set these properties as follows:

<ScaleTransform ScaleX="2" ScaleY="2" CenterX="50" CenterY="50" />

As the original height and width of our rectangle were 100, to make the scaling from the middle of the object and not the top-left corner, we have to set the center point to the middle of the object, in this case 50, 50:

The translate transform allows us to transfer an element to another location based on the x and y properties. The element exposes two main properties—X and Y. Just like any other transformation, the default point of interaction for the translate transform is the top-left corner. Let's move our rectangle 50 pixels to the right. Replace the line of code having the ScaleTransform element in the preceding section with the following line of code:

<TranslateTransform X="50"/>

Build and run your application, and you'll notice the rectangle is no longer at the center of the screen, but 50 pixels to the right.

Running your application now will result in the following screenshot:

The perspective transforms group contains three main elements—PlaneProjection, Matrix3DProjection, and Matrix3D. Matrix3DProjection and Matrix3D are out of the scope for this book, so we will discuss the main member of the perspective transformation group—the PlaneProjection.

PlaneProjection exposes many properties used for 3D simulation. The main ones are as follows:

The axes are set so that the positive x axis is pointing towards the right, the positive y axis is pointing towards the top, and the positive z axis is closer to you and the negative z axis is further away from you.

Let's demonstrate the projection in action. Remove the Rectangle.RenderTransform element, and replace it with the following code snippet:

<Rectangle.Projection>
<PlaneProjection RotationY="45"/>
</Rectangle.Projection>

By using the Projection attached property, we are allowed to use the PlaneProjection element, and in our example we have set its RotationY property to 45. If you run the application, you will get the result, as shown in the following screenshot:

Your rectangle now has a 3D feel to it, doesn't it?

It is strongly encouraged that you check out Jaime Rodriguez's post on PlaneProjection at http://blogs.msdn.com/b/jaimer/archive/2009/06/03/silverlight3-planeprojection-primer.aspx to get a deeper understanding of this awesome transformation technique, and Switch On The Code's post—Silverlight 3 Tutorial—PlaneProjection and Perspective 3D at http://www.switchonthecode.com/tutorials/silverlight-3-tutorial-planeprojection-and-perspective-3d for some more hands-on experience.

If you wish to include several transformations together, you can't just write them one after another under the RenderTransform attached property. What you can, and should, do is group them together under the TransformGroup element. Consider the following code sample:

<Rectangle Height="100" Width="100" Fill="Red">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="50" CenterY="50"/>
<SkewTransform AngleX="20"/>
<RotateTransform Angle="90"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>

Running the preceding code will result in the following screenshot:

You can clearly see all the transformations being applied to this rectangle.

All of our samples in this topic were performed on a simple Rectangle element, but nothing is stopping you from trying them on other elements such as images, buttons, or even grids, data forms, and stack panels.

Silverlight 4 provides us with the ability to use pixel shaders in our applications. Pixel shaders are, in a nutshell, a set of instructions that calculate the color of pixels that are executed on the graphics processing unit (GPU). Silverlight comes with two prebuilt pixel shaders for blur and drop shadow, but it also gives you the option of building your own.

Building pixel shaders is out of the scope of this book, but if you are interested in the subject, make sure to check Channel 9's SilverShader—introduction to Silverlight and WPF Pixel Shaders article at http://channel9.msdn.com/coding4fun/articles/SilverShader--Introduction-to-Silverlight-and-WPF-Pixel-Shaders.

Using these pixel shaders is quite straightforward. Add an Image element to your MainPage.xaml file, and use the following attached property for Blur:

<Image.Effect>
<BlurEffect Radius="10"/>
</Image.Effect>

If you run your application, you'll notice the image is quite blurred. The only property that BlurEffect exposes is the Radius property, and it is used to control how large the area of the blur samples will be. The bigger the radius, the blurrier would be the result. It is important to note that the more the computation needed to perform the blur (meaning the larger the radius is), the more likely it is to have a performance hit.

An image with a radius 10 blur effect would look similar to the following screenshot:

The other effect that Silverlight provides out of the box is the drop shadow effect. Unlike blur, drop shadow exposes five important properties as follows:

To add a nice subtle shadow to your image, replace the line of code having the BlurEffect element with the following line of code:

<DropShadowEffect BlurRadius="20" Opacity="0.8"/>

Build and run your application, and you should notice a nice subtle blue around your image.