#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:

771-002

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

771-003

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: