Question

I have a ListBox and a DockPanel. List box contains items that are supposed to be dragged onto the dock panel. I’ve implemented that by following this link.

There are a couple of things I do not understand though:

1. While dragging, all I see is a cursor. I’d like to literary see the list item I am
   dragging to move around with my cursor. How do I do that?
2. Is the DragDropEffect property only for the different cursor design or it has a
   higher purpose? 🙂
3. How do I make list item disappear from the ListBox once it is dropped onto the
   DockPanel?
4. I’d like to enforce some animation on the items that I drag, like glow once it is
   dropped. Which trigger/setter should I use for that?

Here’s my code for basic dragging and dropping:

Code-behind for the ListBox part

private Point startPosition;

private void ListBox_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    startPosition = e.GetPosition(null);
}

private void ListBox_PreviewMouseMove(object sender, MouseEventArgs e)
{
    Point currentPosition;
    Vector offset;
    ListBox listBox;
    ListBoxItem item;
    Match match;
    DataObject dragData;

    currentPosition = e.GetPosition(null);
    offset = startPosition - currentPosition;

    if (e.LeftButton == MouseButtonState.Pressed &&
        (Math.Abs(offset.X) > SystemParameters.MinimumHorizontalDragDistance ||
         Math.Abs(offset.Y) > SystemParameters.MinimumVerticalDragDistance))
    {
        // Get the data binded to ListBoxItem object, which is "match"
        listBox = sender as ListBox;
        item = FindAnchestor<ListBoxItem>((DependencyObject)e.OriginalSource);
        match = (Match)listBox.ItemContainerGenerator.ItemFromContainer(item);

        dragData = new DataObject("match", match);
        DragDrop.DoDragDrop(item, dragData, DragDropEffects.Move);
    }
}

Code-behind for the DockPanel part

private void DockPanel_DragEnter(object sender, DragEventArgs e)
{
    if (!e.Data.GetDataPresent("match") ||
        sender == e.Source)
    {
        e.Effects = DragDropEffects.None;
    }
}

private void DockPanel_Drop(object sender, DragEventArgs e)
{
    Match match;
    DockPanel matchSlot;
    ContentPresenter contentPresenter;
    Binding binding;

    if (e.Data.GetDataPresent("match"))
    {
        match = e.Data.GetData("match") as Match;
        matchSlot = sender as DockPanel;

        contentPresenter = new ContentPresenter();
        contentPresenter.ContentTemplate = this.FindResource("MatchTemplate") as DataTemplate;
        binding = new Binding();
        binding.Source = match;
        contentPresenter.SetBinding(ContentPresenter.ContentProperty, binding);

        matchSlot.Children.Clear();
        matchSlot.Children.Add(contentPresenter);
    }
}

Thanks for all the help.

Answer 1

Ok, after a while I found some answers and discovered a few things on my own.

As for the DragDropEffect enum, it should be used for two reasons:

1. To distinguish if the item is moved or copied in the code. It serves like a flag and should be used most commonly like this:

   if (e.DragDropEffect == DragDropEffect.Move)
   {
   …
   }
   else …

2. To decorate the mouse cursor based on the enum value. This way it tells the user if he or she is moving or copying the item.

As for the drag and drop visualization here’s a link to the post containing the reference which is an excellent starting point for drag and drop to build on: WPF Drag & Drop: How to literally drag an element?