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

#775 – Skew Transforms

March 13, 2013 1 Comment

You can use a skew transform to skew, or tilt, a user interface element in either the X or Y dimensions.  You specify skew values separately in both X and Y dimensions, expressed as an angle.

You specify a skew using a SkewTransform element, setting values for the AngleX and AngleY properties.  Both properties default to a value of 0.

Specifying a value for AngleX tilts an element’s vertical edges away from the Y axis.  Specifying a value for AngleY tilts an element’s horizontal edges away from the X axis.

Here’s an example:

        <TextBlock Text="No Skew" HorizontalAlignment="Left"
                   Padding="20,10" Background="PaleGoldenrod" Margin="10" FontSize="16" />

        <TextBlock Text="Skew, AngleX = 25" HorizontalAlignment="Left"
                   Padding="20,10" Background="PaleGoldenrod" Margin="10" FontSize="16" >
            <TextBlock.LayoutTransform>
                <SkewTransform  AngleX="25"/>
            </TextBlock.LayoutTransform>
        </TextBlock>

        <TextBlock Text="Skew, AngleY = 25" HorizontalAlignment="Left"
                   Padding="20,10" Background="PaleGoldenrod" Margin="10" FontSize="16" >
            <TextBlock.LayoutTransform>
                <SkewTransform  AngleY="25"/>
            </TextBlock.LayoutTransform>
        </TextBlock>

775-001

Filed under Layout Tagged with , , ,

#479 – Using a Layout Transform on Child Elements in a Canvas

January 24, 2012 1 Comment

You can use a LayoutTransform on child elements of a Canvas to transform them graphically.  Specifically, you can use a RotateTransform, ScaleTransform or SkewTransform.  (Translation transforms are ignored).

    <Canvas>
        <Button Content="Hopalong Cassidy" Canvas.Left="10" Canvas.Top="10">
            <Button.LayoutTransform>
                <RotateTransform Angle="45"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Roy Rogers" Canvas.Right="10" Canvas.Top="10">
            <Button.LayoutTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="2.0"/>
                    <RotateTransform Angle="-45"/>
                </TransformGroup>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Spade Cooley" Canvas.Left="10" Canvas.Bottom="10">
            <Button.LayoutTransform>
                <SkewTransform AngleX="20"/>
            </Button.LayoutTransform>
        </Button>
    </Canvas>

Filed under Layout Tagged with , , , , , ,