Les transformations en WPF – RotateTransform

Il existe plusieurs types de transformations graphiques en WPF comme la rotation, ou la translation en passant par certaines plus complexes comme le scaling (modification des proportions) ou la transformation matricielle capable de se substituer à toutes les autres transformations à condition d’avoir les connaissances mathématiques associées ;)

Je vais vous présenter ces transformations sous forme de petits exemples avec les trucs à savoir pour pas galérer des heures sur des points qui sembleraient faciles.

Les exemples et explications qui suivent sont valables pour le Framework .NET 4.0.

Généralités

Il existe donc 5 types de transformation en WPF toutes dérivées de la classe de base Transform:

RotateTransform - Rotation du contrôle selon un angle et un centre
SkewTransform - Transformation en parallélograme du contrôle
TranslateTransform – Translation du contrôle horizontalement et verticalement
MatrixTransform – Transformation matricielle du contrôle
ScaleTransform – Redéfinition de l’échelle du contrôle

Tous les éléments dérivés de UIElement possèdent une propriété RenderTransform permettant de leur affecter une ou plusieurs transformations parmis celles que je viens de citer.

En réalité il existe une 6ème transformation nommée TransformGroup (dérivée elle aussi de Transform). Cette transformation permet d’effectuer une combinaison de plusieurs transformations.

Les contrôles dérivés de UIElement possèdent également une propriété RenderTransformOrigin, utilisée par certaines transformations. Cette propriété spécifie le centre de la transformation en coordonnées proportionnelles (ex: RenderTransformOrigin= »0.5,0.5″ pour spécifier le centre de l’élément).

Dans cet article, je commence la présentation par la transformation RotateTransform, la plus utilisée car associée à des animations sur sa propriété Angle, elle permet d’obtenir des effets graphiques plutôt bien réussis et rapidement.

RotateTransform

Cette transformation effectue une rotation du contrôle sur lequel elle s’applique. Elle peut être paramétrée par les propriétés suivantes:

Angle – Définit l’angle de la rotation dans le sens des aiguilles d’une montre et en degrés
CenterX – Définit la coordonnée X prise pour le centre de la rotation, cette coordonnée est exprimée en pixels par rapport au bord gauche du contrôle.
CenterY – Définit la coordonnée Y prise pour le centre de la rotation, cette coordonnée est exprimée en pixels par rapport au bord haut du contrôle.

Les coordonnées CenterX et CenterY sont additionnés aux coordonnées du centre de la transformation calculées par la propriété RenderTransformOrigin du contrôle.

Voyez plutôt sur cet exemple :

<Grid>
    <Button Content="Click Me !" Opacity="0.5" />
    <Button Content="Click Me !" Opacity="0.7" RenderTransformOrigin="0.2,0.5">
        <Button.RenderTransform>
            <RotateTransform Angle="30" />
        </Button.RenderTransform>
    </Button>
    <Button Content="Click Me !" RenderTransformOrigin="0.2,0.5">
        <Button.RenderTransform>
            <RotateTransform Angle="60" />
        </Button.RenderTransform>
    </Button>
    <Button Content="Click Me !">
        <Button.RenderTransform>
            <RotateTransform Angle="60" CenterX="150" CenterY="35" />
        </Button.RenderTransform>
    </Button>
</Grid>

Produit le résultat suivant (dans le designer intégré de VS 2010) :