Freigeben über


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

In diesem Beispiel wird dargestellt, wie Sie mithilfe eines Thumb-Steuerelements die Größe von Canvas-Steuerelementen ändern können.

Beispiel

Das Thumb-Steuerelement bietet eine Ziehfunktionalität, mit der sich Steuerelemente verschieben oder in der Größe ändern lassen, indem die Ereignisse DragStarted, DragDelta und DragCompleted von Thumb überwacht werden.

Der Benutzer startet einen Ziehvorgang, indem er die linke Maustaste drückt, während sich der Mauszeiger über dem Thumb-Steuerelement befindet. Der Ziehvorgang dauert so lange an, wie die linke Maustaste gedrückt bleibt. Während des Ziehvorgangs kann DragDelta mehr als einmal auftreten. Bei jedem Auftreten zeigt die DragDeltaEventArgs-Klasse die jeweilige Positionsänderung des verschobenen Mauszeigers an. Wenn der Benutzer die linke Maustaste loslässt, wird der Ziehvorgang beendet. Der Ziehvorgang gibt nur neue Koordinaten an, das Thumb-Steuerelement wird jedoch nicht automatisch neu positioniert.

Im folgenden Beispiel ist ein Thumb-Steuerelement dargestellt, das das untergeordnete Element eines Canvas-Steuerelements ist. Der Ereignishandler für dessen DragDelta-Ereignis enthält die Programmlogik zum Verschieben des Thumb-Steuerelements und zum Ändern der Größe des Canvas-Steuerelements. Die Ereignishandler für die Ereignisse DragStarted und DragCompleted ändern die Farbe des Thumb-Steuerelements während eines Ziehvorgangs. Im folgenden Beispiel wird das Thumb-Steuerelement definiert.

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

Im folgende Beispiel wird der DragDelta-Ereignishandler dargestellt, der das Thumb-Steuerelement verschiebt und die Größe des Canvas-Steuerelements bei einer Mausbewegung ä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();
    }
}

Im folgenden Beispiel wird der DragStarted-Ereignishandler dargestellt.

Private Sub onDragStarted(ByVal sender As Object, ByVal e As DragStartedEventArgs)
    myThumb.Background = Brushes.Orange
End Sub
void onDragStarted(object sender, DragStartedEventArgs e)
{
    myThumb.Background = Brushes.Orange;
}

Im folgenden Beispiel wird der DragCompleted-Ereignishandler dargestellt.

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

Das vollständige Beispiel finden Sie unter Beispiel für das Ziehen mir der Ziehpunktfunktion.

Siehe auch

Referenz

Thumb

DragStarted

DragDelta

DragCompleted