# Windows Presentations Foundation (WPF) 2D Transformations

### WEBINAR:On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017

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:

• 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();

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).

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.

# Windows Presentations Foundation (WPF) 2D Transformations

### WEBINAR:On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017

The scene code listed below is rather self explaining. I declared an object of each of the four simple transformations and an object to group them. The RenderTransform is set in the OnSceneLoaded() method; whenever the value of a slider changes, the appropriate property of a transformation object is set.

```using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace TranslationsDemo
{
public partial class TranslationsScene
{
private TransformGroup group = new TransformGroup();
private RotateTransform rotate = new RotateTransform(0);
private ScaleTransform scale = new ScaleTransform(1, 1);
private SkewTransform skew = new SkewTransform(0, 0);
private TranslateTransform trans = new TranslateTransform(0, 0);

public TranslationsScene()
{
this.InitializeComponent();

// add the transformations to the group
}

System.Windows.RoutedEventArgs e)
{
// set the transformation property of the TextBox to the
// transformations group
TextBox.RenderTransform = group;
}

private void OnAngleChanged(object sender,
System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
// change the angle
rotate.Angle = e.NewValue;
}

private void OnScaleChanged(object sender,
System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
// change the values of ratio on the two axes
scale.ScaleX = e.NewValue / 100;
scale.ScaleY = e.NewValue / 100;
}

private void OnSkewXChanged(object sender,
System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
skew.AngleX = e.NewValue;
}

private void OnSkewYChanged(object sender,
System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
skew.AngleY = e.NewValue;
}

private void OnTranslateX(object sender,
System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
trans.X = e.NewValue;
}

private void OnTranslateY(object sender,
System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
trans.Y = e.NewValue;
}
}
}
```

Here are several snapshots of transformations applied to the text box.

### Transforms in XAML with Interactive Designer

With the Expression Interactive Designer you can directly apply transformations into the XAML code by using the Transforms window (available from the View menu). It provides basic transformations such as position change, rotation, scaling, skewing, center point change flipping.

### Conclusions

WPF provides a very simple way of applying 2-D transformations on the WPF elements, including both well-defined transformations (scaling, rotating, skewing, and translating) and custom transformation (by defining a special matrix). All these are provided from the within the System.Windows.Media namespace.

### Previous Series Articles

#### Marius Bancila

Marius Bancila is a Microsoft MVP for VC++. He works as a software developer for a Norwegian-based company. He is mainly focused on building desktop applications with MFC and VC#. He keeps a blog at www.mariusbancila.ro/blog, focused on Windows programming. He is the co-founder of codexpert.ro, a community for Romanian C++/VC++ programmers.

• There are no comments yet. Be the first to comment!

• You must have javascript enabled in order to post comments.

## Top White Papers and Webcasts

• As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
• The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
• Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...