带报头的ItemsControl的XAML虚拟化

-1

我有一个长页面ScrollViewer（如网页）。带报头的ItemsControl的XAML虚拟化

页面包含延迟加载无限滚动内容的页眉和列表。标题应该滚动显示列表内容。标题高度比列表项高度大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。 原因是： ScrollViewer与CanContentScroll="True"第一次滚动勾号滚动标题。这是不可接受的，因为标题太大。
Make two ScrollViewers。一个用于带有较大底部边距的标题，一个用于标题高度顶部边距的项目。 原因：太难同步顶部偏移和鼠标事件。

来源

2017-09-01 Mikolaytis

如果将ItemsControl的VirtualizingPanel.ScrollUnit属性设置为Pixel并使用第一种方法，该怎么办？ – mm8

我用该解决方案创建了一个空项目。轮到它超级不稳定，并向下滚动一下就崩溃了。看起来像是因为物品有不同的高度。这里是要点：https://gist.github.com/Mikolaytis/82e739aa6adaea328d5369bf3132f016 – Mikolaytis

我说过我已经创建了一个空的项目！我附上了要点链接。我在附注中附上了碰撞细节。您可以创建空项目并复制gist代码，尝试它。或从这里下载项目并进行测试：https://drive.google.com/open?id=0B38_Y0INL95-NzFEejk1Vi1LV2s – Mikolaytis

我发现了一个令人惊讶的解决方案：使用Virtualizing 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>

该解决方案稳定且快速。

来源

2017-09-05 14:12:40 Mikolaytis

带报头的ItemsControl的XAML虚拟化

回答

相关问题