Optimieren der Leistung: Layout und EntwurfOptimizing Performance: Layout and Design

Der Entwurf Ihrer WPFWPF-Anwendung kann die Leistung durch unnötigen Mehraufwand durch die Berechnung des Layouts und das Überprüfung von Objektverweisen beeinträchtigen.The design of your WPFWPF application can impact its performance by creating unnecessary overhead in calculating layout and validating object references. Das Erstellen von Objekten, insbesondere zur Laufzeit, kann sich auf die Leistungsmerkmale Ihrer Anwendung auswirken.The construction of objects, particularly at run time, can affect the performance characteristics of your application.

In diesem Thema erhalten Sie Empfehlungen bezüglich der Leistung in diesen Bereichen.This topic provides performance recommendations in these areas.

LayoutLayout

Der Begriff "Layoutdurchlauf" beschreibt den Prozess des Messens und Anordnens von Membern einer Panel-abgeleiteten Auflistung der untergeordneten Elemente, und zeichnen Sie dann auf dem Bildschirm dargestellt.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. Ein Layoutdurchlauf ist ein mathematisch aufwändiger Prozess; je mehr untergeordnete Elementen sich in der Auflistung befinden, desto mehr Berechnungen sind erforderlich.The layout pass is a mathematically-intensive process—the larger the number of children in the collection, the greater the number of calculations required. Beispielsweise jedes Mal, wenn ein untergeordnetes Element UIElement Objekt in der Auflistung seine Position ändert, müssen sie einen neuen Durchlauf des Layoutsystems auslösen.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. Aufgrund der engen Verbindung zwischen den Merkmalen des Objekts und dem Layoutverhalten ist es unumgänglich, den Ereignistyp zu verstehen, der das Layoutsystem aufrufen kann.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. Die Leistung Ihrer Anwendung wird optimiert, wenn Sie unnötige Aufrufe des Layoutdurchlaufs so weit wie möglich reduzieren.Your application will perform better by reducing as much as possible any unnecessary invocations of the layout pass.

Das Layoutsystem führt zwei Durchläufe für jeden untergeordneten Member in einer Auflistung durch: einen Messdurchlauf und einen Anordnungsdurchlauf.The layout system completes two passes for each child member in a collection: a measure pass, and an arrange pass. Jedes Objekt verfügt über seine eigene überschriebene Implementierung von der Measure und Arrange Methoden, um sein eigenes spezifisches Layoutverhalten bereitzustellen.Each child object provides its own overridden implementation of the Measure and Arrange methods in order to provide its own specific layout behavior. Ganz einfach ausgedrückt bedeutet dies, dass Layout ein rekursives System ist, das die Größe und Position eines Elements anpasst und dieses auf dem Bildschirm zeichnet.At its simplest, layout is a recursive system that leads to an element being sized, positioned, and drawn onscreen.

  • Ein untergeordnetes Element UIElement Objekt startet den Layoutvorgang, indem zuerst dessen Kerneigenschaften gemessen.A child UIElement object begins the layout process by first having its core properties measured.

  • Des Objekts FrameworkElement Eigenschaften, die der Größe,, z. B. verknüpft sind Width, Height, und Margin, ausgewertet werden.The object's FrameworkElement properties that are related to size, such as Width, Height, and Margin, are evaluated.

  • Panel-spezifische Logik angewendet wird, wie z. B. die Dock Eigenschaft der DockPanel, oder die Orientation Eigenschaft der StackPanel.Panel-specific logic is applied, such as the Dock property of the DockPanel, or the Orientation property of the StackPanel.

  • Nachdem alle untergeordneten Objekte ausgemessen wurden, wird der Inhalt angeordnet oder positioniert.Content is arranged, or positioned, after all child objects have been measured.

  • Die Auflistung der untergeordneten Objekte wird auf dem Bildschirm dargestellt.The collection of child objects is drawn to the screen.

Der Layoutdurchlauf wird erneut aufgerufen, wenn eine der folgenden Aktionen ausgeführt wird:The layout pass process is invoked again if any of the following actions occur:

  • Ein untergeordnetes Objekt wird der Auflistung hinzugefügt.A child object is added to the collection.

  • Ein LayoutTransform auf das untergeordnete Objekt angewendet wird.A LayoutTransform is applied to the child object.

  • Die UpdateLayout Methode für das untergeordnete Objekt aufgerufen wird.The UpdateLayout method is called for the child object.

  • Wenn sich der Wert einer Abhängigkeitseigenschaft ändert, die mit Metadaten markiert ist, die die Messungs- oder Anordnungsdurchläufe beeinflussenWhen a change occurs to the value of a dependency property that is marked with metadata affecting the measure or arrange passes.

Verwenden Sie das effizienteste Panel soweit möglichUse the Most Efficient Panel where Possible

Die Komplexität im Layoutprozess basiert direkt auf das Layoutverhalten der Panel-abgeleitete Elemente, die Sie verwenden.The complexity of the layout process is directly based on the layout behavior of the Panel-derived elements you use. Z. B. eine Grid oder StackPanel Steuerelement bietet viel mehr Funktionen als ein Canvas Steuerelement.For example, a Grid or StackPanel control provides much more functionality than a Canvas control. Für diese erhöhte Funktionalität büßen Sie an Leistung ein.The price for this greater increase in functionality is a greater increase in performance costs. Jedoch wenn Sie nicht die Funktionalität benötigen, die eine Grid Steuerelement bereitgestellt werden, sollten Sie weniger leistungsaufwändige alternativen verwenden, z. B. Verwenden einer Canvas oder ein benutzerdefiniertes Panel.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.

Weitere Informationen finden Sie unter Übersicht über Panel-Elemente.For more information, see Panels Overview.

Aktualisieren Sie RenderTransform, statt es zu ersetzenUpdate Rather than Replace a RenderTransform

Möglicherweise zum Aktualisieren einer Transform statt zu ersetzen es als Wert für eine RenderTransform Eigenschaft.You may be able to update a Transform rather than replacing it as the value of a RenderTransform property. Dies gilt besonders für Szenarios mit Animation.This is particularly true in scenarios that involve animation. Durch das Aktualisieren einer vorhandenen Transform, Sie vermeiden, Initiieren einer unnötigen layoutberechnung.By updating an existing Transform, you avoid initiating an unnecessary layout calculation.

Erstellen Sie Ihre Struktur von oben nach untenBuild Your Tree Top-Down

Wenn der logischen Struktur ein Knoten hinzugefügt oder dieser entfernt wird, werden Eigenschafteninvalidierungen auf dem übergeordneten und allen untergeordneten Elementen des Knotens ausgelöst.When a node is added or removed from the logical tree, property invalidations are raised on the node's parent and all its children. Demzufolge sollte immer ein Oben-nach-unten-Erstellmuster eingehalten werden, um unnötige Invalidierungen auf Knoten zu verhindern, die bereits validiert wurden.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. Die folgende Tabelle zeigt den Unterschied in der ausführungsgeschwindigkeit zwischen dem Erstellen einer Struktur von oben nach unten und von unten nach oben, in denen die Struktur 150 Ebenen mit einem einzelnen ist TextBlock und DockPanel auf jeder Ebene.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.

AktionAction Strukturerstellung (in ms)Tree building (in ms) Rendern, einschließlich Strukturerstellung (in ms)Render—includes tree building (in ms)
Unten-nach-obenBottom-up 366366 454454
Oben-nach-untenTop-down 1111 9696

Im folgenden Code wird veranschaulicht, wie Sie eine Struktur von oben nach unten erstellen können.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

Weitere Informationen über die logische Struktur finden Sie unter Strukturen in WPF.For more information on the logical tree, see Trees in WPF.

Siehe auchSee also