Dans quel ordre les panneaux sont-ils les plus efficaces en termes de temps de rendu et de performances ?

Question

Il arrive souvent que plus d'un panneau convienne à la mise en page que je souhaite, mais je sais qu'il y a une différence dans les temps de rendu pour les différents types de panneaux.

Par exemple, MSDN déclare que

Une méthode relativement simple Panel comme Canvas peut avoir des performances nettement meilleures performances qu'un système plus complexe Panel comme Grid .

Ainsi, en termes de temps de rendu et de performances, dans quel ordre les panneaux WPF sont-ils les plus efficaces ?

Panneaux WPF :

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

Je suis presque sûr d'avoir vu une liste de ce genre quelque part en ligne, mais je ne la trouve plus maintenant.

La réponse idéale que je recherche serait de me fournir une liste de panneaux dans l'ordre dans lequel ils s'affichent le plus rapidement. Je comprends que le nombre d'enfants est un facteur important dans l'efficacité des panneaux, donc pour cette question, supposons que chaque panneau n'a qu'un enfant. Label / TextBox paire.

En outre, j'aimerais disposer d'une liste d'exceptions, comme des panneaux spécifiques qui fonctionnent mieux que d'autres en fonction de certaines conditions.

Mise à jour

Pour résumer, sur la base de l réponse acceptée ci-dessous, les performances du panneau sont basées sur le nombre et la disposition des éléments enfants, mais en général, la liste du plus rapide au plus lent est la suivante :

• Canvas
• StackPanel
• WrapPanel
• DockPanel
• Grid

En outre, un VirtualizingPanel / VirtualizingStackPanel devrait toujours être utilisé s'il y a beaucoup d'éléments qui ne tiennent pas toujours sur l'écran.

Je vous recommande vivement de lire le réponse acceptée ci-dessous pour plus de détails avant de choisir un élément de cette liste.

Answer 1

Je pense qu'il est plus concis et plus compréhensible de décrire les caractéristiques de performance de chaque panneau que d'essayer de donner une comparaison absolue des performances relatives.

WPF effectue deux passages lors du rendu du contenu : Mesure et Arrangement. Chaque panneau a des caractéristiques de performance différentes pour chacune de ces deux passes.

La performance de la passe de mesure est la plus affectée par la capacité d'un panneau à s'adapter à l'étirement en utilisant des alignements (ou Auto dans le cas de l Grid ) et ensuite le nombre d'enfants qui sont étirés ou auto-dimensionnés. Les performances de la passe Arrange sont affectées par la complexité de l'interaction entre l'emplacement de la mise en page des différents enfants et, bien sûr, le nombre d'enfants.

Parfois, les panneaux donnés ne se prêtent pas facilement à la disposition requise. J'ai créé un contrôle qui nécessitait qu'un nombre arbitraire d'éléments soient positionnés chacun à un certain pourcentage de l'espace disponible. Aucun des contrôles par défaut ne le fait. Si l'on essaie de leur faire faire cela (en les liant à la taille réelle du parent), on obtient des performances horribles. J'ai créé un panneau de mise en page basé sur le Canvas qui a obtenu le résultat souhaité avec un travail minimal (j'ai copié la source du Canvas et en ai modifié environ 20 lignes).

Panneaux disponibles :

• Toile

  Définit une zone à l'intérieur de laquelle vous pouvez explicitement positionner des éléments enfants par coordonnées. par des coordonnées relatives à la zone du Canvas.

  Le Canvas présente les meilleures performances de tous les panneaux pour la passe d'arrangement puisque chaque élément se voit attribuer un emplacement de manière statique. La passe de mesure a également d'excellentes performances car il n'y a pas de concept d'étirement dans ce panneau ; chaque enfant utilise simplement sa taille native.

• DockPanel

  Définit une zone à l'intérieur de laquelle vous pouvez disposer les éléments enfants soit horizontalement ou verticalement, les uns par rapport aux autres.

  Le Dockpanel a un schéma de mise en page très simple où les éléments sont ajoutés un par un par rapport à l'élément ajouté précédemment. Par défaut, la hauteur ou la largeur est déterminée par la taille native de l'élément (basée respectivement sur Haut/Bas et Gauche/Droite) et l'autre direction est déterminée par l'attribut Dock si la largeur ou la hauteur est indéfinie. Passage de mesure moyen à rapide et passage d'arrangement moyen à rapide.

• Grille

  Définit une zone de grille flexible composée de colonnes et de lignes.

  Ce panneau peut être le plus gourmand en performances si le dimensionnement proportionnel ou le dimensionnement automatique sont utilisés. Le calcul de la taille des éléments enfants peut être une combinaison complexe de la taille native de l'élément et de la disposition spécifiée par la grille. La mise en page est également la plus compliquée de tous les panneaux. Performance lente à moyenne pour la passe de mesure et performance lente à moyenne pour la passe d'arrangement.

• Panneau d'empilement

  Arrange les éléments enfants en une seule ligne qui peut être orientée. horizontalement ou verticalement.

  Le StackPanel mesure ses enfants en utilisant un dimensionnement natif ou relatif dans la direction opposée à son orientation et un dimensionnement natif dans la direction de son orientation (l'alignement ne fait rien dans cette direction). Cela en fait un outil de niveau moyen dans ce domaine. La passe d'arrangement consiste simplement à disposer les éléments dans l'ordre. Probablement la deuxième meilleure performance pour cette passe. Des performances moyennes pour la passe de mesure et des performances rapides pour la passe de disposition.

• Panneau de virtualisation

  Fournit un cadre pour les éléments du Panel qui virtualisent leur collecte de données sur les enfants. Il s'agit d'une classe abstraite.

  Une classe de base pour mettre en œuvre votre propre panneau de virtualisation. Ne charge que les éléments visibles pour éviter une utilisation inutile de la mémoire et du processeur. BEAUCOUP plus performant pour les ensembles d'éléments. Probablement un peu moins performant pour les éléments qui tiennent sur l'écran à cause de la vérification des limites. Le SDK ne fournit qu'une seule sous-classe de ce panneau, la classe VirtualizingStackPanel .

• WrapPanel

  Positionne les éléments enfants en position séquentielle de gauche à droite, en faisant passer le contenu à la ligne suivante au bord du cadre contenant. Le classement ultérieur se fait de manière séquentielle de haut en bas ou de droite à gauche, selon la valeur de la propriété Orientation.

  La passe de mesure est une passe quelque peu complexe où l'élément le plus grand d'une ligne particulière détermine la hauteur de la ligne, puis chaque élément de cette ligne utilise soit sa hauteur native (s'il en a une), soit la hauteur de la ligne. La passe de mise en page est simple, elle place chaque élément l'un après l'autre sur une ligne et passe à la ligne suivante lorsqu'il n'y a pas assez de place pour l'élément suivant. Performance moyenne pour la passe de rangement. Performance moyenne à rapide pour la passe de disposition.

Références :

Utilisez le panneau le plus efficace possible

La complexité du processus de mise en page est directement basée sur la mise en page comportement des éléments dérivés du Panel que vous utilisez. Par exemple, un contrôle Grid ou StackPanel offre beaucoup plus de fonctionnalités qu'un contrôle Canvas qu'un contrôle Canvas. Le prix de cette plus grande fonctionnalité est une plus grande augmentation des coûts de performance. une augmentation plus importante des coûts de performance. Toutefois, si vous n'avez pas besoin la fonctionnalité qu'offre un contrôle Grid, vous devez utiliser l'alternative alternatives moins coûteuses, telles qu'un Canvas ou un panneau personnalisé.

Desde Optimisation des performances : Mise en page et conception

Le système de mise en page effectue deux passages pour chaque membre de la collection Children une passe de mesure et une passe d'arrangement. Chaque panneau enfant enfant fournit ses propres méthodes MeasureOverride et ArrangeOverride afin de pour obtenir son propre comportement de mise en page.

Pendant le passage de la mesure, chaque membre de la collection Children est évaluée. Le processus commence par un appel à la méthode Measure. Cette méthode est appelée dans l'implémentation du Panel parent parent, et il n'est pas nécessaire de l'appeler explicitement pour qu'une disposition se produise.

Tout d'abord, les propriétés de taille native de l'UIElement sont évaluées, telles que Clip et Visibilité. Cela génère une valeur nommée constraintSize qui est transmise à MeasureCore. est transmise à MeasureCore.

Deuxièmement, les propriétés du cadre définies sur FrameworkElement sont traitées, ce qui affecte la valeur de constraintSize. Ces propriétés décrivent généralement les caractéristiques de dimensionnement de l'élément sous-jacent, comme sa hauteur, sa largeur, sa marge et son style. Chacune de ces propriétés propriétés peuvent modifier l'espace nécessaire à l'affichage de l'élément. élément. MeasureOverride est ensuite appelé avec la contrainteSize comme paramètre. paramètre.

Remarque Il existe une différence entre les propriétés de la hauteur et de la largeur. et ActualHeight et ActualWidth. Par exemple, la propriété ActualHeight est une valeur calculée en fonction d'autres entrées de hauteur et la propriété système de mise en page. La valeur est définie par le système de mise en page lui-même, sur la base d'un passage de rendu réel. un passage de rendu réel, et peut donc être légèrement en retard par rapport à la valeur définie des propriétés, telles que Height, qui sont à la base du changement de la changement d'entrée. Étant donné que ActualHeight est une valeur calculée, vous devez être être conscient qu'il pourrait y avoir des changements multiples ou incrémentiels rapportés à la suite de diverses opérations effectuées par le système de mise en page. Le site système de mise en page peut calculer l'espace de mesure requis pour les éléments enfants, les contraintes de l'élément parent, etc. des contraintes de l'élément parent, etc. L'objectif ultime Le but ultime du passage de mesure est que l'élément enfant détermine sa DesiredSize, ce qui se produit pendant l'appel MeasureCore. La valeur DesiredSize est stockée par Measure pour être utilisée lors de la passe d'arrangement du contenu.

La passe d'arrangement commence par un appel à la méthode Arrange. Au cours de la passe passe d'arrangement, l'élément Panel parent génère un rectangle qui qui représente les limites de l'enfant. Cette valeur est transmise à la méthode ArrangeCore pour traitement.

La méthode ArrangeCore évalue la DesiredSize de l'enfant et évalue toutes les marges supplémentaires qui peuvent affecter la taille rendue de l'élément l'élément. ArrangeCore génère un arrangeSize, qui est transmis à la méthode à la méthode ArrangeOverride du Panel en tant que paramètre. ArrangeOverride génère le finalSize de l'enfant. Enfin, la méthode Enfin, la méthode ArrangeCore effectue une évaluation finale des propriétés de décalage, telles que la marge et l'alignement, et met en évidence les propriétés de l'enfant. comme la marge et l'alignement, et place l'enfant dans son emplacement de mise en page. Il n'est pas nécessaire que l'enfant occupe la totalité de l'espace alloué (ce qui est souvent le cas). l'espace alloué. Le contrôle est ensuite renvoyé au Panel parent et le processus de mise en page est terminé. processus de mise en page est terminé.

Desde Mesurer et disposer les enfants

Answer 2

Peut-être este vous aidera.

Non seulement pour les panneaux mais aussi pour toutes les applications que vous souhaitez réaliser en WPF.

Il conclut le dessin WPF et la mesure des performances.

Il comporte également une application de test de dessin, des résultats et des informations sur les conclusions pour les différents systèmes d'exploitation que vous souhaitez cibler.

Answer 3

Les panneaux que vous mentionnez sont des panneaux d'agencement. Un bref aperçu du système d'agencement suggère qu'il ne s'agira probablement pas d'une simple liste des panneaux les plus efficaces, mais de la façon dont vous utilisez les panneaux qui a le plus d'effet sur l'efficacité et les performances.

Système de mise en page (LayoutSystem_Overview) :

Dans sa forme la plus simple, la mise en page est un système récursif qui conduit à ce qu'un élément soit dimensionné, positionné et dessiné. Plus précisément, la mise en page décrit le processus de mesure et de disposition des membres de la collection Children d'un élément du Panel. La mise en page est un processus intensif. Plus la collection Children est grande, plus le nombre de calculs à effectuer est important. La complexité peut également être introduite en fonction du comportement de mise en page défini par l'élément Panel qui possède la collection. Un Panel relativement simple, tel que Canvas, peut avoir des performances nettement supérieures à un Panel plus complexe, tel que Grid.

Chaque fois qu'un UIElement enfant change de position, il est susceptible de déclencher un nouveau passage par le système de mise en page. Par conséquent, il est important de comprendre les événements qui peuvent invoquer le système de mise en page, car une invocation inutile peut entraîner de mauvaises performances de l'application. Les paragraphes suivants décrivent le processus qui se produit lorsque le système de mise en page est invoqué.

1. Un UIElement enfant commence le processus de mise en page en faisant d'abord mesurer ses propriétés principales.

2. Les propriétés de dimensionnement définies sur le FrameworkElement sont évaluées, telles que la largeur, la hauteur et la marge.

3. Une logique spécifique au panneau est appliquée, telle que la direction des quais ou l'orientation de l'empilement.

4. Le contenu est organisé après que tous les enfants ont été mesurés.

5. La collection Enfants est dessinée à l'écran.

6. Le processus est invoqué à nouveau si des enfants supplémentaires sont ajoutés à la collection, si une LayoutTransform est appliquée ou si la méthode UpdateLayout est appelée.

Ver Plage de mesure du système de mise en page pour plus d'informations sur la mesure et la disposition des enfants

Performances du système de mise en page :

La mise en page est un processus récursif. Chaque élément enfant d'une collection Children est traité lors de chaque invocation du système de mise en page. Par conséquent, il convient d'éviter de déclencher le système de mise en page lorsque cela n'est pas nécessaire. Les considérations suivantes peuvent vous aider à obtenir de meilleures performances.

Sachez quels changements de valeur de propriété forceront une mise à jour récursive par le système de mise en page.

Les propriétés de dépendance dont les valeurs peuvent entraîner l'initialisation du système de mise en page sont marquées par des drapeaux publics. AffectsMeasure et AffectsArrange fournissent des indices utiles sur les changements de valeur des propriétés qui forceront une mise à jour récursive par le système de mise en page. En général, toute propriété susceptible d'affecter la taille du rectangle englobant d'un élément doit avoir un indicateur AffectsMeasure défini sur true. Pour plus d'informations, consultez la rubrique Présentation des propriétés de dépendance.

Dans la mesure du possible, utilisez une RenderTransform au lieu d'une LayoutTransform.

Une LayoutTransform peut être un moyen très utile d'affecter le contenu d'une interface utilisateur (IU). Toutefois, si l'effet de la transformation ne doit pas avoir d'incidence sur la position d'autres éléments, il est préférable d'utiliser une RenderTransform à la place, car celle-ci n'invoque pas le système de mise en page. LayoutTransform applique sa transformation et force une mise à jour récursive de la disposition pour tenir compte de la nouvelle position de l'élément affecté.

Évitez les appels inutiles à UpdateLayout.

La méthode UpdateLayout force une mise à jour récursive de la disposition, et n'est souvent pas nécessaire. À moins que vous ne soyez certain qu'une mise à jour complète est nécessaire, laissez le système de mise en page appeler cette méthode pour vous.

Lorsque vous travaillez avec une grande collection d'enfants, envisagez d'utiliser un VirtualizingStackPanel au lieu d'un StackPanel ordinaire.

En virtualisant la collection enfant, le panneau VirtualizingStackPanel ne garde en mémoire que les objets qui se trouvent actuellement dans le ViewPort du parent. Par conséquent, les performances sont considérablement améliorées dans la plupart des scénarios.

Optimisation des performances : Mise en page et conception : Cet article explique en détail comment construire efficacement l'arbre et donne une liste simple des panneaux en fonction de leur complexité.

Canevas (le moins complet possible = plus efficace et meilleure performance)

Grille

Autres panneaux (plus complexes = moins efficaces et moins performants)

Autres considérations relatives à la performance auxquelles il faut prêter attention : Façons d'améliorer la vitesse de rendu de l'interface utilisateur WPF

1. Mettez tout en cache. Brosses, couleurs, géométries, textes formatés, glyphes. (Par exemple, nous avons deux classes : RenderTools et TextCache. Le processus de rendu de chaque unité est adressé à une instance partagée des deux classes. Ainsi, si deux graphiques ont le même texte, sa préparation n'est exécutée qu'une seule fois).
2. Congeler Congelable, si vous prévoyez de l'utiliser pendant une longue période. Surtout les géométries. Les géométries complexes non gelées exécutent HitTest extrêmement lentement.
3. Choisissez les méthodes de rendu les plus rapides pour chaque primitive. Par exemple, il existe environ 6 façons de rendre du texte, mais la plus rapide est DrawingContext.DrawGlyphs.
4. Permettre le recyclage des conteneurs. La virtualisation apporte beaucoup d'améliorations de performance, mais les conteneurs seront éliminés et recréés, c'est le cas par défaut. Mais vous pouvez gagner en performance en recyclant les conteneurs en définissant VirtualizingStackPanel.VirtualizationMode="Recycling".
5. Desde aquí : Il n'y a pas de limite pratique à la quantité d'imbrication que votre application peut supporter, cependant, il est généralement préférable de limiter votre application à l'utilisation des panneaux qui sont réellement nécessaires pour la mise en page souhaitée. Dans de nombreux cas, un élément Grid peut être utilisé à la place des panneaux imbriqués en raison de sa flexibilité en tant que conteneur de mise en page. Cela peut améliorer les performances de votre application en évitant que des éléments inutiles ne se retrouvent dans l'arborescence.