#771 – Setting the Center Point for Rotation Transforms
March 7, 2013 Leave a comment
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: