ItemsWrapGrid隐藏了传递偏移量的项目

Question

我正在编写一个Windows 8.1应用程序，我正在使用很长的<div class="row"> <div class="col"> <div class="box"> </div> </div> <div class="col"> <div class="box"> </div> </div> <div class="col"> <div class="box"> </div> </div> <div class="col"> <div class="box"> </div> </div> </div> .col { width: 25%; float: left; } .box { width: 50px; height: 50px; background-color: red; cursor: pointer; } .added { background-color: blue; } $('.box').click(function() { $(this).toggleClass('added'); if ( $(this).hasClass('added'); ) { $(this).removeClass('added'); } else { $(this).toggleClass('added'); } }); 。我正在使用UI虚拟化，视图模型包含一个带有100K项目的可观察集合。

GridView

在屏幕上看起来像这样：

使用默认项目面板（ItemsWrapGrid）并向列表末尾滚动时，某些项目开始消失。

我已经使用各种尺寸的项目对其进行了测试，剪辑始终以相同的滚动偏移（大约2,000,000像素）开始。当我用WrapGrid替换面板时，不会发生错误。我了解<GridView ItemsSource="{Binding Items}"> <GridView.ItemsPanel> <ItemsPanelTemplate> <ItemsWrapGrid Orientation="Vertical"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.ItemTemplate> <DataTemplate> <Border Background="LightBlue" Height="200" Width="200" > <TextBlock Text="{Binding Index}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30" /> </Border> </DataTemplate> </GridView.ItemTemplate> </GridView> 有更好的虚拟化，并且想要使用它，但这个错误当然是不可接受的。

有没有办法在使用ItemsWrapGrid时解决此错误？

Answer 1

在发布我的OutOfMemoryException窘境之后，我做了一些研究，我想我有一个解决方案，我发现了这个：

  

视口的概念对于UI虚拟化至关重要，因为   框架必须创建可能显示的元素。在   一般来说，ItemsControl的视口是逻辑的范围   控制。例如，ListView的视口是宽度和   ListView元素的高度。一些面板允许子元素   无限空间，例如ScrollViewer和Grid，有   自动调整大小的行或列。放置虚拟化ItemsControl时   在这样的面板中，它需要足够的空间来显示它的所有内容   项目，这打败了虚拟化。通过设置恢复虚拟化   ItemsControl的宽度和高度。   ListView and GridView UI optimization

所以我将它添加到你的GridView ItemsSource：

<GridView ItemsSource="{Binding Items}" VirtualizingStackPanel.VirtualizationMode="Recycling" Width="800" Height="800">

看起来需要宽度和高度。