Ottimizzazione delle prestazioni: layout e progettazione

Articolo
08/11/2011

La progettazione dell'applicazione WPF può influire sulle relative prestazioni, poiché crea un sovraccarico non necessario durante il calcolo del layout e la convalida dei riferimenti agli oggetti. La costruzione degli oggetti, in particolare in fase di esecuzione, può influire sulle caratteristiche di prestazione dell'applicazione.

In questo argomento vengono forniti i requisiti relativi alle prestazioni in queste aree.

Layout

Con il termine "passaggio di layout" si intende descrivere il processo di misurazione e disposizione dei membri di un insieme di elementi figlio dell'oggetto derivato dall'oggetto Panel e di disegno sullo schermo. Il passaggio di layout è un processo molto complesso dal punto di vista matematico: più alto è il numero di elementi figlio presenti nell'insieme, maggiore è il numero di calcoli necessari. Ad esempio, ogni volta che un oggetto UIElement figlio dell'insieme cambia posizione, il sistema di layout può eseguire un nuovo passaggio. Data la stretta relazione tra caratteristiche dell'oggetto e comportamento del layout, è importante comprendere il tipo di eventi che possono richiamare il sistema di layout. Le prestazioni dell'applicazione risulteranno migliori riducendo il più possibile le chiamate non necessarie al passaggio di layout.

Per ogni membro figlio di un insieme vengono completati due passaggi, uno di misurazione e uno di disposizione. Ogni oggetto figlio fornisce la propria implementazione sottoposta a override dei metodi Measure e Arrange per fornire uno specifico comportamento di layout. Nella sua forma più semplice, il layout è un sistema ricorsivo di ridimensionamento, posizionamento e disegno sullo schermo di un elemento.

Il processo di layout di un oggetto UIElement figlio ha inizio con la fase di misurazione delle relative proprietà principali.
Vengono valutate le proprietà FrameworkElement dell'oggetto correlate alle dimensioni, ad esempio Width, Heighte Margin.
Viene applicata la logica specifica dell'oggetto Panel, ad esempio la proprietà Dock di DockPanel o la proprietà Orientation di StackPanel.
Il contenuto viene disposto, o posizionato, dopo la misurazione di tutti gli oggetti figlio.
L'insieme di oggetti figlio viene disegnato sullo schermo.

Il passaggio di layout viene nuovamente richiamato qualora si verifichi una delle azioni elencate di seguito:

Un oggetto figlio viene aggiunto all'insieme.
Viene applicata una proprietà LayoutTransform all'oggetto figlio.
Viene chiamato il metodo UpdateLayout per l'oggetto figlio.
Quando viene apportata una modifica al valore di una proprietà di dipendenza contrassegnata con metadati che influiscono sul passaggio di misurazione o disposizione.

Utilizzare il pannello più efficiente, se possibile

La complessità del processo di layout dipende direttamente dal comportamento di layout degli elementi derivati da Panel utilizzati. Un controllo Grid o StackPanel, ad esempio, fornisce un numero maggiore di funzionalità rispetto a un controllo Canvas. All'aumento delle funzionalità corrisponde, tuttavia, un maggiore dispendio in termini di prestazioni. Pertanto, se le funzionalità fornite da un controllo Grid non sono necessarie, è consigliabile utilizzare le alternative meno costose, ad esempio un oggetto Canvas o un pannello personalizzato.

Per ulteriori informazioni, vedere Cenni preliminari sugli elementi Panel.

Aggiornare anziché sostituire una proprietà RenderTransform

È possibile aggiornare un oggetto Transform anziché sostituirlo come valore di una proprietà RenderTransform. Questa possibilità riguarda soprattutto gli scenari con animazione. Aggiornando un oggetto Transform esistente si evita di dare inizio a un calcolo di layout non necessario.

Compilare la struttura ad albero dall'alto in basso

Quando si aggiunge o rimuove un nodo dall'albero logico, le convalide di proprietà vengono annullate sull'elemento padre e su tutti gli elementi figlio del nodo. Di conseguenza, è consigliabile attenersi a un pattern di costruzione dall'alto in basso per evitare il costo di annullamenti di convalide non necessari su nodi che sono già stati convalidati. Nella tabella riportata di seguito viene illustrata la differenza nella velocità di esecuzione che si riscontra compilando una struttura ad albero dall'alto in basso o dal basso in alto, dove la struttura ad albero presenta 150 livelli di profondità con un singolo oggetto TextBlock e DockPanel a ogni livello.

Azione	Compilazione della struttura ad albero (in ms)	Rendering: include la compilazione della struttura ad albero (in ms)
Dal basso in alto	366	454
Dall'alto in basso	11	96

Nell'esempio di codice riportato di seguito viene illustrato come creare una struttura ad albero dall'alto in basso.

        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

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;
    }
}

Per ulteriori informazioni sull'albero logico, vedere Strutture ad albero in WPF.