Silverlight MouseDragElementBehavior. How to rearrange items after drag and drop?

Question

I have stack panel with custom controls in it. User can add or remove the items.

I have attached MouseDragElementBehavior to each item. So now user can move them within the stack panel.

However the items now are arranged on arbitrary manner. Is a mess really. They stay where the user left them.

What I need now is to make them to be stacked as the stack panel supposed to be... Nicely one by one...

So I need to simply let user change the order of items by using drag / drop operation but items has to be stacked precisely.

There is DragFinished event, but I dont really see how the Behavior moves items. I thought it is Margin it changes but margins stays 0... I dont know what to do next.

Appreciate little help.

Answer 1

MouseDragElementBehavior does its work using a Transform on the RenderTransform property of the attached element (i.e. the one the behavior is applied to) (the exact type of transform depends on the state of the RenderTransform property but it will either be a TranslateTransform or a MatrixTransform).

The transform is not reset when you finish dragging (nor would you want it to be because the element would snap back to its position in the StackPanel when you started dragging) and this is why the element stays where "the user left them".

To change the items position in the StackPanel in the way you are talking about you will have to use the DragFinished event. What you probably want to do is work out where in the StackPanel the element will end up (as a result of the drag, i.e. which element in the panel it will "push" down) then create an animation to animate the element from its current position (where the user released the drag) to that final position in the StackPanel and another animation to move the "pushed" element in to its new position in the StackPanel (VisualTreeHelper can probably help here (I think)). Once those animations are finished just set the new index within the StackPanel for each item and remove the RenderTransform translation.