Partager via

Guide pratique pour redimensionner un canevas à l’aide d’un pouce

  • Article

Cet exemple montre comment utiliser un contrôle Thumb pour redimensionner un contrôle Canvas.

Exemple

Le contrôle Thumb fournit des fonctionnalités de glisser-déposer pour déplacer ou redimensionner des contrôles en surveillant les événements DragStarted, DragDelta et DragCompleted de l'Thumb.

L’utilisateur commence une opération de glisser en appuyant sur le bouton gauche de la souris lorsque le pointeur de la souris est suspendu sur le contrôle Thumb. L’opération de glissement se poursuit tant que le bouton gauche de la souris reste enfoncé. Pendant l’opération de glissement, le DragDelta peut se produire plusieurs fois. Chaque fois qu’elle se produit, la classe DragDeltaEventArgs fournit le changement de position qui correspond à la modification de la position de la souris. Lorsque l’utilisateur relâche le bouton gauche de la souris, l’opération de glisser est terminée. L’opération de glissement fournit uniquement de nouvelles coordonnées ; il ne repositionne pas automatiquement la Thumb.

L’exemple suivant montre un contrôle Thumb qui est l’élément enfant d’un contrôle Canvas. Le gestionnaire d’événements pour son événement de DragDelta fournit la logique permettant de déplacer le Thumb et de redimensionner le Canvas. Les gestionnaires d'événements pour les événements DragStarted et DragCompleted changent la couleur de Thumb pendant une opération de glissement. L’exemple suivant définit l'Thumb.

<Thumb Name="myThumb" Canvas.Left="80" Canvas.Top="80" Background="Blue" 
      Width="20" Height="20" DragDelta="onDragDelta" 
      DragStarted="onDragStarted" DragCompleted="onDragCompleted"
      />

L’exemple suivant montre le gestionnaire d’événements DragDelta qui déplace le Thumb et redimensionne le Canvas en réponse à un mouvement de souris.

void onDragDelta(object sender, DragDeltaEventArgs e)
{
    //Move the Thumb to the mouse position during the drag operation
    double yadjust = myCanvasStretch.Height + e.VerticalChange;
    double xadjust = myCanvasStretch.Width + e.HorizontalChange;
    if ((xadjust >= 0) && (yadjust >= 0))
    {
        myCanvasStretch.Width = xadjust;
        myCanvasStretch.Height = yadjust;
        Canvas.SetLeft(myThumb, Canvas.GetLeft(myThumb) +
                                e.HorizontalChange);
        Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) +
                                e.VerticalChange);
        changes.Text = "Size: " +
                        myCanvasStretch.Width.ToString() +
                         ", " +
                        myCanvasStretch.Height.ToString();
    }
}

L’exemple suivant montre le gestionnaire d’événements DragStarted.

void onDragStarted(object sender, DragStartedEventArgs e)
{
    myThumb.Background = Brushes.Orange;
}

Private Sub onDragStarted(ByVal sender As Object, ByVal e As DragStartedEventArgs)
    myThumb.Background = Brushes.Orange
End Sub

L’exemple suivant montre le gestionnaire d’événements DragCompleted.

void onDragCompleted(object sender, DragCompletedEventArgs e)
{
    myThumb.Background = Brushes.Blue;
}

Private Sub onDragCompleted(ByVal sender As Object, _
                  ByVal e As DragCompletedEventArgs)
    myThumb.Background = Brushes.Blue
End Sub

Pour obtenir l’exemple complet, consultez l’exemple de fonctionnalité de glissement avec le pouce .

Voir aussi