locked
Drag an item out of ListView and then delete it when droped? RRS feed

  • Question

  • Hi, I want to implement a gesture to remove an item from a ListView by drag  it out of the ListView and then drop it. I have set the CanDragItems property of the ListView to true, and also I can see the drag effect when I drag an item, but I don't know which event is the right place to handle the deletion. I have tried DragLeaveDragDrop and ManipulationCompleted, but none of them will be fired when I drop an item outside the ListView.

    My question is: which event will be fired when an dragged item is dropped outside the ListView? Or is there another/better way to create a gesture like this?

    Many thanks in advance! Any idea would be appreciated!


    Thursday, December 19, 2013 11:57 AM

Answers

  • You should set a particular control as the target of the drop.  That is, perhaps you could set an image of a recycle bin as the drop area, and that image can handle the dragdrop event.  Either that, or the grid that wraps the entire page could be the target area.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by silverbird.lee Friday, December 27, 2013 2:22 PM
    Thursday, December 19, 2013 8:01 PM
    Moderator

All replies

  • You should set a particular control as the target of the drop.  That is, perhaps you could set an image of a recycle bin as the drop area, and that image can handle the dragdrop event.  Either that, or the grid that wraps the entire page could be the target area.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by silverbird.lee Friday, December 27, 2013 2:22 PM
    Thursday, December 19, 2013 8:01 PM
    Moderator
  • Hi, Matt, thanks for the suggestion! But I don't want to add extra controls in the page. I have tried setting the AllowDrop of the Page to true, but its Drop event never fired either. btw: My ListView is in the root Grid of the MianPage. I have not explictly set the width/height or Margin of it. So basically, its actual width/height is adjust automatically.

    EDIT:

    Finally find a solution, it's simple. The code is like bellow:

      
      IList<object> draggingItems;
    
            private void lvw_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
            {
                draggingItems = e.Items;
            }
    
            private void lvw_PointerCaptureLost(object sender, PointerRoutedEventArgs e)
            {
                if (e.OriginalSource == this.lvw && draggingItems != null)
                {
                    var pt = e.GetCurrentPoint(this.lvw).Position;
    
                    //detect if pt is out of listview
                    if (pt.X < 0 || pt.Y < 0 || pt.X > this.lvw.ActualWidth || pt.Y > this.lvw.ActualHeight)
                    {
                        
                        foreach (var item in draggingItems)
                        {
                            //TODO: hanle the deletion here
                        }
                    }
    
    
    
                    draggingItems = null;
                }
    
            }


    It works, but the problem is, first we have to introduce an extra global object, i.e. draggedItems here.Second,I don't know if there is any chance that lvw_PointerCaptureLost is fired while lvw_DragItemsStarting is not fired before it. If so, then it means that we might access staled draggingItems of which the result probably is not  what we wanted. 





    Friday, December 20, 2013 2:25 AM
  • Hi, Matt, I'm so glad to say that followed your suggestion I've successfully implemented the gesture: http://social.msdn.microsoft.com/Forums/windowsapps/en-US/0c300b72-e425-44e7-889e-968bf3d1168d/listview-crashed-when-deleting-dragged-item?forum=winappswithcsharp. Thanks!

    Friday, December 27, 2013 2:21 PM