Ottimizzazione delle prestazioni: Layout e progettazioneOptimizing Performance: Layout and Design

La progettazione dell'applicazione WPFWPF può influire sulle relative prestazioni, poiché crea un sovraccarico non necessario durante il calcolo del layout e la convalida dei riferimenti agli oggetti.The design of your WPFWPF application can impact its performance by creating unnecessary overhead in calculating layout and validating object references. La costruzione di oggetti, soprattutto in fase di runtime, può influire sulle caratteristiche di prestazioni dell'applicazione.The construction of objects, particularly at run time, can affect the performance characteristics of your application.

Questo argomento offre utili suggerimenti per il miglioramento delle prestazioni in queste aree.This topic provides performance recommendations in these areas.

LayoutLayout

Il termine "passaggio di layout" descrive il processo di misurazione e disposizione dei membri di un Panel-insieme di elementi figlio e di disegno sullo schermo dell'oggetto derivato.The term "layout pass" describes the process of measuring and arranging the members of a Panel-derived object's collection of children, and then drawing them onscreen. Il passaggio di layout è un processo molto complesso dal punto di vista matematico: più alto è il numero di elementi figlio presenti nella raccolta, maggiore è il numero di calcoli necessari.The layout pass is a mathematically-intensive process—the larger the number of children in the collection, the greater the number of calculations required. Ad esempio, ogni volta che un elemento figlio UIElement oggetto nella raccolta cambia posizione, ha la possibilità di attivare un nuovo passaggio dal sistema di layout.For example, each time a child UIElement object in the collection changes its position, it has the potential to trigger a new pass by the layout system. Data la stretta correlazione tra le caratteristiche dell'oggetto e il comportamento del layout, è importante capire i tipi di eventi che possono richiamare il sistema di layout.Because of the close relationship between object characteristics and layout behavior, it's important to understand the type of events that can invoke the layout system. Le prestazioni dell'applicazione risulteranno migliori se si riuscirà a ridurre al massimo le chiamate non necessarie al passaggio di layout.Your application will perform better by reducing as much as possible any unnecessary invocations of the layout pass.

Per ogni membro figlio di una raccolta vengono completati due passaggi: un passaggio di misurazione e uno di disposizione.The layout system completes two passes for each child member in a collection: a measure pass, and an arrange pass. Ogni oggetto figlio offre la propria implementazione sottoposta a override del Measure e Arrange metodi per fornire il proprio comportamento di layout specifico.Each child object provides its own overridden implementation of the Measure and Arrange methods in order to provide its own specific layout behavior. Nella forma più semplice, il layout è un sistema ricorsivo che fa sì che un elemento venga ridimensionato, posizionato e disegnato sullo schermo.At its simplest, layout is a recursive system that leads to an element being sized, positioned, and drawn onscreen.

  • Un elemento figlio UIElement oggetto inizia il processo di layout con la misurazione delle relative proprietà principali.A child UIElement object begins the layout process by first having its core properties measured.

  • L'oggetto FrameworkElement le proprietà correlate alle dimensioni, ad esempio Width, Height, e Margin, vengono valutati.The object's FrameworkElement properties that are related to size, such as Width, Height, and Margin, are evaluated.

  • Panel-viene applicata logica specifica, ad esempio la Dock proprietà del DockPanel, o il Orientation proprietà del StackPanel.Panel-specific logic is applied, such as the Dock property of the DockPanel, or the Orientation property of the StackPanel.

  • Il contenuto viene disposto, o posizionato, dopo la misurazione di tutti gli oggetti figlio.Content is arranged, or positioned, after all child objects have been measured.

  • La raccolta di oggetti figlio viene disegnata sullo schermo.The collection of child objects is drawn to the screen.

Il passaggio di layout viene nuovamente richiamato qualora si verifichi una delle azioni seguenti:The layout pass process is invoked again if any of the following actions occur:

  • Un oggetto figlio viene aggiunto alla raccolta.A child object is added to the collection.

  • Oggetto LayoutTransform viene applicato all'oggetto figlio.A LayoutTransform is applied to the child object.

  • Il UpdateLayout viene chiamato per l'oggetto figlio.The UpdateLayout method is called for the child object.

  • Se viene apportata una modifica al valore di una proprietà di dipendenza contrassegnata con metadati che incidono sul passaggio di misurazione o disposizione.When a change occurs to the value of a dependency property that is marked with metadata affecting the measure or arrange passes.

Usare il pannello più efficiente, se possibileUse the Most Efficient Panel where Possible

La complessità del processo di layout dipende direttamente dal comportamento di layout di Panel-degli elementi è utilizzare derivati.The complexity of the layout process is directly based on the layout behavior of the Panel-derived elements you use. Ad esempio, un Grid oppure StackPanel controllo offre molte più funzionalità rispetto a un Canvas controllo.For example, a Grid or StackPanel control provides much more functionality than a Canvas control. All'aumento delle funzionalità corrisponde, tuttavia, un maggiore dispendio in termini di prestazioni.The price for this greater increase in functionality is a greater increase in performance costs. Tuttavia, se la funzionalità non è necessario che un Grid fornisce controllo, è necessario usare le alternative meno costose, ad esempio un Canvas o un pannello personalizzato.However, if you do not require the functionality that a Grid control provides, you should use the less costly alternatives, such as a Canvas or a custom panel.

Per altre informazioni, vedere Cenni preliminari sugli elementi Panel.For more information, see Panels Overview.

Aggiornare anziché sostituire una proprietà RenderTransformUpdate Rather than Replace a RenderTransform

È possibile aggiornare una Transform anziché sostituirlo come valore di un RenderTransform proprietà.You may be able to update a Transform rather than replacing it as the value of a RenderTransform property. Questa possibilità può essere attuata soprattutto negli scenari con animazioni.This is particularly true in scenarios that involve animation. Aggiornando un oggetto esistente Transform, si evita di attivare un calcolo dell'oggetto layout non necessari.By updating an existing Transform, you avoid initiating an unnecessary layout calculation.

Compilare la struttura ad albero dall'alto in bassoBuild Your Tree Top-Down

Quando si aggiunge o si rimuove un nodo dall'albero logico, le convalide di proprietà vengono annullate sull'elemento padre e su tutti gli elementi figlio del nodo.When a node is added or removed from the logical tree, property invalidations are raised on the node's parent and all its children. Di conseguenza, è sempre consigliabile seguire un pattern di costruzione dall'alto in basso per evitare il costo di annullamenti di convalide non necessari su nodi già convalidati.As a result, a top-down construction pattern should always be followed to avoid the cost of unnecessary invalidations on nodes that have already been validated. La tabella seguente illustra la differenza in velocità di esecuzione tra la creazione di una struttura ad albero dall'alto in basso rispetto a basso in alto, in cui la struttura ad albero presenta 150 livelli di profondità con un unico TextBlock e DockPanel a ogni livello.The following table shows the difference in execution speed between building a tree top-down versus bottom-up, where the tree is 150 levels deep with a single TextBlock and DockPanel at each level.

AzioneAction Compilazione della struttura ad albero (in ms)Tree building (in ms) Rendering: include la compilazione della struttura ad albero (in ms)Render—includes tree building (in ms)
Dal basso in altoBottom-up 366366 454454
Dall'alto in bassoTop-down 1111 9696

L'esempio di codice seguente illustra come creare una struttura ad albero dall'alto in basso.The following code example demonstrates how to create a tree top down.

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

Per altre informazioni sull'albero logico, vedere Strutture ad albero in WPF.For more information on the logical tree, see Trees in WPF.

Vedere ancheSee also