帶報頭的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虛擬化

回答

相關問題