#773 – A Rotation Center Point Can Be Outside an Element

When you use the RenderTransformOrigin property of an element to specify the point of origin for all render transforms, you typically express X and Y as normalized coordinates.  X and Y both range from 0.0 to 1.0 as the position moves from one side of the element to the other.

You can also specify X and Y values that are less than 0.0 or greater than 1.0, indicating a point that is outside the element’s boundaries.  (Possibly quite distant from the element).

In the example below, the origin for a rotation transform is set to be off to the right of a Button.  The Slider allows you to try out different rotation angles at runtime.

    <StackPanel Orientation="Vertical">
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5"/>
        <Button Content="And Me" HorizontalAlignment="Center" Padding="10,5" Margin="5"
                RenderTransformOrigin="3.0,1.0" >
            <Button.RenderTransform>
                <RotateTransform Angle="{Binding ElementName=sliAngle, Path=Value}" />
            </Button.RenderTransform>
        </Button>
        <Slider Name="sliAngle" Minimum="-180"  Maximum="180" Value="-20" Margin="25,100"/>
    </StackPanel>

773-001
773-002

Advertisements

#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

#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

#770 – The Difference Between a LayoutTransform and a RenderTransform

When you are transforming user interface elements using a 2D transform, you can choose one of two types of transforms.

  • LayoutTransform transforms elements before they are layed out by the parent panel
  • A RenderTransform transforms element after they are layed out by the parent panel (but before they are rendered)

Which one you use depends on whether you want transform and then lay out (use LayoutTransform) or to lay out and then transform (use RenderTransform).  (Note: You could also use both types).

    <StackPanel Orientation="Horizontal">
        <StackPanel Orientation="Vertical">
            <Label Content="LayoutTransform"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.LayoutTransform>
                    <RotateTransform Angle="20"/>
                </Button.LayoutTransform>
            </Button>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.LayoutTransform>
                    <RotateTransform Angle="-20"/>
                </Button.LayoutTransform>
            </Button>
        </StackPanel>
        <StackPanel Orientation="Vertical">
            <Label Content="RenderTransform"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}"/>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.RenderTransform>
                    <RotateTransform Angle="20"/>
                </Button.RenderTransform>
            </Button>
            <Button Content="Push Me" Style="{StaticResource buttonStyle}">
                <Button.RenderTransform>
                    <RotateTransform Angle="-20"/>
                </Button.RenderTransform>
            </Button>
        </StackPanel>
    </StackPanel>

770-001

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

769-001

#768 – Scaling Transforms

You can use a scaling transform to scale a user interface element in the X or Y dimensions.  Scaling an element increases or reduces its size.  You can specify separate scaling in the X and Y dimensions.

A value of 1.0 represents the normal (not scaled) size of the element.  Scale values larger than 1.0 increase the size of the element and values less than 1.0 decrease its size.

You specify scaling using a ScaleTransform element, setting values for the ScaleX and ScaleY properties.  If you don’t supply a scale value for one of the dimensions (X or Y), a value of 1.0 is used.

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>
                <ScaleTransform ScaleX="2.0"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5">
            <Button.LayoutTransform>
                <ScaleTransform ScaleY="2.0"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Push Me" HorizontalAlignment="Center" Padding="10,5" Margin="5">
            <Button.LayoutTransform>
                <ScaleTransform ScaleX="0.7" ScaleY="0.7"/>
            </Button.LayoutTransform>
        </Button>
    </StackPanel>

767-001

#767 – Transform Basics

In WPF, you can easily apply one or more 2D transforms to user interface elements.  A transform is a mathematical function applied to a user interface element that does one or more of the following:

  • Scales the element – make it bigger or smaller
  • Rotates the element – spin the element around some point
  • Translates the element – move the element up/down/left/right
  • Skews the element – tilt the element, e.g. turn a rectangular element into a rhomboid

In the example below, the second label has a rotation transform applied to it, which rotates it by 15 degrees (clockwise).

    <StackPanel Orientation="Horizontal">
        <Label Content="Grand Canyon" Background="LightPink"
               VerticalAlignment="Center" Margin="5"/>
        <Label Content="Grand Tetons" Background="Bisque"
               VerticalAlignment="Center" Margin="5" >
            <Label.RenderTransform>
                <RotateTransform Angle="15"/>
            </Label.RenderTransform>
        </Label>
    </StackPanel>

764-001