Windows Presentations Foundation (WPF) 2D Transformations

In the previous articles of this series, I introduced the Windows Presentation Foundation (formerly code-named ‘Avalon’), XAML (the new language for designing user interfaces), the Microsoft Expression family of tools (Graphic, Interactive, and Web Designers) and you created two versions of a simple calculator using these new technologies and tools. Starting with this article, you will start getting into more advanced and detailed topics concerning WPF, XAML, and the Interactive Designer.

In this article, I will show how you can apply different types of 2-D transformations (translations, rotations, scaling, or skewing) on the elements of WPF.

Overview on Transformations

Transformations are available through the System.Windows.Media namespace. The base class for the transformations hierarchy is Transform.

Five derived classes perform specific transformation

Five derived classes perform specific transformation:

  • RotateTransform: Rotates an object in the two-dimensional plane by specifying an angle (property Angle) and a center point expressed in the coordinate space of the element being transformed (properties CenterX and CenterY).
  • ScaleTransform: Scales an object starting from a defined center point (properties CenterX and CenterY); different values for the two axes x- and y- can be specified with the ScaleX and ScaleY properties. By default, the scale transformation is centered to the (0, 0) point, but you may want to scale it to (Width/2, Height/2).
  • SkewTransform: Defines a two-dimensional skew that stretches the coordinate space in a non-uniform manner. CenterX and CenterY properties specify the center point for the transformation and AngleX and AngleY the x- and y-axis skew angle. The transformation skews the x- and y-axis values relative to the original coordinate system.
  • TranslateTransform: Translates an object in the two-dimensional space. The amount in pixels for translating the object is specified through the X and Y properties.
  • MatrixTransform: Creates an affine matrix transformation to manipulate the object in the two dimensional space using custom transformations not provided by the classes listed above.

Any of these transformations can be applied to any UIElement (Windows Presentation Foundation element). Of course, any number of transformations can be applied to an element. TransformGroup class (derived from Transform) represents a composite transformation. It contains a collection of Transforms. The transformations can be applied to the rendering position or the layout of an element.

If the transformations are set to the RenderTransform property (from UIElement), they affect the rendering position of the element (how the element is shown). If they are applied to the LayoutTransform property (from FrameworkElement), they affect the results of the layout, and could be useful for cases such as rotating the elements of a menu from horizontal to vertical or zooming elements on focus.

Sample Codes

To rotate an element (a text box for, example) 90 degrees clockwise, create a new RotateTransform object and set the angle to 90.

TextBox.RenderTransform = new RotateTransform(90);

To scale an element 200 percent on the y-axis, but not on the x-axis too, use a ScaleTransform object:

TextBox.RenderTransform = new ScaleTransform(1, 2);

To skew an element 45 degrees on the x-axis and 90 degrees on the y-axis, use a SkewTransform:

TextBox.RenderTransform = new SkewTransform(45, 90);

Translating 50 pixels on x-axis to the right and 100 pixels to the top is as simple as:

TextBox.RenderTransform = new TranslateTransform(50, -100);

If you want to apply all these transformations to a control, use a TransformGroup object:


TransformGroup group = new TransformGroup();
group.Children.Add(RotateTransform(90));
group.Children.Add(ScaleTransform(1, 2));
group.Children.Add(SkewTransform(45, 90));
group.Children.Add(TranslateTransform(50, -100));

TextBox.RenderTransform = group;

Putting It All Together

To see the transformation on action, you can create a simple application with the Expression Interactive Designer.

Create a new Standard Application with C# as the code-behind language and the sliders and labels you see in this image. Remember that you use the Library window to select the controls that you place in the scene. From the Properties window, you can set the Minimum and Maximum properties for the sliders (set the values indicated in the labels).

the values indicated in the labels

You want to handle the value change event for each slider and perform a specific action (change the transformation’s properties). To add handlers, open the Events window, and use the Add button to add a method for the ValueChanged event for each slider. The designer will create an empty method automatically:


private void OnValueChanged(object sender,
System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
}

You also will need to handle the Loaded event for the scene itself because in that method you will set the RenderTransform property.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read