WPF drag and drop in listbox with preview shadow of where it will be dropped

3
votes

I have written a kanban board user control where I can drag and drop some cards from one column to the other (listboxes / listboxitems) and I have used the component "https://github.com/punker76/gong-wpf-dragdrop" to do this. Now I want to add a new behavior: show a preview shadow where the card will be dropped like in the animated gif in attachment: drop shadow of card being inserted

The animated gif shows the DevExpress component doing this. Instead of using DevExpress I would want to use another open source component, extend the gong-wpf-dragdrop or do this myself.

Has someone already done this or know of a component doing this? If not do someone has a strategy to do this?

  • I have tried with adorners, but the adorners are in another layer and do not make place in the listbox for being displayed (maybe I am doing something wrong)
  • The next thing I am trying right now is to add some temporary dummy element to the listbox, but to make it work seems rather complicated and needs a lot of code (maybe I am overcomplicating this thing)
  • Do someone have better ideas of strategies or components or elements to use to make it work like in the animated gif?

I am astonished to not have found more on this topic on Google. Does everyone do such things with DevExpress or Telerik? Or has nobody posted an open source solution until now?

1
c#wpfdrag-and-droplistboxlistboxitem

1 Answers

5
votes

The solution I finally have implemented is the following:

  • I added a hidden bottom and top shadow to each card contained in the listbox in XAML (attribute: "Collapsed").

  • I have added a dependency property to manage the visibility of the bottom or the top shadow

  • I have created a custom drophandler with following capabilities:

    • do not show shadow if dragged element and next one is hovered
    • show shadow when another element is hovered (top when top half is hovered, bottom when bottom half is hovered)

If someone is interested by the final solution/code please register your interest as a comment and I will provide it. If someone has a better idea of how to solve this problem, I am also interested.

final application animated gif