Gewusst wie: Ändern der Canvas-Größe mithilfe eines Ziehpunkts

  • Artikel

In diesem Beispiel wird gezeigt, wie Sie ein Thumb-Steuerelement verwenden, um die Größe eines Canvas-Steuerelements zu ändern.

Beispiel

Das Thumb-Steuerelement bietet Funktionen zum Ziehen, die zum Verschieben oder Ändern der Größe von Steuerelementen verwendet werden können, indem die Ereignisse DragStarted, DragDelta und DragCompleted von Thumb überwacht werden.

Benutzer*innen beginnen einen Ziehvorgang, indem sie die linke Maustaste drücken, während der Mauszeiger auf dem Thumb-Steuerelement ist. Der Ziehvorgang wird so lange fortgesetzt, wie die linke Maustaste gedrückt bleibt. Während des Ziehvorgangs kann DragDelta mehr als einmal auftreten. Bei jedem Auftreten stellt die DragDeltaEventArgs-Klasse die Positionsänderung bereit, die der Änderung der Mausposition entspricht. Wenn die Benutzer*innen die linke Maustaste loslassen, ist der Ziehvorgang abgeschlossen. Der Ziehvorgang stellt nur neue Koordinaten bereit. Die Position von Thumb wird nicht automatisch angepasst.

Im folgenden Beispiel wird ein Thumb-Steuerelement gezeigt, das einem Canvas-Steuerelement untergeordnet ist. Der Ereignishandler für das DragDelta-Ereignis stellt die Logik bereit, um Thumb zu verschieben und die Größe der Canvas zu ändern. Die Ereignishandler für die Ereignisse DragStarted und DragCompleted ändern die Farbe von Thumb während eines Ziehvorgangs. Im folgenden Beispiel wird das Thumb-Element definiert.

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

Das folgende Beispiel zeigt den DragDelta-Ereignishandler, der als Reaktion auf die Mausbewegung das Thumb-Element verschiebt und die Größe der Canvas ändert.

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();
    }
}

Das folgende Beispiel zeigt den DragStarted-Ereignishandler.

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

Das folgende Beispiel zeigt den DragCompleted-Ereignishandler.

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

Ein vollständiges Beispiel finden Sie im Beispiel zu Daumenziehfunktionen.

Weitere Informationen