Question

I have stack panel with custom controls in it. I attach standard MouseDragElementBehavior to each item.

When I drag to the right the item moves underneath the other items.

What would be a viable solution to create better user experience – to show better visual cue – how the item moves and where is it going to be dropped.

Answer 1

After a bit of tinkering I realised that nothing can be dragged within stack panel to the right not being coverd by other elements .. unless you drag the very right item..

What I did to resolve it:

1. Created a visual cue (half transparent shape of a generic item to represnt it during the drag operation)
2. Made the cue invisible (width=0) and keep it always as the very last element of the stack panel children
3. Subscribed the stack panel to mouse left button up, down, move
4. Emulated drag/drop with code
5. Once the drag initated I turn the cue to visible and set its translate transform to the current mouse coordinates
6. Adjust translate transform on every mouse move event
7. On drop I hide the cue again and rearrange items in a way I want.

To stress again – whatever way you do – you have to manipulate with the last element in StackPanel.Children collection….