Custom panel with the ability to reorder and animate / transition

Question

I have my own FluidPanel class that extends Panel and overrides the MeasureOverride and ArrangeOverride methods. The goal is to create the visibility of Google Keep. Ok, it works fine. ( link to the application )

But, as I extend the base Panel and use it as an ItemPanelTemplate, I miss two things: Reorder and some transitions that just don't work out of the box. See Code:

<GridView CanReorderItems="True" CanDrag="True" AllowDrop="True"> <GridView.ItemContainerTransitions> <TransitionCollection> <EntranceThemeTransition FromVerticalOffset="200" IsStaggeringEnabled="True"/> <ReorderThemeTransition/> </TransitionCollection> </GridView.ItemContainerTransitions> <GridView.ItemsPanel> <ItemsPanelTemplate> <local:FluidPanel/><!--custom panel = reorder doesn't work--> <!--<StackPanel/>--><!--reorder and animations work normally (reorder to see)--> </ItemsPanelTemplate> </GridView.ItemsPanel> <Grid Width="50" Height="50" Background="Red"/> <Grid Width="50" Height="50" Background="Green"/> <Grid Width="50" Height="50" Background="Blue"/> <Grid Width="50" Height="50" Background="Orange"/> <Grid Width="50" Height="50" Background="Purple"/> <Grid Width="50" Height="50" Background="Pink"/> </GridView> 

So, the main question: how to create a custom panel with Reorder fully functional, including animation? (for example, this shift to the left / right / ...)

Second (less important) question: And with EntranceThemeTransition?

Answer 1

I partially found a solution.
Unfortunately, this is not as simple as it should be.

For custom panels, it seems like we should manually reorder while listening for drag and drop events.

Here's an article about it: Drag and Drop GridView Extension
and here is a simplified code about it.

The reordering animation is added by manually changing the visual state:

 private void OnDragOver(object sender, DragEventArgs e) { var item = (e.OriginalSource as FrameworkElement).DataContext as Note; if (item == null) return; e.Data.Properties["targetItem"] = item; var itemContainer = (sender as ItemsControl).ContainerFromItem(item) as Control; if (itemContainer == null) return; VisualStateManager.GoToState(itemContainer, "BottomReorderHint", true); } 

But I still hope that there is an easier way to do this, given the fact that many panels implement it (StackPanel, ItemsWrapGrid, ...).

It's still not possible to get EntranceThemeTransition to work with a custom panel.
EDIT: to make EntranceThemeTransition work