Graphic Transformations

,3-D Textured Cube in Silverlight

3-D Textured Cube in Silverlight

.Graphic Transformations

"Silverlight provides a group of predefined 2D graphic transformations along with classes for creating composite and custom transforms. Silverlight 5 introduced the use of hardware accelerated 3D graphics. The core of the XNA Games Studio 4.0 graphics libraries was included in Silverlight 5."

Silverlight provides a group of predefined 2D graphic transformations. Silverlight has the TransformGroup and CompositeTransform classes for grouping predefined transforms together to create a composite transformation. It also provides a MatrixTransform Class for creating custom 2D transformations. Silverlight also supports 3D effects with the PlaneProjection perspective transform and the Matrix3DProjection Class. Transformations can be created and manipulated in either the xaml or the .NET programming language (e.g. C#).

The use of hardware accelerated 3D graphics was introduced in Silverlight 5. The core of the XNA Games Studio 4.0 graphics libraries was included in Silverlight 5 for creating 3D graphics. The DrawingSurface class defines an area for rendering 3-D contents. Note that for Silverlight's hardware accelerated graphics to work, the EnableGPUAcceleration parameter must be set to true in the HTML object tag. Also note that for security and compatibility reasons, some drivers may be blocked by default in the browser. This could require the granting of permissions by use of the Silverlight configurations settings. MSDN has a Walkthrough: Creating and Animating a 3-D Textured Cube in Silverlight which creates the 3D cube shown at the top of this page.

2D Transformations

Silverlight supports the following predefined 2D graphic transformations: scale, translate, rotate, skew.

  1. ScaleTransform
    • Scale changes the size of an object, similar to zooming in and out.
    • Has four main properties: ScaleX, ScaleY, CenterX, and CenterY.
    • Setting the Scale properties to 1 has no affect on the object size. Scale=2 makes the object twice as big.
    • Default sizing takes place from the top-left corner. Specify CenterX and CenterY to position the object during the scale.
  2. TranslateTransform
    • Moves an object from one location to another.
    • Specify X and Y properties to indicate the number of pixels to move the object.
    • Positive values move the element to the right and down.
    • Negative values move the element to the left and up.
  3. RotateTransform
    • Rotates an object around a specified point and by the number of degrees specified in the Angle property. A positive angle rotates clockwise.
    • By default rotations are performed around the top-left corner. To rotate an object in place, set the CenterX and CenterY properties to the center of the object.

,Rotate 45 Degrees Clockwise

Rectange Rotated by 45 Degrees

  1. SkewTransform
    • Moves the x or y axis by a specified number of degrees.
,Skew 45 Degrees on Y Axis

Rectange Skewed 45 Degrees on Y Axis

Transform Groups and Composites

  1. Transform Group
    • Allows multiple transformations to be grouped together to form a composite transform that can be used on an object.
    • The order of the individual transformations in a composite transform is important. For example, if you rotate, scale, and then translate, you get a different result than if you translate, rotate, and then scale.
,TransformGroup Applied to Object

TransformGroup Applied to Object

  1. CompositeTransform
    • CompositeTransform was introduced in Silverlight 4 and offers a more concise alternative to TransformGroup.
    • While the TransformGroup applies transforms to an object as a group of individual transforms, CompositeTransform applies one combined transform to an object which is made up of individual transforms.
    • CompositeTransform has the affect of applying the transforms in the following order:
      1. Scale
      2. Skew
      3. Rotate
      4. Translate
    • TransformGroup is useful when a different order of the transforms is required, or when some of the transforms need a different origin point.

3D Effect Transforms

  1. Perspective
    • Perspective transforms that produce a 3-D effect. Perspective transforms include: PlaneProjection,Matrix3DProjection, and Matrix3D.Matrix3DProjection.
    • PlaneProjection contains many properties for 3D simulation, including: Rotations(x,y,z) and Rotation Centers(x,y,z)
,PlaneProjection 45 Degrees on Y Axis

PlaneProjection 45 Degrees on Y Axis

  1. Pixel Shaders
    • SiIverlight has two prebuilt shaders for blur and drop shadow, plus the ability to build your own pixel shaders.
    • BlurEffect has the Radius property used to control the size of the blur sample. The bigger the value for Radius, the more blurred will be the effect.
,BlurEffect with Radius of 50

BlurEffect with Radius of 50

Additional Effect Transforms

  1. DropShadowEffect

Reference Articles