#776 – Setting the Center Point for Skew Transforms

March 14, 2013 Leave a comment

Like rotation transforms, you can set the origin for a skew transform using either the RenderTransformOrigin property on the element, or the CenterX/CenterY properties on the SkewTransform element.

You can think of the center of a skew transform as the point that will be held in one place as the object is tilted.

Also note–setting the X value of the center point only affects skews specified using AngleY and setting the Y value only affects skews specified using AngleX.

In the example below, we use RenderTransformOrigin to move the Y component of the center point, which impacts how the AngleX skew is done.

776-001

 

You can better see how this works by looking at how the Visual Studio designer shows you the skew.  It also shows the pre-transformed element, so you can see which point is being used as the origin.

776-002

 

776-003

Advertisement

Filed under Layout Tagged with , , , ,

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

March 11, 2013 Leave a comment

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

Filed under Layout Tagged with , , , ,

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

March 8, 2013 Leave a comment

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

Filed under Layout Tagged with , , , ,