Compartir a través de

Cómo: Cambiar el tamaño de un lienzo mediante un pulgar

En este ejemplo se muestra cómo usar un Thumb control para cambiar el tamaño de un Canvas control.

Ejemplo

El Thumb control ofrece funcionalidad de arrastre que se puede utilizar para mover o cambiar el tamaño de los controles mediante la supervisión de los eventos DragStarted, DragDelta y DragCompleted de Thumb.

El usuario inicia una operación de arrastre presionando el botón izquierdo del ratón cuando el puntero del ratón se detiene sobre el control Thumb. La operación de arrastre continúa mientras el botón izquierdo del mouse permanezca presionado. Durante una operación de arrastre, DragDelta puede producirse más de una vez. Cada vez que se produce, la DragDeltaEventArgs clase proporciona el cambio en la posición que corresponde al cambio en la posición del mouse. Cuando el usuario suelta el botón izquierdo del mouse, finaliza la operación de arrastrar. La operación de arrastre solo proporciona nuevas coordenadas; no cambia automáticamente la posición de .Thumb

En el ejemplo siguiente se muestra un Thumb control que es el elemento secundario de un Canvas control . El controlador del DragDelta evento proporciona la lógica para mover el Thumb y cambiar el tamaño del Canvas. Los controladores de eventos de DragStarted y DragCompleted cambian el color del Thumb durante una operación de arrastre. En el ejemplo siguiente se define el 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 eventos DragDelta que mueve el Thumb y cambia el tamaño del Canvas en 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 DragStarted controlador de eventos.

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

En el ejemplo siguiente se muestra el DragCompleted controlador de eventos.

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

Para obtener el ejemplo completo, consulte Ejemplo de funcionalidad de arrastre de pulgares.

Consulte también