#775 – Skew Transforms

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>