Silverlight Correction required. Dragging a panel pane item to the right moves it below other items

Question

I have a stack panel with custom controls. I am attaching a standard MouseDragElementBehavior to each element.

When I drag to the right, the item moves under other items.

What would be a viable solution for creating a better user experience - to show a better visual hint - how the item moves and where it will be deleted.

Answer 1

After messing around a bit, I realized that nothing can be dragged into the rack panel on the right without being covered by other elements .. unless you drag a very correct element.

What I did to solve it:

• A visual signal is created (a translucent form of a common element to represent it during a drag operation)
• I made the cue invisible (width = 0) and always saved it as the last element of the children of the stack panel
• Signed stack panel with left mouse button up, down, move
• Emulated drag and drop with code
• As soon as the drag and drop is initialized, I turn the cue to visible and set its translation to translate to the current coordinates of the mouse.
• Adjust translation translation for each mouse move event.
• When deleting, I will hide the replica again and reorder the elements in the way I want.

To emphasize again how you do it, you need to manipulate the last item in the StackPanel.Children .... collection .

Answer 2

If MouseDragElementBehavior does not work as you need, you can always go down from the class and customize it according to your needs. For instance:

public class DragBehvaior : MouseDragElementBehavior { public DragBehvaior() { this.DragBegun += new MouseEventHandler(DragBehvaior_DragBegun); } void DragBehvaior_DragBegun(object sender, MouseEventArgs e) { var element = this.AssociatedObject as UIElement; // Calculate the correct ZIndex here. Canvas.SetZIndex(element, 100); } }