Transformation Matrix in Silverlight 2

In my exploration of Silverlight I have looked at a ton of code samples, and not once have I seen an example that chooses MatrixTransform as the class used to render a transformation.  We all should be familiar with the four transform classes Silverlight provides for 2-D transformations.  Each allows us to manipulate the underlying matrix without having to understand how the matrix is structured.  All of them can be grouped into a single TransformGroup to apply multiple transformations to a single object.

• TransformGroup
  • RotateTransform – Rotates by an angle
  • ScaleTransform – Scales by a a given X and Y
  • SkewTransform – Skews an element by an X and Y angle
  • TranslateTransform – Moves and object by a specified X and Y

As an alternative, you can use the MatrixTransform as a way to manipulate a matrix directly.

What is a Matrix

In Silverlight a matrix is a 3×3 array of numbers used to define affine transformations.  Here is a great definition of a Affine transformation taken from an excellent tutorial on using matrices in Flash.

Affine transformations are transformations that preserve collinearity and relative distancing in a transformed coordinate space. This means points on a line will remain in a line after an affine transformation is applied to the coordinate space in which that line exists.

Silverlight uses row-major matrices, such that vectors are expressed as rows and not column vectors.  Here is what the matrix structure looks like.

Since Silverlight only supports affine transforms, the values in the right column are always 0,0,1.  Below is an example of a Silverlight UserControl that demonstrates how manipulating each of the matrices values, will transform a rectangle.

In my demonstration, using the appropriate TextBox  you can rotate, scale, skew, and move the rectangle. For example, if you set M12 equal to 0.5 and M21 equal to -0.5 you will rotate the rectangle 45 deg.  If you set M11 and M22 equal to 1.5 you will scale the rectangle proportionately to approximately one and half times its original size.

Procedurally, these values can be set by defining a Matrix struct and setting the appropriate property (M11, M12, M21, M22, OffsetX, OffsetY).  The matrix can be applied to an objects RenderTransform by simply setting the MatrixTransform.Matrix property.

Matrix martix = new Matrix(1.5,0.5,-0.5,1.5,0,0);
MatrixTransform transform = new MatrixTransform();
transform.Matrix = matrix;
rectangle.RenderTransform = transform;

Later in the week I will post an example that uses a MatrixTransform to demonstrate an animation that reacts to mouse movement.  Nothing crazy, but a nice example of where a Matrix can create an interesting effect with very little code.

Code: MatrixExample.zip