¿En qué orden son los paneles los más eficientes en términos de tiempo de procesamiento y rendimiento?

Hay muchas veces en que más de un panel sería adecuado para el diseño que quiero, sin embargo, sé que hay una diferencia en los tiempos de renderizado para diferentes tipos de paneles.

Por ejemplo, MSDN establece que

Un sistema relativamente simple Panel, como Canvas, puede tener un rendimiento significativamente mejor que uno más complejo Panel, como Grid.

Entonces, en términos de tiempo de procesamiento y rendimiento, ¿en qué orden los paneles WPF son los más eficientes?

Paneles WPF:

• Canvas
• DockPanel
• Grid
• UniformGrid
• StackPanel
• WrapPanel
• VirtualizingPanel / / VirtualizingStackPanel

Estoy bastante seguro de que vi una lista de esto en algún lugar en línea, pero no puedo encontrarla ahora.

La respuesta ideal que estoy buscando me proporcionaría una lista de paneles en el orden en que se procesarían más rápido. Entiendo que el número de niños es un factor importante en la eficacia de los paneles, por lo que, en aras de esta pregunta, suponga que cada panel solo tiene un Label/ TextBoxpar.

Además, me gustaría una lista de excepciones, como paneles específicos que funcionan mejor que otros en ciertas condiciones.

Actualizar

Para resumir según la respuesta aceptada a continuación, el rendimiento del panel se basa en el número y la disposición de los elementos secundarios, sin embargo, en general, la lista de la más rápida a la más lenta es:

• Canvas
• StackPanel
• WrapPanel
• DockPanel
• Grid

Además, siempre se debe usar un VirtualizingPanel/ VirtualizingStackPanelsi hay muchos elementos que no siempre caben en la pantalla.

Le recomiendo que lea la respuesta aceptada a continuación para obtener más detalles antes de elegir un elemento de esta lista.

Creo que es más conciso y comprensible describir las características de rendimiento de cada panel que intentar dar una comparación de rendimiento relativa absoluta.

WPF realiza dos pases al representar contenido: Medir y Organizar. Cada panel tiene características de rendimiento diferentes para cada uno de estos dos pases.

El rendimiento del paso de medida se ve más afectado por la capacidad de un panel para acomodar el estiramiento usando alineaciones (o Auto en el caso del Grid) y luego el número de niños que se estiran o se ajustan automáticamente. El rendimiento del pase Organizar se ve afectado por la complejidad de la interacción entre la ubicación del diseño de los diferentes niños y, por supuesto, la cantidad de niños.

A veces, los paneles dados no se prestan fácilmente al diseño necesario. Creé un control que necesitaba un número arbitrario de elementos para que cada uno se posicionara en un cierto porcentaje del espacio disponible. Ninguno de los controles predeterminados hace esto. Intentar hacer que hagan esto (mediante el enlace al tamaño real del padre) da como resultado un rendimiento horrible. Creé un panel de diseño basado en el lienzo que logró el resultado deseado con un trabajo mínimo (copié la fuente del lienzo y modifiqué alrededor de 20 líneas).

Paneles disponibles:

• Lona

  Define un área dentro de la cual puede colocar explícitamente elementos secundarios por coordenadas relativas al área del lienzo.

  El lienzo tiene el mejor rendimiento de todos los paneles para el pase de organización, ya que a cada elemento se le asigna una ubicación estática. El paso de medida también tiene un rendimiento excelente ya que no hay un concepto de estiramiento en este panel; cada niño simplemente usa su tamaño nativo.

• DockPanel

  Define un área dentro de la cual puede organizar los elementos secundarios, ya sea horizontal o verticalmente, uno con respecto al otro.

  El Dockpanel tiene un esquema de diseño muy simple donde los elementos se agregan uno por uno en relación con el elemento agregado anteriormente. De manera predeterminada, la altura o el ancho están determinados por el tamaño nativo del elemento (basado en Superior / Inferior vs Izquierda / Derecha, respectivamente) y la Dockpropiedad determina la otra dirección si el ancho o la altura no están definidos. Pase de medida medio a rápido y paso de arreglo medio a rápido.

• Cuadrícula

  Define un área de cuadrícula flexible que consta de columnas y filas.

  Este puede ser el panel con mayor rendimiento si se utiliza el tamaño proporcional o el tamaño automático. Calcular el tamaño del elemento secundario puede ser una combinación compleja del tamaño nativo del elemento y el diseño especificado por la cuadrícula. El diseño también es el más complicado de todos los paneles. Rendimiento lento a medio para el pase de medida y rendimiento lento a medio para el pase de arreglo.

• StackPanel

  Organiza los elementos secundarios en una sola línea que se puede orientar horizontal o verticalmente.

  El StackPanel mide a sus hijos utilizando el tamaño nativo o relativo en la dirección opuesta a su orientación y el tamaño nativo en la dirección de su orientación (la alineación no hace nada en esta dirección). Esto lo convierte en un artista de nivel medio en esta área. El pase de Arreglo es simple, simplemente colocando los elementos en orden. Probablemente la segunda mejor actuación para este pase. Rendimiento medio para el pase de medida y rendimiento rápido para el pase de diseño.

• VirtualizingPanel

  Proporciona un marco para los elementos del Panel que virtualizan su recopilación de datos secundarios. Esto es una clase abstracta.

  Una clase base para implementar su propio panel de virtualización. Solo carga elementos visibles para evitar el uso innecesario de memoria y procesador. MUCHO más eficaz para conjuntos de artículos. Probablemente un poco menos de rendimiento para los elementos que caben en la pantalla debido a la comprobación de límites. El SDK solo proporciona una subclase de esto, el VirtualizingStackPanel.

• WrapPanel

  Posiciona elementos secundarios en posición secuencial de izquierda a derecha, separando el contenido a la siguiente línea en el borde del cuadro contenedor. El orden posterior se produce secuencialmente de arriba a abajo o de derecha a izquierda, según el valor de la propiedad Orientación.

  El paso de medida es un paso algo complejo donde el elemento más grande para una fila particular determina la altura de la fila y luego cada elemento en esa fila usa su altura nativa (si tiene una) o la altura de la fila. El pase de diseño es simple, coloca cada elemento uno tras otro en una fila y luego continúa en la siguiente fila cuando no hay suficiente espacio para el siguiente elemento. Medida de rendimiento medio aprobado. Rendimiento medio a rápido para el pase de arreglo.

Referencias

Use el panel más eficiente donde sea posible

La complejidad del proceso de diseño se basa directamente en el comportamiento de diseño de los elementos derivados del Panel que usa. Por ejemplo, un control Grid o StackPanel proporciona mucha más funcionalidad que un control Canvas. El precio de este mayor aumento en la funcionalidad es un mayor aumento en los costos de rendimiento. Sin embargo, si no necesita la funcionalidad que proporciona un control Grid, debe utilizar las alternativas menos costosas, como un Canvas o un panel personalizado.

Desde la optimización del rendimiento: diseño y diseño

El sistema de diseño completa dos pases para cada miembro de la colección Children, un pase de medida y un pase de arreglo. Cada Panel secundario proporciona sus propios métodos MeasureOverride y ArrangeOverride para lograr su propio comportamiento de diseño específico.

Durante la aprobación de la medida, se evalúa a cada miembro de la colección Children. El proceso comienza con una llamada al método Measure. Este método se llama dentro de la implementación del elemento Panel principal y no tiene que llamarse explícitamente para que se produzca el diseño.

Primero, se evalúan las propiedades de tamaño nativo de UIElement, como Clip y Visibilidad. Esto genera un valor denominado restrictintSize que se pasa a MeasureCore.

En segundo lugar, se procesan las propiedades del marco definidas en FrameworkElement, lo que afecta el valor de restrictintSize. Estas propiedades generalmente describen las características de dimensionamiento del elemento UIE subyacente, como su Altura, Ancho, Margen y Estilo. Cada una de estas propiedades puede cambiar el espacio necesario para mostrar el elemento. Luego se llama a MeasureOverride con restrictintSize como parámetro.

Nota Hay una diferencia entre las propiedades de Altura y Ancho y ActualHeight y ActualWidth. Por ejemplo, la propiedad ActualHeight es un valor calculado basado en otras entradas de altura y el sistema de diseño. El sistema de diseño establece el valor en función de un paso de representación real y, por lo tanto, puede quedar ligeramente por detrás del valor establecido de las propiedades, como Altura, que son la base del cambio de entrada. Debido a que ActualHeight es un valor calculado, debe tener en cuenta que podría haber cambios informados múltiples o incrementales como resultado de varias operaciones realizadas por el sistema de diseño. El sistema de diseño puede calcular el espacio de medida requerido para los elementos secundarios, las restricciones del elemento principal, etc. El objetivo final del paso de medida es que el niño determine su Tamaño deseado, que ocurre durante la llamada MeasureCore. Measure almacena el valor de DesiredSize para usarlo durante el pase de organización del contenido.

El pase de organización comienza con una llamada al método Arrange. Durante el pase de organización, el elemento Panel principal genera un rectángulo que representa los límites del elemento secundario. Este valor se pasa al método ArrangeCore para su procesamiento.

El método ArrangeCore evalúa el tamaño deseado del elemento secundario y evalúa cualquier margen adicional que pueda afectar el tamaño representado del elemento. ArrangeCore genera un arregloSize, que se pasa al método ArrangeOverride del Panel como parámetro. ArrangeOverride genera el tamaño final del elemento secundario. Finalmente, el método ArrangeCore realiza una evaluación final de las propiedades de desplazamiento, como el margen y la alineación, y coloca al niño dentro de su ranura de diseño. El niño no tiene que (y con frecuencia no lo hace) llenar todo el espacio asignado. El control se devuelve al Panel principal y se completa el proceso de diseño.

De medir y organizar niños

Tal vez esto te ayude.

No solo para paneles sino también para cada aplicación que desee realizar en WPF.

Concluye el rendimiento de dibujo y medición de WPF.

También tiene una aplicación de prueba de dibujo, resultados e información de conclusiones para diferentes sistemas operativos a los que desea apuntar.

Los paneles que menciona son paneles de diseño, por lo que una breve descripción del sistema de diseño sugiere que probablemente no se trate solo de una lista simple del panel más eficiente, sino de cómo usar los paneles que tienen el mayor efecto en la eficiencia y el rendimiento.

LayoutSystem_Overview :

En su forma más simple, el diseño es un sistema recursivo que lleva a un elemento a ser dimensionado, posicionado y dibujado. Más específicamente, el diseño describe el proceso de medir y organizar los miembros de la colección Children de un elemento Panel. El diseño es un proceso intensivo. Cuanto más grande sea la colección Children, mayor será el número de cálculos que deben hacerse. La complejidad también se puede introducir en función del comportamiento de diseño definido por el elemento Panel que posee la colección. Un Panel relativamente simple, como Canvas, puede tener un rendimiento significativamente mejor que un Panel más complejo, como Grid.

Cada vez que un elemento UIElement secundario cambia su posición, tiene el potencial de activar un nuevo pase por el sistema de diseño. Por lo tanto, es importante comprender los eventos que pueden invocar el sistema de diseño, ya que la invocación innecesaria puede conducir a un bajo rendimiento de la aplicación. A continuación se describe el proceso que ocurre cuando se invoca el sistema de diseño.

1. Un elemento UIE secundario comienza el proceso de diseño midiendo primero sus propiedades centrales.

2. Se evalúan las propiedades de tamaño definidas en FrameworkElement, como Ancho, Altura y Margen.

3. Se aplica la lógica específica del panel, como la dirección de acoplamiento o la orientación de apilamiento.

4. El contenido se organiza después de que todos los niños hayan sido medidos.

5. La colección Niños se dibuja en la pantalla.

6. El proceso se invoca nuevamente si se agregan elementos secundarios adicionales a la colección, se aplica un LayoutTransform o se llama al método UpdateLayout.

Vea LayoutSystem_Measure_Arrange para obtener más información sobre la medición y la organización de los niños.

LayoutSystem_Performance :

El diseño es un proceso recursivo. Cada elemento secundario de una colección Secundaria se procesa durante cada invocación del sistema de diseño. Como resultado, se debe evitar activar el sistema de diseño cuando no es necesario. Las siguientes consideraciones pueden ayudarlo a lograr un mejor rendimiento.

Tenga en cuenta qué cambios en el valor de la propiedad forzarán una actualización recursiva por parte del sistema de diseño.

Las propiedades de dependencia cuyos valores pueden hacer que el sistema de diseño se inicialice están marcadas con banderas públicas. AffectsMeasure y AffectsArrange proporcionan pistas útiles sobre qué cambios en el valor de la propiedad forzarán una actualización recursiva por parte del sistema de diseño. En general, cualquier propiedad que pueda afectar el tamaño del cuadro delimitador de un elemento debe tener un indicador AffectsMeasure establecido en verdadero. Para obtener más información, consulte Descripción general de las propiedades de dependencia.

Cuando sea posible, use un RenderTransform en lugar de un LayoutTransform.

LayoutTransform puede ser una forma muy útil de afectar el contenido de una interfaz de usuario (UI). Sin embargo, si el efecto de la transformación no tiene que afectar la posición de otros elementos, es mejor usar RenderTransform, porque RenderTransform no invoca el sistema de diseño. LayoutTransform aplica su transformación y fuerza una actualización de diseño recursiva para tener en cuenta la nueva posición del elemento afectado.

Evite llamadas innecesarias a UpdateLayout.

El método UpdateLayout fuerza una actualización de diseño recursiva, y con frecuencia no es necesario. A menos que esté seguro de que se requiere una actualización completa, confíe en el sistema de diseño para llamar a este método por usted.

Cuando trabaje con una gran colección Children, considere usar un VirtualizingStackPanel en lugar de un StackPanel normal.

Al virtualizar la colección secundaria, VirtualizingStackPanel solo mantiene los objetos en la memoria que están actualmente dentro del ViewPort principal. Como resultado, el rendimiento mejora sustancialmente en la mayoría de los escenarios.

Optimización del rendimiento: diseño y diseño : este artículo detalla cómo construir el árbol de manera eficiente y ofrece una lista simple de paneles según su complejidad

Lienzo (menos complext = más eficiente y mejor rendimiento)

Cuadrícula

Otros paneles (más complejos = menos eficiente y peor rendimiento)

Otras consideraciones de rendimiento a las que debe prestar atención: Formas de mejorar la velocidad de representación de la interfaz de usuario de WPF

1. Caché todo. Pinceles, colores, geometrías, textos formateados, glifos. (Por ejemplo, tenemos dos clases: RenderTools y TextCache. El proceso de representación de las direcciones de cada unidad a la instancia compartida de ambas clases. Entonces, si dos gráficos tienen el mismo texto, su preparación se ejecuta solo una vez).
2. Congele Freezable, si planea usarlo durante mucho tiempo. Especialmente geometrías. Las geometrías complejas no congeladas ejecutan HitTest extremadamente lento.
3. Elija las formas más rápidas de representación de cada primitivo. Por ejemplo, hay alrededor de 6 formas de representación de texto, pero la más rápida es DrawingContext.DrawGlyphs.
4. Habilite el reciclaje de contenedores. La virtualización trae muchas mejoras de rendimiento, pero los contenedores se eliminarán y se volverán a crear, este es el valor predeterminado. Pero puede obtener más rendimiento reciclando contenedores configurando VirtualizingStackPanel.VirtualizationMode = "Recycling"
5. A partir de aquí : no existe un límite práctico para la cantidad de anidamiento que su aplicación puede admitir, sin embargo, generalmente es mejor limitar su aplicación para usar solo los paneles que son realmente necesarios para su diseño deseado. En muchos casos, se puede usar un elemento Grid en lugar de paneles anidados debido a su flexibilidad como contenedor de diseño. Esto puede aumentar el rendimiento de su aplicación al mantener elementos innecesarios fuera del árbol.