Unable to reorder items in GridView when WrapPanel is used UWP

Question

And am creating a sorting app and in some cases i will hide the gridview item and i encountered the same error as this person:

Hide GridViewItem and reposition items in GridView

So I implemented the fix and it worked, but it suddenly disallowed be to drag and reorder items in my GridView.And from what I can tell it only appeared after I implemented the WrapPanel into my gridView.ItemsPanel and by removing it I am immediately able to reorder again.

and here's my XML code:

<Page
x:Class="ImageSorting.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ImageSorting"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data ="using:ImageSorting.Models"
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top">
        <Border BorderBrush="Black" BorderThickness="0 0 0 1" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top"/>
        <Button x:Name="SelectFolder" Content="Select Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,10,0" Background="#80a4ec" Click="SelectFolder_Click"/>
        <Button x:Name="AddFolder" Content="Add Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,125,0" Background="#84eeb1" Click="AddFolder_Click" />
        <Button x:Name="Save" Content="Save" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,230,0" Background="#ece880" Click="Save_Click"/>
        <ComboBox x:Name="ImageFolder" HorizontalAlignment="Left" VerticalAlignment="Top" Margin=" 20 11 0 0" SelectedIndex="0" SelectionChanged="ImageFolder_SelectionChanged">
            <ComboBoxItem>All Images</ComboBoxItem>
        </ComboBox>
    </Grid>
    <GridView x:Name="ImageGrid" HorizontalAlignment="Stretch" Margin="10,60,10,0" VerticalAlignment="Stretch" ItemsSource="{x:Bind ImgList, Mode=OneWay}"  CanDragItems="True" AllowDrop="True" CanReorderItems="True" SelectionMode="Extended">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Images">
                <StackPanel>
                    <Image x:Name="Image" Width="206" Height="158" Source="{x:Bind imageData}" DoubleTapped="Image_DoubleTapped"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock HorizontalAlignment="Left" FontSize="15" Text="{x:Bind imageNumber}" Margin="10 5 0 0"/>
                        <TextBlock HorizontalAlignment="Left" TextAlignment="Left" Width="100" FontSize="15" Text="{x:Bind altChar}" Margin="10 5 0 0"/>
                        <CheckBox x:Name="altNumber"  HorizontalAlignment="Right" MinWidth="0" Margin="35 0 0 0" Click="altNumber_Click"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel Orientation="Horizontal" AllowDrop="True">
                </toolkit:WrapPanel>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
    <Grid x:Name="ConfirmGrid" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Bottom" Background="White" Visibility="Collapsed">
        <Border BorderBrush="Black" BorderThickness="0 1 0 0" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top" />
        <Button x:Name="FolderConfirm" Content="Confirm" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" RenderTransformOrigin="-0.128,7.104" Click="FolderConfirm_Click" />
    </Grid>
</Grid>

Image of when i try to drag and reorder GridView's Item with WrapPanel:

Am I missing something that is stated in the WinRTXamlToolkit, or there no way around this problem.

UPDATE 2017 Nov 27

So after some tinkering as suggested by @ Xavier Xie - MSFT so try implement the drag and drop to reorder feature for winRT toolkit by inheriting the WrapPanel class and trying it from there. Here's what I have found out so far,

1. winRT toolkit WrapPanel inherits Panel class
2. WrapPanel from other libraries like UWPCommunityToolkit also inherits Panel hence making me thing that all Dynamic Wrapping needs to inherit the Panel class.
3. Panel class doesn't have any code for detecting item drag event (either that or I am dragging the wrong thing)
4. ItemsWrapPanel is a seal class making it impossible for me to inherit and that goes for any Interface it inherits as well

And this is concluded what I have found out so far and will continue to update this if I found anything.

Credits goes to @ Xavier Xie - MSFT for pointing me into the right direction for this.

Answer 1

The WrapPanel of WinRTXamlToolkit has not implemented reordering function. You would need to implement the reordering manually, listening to the drag & drop events.

If you want to implement by yourself, you could read Jerry Nixon's blog Walkthrough: Reordering items in a GridView with Drag and Drop to understand the basic principle of GridView's reordering.

As a easy workaround, you could use ItemsStackPanel control as its ItemsPanel, it has implemented reordering function. This control also will not have space item there when you hide one item.