#771 – Setting the Center Point for Rotation Transforms

When you rotate a user interface element using a rotation transform, you can choose the point about which the element rotates.  By default, the element will rotate about a point at the upper left corner of the element, at the point (0,0).

There are two different ways for specifying the center point of the rotation:

• Using the CenterX and CenterY properties of the RotateTransform, in device independent units
• Using the RenderTransformOrigin property on the element itself to set both X and Y values, in normalized (0.0 – 1.0) units

(The RenderTransformOrigin actually applies to all render transforms being applied to the element).

In both coordinate systems, the X value increases from left to right and the Y value increases from top to bottom.

Using RenderTransformOrigin to specify the different corners of the element, you’d use:

And using CenterX and CenterY for a button with a size of 100 x 30, you’d use: