SkewTransform Object

  • Article

Represents a 2-D skew applied to an object.

XAML
<SkewTransform .../>
Scripting
To create an object using scripting, see CreateFromXAML.

Properties

AngleX, AngleY, CenterX, CenterY, Name

Methods

Equals, FindName, GetHost, GetValue, SetValue

Remarks

The local origin 0,0 for an object can be offset on a Canvas using Canvas.Left and Canvas.Top, but this does not count as a transform; the object retains its own local 0,0 in this case for transformation purposes. For details on this concept, see Object Layout in Silverlight.

Multiple transforms can be applied with a TransformGroup. Custom transforms can be created with a MatrixTransform.

The following illustration shows three examples of a SkewTransform applied to a Rectangle.

TextBlock using a SkewTransform

TextBlock using a SkewTransform

Transforms can alter the display of text in your application to create a decorative effect. The following illustration shows text skewed along the x-axis.

Text skewed along the x-axis

Text skewed along the x-axis

Note   A typeface can simulate an italic style by shearing, or skewing, a glyph. However, a non-simulated italic typeface is typically designed to have a better visual appearance than a simulated italic typeface.

Examples

The following JavaScript example uses a SkewTransform to skew text. A skew, also known as a shear, is a transformation that stretches the coordinate space in a non-uniform manner. In this example, the two text strings are skewed -30 degrees and 30 degrees along the x-coordinate.

XAML 
<!-- Skew the text using a SkewTransform. -->
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="-30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Canvas.Top="60"
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>

The example below shows how to increase the AngleX property value of a SkewTransform applied to a Rectangle every time the Rectangle is clicked.

XAML 
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="200">
  <Rectangle MouseLeftButtonDown="handleMouseButtonDown"
    Width="50" Height="50"
    Fill="RoyalBlue">
    <Rectangle.RenderTransform>
      <!-- If you give the transform a name you can access it easily
           from code. -->
      <SkewTransform x:Name="mySkewTransform" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>
JavaScript 
function handleMouseButtonDown(sender, mouseEventArgs)
{
    // Retrieve a reference to the SkewTransform object.
    var skewTransform = sender.findName("mySkewTransform");
    // Increase AngleX property value.
    skewTransform.AngleX = skewTransform.AngleX + 15;
}

See Also

Transform Overview
Transform