Drag between TileViews and drop TileViewItem in middle of target collection.

[Greg]

I would like to know if it is possible to drag a TileViewItem from one TileView to another and drop the dragged TileViewItem in the middle of the collection of the second TileView's items. (I am using MVVM with ObservableCollections populating both tileviews, using DragDropManager for dragging.)

In other words - how do I determine what TileViewItem in the second TileView is the target of the drop action?

Example: TileView 1 has 10 items, TileView2 has 20 items. I want to drag TileView1 position #5 to TIleView2 position # 12.

All the examples I found on the forum demonstrate dropping the TileViewItem in the last position of the target TileView - that's easy.

Thanks in advance.

[Martin Ivanov]

Hi Greg,

To determine the RadTileViewItem under the mouse (the drop target) you can use the e.OriginalSource of the drop event arguments and then get its RadTileViewItem parent with the ParentOfType<T>() extension method.

private void OnTileViewDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
{
    var originalSource = e.OriginalSource as FrameworkElement;
    var dropTarget = originalSource.ParentOfType<RadTileViewItem>();
}

In this case the OriginalSource property contains the element that is directly under the mouse which is a child of the hovered tile view item.

Then based on the drop target you can insert the item in your collection. However, keep in mind that when you reorder the items in the tileview with drag, they are not reordered in the original collection. This is why when you add an item after reorder its position might not be correct. To resolve this you can create a Position property in your view model and bind it two way to the Position property of the RadTileViewItems. Then when you insert the item you can also set its position.

For your convenience I prepared a sample project demonstrating this approach. Please give it a try and let me know if it helps.

Regards,
Martin
Telerik