How to: Use a Thumb to Enable Dragging

Switch View

Use a Thumb to Enable Dragging

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

Windows Presentation Foundation

How to: Use a Thumb to Enable Dragging

This example shows how to use a Thumb control to resize a Canvas control.

Example

The Thumb control provides drag functionality that can be used to move or resize controls by monitoring the DragStarted, DragDelta and DragCompleted events of the Thumb.

The user begins a drag operation by pressing the left mouse button when the mouse pointer is paused on the Thumb control. The drag operation continues as long as the left mouse button remains pressed. During the drag operation, the DragDelta can occur more than once. Each time it occurs, the DragDeltaEventArgs class provides the change in position that corresponds to the change in mouse position. When the user releases the left mouse button, the drag operation is finished. The drag operation only provides new coordinates; it does not automatically reposition the Thumb.

The following example shows a Thumb control that is the child element of a Canvas control. The event handler for its DragDelta event provides the logic to move the Thumb and resize the Canvas. The event handlers for the DragStarted and DragCompleted event change the color of the Thumb during a drag operation. The following example defines the Thumb.

XAML

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

The following example shows the DragDelta event handler that moves the Thumb and resizes the Canvas in response to a mouse movement.

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

The following example shows the DragStarted event handler.

Visual Basic

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

The following example shows the DragCompleted event handler.

Visual Basic

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

For the complete sample, see Thumb Drag Functionality Sample.

Reference