Essential Silverlight 2 Up-to-Date

Chapter 7. Transforming and Animating Content

Silverlight applications can be dynamic even if they do not use JavaScript. The content can be transformed and animated, both of which we will cover here. The transformation is nothing that you can watch, but rather a calculation that takes effect when the plug-in renders the Silverlight content. For example, you can rotate or skew elements. An animation, on the other hand, can really change the visual appearance of the applications: elements may move or change their color. As always, you will find many small and self-contained examples that showcase the most interesting and important Silverlight options.

Transformations

A transformation is technically only a change of one or more values. For instance, if an element is rotated, its position and the location of all the drawing points of the element change. If an element is moved to another position (that’s a transformation as well), basically the positions of all corners of the element change (if we leave fillings aside). Silverlight supports five transformations:

TranslateTransform

Changes the position of an element

ScaleTransform

Scales an element by multiplying its dimension horizontally and vertically

SkewTransform

Skews an element by using a horizontal and a vertical angle

RotateTransform

Rotates an element by using an angle

MatrixTransform

Multiplies all points of an element by a given matrix, and uses the result as the new value

Let’s start with the <TranslateTransform> element, which just ...