Partager via


Comment : appliquer une transformation à un élément lorsqu'un événement se produit

Mise à jour : novembre 2007

Cet exemple montre comment appliquer un ScaleTransform lorsqu'un événement se produit. Le concept présenté ici est le même que vous utilisez pour l'application d'autres types de transformations. Pour plus d'informations sur les types de transformations disponibles, consultez la classe Transform ou Vue d'ensemble des transformations.

Voici deux manières d'appliquer une transformation à un élément :

  • Si vous ne souhaitez pas que la transformation affecte la disposition, utilisez la propriété RenderTransform de l'élément.

  • Si vous souhaitez que la transformation affecte la disposition, utilisez la propriété LayoutTransform de l'élément.

L'exemple suivant applique un ScaleTransform à la propriété RenderTransform d'un bouton. Lorsque la souris est placé sur le bouton, les propriétés ScaleX et ScaleY de ScaleTransform ont la valeur 2, ce qui rend le bouton plus grand. Lorsque la souris s'éloigne du bouton, ScaleX et ScaleY ont la valeur 1, ce qui permet au bouton de retrouver sa taille initiale.

Exemple

<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="TransformExample"
  WindowTitle="Transform on Mouse Enter Example">
  <Canvas Width="400" Height="400">

    <Button Name="Button1" MouseEnter="Enter" MouseLeave="Leave">
      <Button.RenderTransform>
        <ScaleTransform x:Name="myScaleTransform" ScaleX="1" ScaleY="1" />
      </Button.RenderTransform>
      Button
    </Button>

    <x:Code>
    <![CDATA[
      Private Sub Enter(ByVal sender as object, ByVal args as System.Windows.Input.MouseEventArgs)
        myScaleTransform.ScaleX = 2
        myScaleTransform.ScaleY = 2
      End Sub

      Private Sub Leave(ByVal sender as object, ByVal e as System.Windows.Input.MouseEventArgs)
        myScaleTransform.ScaleX = 1
        myScaleTransform.ScaleY = 1
      End Sub

    ]]>
    </x:Code>

  </Canvas>
</Page>

Voir aussi

Concepts

Vue d'ensemble des transformations

Vue d'ensemble des événements routés

Référence

Transform

ScaleTransform

Autres ressources

Rubriques Comment relatives aux transformations