MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Windows 8 Tips & Tricks. Drag & Drop entre ListViews (XAML/C#)

Windows 8 Tips & Tricks. Drag & Drop entre ListViews (XAML/C#)

[Nota: Este artículo pertenece a nuestra serie de Windows 8 Tips & Tricks]

 

En este Tips & Tricks vamos a aprender cómo realizar la acción "Drag & Drop" entre dos "ListView" distintos. Esta característica va a dotar a nuestra aplicación de una interacción muy rica con el usuario y un feedback visual sobre lo que hacemos muy alto.

Para empezar necesitamos declarar dos ObservableCollections<strings> con nuestras dos listas:

private ObservableCollection<string> Lista1;
private ObservableCollection<string> Lista2;

Una vez creadas, debemos inicializarlas en el método "LoadState":

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
    //Inicializamos las dos listas
    Lista1 = new ObservableCollection<string>();
    Lista2 = new ObservableCollection<string>();

    //Rellenamos con datos
    Lista1.Add("Item1");
    Lista1.Add("Item2");
    Lista1.Add("Item3");
    Lista1.Add("Item4");
    Lista1.Add("Item5");
    Lista2.Add("Item6");
    Lista2.Add("Item7");
    Lista2.Add("Item8");
    Lista2.Add("Item9");
    Lista2.Add("Item10");
}

Una vez creadas y rellenas con datos, tenemos que crear nuestros dos "ListView":

<ListView x:Name="ListView1"></ListView>
<ListView x:Name="ListView2"></ListView>

Ahora lo que necesitamos es hacer un "Binding" de nuestros "ListView" con nuestras dos listas. Para ello al final del método "LoadState" pondremos estas dos líneas de código:

ListView1.ItemsSource = Lista1;
ListView2.ItemsSource = Lista2;

Con esto ya tenemos las dos listas creadas, rellenas con datos y enlazadas a un "ListView".
El siguiente paso es declarar los eventos "DragItemsStarting" y "Drop". Además de poner a "True" dos propiedades en cada uno, "CanDragItems" y "AllowDrop". Los dos "ListView" quedarían de esta manera:

<ListView x:Name="ListView1" CanDragItems="True" AllowDrop="True"
DragItemsStarting="ListView1_DragItemsStarting_1" Drop="ListView1_Drop_1"/>

<ListView x:Name="ListView2" CanDragItems="True" AllowDrop="True"
DragItemsStarting="ListView1_DragItemsStarting_1" Drop="ListView1_Drop_1"/>

Lo siguiente que debemos hacer es escribir la lógica a los dos eventos de los "ListView". Tenemos que crearnos dos variables en el .xaml..cs donde estemos realizando la acción de "Drag & Drop", para guardar que ítem vamos a mover y desde que lista lo haremos, así poder acceder a ellos desde los dos eventos.

//Creamos un objeto del tipo que estén hechas las listas.
private string item;
//Creamos una variable para poder guardar la lista que realiza la acción
private ObservableCollection<string> ListaAux;

Ya solo queda definir la lógica de los dos eventos. Vamos a empezar por el evento "DragItemsStarting" que es el que se llamará una vez pinchemos sobre un elemento en una lista, que tenga activa "CanDragItems", y lo arrastremos. Por lo que quedaría así:

private void ListView1_DragItemsStarting_1(object sender, DragItemsStartingEventArgs e)
{
    //Guardamos la lista de donde ha empezado el evento, para posteriormente
    //poder borrar el elemento de esta lista
    ListaAux = ((sender as ListView).ItemsSource as ObservableCollection<string>);
    //Guardamos que elemento de la lista es sobre el que vamos a realizar la acción
    item = e.Items.First() as string;
}

Ahora es el momento de definir el evento "Drop", que es el que se activa cuando soltamos el elemento que tenemos pinchado sobre otra lista que tenga activo "AllowDrop". Quedaría de esta forma:

private void ListView1_Drop_1(object sender, DragEventArgs e)
{
    //Sacamos la lista donde esta realizado el Binding del ListView donde el 
    //usuario a soltado el item
    var destino = ((sender as ListView).ItemsSource as ObservableCollection<string>);
    //Borramos el item de la lista origen
    ListaAux.Remove(item);
    //Añadimos el item de la lista destino
    destino.Add(item);
}

De esta forma tan sencilla ya tendríamos nuestra acción "Drag & Drop" funcionando entre nuestros ListViews.

Si tienes alguna duda, recuerda que tienes a tu disposición el foro de desarrollo de aplicaciones para Windows 8 en castellano, donde podrás compartir tus conocimientos con la comunidad de desarrolladores y encontrar ayuda para resolver tus dudas técnicas, y una Introducción al desarrollo de aplicaciones para Windows 8.

También puedes estar al día de todas las novedades a través de nuestros rincones en las redes sociales:

Un saludo,

      Adrián Fernández (@tracker086)