#772 – Use RenderTransformOrigin to Change Center Point for Rotation Transforms

There are two methods for specifying the center point for a rotation transform.  You can either set the RenderTransformOrigin property for the element itself or you can set the CenterX and CenterY properties of the RotateTransform element.

Using RenderTransformOrigin is preferred, because you specify the center point using coordinates that are normalized against the rendered size of the element.  This is easier than having to know what the actual size of element is.  For example, you use (0.5, 0.5) to indicate that the rotation center is the center of the element.

The RenderTransformOrigin property will apply to all render transforms being applied to the element.  So if you have multiple transforms and want to specify an origin for only the rotation transform, you’ll need to use the CenterX/CenterY properties on the RotateTransform element.

        <Button Content="Push Me" HorizontalAlignment="Center"
                RenderTransformOrigin="0.5,0.5"
                Margin="30">
            <Button.RenderTransform>
                <RotateTransform Angle="45" />
            </Button.RenderTransform>
        </Button>

772-001

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 )

Connecting to %s

%d bloggers like this: