Comment : mettre à l'échelle un élément
Cet exemple montre comment utiliser un ScaleTransform pour mettre à l'échelle un élément.
Utilisez les propriétés ScaleX et ScaleY pour redimensionner l'élément selon le facteur spécifié. Par exemple, une valeur ScaleX de 1.5 étire l'élément à 150 % de sa largeur d'origine. Une valeur ScaleY de 0.5 diminue la hauteur d'un élément de 50 %.
Utilisez les propriétés CenterX et CenterY pour spécifier le point correspondant au centre de l'opération de mise à l'échelle. Par défaut, un ScaleTransform est centré au point (0,0), c'est-à-dire à l'angle supérieur gauche du rectangle. L'élément est ainsi déplacé et paraît plus grand, car lorsque vous appliquez un Transform, vous modifiez l'espace de coordonnées dans lequel l'objet réside.
L'exemple suivant utilise un ScaleTransform pour doubler la taille d'un Rectangle de 50 par 50. Le ScaleTransform a une valeur de 0 (la valeur par défaut) pour CenterX et CenterY.
Exemple
<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
En général, vous définissez CenterX et CenterY sur le centre de l'objet mis à l'échelle : (Width/2, Height/2).
L'exemple suivant affiche un autre Rectangle dont la taille est doublée. Toutefois, ce ScaleTransform a une valeur de 25 pour CenterX et CenterY, ce qui correspond au centre du rectangle.
<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
L'illustration suivante montre la différence entre les deux opérations ScaleTransform. La ligne en pointillés affiche la taille et la position du rectangle avant la mise à l'échelle.
Deux opérations ScaleTransform avec valeurs ScaleX et ScaleY identiques, mais centres différents
.gif "Échelles de 2x avec différents points centraux")
Pour l'exemple complet, consultez Transformations 2D, exemple.
Voir aussi
Référence
Concepts
Vue d'ensemble des transformations