共用方式為

使用縮圖啟用拖曳

  • 發行項

更新：2007 年 11 月

本範例說明如何使用 Thumb 控制項調整 Canvas 控制項的大小。

範例

Thumb 控制項提供拖曳功能，可藉由監視 Thumb 的 DragStarted、DragDelta 和 DragCompleted 事件，用來移動或調整控制項的大小。

使用者會在滑鼠指標暫停在 Thumb 控制項上時按滑鼠左鍵，開始拖曳作業。拖曳作業會持續到使用者放開滑鼠左鍵為止。在拖曳作業期間，DragDelta 可能會發生一次以上。每次發生時，DragDeltaEventArgs 類別會提供對應於滑鼠位置變更的位置變更。當使用這放開滑鼠左鍵時，拖曳作業便完成。拖曳作業只提供新座標，並不會自動調整 Thumb 的位置。

下列範例會顯示 Thumb 控制項，這是 Canvas 控制項的子項目。其 DragDelta 事件的事件處理常式會提供移動 Thumb 和調整 Canvas 大小的邏輯。DragStarted 和 DragCompleted 事件的事件處理常式則會在拖曳作業期間變更 Thumb 的色彩。下列範例會定義 Thumb。

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

下列範例會示範 DragDelta 事件處理常式如何回應滑鼠移動，移動 Thumb 並調整 Canvas 的大小。

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

下列範例顯示 DragStarted 事件處理常式。

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

下列範例顯示 DragCompleted 事件處理常式。

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

如需完整範例，請參閱縮圖拖曳功能範例。

請參閱

參考

Thumb

DragStarted

DragDelta

DragCompleted