c# - 滚动多个虚拟化项目控件

Question

我有一个类似日历的控件，其中包含一周中每一天的列和七个 ObservableCollections，每个 ObservableCollection 最多可以包含一百个或更多项。

我希望能够在虚拟化它们的同时[编辑]同时[/编辑]垂直滚动它们。

现在我有以下布局

<ScrollViewer>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <!-- Monday -->
        <Border Grid.Column="0">
            <ItemsControl ItemsSource="{Binding Monday}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel IsVirtualizing="True" VirtualizationMode="Recycling" ... />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <MyControl Item="{Binding}" ... />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Border>

        ...

    </Grid>
</ScrollViewer>

但是，性能值得怀疑，我认为这是由于 ScrollViewer 允许 Grid -> Border -> VirtualizingStackPanel 垂直扩展而根本不虚拟化。是这样吗？

(旁注:我尝试删除 ScrollViewer 并将 CanVerticallyScroll="True"添加到 VirtualizingStackPanels 并希望它们独立滚动以检查性能是否更好，但它们根本不会滚动)

什么是正确的布局？

编辑:每列显示 100 个元素(总共 700 个)需要 13 秒，滚动实际上没问题

[编辑2]:由于需要同时滚动，我尝试创建一个包含“一行”(7 项)的新集合，并将其作为 ListView 中的模板。糟糕的结果[/Edit2]

Answer 1

要使 ItemsControl 虚拟化，您不仅需要使用 VirtualizingStackPanel，还需要在 ItemsControl 的模板中添加一个 ScrollViewer(通常 ItemsControl 没有 ScrollViewer)。

将此模板添加到您的 ItemsControl 中:

<ItemsControl.Template>
    <ControlTemplate>
        <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                Padding="{TemplateBinding Control.Padding}"
                BorderBrush="{TemplateBinding Border.BorderBrush}"
                Background="{TemplateBinding Panel.Background}"
                SnapsToDevicePixels="True">
            <ScrollViewer Padding="{TemplateBinding Control.Padding}"
                          Focusable="False">
                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
            </ScrollViewer>
        </Border>
    </ControlTemplate>
</ItemsControl.Template>

作为一种不同的解决方案，您当然可以将 ItemsControl 替换为 ListBox，它已经具备了虚拟化列表所需的一切。