Les transformations en WPF – SkewTransform12 janvier 2012

Dans mon précédent article, je vous présentais la transformation graphique de contrôle et plus particulièrement la rotation, grâce la classe RotateTransform.

Dans ce chapitre des transformations WPF, je vais vous présenter la transformation parallélogramme : SkewTransform.

La transformation SkewTransform revient à déplacer les côtés du contrôle sur lequel elle s’applique tout en laissant ces derniers sur leur axe. On effectue en effet une translation des bords inférieur et droit du contrôles.

Le paramétrage de cette transformation s’effectue grâce à ses propriétés :

• AngleX – Modifie le déplacement horizontal du bord inférieur du contrôle
• AngleY – Modifie le déplacement vertical du bord droit du contrôle
• CenterX – Effectue une translation verticale du contrôle (vers le haut si > 0, sinon vers le bas)
• CenterY – Effectue une translation horizontale du contrôle (vers la droite si > 0, sinon vers la gauche)

Dans certains cas de paramétrages, il est possible d’obtenir un résultat similaire à une rotation accompagnée d’une remise à l’échelle du contrôle.

Voyez plutôt sur cet exemple :

Code XAML

<Grid>
    <Button Content="Click Me !" Opacity="0.3" />

    <Button Content="Click Me !" Opacity="0.5">
        <Button.RenderTransform>
            <SkewTransform AngleX="30" AngleY="0" />
        </Button.RenderTransform>
    </Button>

    <Button Content="Click Me !" Opacity="0.7">
        <Button.RenderTransform>
            <SkewTransform AngleX="0" AngleY="30" />
        </Button.RenderTransform>
    </Button>

    <Button Content="Click Me !" Opacity="0.7">
        <Button.RenderTransform>
            <SkewTransform AngleX="-30" AngleY="30" />
        </Button.RenderTransform>
    </Button>

    <Button Content="Click Me !" Opacity="0.7">
        <Button.RenderTransform>
            <SkewTransform AngleX="-50" AngleY="50" />
        </Button.RenderTransform>
    </Button>

    <Button Content="Click Me !">
        <Button.RenderTransform>
            <SkewTransform AngleX="-50" AngleY="50" CenterY="100" CenterX="100" />
        </Button.RenderTransform>
    </Button>
</Grid>

Rendu visuel

Liens et téléchargements

Projet des examples : Les transformations WPF - Exemples (8)

Vue d’ensemble des transformations – MSDN Microsoft