#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

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: