.NET 4.0+

WPF Transforms - Skew

by Richard Carr, published at http://www.blackwasp.co.uk/SkewTransform.aspx

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.

SkewTransform

The fourth WPF transform that you can use to modify the shape of a control is provided by the SkewTransform class. As the name suggests, the transform skews a user interface element, causing it to become slanted. You can skew horizontally, vertically or in both directions at once, changing the bounding box of a control from a rectangle to a parallelogram.

The easiest way to explain the skew transform is to demonstrate it. Create a new WPF application in Visual Studio, naming the solution, "SkewTransformDemo". Once the solution is prepared, replace the XAML in the main window with the code shown below:

<Window x:Class="SkewTransformDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Transform Demo" Height="230" Width="250">
    <UniformGrid>
        <Border BorderBrush="Black">
            <TextBox Height="25" Width="100" Text="One"/>
        </Border>

        <Border BorderBrush="Black">
            <TextBox Height="25" Width="100" Text="Two"/>
        </Border>

        <Border BorderBrush="Black">
            <TextBox Height="25" Width="100" Text="Three"/>
        </Border>

        <Border BorderBrush="Black">
            <TextBox Height="25" Width="100" Text="Four"/>
        </Border>
    </UniformGrid>
</Window>

The XAML produces a window containing four equally sized TextBox controls. We'll skew each of these in turn.

Applying a Skew

To skew a control you apply a SkewTransform using property element syntax, in much the same way that we have applied other two-dimension transformations. For a horizontal skew, where the user interface element is slanted to one side whilst retaining its height, you set the AngleX property. The value is the number of degrees to tilt the control. If you use a positive value, the bottom of the control is skewed to the right. A negative value skews left.

Let's update the XAML for the first text box to apply a horizontal skew:

<TextBox Height="25" Width="100" Text="One">
    <TextBox.RenderTransform>
        <SkewTransform AngleX="20" />
    </TextBox.RenderTransform>
</TextBox>

The result is shown below. Note that the top-left of the control has not been moved. The rest of the control is adjusted to achieve a 20 degree angle.

To apply a vertical skew, use the AngleY property. This works in a similar manner, skewing the right side of the control downwards with positive angles and upwards with negative values.

Modify the second text box to apply a vertical skew:

<TextBox Height="25" Width="100" Text="Two">
    <TextBox.RenderTransform>
        <SkewTransform AngleY="20" />
    </TextBox.RenderTransform>
</TextBox>

The result is shown below. Note that the left and right edges remain parallel and the width of the control's bounding box is unchanged.

If you wish, you can combine horizontal and vertical skewing for a single control. To demonstrate, change the angles for the third text box. This time we'll include a negative value for the AngleX property to skew the control in the opposite direction:

<TextBox Height="25" Width="100" Text="Three">
    <TextBox.RenderTransform>
        <SkewTransform AngleX="-10" AngleY="20" />
    </TextBox.RenderTransform>
</TextBox>

The results are shown below. The third control is skewed in both directions but opposing sides of the control are still parallel.