The Thumb control can be included in another control, such as a ScrollBar or Slider control, to let the user change the control's value. The Thumb can also be used to resize controls. For example, a Thumb control in the corner of a window can provide a location for the user to click with the mouse to start a resize operation.

Thumb provides DragStarted, DragCompleted and DragDelta events to manage drag operations associated with the mouse pointer. When the user presses the left mouse button, the Thumb control receives logical focus and mouse capture, and the DragStarted event is raised. While the Thumb control has focus and mouse capture, the DragDelta event can be raised multiple times without limit. When the user releases the left mouse button, the Thumb control loses mouse capture and the DragCompleted event is raised.

The event information provides a change in position, but does not reposition the Thumb. You must manually change or reposition the Thumb or any other elements that you want to resize or change as a result of the drag operation. The Thumb control does not provide drag-and-drop functionality.

A Thumb control can receive mouse capture, but cannot receive keyboard focus. Therefore, the IsKeyboardFocused property that corresponds to keyboard focus is set to false. This value overrides the parent class Control that sets this property to true.

To provide drag capability, class handling is provided for the MouseLeftButtonDown, MouseLeftButtonUp and MouseMove events. For more information, see the OnMouseLeftButtonDown, OnMouseLeftButtonUp and OnMouseMove methods.

When a Thumb is part of a Track control that scrolls content in a viewable area, or viewport, the size of the Thumb reflects the size of the viewport. For more information, see the Track class. The following illustration shows a Thumb control that is part of a ScrollBar control.

Dependency properties for this control might be set by the control’s default style. If a property is set by a default style, the property might change from its default value when the control appears in the application. The default style is determined by which desktop theme is used when the application is running. For more information, see Themes.

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

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.

<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.

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.

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.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

.NET Framework

Reference

Other Resources