Silverlight. Fix needed. Dragging stack panel item to the right moves it underneath other items...

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

If the MouseDragElementBehavior doesn't work the way you need it to, you could always descend from the class and customize it to your needs. For example:

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);
    }
}

Answer 2

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....