#769 – Rotation Transforms

You can use a rotation transform to rotate a user interface element.

To rotate an element, you specify the number of degrees to rotate, in a clockwise fashion.  A negative number will rotate the object counter-clockwise.  By default, the object is rotated around a point at its center.

You specify rotation using a RotateTransform element, setting values for the Angle property.

Note that rotating an element normally doesn’t change the element’s ability to respond to user input.

Here’s a simple example:

    <StackPanel Orientation="Vertical">
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5"/>
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5">
            <Button.LayoutTransform>
                <RotateTransform Angle="15"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5">
            <Button.LayoutTransform>
                <RotateTransform Angle="-15"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5">
            <Button.LayoutTransform>
                <RotateTransform Angle="-90"/>
            </Button.LayoutTransform>
        </Button>
    </StackPanel>