SkewTransform in WPF

SkewTransform is used to skew or shear an element. Shear can be used to add depth to elements to give them a 3-D look.

The AngleX and AngleY properties are used to specify the skew angle of the x-axis and y-axis, and to skew the current coordinate system along these axes. The CenterX and CenterY properties represent the X and Y coordinates of the center point.

The code listed in Listing creates two rectangles with same position and sizes accept the second rectangle is skewed at 45 degrees towards x-axis.

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

The output of Listing looks like Figure 1.

Figure 1

The code listed in Listing creates a SkewTransform object dynamically and set it as RenderTransform property of a Rectangle. The output looks like Figure 1.

private void SkewTransformSample()

{

Rectangle originalRectangle = new Rectangle();

originalRectangle.Width = 200;

originalRectangle.Height = 50;

originalRectangle.Fill = Brushes.Yellow;

LayoutRoot.Children.Add(originalRectangle);

Rectangle skewedRectangle = new Rectangle();

skewedRectangle.Width = 200;

skewedRectangle.Height = 50;

skewedRectangle.Fill = Brushes.Blue;

skewedRectangle.Opacity = 0.5;

SkewTransform skewTransform1 = new SkewTransform(45, 0, -50, 50);

skewedRectangle.RenderTransform = skewTransform1;

LayoutRoot.Children.Add(skewedRectangle);

}