BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Transforms - Skew

The one hundred and forty-fourth part of the Windows Presentation Foundation Fundamentals tutorial looks at the last of the standard, single-action two-dimensional transforms provide by WPF. This is the SkewTransform, which skews a control horizontally or diagonally.

Changing the Skew Centre Point

In each of the examples, the controls are skewed around the top-left of the control's bounding box. If you compare the positions of the controls in the previous image, you can see that this point of the controls has not moved. This is the default centre point for the skew.

You can move the centre point to change the transform. To do so, set the co-ordinates for the centre point, relative to the top-left corner of the bounding box, using the CenterX and CenterY properties.

Try it by altering the fourth text box, as shown below. This uses angles that are identical to those of the previous text box. The centre point is moved to the middle of the control.

<TextBox Height="25" Width="100" Text="Four">
    <TextBox.RenderTransform>
        <SkewTransform AngleX="-10" AngleY="20"
                      CenterX="50" CenterY="13"/>
    </TextBox.RenderTransform>
</TextBox>

The updated window is shown below. Note that the matching skew angles mean that the shapes of the lower text boxes are identical. However, the change in centre point co-ordinates means that the fourth control's relative position is higher and further to the right.

WPF SkewTransform with offset centre

16 March 2015