SkewTransform in WPF

In this article, we discuss SkewTransform In WPF. The term Skew means to turn or place something at an angle or on its side. We can control the skewing of an element by defining four property values of the SkewTransform class: AngleX, AngleY, CenterX, and CenterY.

AngleX and AngleY define the skew angle, while CenterX and CenterY define the center point from which to skew. By default, all these properties are set to zero.

CenterX="{Binding Path=Value, ElementName=sliderSkewCX}"
CenterY="{Binding Path=Value, ElementName=sliderSkewCY}"
AngleX="{Binding Path=Value, ElementName=sliderSkewX}"
AngleY="{Binding Path=Value, ElementName=sliderSkewY}"

Here we take an example in which we apply the skew property in a ListBox.

First we set the style of the TextBox, Slider and TextBlock:

    <Window.Resources>
        <Style TargetType="TextBox">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="4"/>
                    <Setter Property="FontWeight" Value="DemiBold"/>
                        <Setter Property="Width" Value="40"/>
                           
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="4"/>
                    <Setter Property="FontWeight" Value="DemiBold"/>
        </Style>
        <Style TargetType="Slider">
            <Setter Property="Margin" Value="4"/>
                <Setter Property="Width" Value="100"/>
                    <Setter Property="Maximum" Value="100"/>
                        <Setter Property="Minimum" Value="-100"/>
                            <Setter Property="Value" Value="0"/>
                                <Setter Property="TickFrequency" Value="2"/>
                                    <Setter Property="IsSnapToTickEnabled" Value="True"/>
        </Style>
    </Window.Resources>



After that we describe the ListBox:

            <ListBox Height="100" Width="200" BorderBrush="Plum" BorderThickness="2">
                <ListBoxItem Content="One" Background="BlueViolet" Height="20"/>
                    <ListBoxItem Content="Two" Background="Lavender" Height="20"/>
                        <ListBoxItem Content="Three" Background="Honeydew" Height="20"/>
                            <ListBoxItem Content="Four" Background="BlanchedAlmond" Height="20"/>

            </ListBox>



After that we describe the Skew Property in the ListBox:

<ListBox.RenderTransform>
                                    <SkewTransform
CenterX="{Binding Path=Value, ElementName=sliderSkewCX}"
CenterY="{Binding Path=Value, ElementName=sliderSkewCY}"
AngleX="{Binding Path=Value, ElementName=sliderSkewX}"
AngleY="{Binding Path=Value, ElementName=sliderSkewY}"

/ >
</ListBox.RenderTransform>
</ListBox>

Complete Program

<Window x:Class="Skew_Transform_In_WPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="TextBox">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="4"/>
                    <Setter Property="FontWeight" Value="DemiBold"/>
                        <Setter Property="Width" Value="40"/>

        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Verdana"/>
                <Setter Property="Margin" Value="4"/>
                    <Setter Property="FontWeight" Value="DemiBold"/>
        </Style>
        <Style TargetType="Slider">
            <Setter Property="Margin" Value="4"/>
                <Setter Property="Width" Value="100"/>
                    <Setter Property="Maximum" Value="100"/>
                        <Setter Property="Minimum" Value="-100"/>
                            <Setter Property="Value" Value="0"/>
                                <Setter Property="TickFrequency" Value="2"/>
                                    <Setter Property="IsSnapToTickEnabled" Value="True"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel Margin="8">
            <ListBox Height="100" Width="200" BorderBrush="Plum" BorderThickness="2">
                <ListBoxItem Content="One" Background="BlueViolet" Height="20"/>
                    <ListBoxItem Content="Two" Background="Lavender" Height="20"/>
                        <ListBoxItem Content="Three" Background="Honeydew" Height="20"/>
                            <ListBoxItem Content="Four" Background="BlanchedAlmond" Height="20"/>

                                <ListBox.RenderTransform>
                                    <SkewTransform
CenterX="{Binding Path=Value, ElementName=sliderSkewCX}"
CenterY="{Binding Path=Value, ElementName=sliderSkewCY}"
AngleX="{Binding Path=Value, ElementName=sliderSkewX}"
AngleY="{Binding Path=Value, ElementName=sliderSkewY}"
/>
                                </ListBox.RenderTransform>
            </ListBox>
            <TextBlock Height="65" Width="100"/>
<Grid HorizontalAlignment="Center" Margin="2">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="110"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Center"  Grid.Row="0" Grid.Column="0" Text="X:"/>
<Slider Grid.Row="0" Grid.Column="1" Name="sliderSkewX"/>
<TextBox Grid.Row="0" Grid.Column="2"
Text="{Binding Path=Value, ElementName=sliderSkewX}"/>
<TextBlock HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0" Text="Y:"/>
<Slider Grid.Row="1" Grid.Column="1" Name="sliderSkewY"/>
<TextBox Grid.Row="1" Grid.Column="2"
Text="{Binding Path=Value, ElementName=sliderSkewY}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Center X:"/>
<Slider Grid.Row="2" Grid.Column="1" Name="sliderSkewCX"/>
<TextBox Grid.Row="2" Grid.Column="2"
Text="{Binding Path=Value, ElementName=sliderSkewCX}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Center Y:"/>
<Slider Grid.Row="3" Grid.Column="1" Name="sliderSkewCY"/>
<TextBox Grid.Row="3" Grid.Column="2"
Text="{Binding Path=Value, ElementName=sliderSkewCY}"/>
</Grid>
</StackPanel>
<StackPanel Margin="8">
<Border BorderBrush="Red" BorderThickness="1" Width="200" Height="100">
<Rectangle Height="100" Width="200" Stroke="Red" Fill="Red" Opacity=".05"/>
</Border>
</StackPanel>
    </Grid>
</Window>