CODEWITHSUNDEEP
c#listviewuwpdrag-and-droplistviewitem
Techrex Studios
Techrex Studios

Reputation: 102

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

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.

Upvotes: 1

Views: 963

Answers (2)

YanGu
YanGu

Reputation: 3032

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.

Upvotes: 1

Martin Zikmund
Martin Zikmund

Reputation: 39072

To implement dragging, you must set CanDragItems on the source ListView and AllowDrop on the target ListView. Then, you must handle DragItemsStarting event on the source list. Within this handler you can store the dragged data inside the DragItemsStartingEventArgs.Data property. Afterwards, you handle Drop event on the target list and retrieve the stored item values from the DataPackage using DragEventArgs.DataView.

To see all the moving parts of this in action, I recommend the official UWP samples for drag & drop which are available on GitHub. The first scenario of this sample show dragging items from and to a ListView including reordering support.

Upvotes: 0

Related Questions