Les transformations en WPF – MatrixTransfor...18 janvier 2012

Voici donc la plus complexe des transformations graphiques en WPF, MatrixTransform. Cette transformation peut se substituer à n’importe laquelle des transformations précédemment décrites.

Cette transformation est paramétrable par son unique propriété Matrix. Matrix est de type Matrix, une classe composée elle même de 6 propriétés :

• M11 – Point 1,1 de la matrice de transformation. Agit sur l’échelle du contrôle sur l’axe des X.
• M12 – Point 1,2 de la matrice de transformation.
• M21 – Point 2,1 de la matrice de transformation.
• M22 – Point 2,2 de la matrice de transformation. Agit sur l’échelle du contrôle sur l’axe des Y.
• OffsetX – Décale le contrôle de OffsetX pixels (si > 0, vers la droite, sinon vers la gauche).
• OffsetY – Décale le contrôle de OffsetY pixels (si > 0, vers le bas, sinon vers le haut).

Regardez plutôt ces quelques examples permettant de simuler les transformations standard déjà présentées.

Code XAML

<Grid>
    <Button Opacity="0.3">Click me !</Button>

    <!-- Mirroir vertical + Translation -->
    <Button Content="Click me !" Opacity="0.5" RenderTransformOrigin="0.5,0.5">
        <Button.RenderTransform>
            <MatrixTransform>
                <MatrixTransform.Matrix>
                    <Matrix M11="-1" M12="0" M22="1" M21="0" OffsetX="-50" OffsetY="100" />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Button.RenderTransform>
    </Button>

    <!-- Mirroir horizontal + Translation -->
    <Button Content="Click me !" Opacity="0.5" RenderTransformOrigin="0.5,0.5">
        <Button.RenderTransform>
            <MatrixTransform>
                <MatrixTransform.Matrix>
                    <Matrix M11="1" M12="0" M22="-1" M21="0" OffsetX="50" OffsetY="-100" />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Button.RenderTransform>
    </Button>

    <!-- RotateTransform -->
    <Button Content="Click me !" Opacity="0.5" RenderTransformOrigin="0.5,0.5">
        <Button.RenderTransform>
            <MatrixTransform>
                <MatrixTransform.Matrix>
                    <Matrix M11="0.7" M12="-0.7" M22="0.7" M21="0.7" />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Button.RenderTransform>
    </Button>

    <!-- SkewTransform -->
    <Button Content="Click me !" Opacity="0.5">
        <Button.RenderTransform>
            <MatrixTransform>
                <MatrixTransform.Matrix>
                    <Matrix M12="0.6" M21="0.4" />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Button.RenderTransform>
    </Button>

    <!-- ScaleTransform -->
    <Button Content="Click me !" Opacity="0.5">
        <Button.RenderTransform>
            <MatrixTransform>
                <MatrixTransform.Matrix>
                    <Matrix M11="1.7" M22="0.4" />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Button.RenderTransform>
    </Button>

    <!-- Translation -->
    <Button Content="Click me !" Opacity="0.5">
        <Button.RenderTransform>
            <MatrixTransform>
                <MatrixTransform.Matrix>
                    <Matrix OffsetX="-25" OffsetY="-50" />
                </MatrixTransform.Matrix>
            </MatrixTransform>
        </Button.RenderTransform>
    </Button>
</Grid>

Rendu visuel

Liens et téléchargements

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

Vue d’ensemble des transformations – MSDN Microsoft