This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Transforms - Rotate

The one hundred and forty-third part of the Windows Presentation Foundation Fundamentals tutorial looks at another of the two-dimensional transforms of WPF. This article examines RotateTransform, which rotates a user interface element around any point.


The third WPF transform that we'll look at in the tutorial is RotateTransform. This allows you to rotate a control, shape or other element by a specific number of degrees around a point. You can use this to generate interesting user interfaces with static or animated rotation. In this article we'll look at the basics of rotation without animation.

To demonstrate, create a new WPF application in Visual Studio. Name the solution, "RotateTransformDemo". Once loaded, replace the XAML of the main window with the code shown below:

<Window x:Class="RotateTransformDemo.MainWindow"
        Title="Transform Demo" Height="230" Width="250">
    <UniformGrid Background="Cornsilk">
        <TextBox Height="23" Width="100" Text="One"/>
        <TextBox Height="23" Width="100" Text="Two"/>
        <TextBox Height="23" Width="100" Text="Three"/>
        <TextBox Height="23" Width="100" Text="Four"/>

The XAML generates a window containing four TextBox controls. We'll transform these controls to demonstrate rotation.

RotateTransform demo window

Adding Rotation

The main property for rotation is Angle. This specifies the number of degrees by which the target element should be rotated, in a clockwise direction. The value can be positive or negative. A value higher than 360 is also possible, causing the shape to be transformed by more than one full rotation.

Let's apply a basic clockwise rotation to the second text box. Adjust the XAML for this control, as shown below:

<TextBox Height="23" Width="100" Text="Two">
        <RotateTransform Angle="25" />

Let's rotate the third text box anticlockwise with a negative angle:

<TextBox Height="23" Width="100" Text="Three">
        <RotateTransform Angle="-45" />

Run the program to see the results. You will find that the two controls have been rotated. Click the controls and try editing text. Their functionality is unaffected.

RotateTransform with clockwise and anticlockwise rotation

You can see that the centre point for the rotation is the top-left of the control. This corner of the text box remains stationary whilst the rest of the control spins around it. In reality, it is the top-left of the element's bounding box that becomes the origin for the rotation. However, you can change this.

Changing the Centre of Rotation

If you want to change the centre point around which the control rotates, you can specify its position using the CenterX and CenterY properties. These are set to the number of device-independent pixels from the top-left of the control's bounding box. Both properties default to zero.

To demonstrate, let's rotate the final text box by 45 degrees but move the centre point for the rotation to be close to the middle of the rendered control. This will allow us to easily compare the output to the text box to its left, which is rotated to the same angle but around the default position.

<TextBox Height="23" Width="100" Text="Four">
        <RotateTransform Angle="-45" CenterX="50" CenterY="11" />

Run the program to see the results. Note that the lower two TextBox controls are rotated by equal amounts but their positions are different.

RotateTransform with offset centre

13 March 2015