RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


WPF Wonders: Transformations (and Robots!)

WPF's transformations make it easy to move, scale, or rotate objects, and simplify building complex moveable 3D shapes.


indows Presentation Framework (WPF) gets a lot of mileage out of being layered on top of DirectX, including fast rendering, multimedia support, audio, video, and more. One of the features in the “more” category is the ability to easily use transformations. WPF provides four kinds of 2D transformations and three kinds of 3D transformations. This article briefly summarizes WPF's transformation types and shows how to use them to make useful interfaces—and robots!

2D Transformations

WPF provides four classes that implement 2D transformations.

  • TranslateTransform: This transformation moves an object horizontally and vertically. Its X and Y properties tell how far the object should be moved in each direction.
  • ScaleTransform: Use this transformation to stretch or shrink an object horizontally and vertically. Set the ScaleX and ScaleY properties to the amounts you want to scale the object in each direction. Values smaller than 1 make the object smaller, while values greater than 1 make it larger.
  • RotateTransform: This transformation rotates another object. The Angle property determines how far (in degrees) to rotate the object.
  • SkewTransform: This transformation skews an object by changing the orientation of its X and Y axes. The AngleX and AngleY properties determine the angles (in degrees, clockwise) for the Y and X axes. For example, if you set AngleY = 0 and AngleX = -30, you can get an italic-looking effect.

The ScaleTransform, RotateTransform, and SkewTransform classes also have CenterX and CenterY properties that determine the point around which the transformation takes place. For example, normally a RotateTransform rotates an object around its center, but you can make it rotate around the upper left corner (the point 0, 0) by setting both CenterX and CenterY to 0.

Using Transformations

Figure 1. Many Modifications: WPF's transformations make it easy to change a control's appearance.

The sample program TransformedLabels, shown in Figure 1 and available in both C# and Visual Basic versions in the downloadable code, demonstrates these transformations. It shows labels that have been stretched, squashed, rotated, and skewed.

The following XAML snippet shows how TransformedLabels draws its two stretched labels. It stretches the red label by a factor of 2 horizontally and 6 vertically, so it appears relatively tall and thin. It stretches the top label by a factor of 5 horizontally and 2 vertically, so it appears short and wide.

<Label Content="Stretched" FontSize="16"
 Canvas.Left="200" Canvas.Top="10" Foreground="Red">
        <ScaleTransform ScaleX="2" ScaleY="6"/>
<Label Content="Stretched" FontSize="16"
 Canvas.Left="0" Canvas.Top="10" Foreground="Orange">
        <ScaleTransform ScaleX="5" ScaleY="2"/>

The program draws the yellow skewed label in the bottom right of Figure 1 by setting the SkewTransform object's AngleX property to 30. In other words, it rotates the control's Y-axis 30 degrees counterclockwise from vertical around the control's upper left corner. AngleY is 0, so the X-axis is horizontal.

<Label Content="Skewed"
 Canvas.Left="230" Canvas.Top="246" Foreground="Yellow">
        <SkewTransform AngleX="30" AngleY="0"/>

The white label in Figure 1 is rotated 315 degrees clockwise. Here's the code.

<Label Content="Rotated"
 Canvas.Top="200" Canvas.Left="150" Foreground="White">
        <RotateTransform Angle="315" CenterX="0" CenterY="0"/>

This example doesn't show a translated label because it would simply change the object's location (yawn). In practice, translations are often most useful when you want to combine them with other transformations. For example, you might want to translate an object to center it at the origin, scale and rotate it, and then translate it to its final destination.

The TransformedLabels program transforms labels only, but you can apply the same transformation concepts to all sorts of things, including other controls, controls that contain other controls, and even brushes. For example, you could apply a transformation to a Grid control containing lots of other controls to make the entire group move, rotate, stretch, or skew.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date