ItemsControl 渲染缓慢

Question

我正在使用 ItemsControl 来显示项目列表，它的 xaml 就像

<ItemsControl  ItemsSource="{Binding ShelfItemsCollection}" Name="shelfGridView" Margin="5" >
<ItemsControl.ItemTemplate>
        <DataTemplate>   
        <Stackpanel>                        
        <Image Width="150" Height="200" Stretch="Fill" Source="{Binding CoverImage}" ></Image> 
        +
        some other infos
        </Stackpanel>
        </DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>                    
            <WrapPanel  Orientation="Horizontal" />                    
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

我面临的问题是我在列表中有近 100 个项目，我正在根据某些属性对列表进行一些过滤操作，并将结果限制为较小的否（一次说 20 个项目）进行此过滤刷新和加载列表视图花了很多时间。 这是我用来过滤的代码

ICollectionView dataView = CollectionViewSource.GetDefaultView(shelfGridView.ItemsSource);
dataView.Filter = CloudFilter;
dataView.Refresh();
private bool CloudFilter(object item)
{
MyObject lib = item as MyObject;
return lib.Property !=valuetofilter; 
} 

有什么方法可以提高性能或渲染缓慢的任何具体原因吗？

Answer 1

ItemsControl 不支持开箱即用的 UI 虚拟化。使用 ListBox 或虚拟化 ItemsControl UI。

您可以按照以下步骤在 ItemsControl 上启用 UI 虚拟化：

1. 在 ItemsControl 上设置 VirtualizingStackPanel.IsVirtualizing="True"。
2. 将ItemsPanel 设置为VirtualizingStackPanel。
3. 覆盖 ItemsControl 的 ControlTemplate 并将 ItemsPresenter 包裹在 ScrollViewer 内。
4. 在 ItemsControl 上设置 ScrollViewer.CanContentScroll="True"。

上述提案的详细信息可以在here找到。

---

此外，您将ItemsSource 直接设置为SourceCollection，即ShelfItemsCollection，然后通过在下面为该集合创建defualtView 来过滤它。直接与 sourceCollection 绑定将强制 ItemsControl（当然是非虚拟化）生成 100 个容器来托管您的底层对象。

相反，您应该创建 ICollectionView 并在其上设置过滤谓词并将 ItemsSource 绑定到该实例。也许您也可以创建CollectionViewSource 并与之绑定。如果您绑定过滤实例，它将仅生成 20 个容器（非虚拟化 ItemsControl）。 当然，在 ItemsControl 上启用 UI 虚拟化，将只为 GUI 上可见的 UI 项生成容器。