UWP GridView - Как сохранить видимые элементы при изменении размера (изменение количества столбцов) - PullRequest
Новая
       43

UWP GridView - Как сохранить видимые элементы при изменении размера (изменение количества столбцов)

0 голосов
/ 07 мая 2018

У меня есть GridView, который я использую для отображения тысяч изображений / миниатюр (используя привязку данных). Я использовал ImplicitAnimations для добавления переходов, чтобы при изменении размера элемента управления и изменении количества столбцов каждый элемент после изменения размера плавно переходил в новую позицию.

Задача

Все это прекрасно работает, когда пользователь находится на вершине GridView, но становится проблемой при дальнейшей прокрутке пользователя. Чем дальше вы прокручиваете, тем больше элементов перемещается при изменении количества столбцов. Добавляются / удаляются другие строки, но полоса прокрутки остается в той же позиции / смещении , что приводит к тому, что ранее видимые элементы уходят далеко от вида - и пользователь теряется.

То, что я до сих пор пробовал ...

Я пытался обойти эту проблему, отслеживая первый видимый элемент при каждом событии изменения прокрутки, а затем прокручивая его до события SizeChanged. Проблема этого решения, однако, заключается в том, что оно действительно грубо . Анимации больше не заметны, и весь опыт запаздывает.

Есть ли лучшее решение этой проблемы?

Иллюстрация проблемы

enter image description here

Пример видео

Я также сделал видео, чтобы лучше проиллюстрировать проблему.

(изображения были размыты, потому что некоторые были NSFW)

Ссылка на видео

То, что я ищу, это способ для полосы прокрутки отрегулировать свое положение при изменении размера и остаться на тех же элементах, на которые смотрел пользователь, - без путаницы анимации.

Редактировать

Так что, по-видимому, это не может быть решено другим способом, кроме ручной прокрутки до элемента, который я хотел бы видеть при изменении размера, что я уже пытался сделать, и у меня были проблемы с анимацией, которая была действительно грубой снова, потому что ScrollToItem происходил ПОСЛЕ анимации были запущены.

Итак, мой вопрос сейчас - могу ли я перейти к элементу при переупорядочении / изменении размера - ДО запуска анимации? Таким образом, я думаю, что смогу сохранить плавность. Однако использование события resize для этого не работает.

Редактировать 2 - Пример кода 

<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 привязан к следующему CollectionView 

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

Я переключился на Community Toolkit для анимации и AdvancedCollectionView. Настраиваемая панель используется по двум причинам - чтобы получить панель и применить к ней неявные анимации, - и удерживать полосу прокрутки с правой стороны, когда горизонтальное выравнивание установлено по центру.

CollectionView привязывается к ObservableCollection.

Чтобы воспроизвести проблему - просто добавьте много элементов в ItemSource и попробуйте изменить размер GridView с разными смещениями прокрутки (см. Пример видео) .

1 Ответ

0 голосов
/ 10 мая 2018

Для этой проблемы это может быть вызвано виртуализацией ListView и GridView UI , вы можете попытаться использовать VariableSizedWrapGrid в качестве ItemsPanel GridView, 

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

Но это будет стоить много памяти и производительности устройства без виртуализации. Таким образом, вы также должны учитывать отображение нескольких изображений за один раз.

Что касается отображения элемента, на который смотрит пользователь, поскольку на экране отображается много элементов, GridView не знает, как его отследить. Так же, как и совет @ Pratyay, вам нужно отслеживать элемент затем сделайте так, чтобы ведьма ScrollView находилась в GridView, чтобы перейти к элементу.

...