UWP GridView - 如何在调整大小时维护可见项目(列数更改)

时间:2018-05-07 11:29:33

标签: c# gridview uwp uwp-xaml

我有GridView用于显示数千的图片/缩略图(使用数据绑定)。我使用ImplicitAnimations来添加转换,这样当控件调整大小并且列数发生变化时 - 每个项目在调整大小后平滑地进入新位置。

问题

当用户位于GridView的顶部时,这一切都可以正常工作,但用户滚动时会出现问题。滚动越远,当列数发生变化时,移动的项目就越多。添加/删除了更多行,但滚动条保持在相同的位置/偏移,这会导致先前可见的项目远离视图 - 并且用户会丢失。

到目前为止我尝试了什么......

我尝试通过跟踪每个滚动更改事件中的第一个可见项目然后在SizeChanged事件上滚动到它来解决此问题。然而,这个解决方案的问题在于它真的是粗糙。动画不再是显而易见的,整个体验都是滞后的。

这个问题有更好的解决方案吗?

问题的说明

enter image description here

视频示例

我还制作了一个视频来更好地说明问题。

(图像模糊,因为有些人是NSFW)

Video Link

我正在寻找的是滚动条在调整大小时调整其位置的方法,并保留用户正在查看的相同项目 - 而不会弄乱动画。

修改

所以显然这不可能以任何其他方式解决,而是手动滚动到我希望在调整大小时可见的项目,我已经尝试过这样做并且动画的问题再次变得非常粗糙,因为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>

我切换到社区工具包以获取动画和AdvancedCollectionView。使用自定义面板有两个原因 - 获取Panel并对其应用隐式动画 - 并在Horizo​​ntalAlignment为中心时将滚动条保持在最右侧。

CollectionView绑定到ObservableCollection。

重现问题 - 只需在ItemSource中添加大量项目,并尝试在不同的滚动偏移处调整GridView的大小(查看视频示例)

0 个答案:

没有答案