Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
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
.gif)
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
.jpg)
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;
}
|