Cómo: Usar un control Thumb para habilitar la acción de arrastrar
Actualización: noviembre 2007
En este ejemplo se muestra cómo usar un control Thumb para cambiar el tamaño de un control Canvas.
Ejemplo
El control Thumb proporciona funcionalidad de arrastrar que se puede usar para mover o cambiar de tamaño los controles al supervisar los eventos DragStarted, DragDelta y DragCompleted de Thumb.
El usuario comienza una operación de arrastrar al presionar el botón primario del mouse cuando el puntero se pausa en el control Thumb. La operación de arrastrar continúa mientras el botón primario se mantiene presionado. Durante la operación de arrastrar, puede producirse el evento DragDelta más de una vez. Cada vez que se produce, la clase DragDeltaEventArgs proporciona el cambio de posición que corresponde al cambio de la posición del mouse. Cuando el usuario suelta el botón primario del mouse, la operación de arrastrar finaliza. La operación de arrastrar sólo proporciona coordenadas nuevas; no cambia la posición de Thumb automáticamente.
En el ejemplo siguiente se muestra un control Thumb que es el elemento secundario de un control Canvas. El controlador de evento DragDelta proporciona lógica para mover Thumb y cambiar el tamaño de Canvas. Los controladores de eventos DragStarted y DragCompleted cambian el color de Thumb durante una operación de arrastrar. En el ejemplo siguiente se define Thumb.
<Thumb Name="myThumb" Canvas.Left="80" Canvas.Top="80" Background="Blue"
Width="20" Height="20" DragDelta="onDragDelta"
DragStarted="onDragStarted" DragCompleted="onDragCompleted"
/>
En el ejemplo siguiente se muestra el controlador de evento DragDelta que mueve Thumb y cambia el tamaño de Canvas como respuesta a un movimiento del mouse.
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();
}
}
En el ejemplo siguiente se muestra el controlador de evento 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;
}
En el ejemplo siguiente se muestra el controlador de evento 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;
}
Para obtener el ejemplo completo, vea Ejemplo Thumb Drag Functionality.