やり方: サムコントロールを使用してキャンバスのサイズを変更する方法

この例では、 Thumb コントロールを使用して、 Canvas コントロールのサイズを変更する方法を示します。

例

Thumb コントロールは、DragStartedのDragDelta、DragCompleted、およびThumbイベントを監視することによってコントロールの移動またはサイズ変更に使用できるドラッグ機能を提供します。

ユーザーは、 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 イベント ハンドラーを示しています。

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

次の例は、 DragCompleted イベント ハンドラーを示しています。

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

完全なサンプルについては、「サムドラッグ機能のサンプル」を参照してください。

こちらも参照ください

• Thumb
• DragStarted
• DragDelta
• DragCompleted