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

127

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.

Rachel
fuente
¿Es ingenuo suponer que los paneles virtualizadores funcionarán invariablemente mejor que los paneles no virtualizados?
BoltClock
@BoltClock Creo que depende de la cantidad de contenido no visible en el panel. Si hay muchos elementos no visibles, VirtualizingStackPaneldefinitivamente funcionará mejor, pero si todos los elementos que se muestran en el panel son visibles, creo que es mejor usar un panel normal.
Rachel
Gracias. Tiene sentido que sea un desperdicio virtualizar elementos, cuando todos se mostrarán de todos modos.
BoltClock
Aparte de virtualizar, tienen características diferentes o no serían controles separados. Voy con lo que proporciona la mejor interfaz de usuario para el cliente.
paparazzo
1
¿Estás seguro de que hay una diferencia notable (aparte de la virtualización)? Todo lo que tienen que hacer es realizar un algoritmo de diseño relativamente ligero. Diminuto en comparación con todo el renderizado que seguirá. Dicho esto, la cuadrícula probablemente será la más lenta (escala ponderada).
Henk Holterman

Respuestas:

130

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

N / A
fuente
1
En respuesta a un comentario ahora eliminado: no incluí métricas porque no serían útiles. Hay demasiadas combinaciones para que una hoja de cálculo sea útil. Un método más útil para optimizar el rendimiento sería utilizar una comprensión general para elegir los paneles de diseño inicial y luego optimizar según sea necesario a partir de allí utilizando un análisis de la situación real.
N_A
Gracias, su explicación de cómo los paneles WPF realmente se procesan, y el rendimiento Medir / Organizar de cada panel es mucho mejor de lo que estaba pidiendo :)
Rachel
@mydogisbox No veo UniformGriden tu lista en ningún lado. ¿Sería capaz de actualizar su respuesta con ese panel y su rendimiento estimado de Medir / Organizar en relación con los otros tipos de panel?
Rachel
1
@Rachel The UniformGridno está diseñado para usarse en el diseño de la aplicación. Consulte "Elementos del panel derivados" aquí: msdn.microsoft.com/en-us/library/ms754152.aspx para obtener más información. En cuanto a la velocidad, debería ser un poco más rápido que ay un DockPanelpoco más lento que a Canvas.
N_A
12

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.

mike_sev
fuente
8

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.
Erick
fuente
2
Esta respuesta consiste casi por completo en copiar y pegar de otras fuentes, algunas sin atribuir. Sería mucho mejor si lo recortara solo en las partes relevantes, atribuyera correctamente todas las fuentes e intentara responder más directamente a la pregunta.
N_A
2
@mydogisbox La respuesta es una recopilación de información, muchos de los mismos sitios que utilizó en su respuesta, podría agregar. Al no tener en cuenta otros aspectos que cambian el rendimiento, puede dar lugar a una respuesta incompleta o al solicitante que todavía tiene preguntas adicionales, por lo que decidí incluirlas. Mientras que Rachel con un increíble representante de 21.7K y mucha experiencia en WPF ya puede conocer esta información, otros que están viendo esta pregunta pueden desear esta información adicional y relevante junto con la respuesta.
Erick