How to move List View Item from one list to another with drag and drop? UWP C#

Question

I have many List Views in an UWP application and I would want to be able to move one item from one List View to another List View

I know about the AllowDrop or CanDragItems properties and that you need to handle some events for drag and drop to work, although I just don't know how to do it.

Answer 1

If you want to add ListView controls by clicking Add button and move items between ListView controls, please check the following code as a sample. The following code is different from the offical sample, it use ObservableCollection to complete the drag and drop operation. You could drag an item from source ListView item to target ListView, and also drag an item from original target ListView to original source ListView.

You could click the Add button twice and then two ListView with two items are added. You can drag any item from any ListView control to another. If you want to keep the dragged item in the source ListView control, just comment the code dragCollection.Remove(dragedItem as string); .

For example:

private ObservableCollection<string> dragCollection;
private ObservableCollection<string> dropCollection;
private object dragedItem;
private ListView dragListView;
private ListView dropListView;
……

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    ListView listView = new ListView();
    listView.CanDragItems = true;
    listView.CanDrag = true;
    listView.AllowDrop = true;
    listView.ReorderMode = ListViewReorderMode.Enabled;
    listView.CanReorderItems = true;
    listView.ItemsSource = new ObservableCollection<string>() { "item1","item2" };
    listView.DragItemsStarting += ListView_DragItemsStarting;
    //listView.DropCompleted += ListView_DropCompleted;
    listView.DragEnter += ListView_DragEnter;
    listView.Drop += ListView_Drop;
    listView.DragOver += ListView_DragOver;
    listView.BorderBrush = new SolidColorBrush(Colors.Red);
    listView.BorderThickness = new Thickness(1);

    stackPanel.Children.Add(listView);
}

private void ListView_DragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Move;
}

private void ListView_Drop(object sender, DragEventArgs e)
{
    dropListView = sender as ListView;
    if(dropListView!=null)
    {
        dropCollection = dropListView.ItemsSource as ObservableCollection<string>;
        if (dragedItem != null)
        {
            dropCollection.Add(dragedItem as string);
            //If you need to delete the draged item in the source ListView, then use the following code
            dragCollection.Remove(dragedItem as string);
            dragedItem = null;
        }
    }
}

private void ListView_DragEnter(object sender, DragEventArgs e)
{
    e.AcceptedOperation = (e.DataView.Contains(StandardDataFormats.Text) ? DataPackageOperation.Move : DataPackageOperation.None);
}

private void ListView_DropCompleted(UIElement sender, DropCompletedEventArgs args)
{
    var listView = sender as ListView;
    if (listView != null)
    {
        dropListView = listView;
        dropCollection = listView.ItemsSource as ObservableCollection<string>;

        if(dropListView==dragListView)
        {
            return;
        }
    }

}

private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
{
    var listView = sender as ListView;
    if(listView!=null)
    {
        dragListView = listView;
        dragCollection = listView.ItemsSource as ObservableCollection<string>;

        if (dropListView == dragListView)
        {
            return;
        }
        if(e.Items.Count==1)
        {
            dragedItem = e.Items[0];
            e.Data.RequestedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.Move;
        }
    }
}

For more information about dragging and dropping, you could refer to the document(https://learn.microsoft.com/en-us/windows/uwp/design/input/drag-and-drop).

Any concerns about the code, please feel free to contact me.