Share via

Optimisation des performances : disposition et conception

  • Article

La conception de votre application WPF peut avoir un impact sur ses performances en créant une surcharge inutile dans le calcul de la disposition et la validation des références d’objet. La construction d’objets, en particulier au moment de l’exécution, peut affecter les caractéristiques de performances de votre application.

Cette rubrique fournit des recommandations sur ces aspects des performances.

Disposition

Le terme « passe de disposition » décrit le processus de mesure et d’organisation des membres de la collection d’enfants d’un Panelobjet dérivé, puis les dessine à l’écran. La passe de disposition est un processus mathématique intensif (le nombre de calculs nécessaires est proportionnel au nombre d’enfants présents dans la collection). Par exemple, chaque fois qu’un objet enfant UIElement dans la collection change sa position, il peut déclencher une nouvelle passe par le système de disposition. Compte tenu de la relation étroite entre les caractéristiques d’objet et le comportement de disposition, il est important de comprendre le type des événements qui peuvent appeler le système de disposition. Votre application sera d’autant plus performante que vous réduirez autant que possible les appels inutiles de la passe de disposition.

Le système de disposition effectue deux passes pour chaque membre enfant d’une collection : une passe de mesure et une passe de réorganisation. Chaque objet enfant fournit sa propre implémentation substituée des méthodes et Arrange des Measure méthodes afin de fournir son propre comportement de disposition spécifique. Pour schématiser, une disposition est un système récursif qui entraîne le dimensionnement, le positionnement et le tracé d’un élément à l’écran.

  • Un objet enfant UIElement commence le processus de disposition en ayant d’abord ses propriétés principales mesurées.

  • Les propriétés de l’objet FrameworkElement liées à la taille, telles que Width, Heightet Margin, sont évaluées.

  • PanelUne logique spécifique est appliquée, telle que la Dock propriété du DockPanel, ou la Orientation propriété du StackPanel.

  • Le contenu est réorganisé, ou positionné, après que tous les objets enfants ont été mesurés.

  • La collection d’objets enfants est dessinée à l’écran.

Le processus de passe de disposition est encore appelé si l’une des actions suivantes se produit :

  • Un objet enfant est ajouté à la collection.

  • A LayoutTransform est appliqué à l’objet enfant.

  • La UpdateLayout méthode est appelée pour l’objet enfant.

  • Quand une modification est apportée à la valeur d’une propriété de dépendance marquée avec des métadonnées qui affectent les passes de mesure ou de réorganisation.

Utiliser le panneau le plus efficace si possible

La complexité du processus de disposition est directement basée sur le comportement de disposition des Paneléléments dérivés que vous utilisez. Par exemple, un ou StackPanel un Grid contrôle fournit beaucoup plus de fonctionnalités qu’un Canvas contrôle. Ce choix accru de fonctionnalités se traduit par une augmentation du coût des performances. Toutefois, si vous n’avez pas besoin des fonctionnalités qu’un Grid contrôle fournit, vous devez utiliser les alternatives moins coûteuses, telles qu’un panneau personnalisé ou un Canvas panneau personnalisé.

Pour plus d’informations, consultez la page Vue d’ensemble de Panel.

Mettre à jour RenderTransform au lieu de le remplacer

Vous pouvez peut-être mettre à jour un Transform élément plutôt que de le remplacer comme valeur d’une RenderTransform propriété. C’est notamment le cas dans les scénarios qui comportent une animation. En mettant à jour un élément existant Transform, vous évitez de lancer un calcul de disposition inutile.

Générer votre arborescence de haut en bas

Quand un nœud est ajouté ou supprimé de l’arborescence logique, des invalidations de propriété sont déclenchées sur le parent du nœud et tous ses enfants. De ce fait, il convient de toujours suivre un modèle de construction de haut en bas pour éviter le coût d’invalidations inutiles sur des nœuds qui ont déjà été validés. Le tableau suivant montre la différence de vitesse d’exécution entre la création d’une arborescence vers le haut et le bas vers le haut, où l’arborescence est de 150 niveaux de profondeur avec un seul TextBlock et DockPanel à chaque niveau.

Action Construction d’arborescence (en ms) Rendu — construction d’arborescence incluse (en ms)
De bas en haut 366 454
De haut en bas 11 96

L’exemple de code suivant montre comment créer une arborescence de haut en bas.

private void OnBuildTreeTopDown(object sender, RoutedEventArgs e)
{
    TextBlock textBlock = new TextBlock();
    textBlock.Text = "Default";

    DockPanel parentPanel = new DockPanel();
    DockPanel childPanel;

    myCanvas.Children.Add(parentPanel);
    myCanvas.Children.Add(textBlock);

    for (int i = 0; i < 150; i++)
    {
        textBlock = new TextBlock();
        textBlock.Text = "Default";
        parentPanel.Children.Add(textBlock);

        childPanel = new DockPanel();
        parentPanel.Children.Add(childPanel);
        parentPanel = childPanel;
    }
}

Private Sub OnBuildTreeTopDown(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim textBlock As New TextBlock()
    textBlock.Text = "Default"

    Dim parentPanel As New DockPanel()
    Dim childPanel As DockPanel

    myCanvas.Children.Add(parentPanel)
    myCanvas.Children.Add(textBlock)

    For i As Integer = 0 To 149
        textBlock = New TextBlock()
        textBlock.Text = "Default"
        parentPanel.Children.Add(textBlock)

        childPanel = New DockPanel()
        parentPanel.Children.Add(childPanel)
        parentPanel = childPanel
    Next i
End Sub

Pour plus d’informations sur l’arborescence logique, consultez Arborescences dans WPF.

Voir aussi