具有 2D Array 和大量数据的 ItemsControl答案

【问题标题】：ItemsControl with 2D Array and huge data amount具有 2D Array 和大量数据的 ItemsControl
【发布时间】：2022-06-15 04:21:13
【问题描述】：

我有一个相当具体的问题，我正在尝试使用 WPF 和 C# 来解决。当我尝试向我的 UI 呈现分层 2D 数据时，它适用于少量数据，但当我尝试渲染更多数据（超过 100 x 100）时，它开始变得疯狂。

代码：

源集合

// SilentObservableCollection has AddRange method which raises collection changed only once after all items are added
private SilentObservableCollection<List<MyViewModel>> data;
public SilentObservableCollection<List<MyViewModel>> Data
{
    get => this.data;
    private set => this.data = value;
}

集合中的项目（当前状态，后续会更多）

public class MyViewModel : INotifyPropertyChanged
{
    private SolidColorBrush color;
    public SolidColorBrush Color
    {
        get => this.color;
        set {
           this.color = value;
           this.OnPropertyChanged(nameof(Color));
        }
    }
   // Constructors, INotifyPropertyChanged implementation etc.
}

XAML 代码

<ItemsControl ItemsSource="{Binding Path=Data}">
   <ItemsControl.ItemTemplate>
      <DataTemplate>
         <ItemsControl ItemsSource="{Binding}">
            <ItemsControl.ItemsPanel>
               <ItemsPanelTemplate>
                  <VirtualizingStackPanel Orientation="Horizontal"/>
               </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
               <DataTemplate>
                  <Border BorderBrush="Black" BorderThickness="1">
                     <Rectangle Width="30" Height="30" Fill="{Binding Path=Color}" />
                  </Border>
               </DataTemplate>
            </ItemsControl.ItemTemplate>
         </ItemsControl>
      </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

我试过了，但没有积极的结果：

将 VirtualizingStackPanel 添加到外部 ItemsControl
将外部 ItemsControl 包装在 ScrollViewer 中
使用 ContentPresenter 将 ScrollViewer 添加到 ItemsControl.Template 中的外部 ItemsControl
切换到 ListView 或 ListBox（我希望最里面的 Rectangle 都具有松散的交互性，需要不必要的样式来删除填充和边框，并且仍然滞后）

我的一般想法和问题：

我知道我正在为每一行创建一个全新的 ItemsControl，但我知道没有其他方法可以在适当的层次结构中呈现 2D 数据。有没有更好的方法？
我认为我无法一次只渲染可见的部分而不是所有数据，但我没有找到更好的解决方案。
我预计数据大多低于 1_000 X 1_000，很少会达到 5_000 x 5_000 或更高。
到目前为止，我添加适当滚动功能的所有尝试都失败了。有什么建议吗？

【问题讨论】：

标签： c# wpf user-interface itemscontrol