CODEWITHSUNDEEP
c#gridviewuwpuwp-xaml
CryShana
CryShana

Reputation: 1113

UWP GridView - How to maintain visible items upon resizing (Column count changes)

I have a GridView that I use to display thousands of images/thumbnails (using data binding). I used ImplicitAnimations to add transitions, so that when the control is resized and the number of columns changes - every item smoothly goes into the new position after the resize.

Problem

This all works fine when the user is at the top of the GridView but becomes a problem the further the user scrolls. The further you scroll, the more items are moved around when the number of columns changes. More rows are added/removed, but the Scrollbar is kept on the same position/offset which causes previously visible items to go far away from the view - and the user gets lost.

What I tried so far...

I tried working around this issue by tracking the first visible item on every scroll change event and then scrolling to it on SizeChanged event. The problem of this solution, however, is that it's really rough. Animations are no longer noticable and the whole experience is laggy.

Is there any better solution to this problem?

Illustration of the problem

enter image description here

Video example

I have also made a video to better illustrate the issue.

(The images have been blurred because some were NSFW)

Video Link

What I am looking for is a way for the scrollbar to adjust it's position on resize and stay on the same items the User was looking at - without messing up the animations.

Edit

So apparently this can't be solved any other way but manually scrolling to the item I wish to have visible on resize, which I already tried doing and had problems with the animations being really rough again because the ScrollToItem was happening AFTER the animations were being triggered.

So my question now is - can I scroll to an item on reorder/resize - BEFORE the animations get triggered? That way I think I could keep the smoothness. Using the resize event, however, doesn't work for this.

Edit 2 - Code sample

<GridView x:Name="mylist" animations:ReorderGridAnimation.Duration="600" ItemsSource="{Binding Source={StaticResource viewSource}}">
<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center" Loaded="ItemsWrapGrid_Loaded"/>
    </ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
    <DataTemplate>
        <Grid Width="300" Height="300" Background="Gainsboro">
            <Image Source="{Binding ThumbnailImage}" />
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>
</GridView>

GridView ItemSource is binded to the following CollectionView

<UserControl.Resources>
    <controls:AdvancedCollectionView x:Key="viewSource" Source="{x:Bind Collection}" />
</UserControl.Resources>

I switched to the Community Toolkit for the animations and the AdvancedCollectionView. The custom panel is being used for 2 reasons - to get the Panel and apply implicit animations to it - and to keep the scrollbar on the rightmost side when HorizontalAlignment is Center.

The CollectionView is binded to an ObservableCollection.

To reproduce the issue - just add a lot of items into the ItemSource and try resizing the GridView at different scroll offsets (check video sample) .

Upvotes: 0

Views: 681

Answers (1)

Breeze Liu - MSFT
Breeze Liu - MSFT

Reputation: 3808

For your this issue, it may be caused by the ListView and GridView UI virtualization, you can try to use VariableSizedWrapGrid as the GridView's ItemsPanel,

<GridView>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

But it will cost much device memory and performance without virtualization. So you should also take into consideration displaying many images in once.

As for displaying the Item that the User is looking at, since there are many items displayed in the screen, the GridView does not know to track witch one.So also as @Pratyay's suggestion, you need to keep track of the item then make the ScrollView witch is in the GridView to scroll to the item.

Upvotes: 0

Related Questions