Question

In a Metro-style application, I have defined a custom control and placed several instances of them inside a Grid. What would be the best way to enable the user to drag a control from one cell of the grid and drop it in another?

Answer 1

That depends on what you want to achieve. From my standpoint – the best way would be to implement a behavior so that you can reuse it in different places in your UI and possibly share it with others too. From your point of view – the best way might be the easiest way where you would do a custom implementation that would be tied to the Page/UserControl that hosts your Grid.

If you are asking about how to do the drag & drop part – you can set the ManipulationMode on your custom control to TranslateX,TranslateY and handle ManipulationStarted events where you would move your control to a full-screen or grid-sized popup and move it in the ManipulationDelta events by updating either the Margin, Canvas or RenderTransform properties, then finally on ManipulationCompleted – drop it in the cell that matches your criteria.

You would use the Popup to make sure that your custom control is dragged over anything else.

To calculate positions between the Grid and the Popup you would use something like grid.TransformToVisual(popup).TranformPoint().

You could also do something to highlight candidate target cells in the grid where the control would drop when released.