WPF自定义Panel绘制万级矩形时MeasureOverride性能优化问题

问题现状 #

• 业务需求：实现支持绘制10000+个不同尺寸矩形的功能，矩形按组划分，单组包含的矩形数量可超过1000个
• 当前性能表现：全量绘制总耗时超过30秒，其中MeasureOverride()方法耗时超20秒，ArrangeOverride()方法耗时超10秒
• 定位到的瓶颈：当base.InternalChildren（对应单个矩形分组）包含数百甚至数千个矩形元素时，foreach遍历+子元素布局操作会产生极高的时间开销
• 约束条件：自定义Panel类承载了大量业务逻辑，无法直接替换为Rectangle、Border等基础控件实现

初始实现代码 #

public class MyPanel : Panel
{
    protected override Size MeasureOverride(Size constraint)
    {
        Size availableSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
        foreach (UIElement element in base.InternalChildren)
        {
            if (element != null)
            {
                element.Measure(availableSize);
            }
        }
        return new Size();
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        foreach (UIElement element in base.InternalChildren)
        {                
            if (!element.IsMeasureValid)
                continue;

            var x = GetX(element);
            var y = GetY(element);

            var width = element.DesiredSize.Width;
            var height = element.DesiredSize.Height;
            
            element.Arrange(new Rect(x - width * 0.5, y - height * 0.5, width, height));
        }
        return finalSize;
    }
}

已尝试的优化方案及出现的问题 #

尝试将遍历测量逻辑移出MeasureOverride方法，实现代码如下：

protected override Size MeasureOverride(Size constraint)
{
    var list = base.InternalChildren.Cast<UIElement>().ToList();
    Size availableSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
    MeeasureTest(list, constraint);

    return new Size();
}

private void MeeasureTest(List<UIElement> list, Size availableSize)
{
    Stopwatch watch = Stopwatch.StartNew();           

    //Parallel.ForEach(list, element =>
    //{
    //    if (element != null && !element.IsArrangeValid)
    //    {
    //        element.Measure(availableSize);
    //    }
    //});

    foreach (UIElement element in list)
    {
        this.Dispatcher.BeginInvoke((Action)delegate ()
        {
            if (element != null)
            {
                element.Measure(availableSize);
            }
        });
    }

    watch.Stop();
    Console.WriteLine("Measure " + DateTime.Now.ToLongTimeString() + " - " + watch.ElapsedMilliseconds);
}

测试遇到的问题：

• 使用Parallel.ForEach遍历执行测量会触发线程异常，WPF的UI元素操作严格限制在UI线程执行，跨线程调用会直接抛出异常
• 遍历中使用Dispatcher.BeginInvoke投递测量操作时，方法本身可快速返回，但所有矩形的总渲染耗时仍超过30秒，本质是UI线程仍然需要逐个执行子控件的测量逻辑，总计算量没有任何减少

当前优化方向的问题 #

你之前尝试的两个优化方向都没有触达核心瓶颈：WPF中所有UIElement的测量、排列、渲染操作都必须在UI线程串行执行，异步投递只是把计算时机延后，没有减少实际计算量；并行调用直接违反WPF的线程模型，必然报错。核心性能损耗来自于「为每个矩形创建独立UIElement」的设计——单个UIElement的Measure、Arrange流程本身就有固定的依赖属性、事件、布局元数据开销，10000+个元素串行计算的耗时必然达到秒级。

可行优化方案 #

• UI虚拟化（优先级最高，性能提升最明显）
  不要一次性把所有矩形都加入InternalChildren集合，只生成当前视口范围内可见的矩形对应的UI元素，视口外的矩形只保留数据模型，不生成可视化对象。常规场景下单屏可见的矩形数量不会超过数百个，直接把参与布局计算的元素量级从10000+降到百级，耗时可以从30秒降到毫秒级。可以结合分组逻辑做懒加载：展开对应分组时才加载该组的矩形数据，折叠分组时直接移除对应组的所有UI子元素，进一步减少参与布局的元素总量。
• 跳过无意义的Measure计算
  你当前的Measure逻辑给所有子元素传入无限大的可用尺寸，本身就会触发子元素的完整测量计算。如果矩形的尺寸是提前在业务数据中存储的，不需要等待子元素自己测量出DesiredSize，可以直接跳过所有子元素的Measure调用：

  protected override Size MeasureOverride(Size constraint)
  {
      // 矩形尺寸已知，不需要子元素自行测量
      return new Size();
  }
  

  Arrange阶段直接读取业务数据中存储的矩形宽高、坐标计算排列位置，不需要读取element.DesiredSize，也不需要判断IsMeasureValid，可以直接省去测量环节的所有开销。
• 改用轻量渲染载体
  如果矩形本身不需要单独响应路由事件、不需要单独设置样式/模板/绑定等完整UIElement能力，不要用继承自UIElement/FrameworkElement的对象做矩形载体，改用DrawingVisual做底层渲染。DrawingVisual是WPF最轻量化的可视化对象，没有自带布局、事件、绑定的额外开销，渲染10000+个图形的性能比独立UIElement高两个数量级。实现时让自定义容器继承FrameworkElement，重写VisualChildrenCount和GetVisualChild方法管理DrawingVisual集合，用DrawingContext批量绘制所有矩形，完全绕过原生Measure/Arrange对子元素的遍历逻辑。
• 冻结资源降低渲染开销
  所有矩形使用的填充、边框画刷提前创建后调用Freeze()方法冻结，冻结后的画刷不需要跨线程调度、不需要参与依赖属性变更通知，渲染时的GPU提交开销会大幅降低。

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