Monday, March 09, 2009 5:22 PM
srleguiza
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.
Filed under: mouse, drop, drag