SkewTransform

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Represents a two-dimensional skew applied to an object.

<SkewTransform   .../>

Methods

Equals, FindName (DependencyObject), GetHost, GetValue, SetValue

Properties

AngleX, AngleY, CenterX (SkewTransform), CenterY (SkewTransform), Name (DependencyObject)

Managed Equivalent

SkewTransform

Remarks

You can offset the local origin (0,0) position for an object on a Canvas by using the Canvas.Left and Canvas.Top properties, but this does not count as a transform; the object retains its own local (0,0) position in this case for transformation purposes.

You can apply multiple transforms with a TransformGroup object. You can create custom transforms with a MatrixTransform object.

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

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

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

For more information on basic concepts, see Transforms. Note that the Transforms topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

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

<!-- Skew the text by 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 following example shows how to increase the AngleX property value of a SkewTransform applied to a Rectangle object every time the Rectangle is clicked.

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  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>

function handleMouseButtonDown(sender, mouseEventArgs)
{
    // Retrieve a reference to the SkewTransform object.
    var skewTransform = sender.findName("mySkewTransform");

    // Increase the AngleX property value.
    skewTransform.AngleX = skewTransform.AngleX + 15;
}

See Also

Reference

Transform