Andy De George
da363692ff
* Reset branch for WPF changes * Convert BMP to PNG; fix link-out-of-scope err * Add snippets for WPF... 6794 files!!!! * Add missing snippets * update file updated between migration * Fix paths to include * update breadcrumb and toc * fix index links * fix index links * fix index links * fix markdown
3.0 KiB
title, ms.date, helpviewer_keywords, ms.assetid
| title | ms.date | helpviewer_keywords | ms.assetid | |||
|---|---|---|---|---|---|---|
| How to: Skew an Element | 03/30/2017 |
|
56b65f2f-dc6e-4238-923f-ca44ec53c52f |
How to: Skew an Element
This example shows how to use a xref:System.Windows.Media.SkewTransform to skew an element. A skew, which is also known as a shear, is a transformation that stretches the coordinate space in a non-uniform manner. One typical use of a xref:System.Windows.Media.SkewTransform is for simulating 3D depth in 2D objects.
Use the xref:System.Windows.Media.SkewTransform.CenterX%2A and xref:System.Windows.Media.SkewTransform.CenterY%2A properties to specify the center point of the xref:System.Windows.Media.SkewTransform.
Use the xref:System.Windows.Media.SkewTransform.AngleX%2A and xref:System.Windows.Media.SkewTransform.AngleY%2A properties to specify the skew angle of the x-axis and y-axis, and to skew the current coordinate system along these axes.
To predict the effect of a skew transformation, consider that xref:System.Windows.Media.SkewTransform.AngleX%2A skews x-axis values relative to the original coordinate system. Therefore, for an xref:System.Windows.Media.SkewTransform.AngleX%2A of 30, the y-axis rotates 30 degrees through the origin and skews the values in x- by 30 degrees from that origin. Likewise, an xref:System.Windows.Media.SkewTransform.AngleY%2A of 30 skews the y- values of the shape by 30 degrees from the origin. Note that this is not the same effect as translating (moving) the coordinate system by 30 degrees in x- or y-.
The following example applies a horizontal skew of 45 degrees to a xref:System.Windows.Shapes.Rectangle from a center point of (0,0).
Example
[!code-xamltransformsSample#41]
The following example applies a horizontal skew of 45 degrees to a xref:System.Windows.Shapes.Rectangle from a center point of (25,25).
[!code-xamltransformsSample#42]
The following example applies a vertical skew of 45 degrees to a xref:System.Windows.Shapes.Rectangle from a center point of (25,25).
[!code-xamltransformsSample#43]
The following illustration shows the different skews that are used in this example.
The three SkewTransform examples illustrated
For the complete sample, see 2D Transforms Sample.