Attention: We are retiring the ASP.NET Community Blogs. Learn more >

Drag & Drop

Voy a mostrar un ejemplo sencillo de como realizar un Drag & Drop de un objeto en Silverlight.

<UserControl x:Class="SilverlightApplication2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="rootCanvas" Width="400" Height="300" Background="Gray">
        <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="Red"
                   MouseLeftButtonDown="Handle_MouseDown"
                   MouseMove="Handle_MouseMove"
                   MouseLeftButtonUp="Handle_MouseUp"    
                   Width="50" Height="50" />
    </Canvas>
</UserControl>

Vemos en el XAML como tenemos dentro de un Canvas, un Rectangle que va a ser el objeto que vamos a mover. Para realizar esta acción, vemos que vamos a utilizar 3 eventos MouseLeftButtonDown, MouseMove, MouseLeftButtonUp. Estos eventos nos indican el momento en que hacemos click con el mouse, mientras arrastramos el objeto y cuando dejamos de apretar el botón del mouse para liberar el objeto.

bool enMovimiento;
double mousePosicionVertical;
double mousePosicionHorizontal;

 

En el code-behind vamos a declarar estas variables, que van a definir si esta o no en movimiento el objeto y la posición actual del mismo.

public void Handle_MouseDown(object sender, MouseEventArgs args)
{
    Rectangle item = sender as Rectangle;
    
    mousePosicionVertical = args.GetPosition(null).Y;
    mousePosicionHorizontal = args.GetPosition(null).X;
    
    enMovimiento = true;
 
    item.CaptureMouse();
}

MouseLeftButtonDown se ejecuta cuando hacemos click sobre el objeto. Dentro de este evento vamos a definir la variable enMovimiento en true, para saber que empezamos a mover al objeto, además inicializamos la posición. Lo más importante es que llamamos al método CaptureMouse, que habilita la captura de mouse para el objeto.

public void Handle_MouseMove(object sender, MouseEventArgs args)
{
    if (enMovimiento)
    {
        Rectangle item = sender as Rectangle;
 
        double deltaV = args.GetPosition(null).Y - mousePosicionVertical;
        double deltaH = args.GetPosition(null).X - mousePosicionHorizontal;
        double newTop = deltaV + (double)item.GetValue(Canvas.TopProperty);
        double newLeft = deltaH + (double)item.GetValue(Canvas.LeftProperty);
 
        item.SetValue(Canvas.TopProperty, newTop);
        item.SetValue(Canvas.LeftProperty, newLeft);
 
        mousePosicionVertical = args.GetPosition(null).Y;
        mousePosicionHorizontal = args.GetPosition(null).X;
    }
}

 

Al habilitar la captura del mouse en el objeto, se llama al evento MouseMove, cada vez que movemos el mouse por la aplicación. Al llamarse este método, vamos a ir movimiento el objeto, actualizando su posición.

public void Handle_MouseUp(object sender, MouseEventArgs args)
{
    Rectangle item = sender as Rectangle;
 
    mousePosicionVertical = -1;
    mousePosicionHorizontal = -1;
 
    enMovimiento = false;
    
    item.ReleaseMouseCapture();                        
}

Finalmente, cuando soltamos el botón del mouse, se dispara el evento MouseLeftButtonUp, donde vamos a deshabilitar la captura de mouse para el objeto y volver a inicializar las variables para saber que no estamos moviendo el objeto.

2 Comments

  • muchas gracias por la aportacion. El codigo en vb sería:

    Dim enMovimiento As Boolean
    Dim mousePosicionVertical As Double
    Dim mousePosicionHorizontal As Double

    Private Sub Handle_MouseDown(ByVal sender As Object, ByVal e As MouseEventArgs)
    Dim item As Rectangle = DirectCast(sender, Rectangle)
    mousePosicionVertical = e.GetPosition(Nothing).Y
    mousePosicionHorizontal = e.GetPosition(Nothing).X
    enMovimiento = True

    item.CaptureMouse()
    End Sub

    Private Sub Handle_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
    If enMovimiento Then
    Dim item As Rectangle = DirectCast(sender, Rectangle)
    Dim deltaV As Double = e.GetPosition(Nothing).Y - mousePosicionVertical
    Dim deltaH As Double = e.GetPosition(Nothing).X - mousePosicionHorizontal
    Dim newTop As Double = deltaV + Double.Parse(item.GetValue(Canvas.TopProperty).ToString)
    Dim newLeft As Double = deltaH + Double.Parse(item.GetValue(Canvas.LeftProperty).ToString)

    item.SetValue(Canvas.TopProperty, newTop)
    item.SetValue(Canvas.LeftProperty, newLeft)

    mousePosicionHorizontal = e.GetPosition(Nothing).X
    mousePosicionVertical = e.GetPosition(Nothing).Y
    End If
    End Sub

    Private Sub Handle_MouseUp(ByVal sender As Object, ByVal e As MouseEventArgs)
    Dim item As Rectangle = DirectCast(sender, Rectangle)
    mousePosicionHorizontal = -1
    mousePosicionVertical = -1
    enMovimiento = False

    item.ReleaseMouseCapture()
    End Sub

  • Gracias por aportar el código en VB.NET.

Comments have been disabled for this content.