Gong-wpf-dragdrop: Display a drop shadow where your element will be placed instead of triangle-line adorner (new feature)
Hello,
I am using your great library in an application I am writing and I got a new requirement:
When you are dragging an element from one column to another, a sort of "triangle-line" adorner is displayed to show the place where the element will be dropped. This is not sufficient for most of the users of my application and they required a new effect to be integrated.
This new effect is a sort of "drop shadow rectangle" that appears where the element would be theoretically dropped (see animated gif for a concrete example: 
).
I would be ready to contribute to your project and do the coding myself to get this feature done but for now it is still hard for me to see where should be the best extension point for this feature in your component or if you consider this more as an external feature to be solved by the user of the component rather than the component itself.
Could you please share with me on how to better implement this new feature?
Thanks in advance!
Best regards,
Jonathan
foufure
All 9 comments
@foufure hi, this could be a cool new feature. i think the best is to implement a new DropTargetAdorner. But it's maybe only usable for listboxes....?
punker76
on 31 Oct 2015
@punker76 I confirm that this would only be usable with listboxes. I have not very much experience with adorners but I am not sure it will work, because the adorner will be displayed on top of the ListBoxItem and not move it to make place for the adorner? Or I am wrong? Is there an option to do that?
foufure
on 31 Oct 2015
@punker76 I have found a solution to do this with a custom drop handler and by adding a hidden shadow (top / bottom) to the element contained in the listbox. It works approximately like in the screenshot but it is not a generic solution. Nevertheless if you are interested in the solution I can share and discuss about it.
foufure
on 11 Dec 2015
Library offers DragAdornerTemplate but is there a DropTargetAdornerTemplate ?
I'm using this library to drag-and-drop files to Window. So when a file is dragged over a window, I want to show a dotted border + text + change opacity.
How can I accomplish that with this library?
_my question is somewhat related to this one_
JobaDiniz
on 12 Jan 2016
@foufure I am interested in your solution. Would you please share it as a fork perhaps?
Thank you.
zrajnai
on 26 Apr 2016
@foufure Could you please share your solution? Thank you!
dctdct
on 16 Aug 2016
Hello,
Sorry for the delay answering your requests to share my solution! As written previously I have done a quick and dirty solution that worked for my own problem and for my personal project. It does not mean that it will work for your case, but you can give it a try. You can find the complete solution in attachment, please have a look at \DragDropUtilShadowDropHandler.cs.
KanbanExample.zip
Best regards,
Jonathan
foufure
on 27 Aug 2016
@punker76 This would be a very nice feature to add. My users have issues with the current "line with triangles" adorner because it requires them to be very precise when they are dragging items to a new location. Often times it is so precise that the drop action fails because the user can't easily get the drop adorner to appear between the two items where they want the item moved to.
In my application's scenario I am showing a tool box where tools show horizontally as icons (or badges). When I drag an icon I get a nice drag adorner that replicates the item being dragged. When I drag the item to the new location it is very difficult to find the right spot to drop using the "line with triangles" drop adorner.
Please consider adding a feature similar to what @foufure described.
Thanks
Kyle
kylelib
on 15 Feb 2017
Any movement on this? Dragablz can do something similar, but has a big overhead and is pretty much not maintained anymore (also uses Canvas behind the scenes from what I can gather, which makes things a bit less customisable from a user pov):
danielskovli
on 21 Feb 2020
Related issues
punker76
·
3Comments
lumiba
·
3Comments
JobaDiniz
·
7Comments
kwonganding
·
3Comments
radhewro
·
19Comments
Most helpful comment
@punker76 I have found a solution to do this with a custom drop handler and by adding a hidden shadow (top / bottom) to the element contained in the listbox. It works approximately like in the screenshot but it is not a generic solution. Nevertheless if you are interested in the solution I can share and discuss about it.