WPF ItemsControl绑定二维海量数据渲染卡顿及虚拟化问题求解

你当前的嵌套ItemsControl方案从架构上就无法支撑100*100以上量级的二维数据渲染，核心问题有三点：

• 嵌套结构无法实现真正的全链路UI虚拟化。即使给外层ItemsControl设置VirtualizingStackPanel，也只能实现行级虚拟化，每个行对应的内层ItemsControl加载时会一次性生成该行所有列的可视化元素，1000*1000场景下会生成100万个UI元素，远超WPF的合理渲染承载上限。
• 原生VirtualizingStackPanel仅支持单方向虚拟化，你给内层设置水平方向VirtualizingStackPanel、外层设置垂直方向VirtualizingStackPanel的组合，不会在滚动时联动回收跨视口的元素，只要某一行被加载过，该行所有列的UI元素就会常驻内存，不会被释放。
• 你之前套ScrollViewer的操作如果没开CanContentScroll="True"，ScrollViewer会工作在物理滚动模式，给内部子元素传递无限大的测量尺寸，直接强制所有子元素全量渲染，虚拟化逻辑完全失效。

针对10001000、最高50005000量级的二维网格渲染场景，嵌套ItemsControl的路线走不通，必须实现二维虚拟化，以下是可直接复用的实现路径：

1. 重构数据存储结构 #

放弃ObservableCollection<List<MyViewModel>>的嵌套集合设计，改为带二维索引的懒加载存储结构，避免初始化时全量创建单元格ViewModel：

public class GridDataSource
{
    private readonly int _totalRows;
    private readonly int _totalColumns;
    private readonly MyViewModel[,] _cellCache;

    public GridDataSource(int totalRows, int totalColumns)
    {
        _totalRows = totalRows;
        _totalColumns = totalColumns;
        _cellCache = new MyViewModel[totalRows, totalColumns];
    }

    public int TotalRows => _totalRows;
    public int TotalColumns => _totalColumns;

    public MyViewModel GetCell(int row, int column)
    {
        if (_cellCache[row, column] == null)
        {
            // 按需实例化单元格VM，初始化耗时从分钟级降到毫秒级
            _cellCache[row, column] = new MyViewModel { CellColor = Colors.White };
        }
        return _cellCache[row, column];
    }
}

对应调整MyViewModel，不要存SolidColorBrush，直接存Color值，减少Freezable对象的内存开销：

public class MyViewModel : INotifyPropertyChanged
{
    private Color _cellColor;
    public Color CellColor
    {
        get => _cellColor;
        set
        {
            _cellColor = value;
            OnPropertyChanged(nameof(CellColor));
        }
    }
    // INotifyPropertyChanged实现省略
}

2. 实现二维虚拟化面板 #

WPF原生没有提供二维虚拟化面板，需要继承VirtualizingPanel自定义实现，核心逻辑如下：

• 重写MeasureOverride和ArrangeOverride方法，通过ScrollOwner获取当前视口尺寸、滚动偏移量，计算出当前视口内可见的行范围、列范围
• 调用ItemContainerGenerator只生成可见范围内的单元格UI元素，滚动时回收移出视口的元素，通过VirtualizationMode.Recycling复用元素容器，避免频繁创建销毁UI对象
• 计算整个网格的总宽高返回给ScrollOwner，支撑滚动条的正确计算

实现时必须给面板关联的ItemsControl开启VirtualizingPanel.IsVirtualizing="True"附加属性，否则虚拟化逻辑不会生效。

3. XAML层实现 #

不需要嵌套控件，用单个ItemsControl挂载自定义二维虚拟化面板即可，内置ScrollViewer必须开启逻辑滚动：

<ItemsControl
    x:Name="MainGrid"
    VirtualizingPanel.IsVirtualizing="True"
    VirtualizingPanel.VirtualizationMode="Recycling"
    ScrollViewer.CanContentScroll="True"
    ItemsSource="{Binding}">
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <Border BorderBrush="Gray" BorderThickness="1">
                <ScrollViewer 
                    VerticalScrollBarVisibility="Auto" 
                    HorizontalScrollBarVisibility="Auto"
                    CanContentScroll="True">
                    <ItemsPresenter />
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <local:TwoDimVirtualGridPanel
                CellWidth="30"
                CellHeight="30"
                TotalRows="{Binding TotalRows}"
                TotalColumns="{Binding TotalColumns}" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness="1">
                <Rectangle 
                    Width="30" 
                    Height="30" 
                    Fill="{Binding CellColor, Converter={StaticResource ColorToBrushConverter}}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

• 外层ItemsControl加VirtualizingStackPanel：仅能实现行容器的虚拟化，每个行容器内的所有列元素还是会全量生成，滚动覆盖全量行后依旧会生成所有单元格的UI元素
• 外层套ScrollViewer：未开启CanContentScroll="True"时，ScrollViewer工作在物理滚动模式，直接触发所有子元素全量测量渲染，虚拟化完全失效
• 替换为ListBox/ListView：这类控件本质是单方向虚拟化的列表控件，嵌套使用时和普通ItemsControl的性能瓶颈完全一致，默认自带的选中样式、内边距还会增加额外渲染开销，也不会提升性能

• 单元格的交互逻辑（点击、悬停等）不要给每个单元格单独注册事件，通过路由事件冒泡到顶层ItemsControl统一处理，减少事件监听占用的内存
• 5000*5000量级场景下，不要提前实例化所有MyViewModel对象，严格按照可视区域范围按需取数、懒加载实例
• 画笔资源尽量使用冻结的全局静态资源，不要为每个单元格单独创建SolidColorBrush实例

内容的提问来源于stack exchange，提问作者Apolonius