wpf - 在渲染时间和性能方面，面板以什么顺序最有效？

Question

很多时候不止一个面板适合我想要的布局，但是我知道不同面板类型的渲染时间存在差异。

例如，MSDN指出

A relatively simple Panel, such as Canvas, can have significantly better performance than a more complex Panel, such as Grid.

那么在渲染时间和性能方面，WPF 面板在什么顺序下效率最高？

WPF面板:

Canvas

DockPanel

Grid

UniformGrid

StackPanel

WrapPanel

VirtualizingPanel/VirtualizingStackPanel

我很确定我在网上的某个地方看到了这个列表，但我现在找不到了。

我正在寻找的理想答案会为我提供一个面板列表，按照它们渲染速度最快的顺序排列。我知道 child 的数量是影响面板效率的一个重要因素，所以为了这个问题，假设每个面板只有一个 Label/ TextBox对。

此外，我想要一个异常(exception)列表，例如基于某些条件比其他面板表现更好的特定面板。

更新

总结基于 accepted answer下面，面板性能基于子项的数量和布局，但通常从最快到最慢的列表是:

Canvas

StackPanel

WrapPanel

DockPanel

Grid

此外，还有 VirtualizingPanel/ VirtualizingStackPanel如果有很多项目并不总是适合屏幕，则应始终使用。

我强烈建议您阅读 accepted answer在从这个列表中选择一个项目之前，请参阅下面的更多详细信息。

Answer 1

我认为描述每个面板的性能特征比尝试给出绝对的相对性能比较更简洁易懂。

WPF 在渲染内容时进行两次传递:测量和排列。对于这两个遍中的每一个，每个面板具有不同的性能特征。

测量 channel 的性能受面板使用对齐方式(或自动，在 Grid 的情况下)适应拉伸(stretch)的能力的影响最大，然后是拉伸(stretch)或自动调整大小的子项的数量。排列 channel 的性能受不同子级的布局位置之间交互的复杂性影响，当然还有子级的数量。

有时，给定的面板不容易适应所需的布局。我创建了一个控件，需要将任意数量的项目放置在可用空间的特定百分比处。没有任何默认控件会执行此操作。试图让他们这样做(通过绑定(bind)到父级的实际大小)会导致糟糕的性能。我创建了一个基于 Canvas 的布局面板，它以最少的工作实现了我想要的结果(我复制了 Canvas 的源代码并修改了大约 20 行)。

可用面板:

Canvas

Defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area.

由于每个项目都静态分配了一个位置，因此 Canvas 在所有面板的排列过程中具有最佳性能。由于该面板中没有拉伸(stretch)的概念，因此measure pass也具有出色的性能；每个 child 只是使用其原始大小。

坞站面板

Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other.

Dockpanel 有一个非常简单的布局方案，其中项目相对于添加的前一个项目一个一个地添加。默认情况下，高度或宽度由项目的原始大小决定(分别基于顶部/底部与左/右)，另一个方向由 Dock 决定如果宽度或高度未定义，则属性。中到快速测量通过和中到快速排列通过。

格子

Defines a flexible grid area that consists of columns and rows.

如果使用比例调整大小或自动调整大小，这可能是性能最密集的面板。计算子项大小可以是项的 native 大小和网格指定的布局的复杂组合。布局也是所有面板中最复杂的。测量通过的慢到中等性能和排列通过的慢到中等性能。

堆栈面板

Arranges child elements into a single line that can be oriented horizontally or vertically.

StackPanel 使用与其方向相反方向的 native 或相对大小来测量其子项，并在其方向的方向上使用 native 大小(对齐在这个方向上没有任何作用)。这使其成为该领域的中级表现者。安排通行证很简单，只是按顺序排列项目。可能是这次传球的第二好的表现。测量通过的中等性能和布局通过的快速性能。

虚拟化面板

Provides a framework for Panel elements that virtualize their child data collection. This is an abstract class.

用于实现您自己的虚拟化面板的基类。仅加载可见项目以防止不必要地使用内存和处理器。项目集的性能要高得多。由于边界检查，适合屏幕的项目的性能可能略低。 SDK 只提供了一个子类，VirtualizingStackPanel .

包裹面板

Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering occurs sequentially from top to bottom or right to left, depending on the value of the Orientation property.

测量传递是一个有点复杂的传递，其中特定行的最大项目确定行的高度，然后该行上的每个项目使用其原始高度(如果有的话)或行的高度。布局过程很简单，将每个项目一个接一个地放在一行上，然后在没有足够空间容纳下一个项目时继续到下一行。中等绩效衡量通过。安排 channel 的中到快速性能。

引用文献:

Use the Most Efficient Panel where Possible

The complexity of the layout process is directly based on the layout behavior of the Panel-derived elements you use. For example, a Grid or StackPanel control provides much more functionality than a Canvas control. The price for this greater increase in functionality is a greater increase in performance costs. However, if you do not require the functionality that a Grid control provides, you should use the less costly alternatives, such as a Canvas or a custom panel.

来自 Optimizing Performance: Layout and Design

The layout system completes two passes for each member of the Children collection, a measure pass and an arrange pass. Each child Panel provides its own MeasureOverride and ArrangeOverride methods to achieve its own specific layout behavior.

During the measure pass, each member of the Children collection is evaluated. The process begins with a call to the Measure method. This method is called within the implementation of the parent Panel element, and does not have to be called explicitly for layout to occur.

First, native size properties of the UIElement are evaluated, such as Clip and Visibility. This generates a value named constraintSize that is passed to MeasureCore.

Secondly, framework properties defined on FrameworkElement are processed, which affects the value of constraintSize. These properties generally describe the sizing characteristics of the underlying UIElement, such as its Height, Width, Margin, and Style. Each of these properties can change the space that is necessary to display the element. MeasureOverride is then called with constraintSize as a parameter.

Note There is a difference between the properties of Height and Width and ActualHeight and ActualWidth. For example, the ActualHeight property is a calculated value based on other height inputs and the layout system. The value is set by the layout system itself, based on an actual rendering pass, and may therefore lag slightly behind the set value of properties, such as Height, that are the basis of the input change. Because ActualHeight is a calculated value, you should be aware that there could be multiple or incremental reported changes to it as a result of various operations by the layout system. The layout system may be calculating required measure space for child elements, constraints by the parent element, and so on. The ultimate goal of the measure pass is for the child to determine its DesiredSize, which occurs during the MeasureCore call. The DesiredSize value is stored by Measure for use during the content arrange pass.

The arrange pass begins with a call to the Arrange method. During the arrange pass, the parent Panel element generates a rectangle that represents the bounds of the child. This value is passed to the ArrangeCore method for processing.

The ArrangeCore method evaluates the DesiredSize of the child and evaluates any additional margins that may affect the rendered size of the element. ArrangeCore generates an arrangeSize, which is passed to the ArrangeOverride method of the Panel as a parameter. ArrangeOverride generates the finalSize of the child. Finally, the ArrangeCore method does a final evaluation of offset properties, such as margin and alignment, and puts the child within its layout slot. The child does not have to (and frequently does not) fill the entire allocated space. Control is then returned to the parent Panel and the layout process is complete.

来自 Measuring and Arranging Children