Question

我有一个长ScrollViewer页面（如网页）。

页面包含延迟加载无限滚动内容的标题和列表。标题应滚动列表内容。标题高度是列表项高度的5倍。

有没有什么好方法可以虚拟化这个？

<ScrollViewer>
    <StackPanel>
        <TextBlock Text="Header:" />
        <StackPanel Orientation="Horizontal" Height="500">
            <!--Complex UI-->
        </StackPanel>

        <TextBlock Text="Videos:"/>
        <ItemsControl ItemsSource="{Binding Videos}" 
                      ItemsTemplate="{StaticResource VideoDataTemplate}" />
    </StackPanel>
</ScrollViewer>

我尝试了什么：

为标题/列表项设置DataTemplateSelector，并将所有内容放入一个ItemsControl。的原因： 带有CanContentScroll="True"的ScrollViewer在第一个滚动标记处滚动标题。这是不可接受的，因为标题太大。
制作两个ScrollViewers。一个用于具有较大底部边距的标题，一个用于具有标题高度顶部边距的项目。 原因： 太难同步顶部偏移和鼠标事件。

Answer 1

我找到了一个令人惊讶的解决方案：使用TreeView和HierarchicalDataTemplate进行虚拟化。

<TreeView ItemsSource="{Binding VideosViewModel}"
          ScrollViewer.VerticalScrollBarVisibility="Visible"
          VirtualizingStackPanel.IsVirtualizing="True"
          VirtualizingStackPanel.IsVirtualizingWhenGrouping="True"
          VirtualizingStackPanel.ScrollUnit="Pixel"
          VirtualizingStackPanel.VirtualizationMode="Recycling">
    <TreeView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </TreeView.ItemsPanel>
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True" />
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Videos}">

            <!--Header-->
            <StackPanel Orientation="Horizontal" Height="500">
                <!--Complex UI-->
            </StackPanel>

            <!--Items-->
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name, Mode=OneTime}" />
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>

        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

此解决方案稳定且快速。

带标头的ItemsControl的XAML虚拟化

1 个答案: