Export (0) Print
Expand All

SkewTransform Object

Represents a 2-D skew applied to an object.

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

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="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://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

Community Additions

Show:
© 2015 Microsoft