UWP - the order will be wrong on GridView when the column counts be changed

Question

I encounter a problem that the order will be wrong on Gridview when the column count be changed. Could someone help to solve, please?

MainPage.xaml

<Page
    x:Class="DragDropTestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:DragDropTestApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Grid>

        <Button Click="Button_Click" Content="Update" />
        <GridView
            x:Name="grid"
            Margin="100,10,0,10"
            AllowDrop="True"
            CanDragItems="True"
            CanReorderItems="True"
            IsSwipeEnabled="True"
            ItemsSource="{x:Bind ViewModel.PreviewItems}">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid
                        Width="340"
                        Height="240"
                        Padding="5,0,5,0"
                        BorderThickness="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50" />
                            <RowDefinition Height="180" />
                        </Grid.RowDefinitions>

                        <ContentPresenter
                            Grid.Row="1"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            Content="{Binding ImageThumbnail}" />
                    </Grid>

                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate x:Name="clu">
                    <WrapGrid MaximumRowsOrColumns="5" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </Grid>
</Page>

MainViewModel.cs

public class MainViewModel : ObservableObject
    {
        public ObservableCollection<PreviewItem> PreviewItems = new ObservableCollection<PreviewItem>();
        public MainViewModel()
        {
            for (int i = 0; i < 20; i++)
            {
                var item = new PreviewItem();
                item.ImageThumbnail = new Windows.UI.Xaml.Controls.Image();
                ImageSource result = new BitmapImage(new Uri($"ms-appx:///Assets/{i + 1}.png"));
                item.ImageThumbnail.Source = result;

                PreviewItems.Add(item);
            }
        }
    }

PreviewItem.cs

public class PreviewItem : ObservableObject
{
    private Image _imageThumbnail;
    public Image ImageThumbnail { get => _imageThumbnail; set => SetProperty(ref _imageThumbnail, value); }
  

    public PreviewItem()
    {
        
    }     
   
}

Here is my project and cord. https://github.com/houzhiwei/UWPProject

Thanks

Zack

I develop a page list on gridview and hope it work normal.

Answer 1

This is caused by the GridView's default virtualization behavior, which reuses the containers of the items when the item is scrolled out of view.

If you don't want this behavior, it is recommended that you replace WrapGrid with ItemsWrapGrid and set CacheLength="0" to disable GridView virtualization.

<GridView.ItemsPanel>
    <ItemsPanelTemplate x:Name="clu">
        <ItemsWrapGrid CacheLength="0" MaximumRowsOrColumns="5" Orientation="Horizontal" />
    </ItemsPanelTemplate>
</GridView.ItemsPanel>