MatrixTransform

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Creates an arbitrary affine matrix transformation that is used to manipulate objects or coordinate systems in a two-dimensional plane.

<MatrixTransform   .../>

Managed Equivalent

MatrixTransform

Remarks

Use the MatrixTransform object to create custom transformations that are not provided by the RotateTransform, ScaleTransform, SkewTransform, and TranslateTransform objects.

A two-dimensional x-y plane uses a 3 x 3 matrix for transformations. You can multiply affine matrix transformations to form linear transformations, such as rotation and skew (shear) transformations that are followed by translation.

An affine matrix transformation has its final column equal to (0, 0, 1); therefore, you have to specify only the members in the first two columns.

You can offset the local (0,0) position for an object on a Canvas by using the Canvas.Left and Canvas.Top properties, but this does not operate as a transform; the object retains its own local (0,0) position in this case for transform purposes.

You can apply multiple transforms with a TransformGroup object.

For more information on basic concepts, see Transforms. Note that the Transforms topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

The following example transforms the position and skew of a rectangle by using a MatrixTransform object.

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <Rectangle Width="60" Height="60" Fill="Blue">

    <Rectangle.RenderTransform>
      <MatrixTransform>
        <MatrixTransform.Matrix >

          <!-- This matrix transforms the x,y position of
               the rectangle and skews it. -->
          <Matrix OffsetX="30" OffsetY="100" M12="0.5" />
        </MatrixTransform.Matrix>
      </MatrixTransform>
    </Rectangle.RenderTransform>

  </Rectangle>
</Canvas>

See Also

Reference