Comment : redimensionner un Canvas à l'aide d'un curseur

  • Article

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

Exemple

Le Thumb contrôle fournit des fonctionnalités de glissement qui peuvent être utilisées pour déplacer ou redimensionner des contrôles en surveillant les événements et DragCompleted les DragStartedDragDelta événements du 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 Thumb contrôle. 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 résultat peut se produire plusieurs fois. Chaque fois qu’elle se produit, la DragDeltaEventArgs classe 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 le Thumb.

L’exemple suivant montre un Thumb contrôle qui est l’élément enfant d’un Canvas contrôle. Le gestionnaire d’événements pour son DragDelta événement fournit la logique permettant de déplacer et Thumb de redimensionner le Canvas. Les gestionnaires d’événements pour l’événement DragStarted et DragCompleted changent la couleur de l’événement Thumb pendant une opération de glissement. L’exemple suivant définit le 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 DragDelta gestionnaire d’événements qui déplace et Thumb redimensionne la Canvas 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é glisser vers le pouce.

Voir aussi