Compartir vía

Optimizar el rendimiento: Presentación y diseño

  • Artículo

El diseño de su aplicación WPF puede afectar a su rendimiento si se crea una sobrecarga innecesaria al calcular el diseño y validar las referencias de objeto. La construcción de objetos, especialmente en tiempo de ejecución, puede afectar a las características de rendimiento de la aplicación.

En este tema se proporcionan recomendaciones de rendimiento para estas áreas.

Layout

El término "pase de diseño" describe el proceso de medición y organización de los miembros de una colección de elementos secundarios derivados del objeto Panel y su posterior dibujo en pantalla. El pase de diseño es un proceso matemáticamente intensivo: cuanto mayor sea el número de elementos secundarios de la colección, mayor es el número de cálculos necesarios. Por ejemplo, cada vez que un objeto UIElement secundario cambia de posición en la colección, tiene potencial para desencadenar un nuevo pase por el sistema de diseño. Debido a la estrecha relación entre las características del objeto y el comportamiento de diseño, es importante conocer el tipo de eventos que puede invocar el sistema de diseño. La aplicación funcionará mejor si se reduce tanto como sea posible cualquier invocación innecesaria del pase de diseño.

El sistema de diseño completa dos pases por cada miembro secundario de una colección: un pase de medición y un pase de organización. Cada objeto secundario proporciona su propia implementación anulada de los métodos Measure y Arrange para proporcionar su propio comportamiento de diseño específico. En su forma más simple, el diseño es un sistema recursivo que permite dibujar y situar un elemento, así como cambiar su tamaño en pantalla.

  • Un objeto secundario UIElement comienza el proceso de maquetación midiendo primero sus propiedades principales.

  • Se evalúan las propiedades FrameworkElement del objeto relacionadas con el tamaño, como Width, Height y Margin.

  • Se aplica la lógica específica de Panel, como la propiedad Dock de DockPanel, o la propiedad Orientation de StackPanel.

  • El contenido se organiza o se sitúa después de haberse medido todos los objetos secundarios.

  • La colección de objetos secundarios se dibuja en la pantalla.

Se vuelve a invocar el proceso de pase de diseño si se produce alguna de las siguientes acciones:

  • Un objeto secundario se agrega a la colección.

  • Se aplica un LayoutTransform al objeto secundario.

  • Se llama al método UpdateLayout para el objeto secundario.

  • Cuando se produce un cambio en el valor de una propiedad de dependencia que se marca con metadatos que afectan a los pases de medición o de organización.

Usar el panel más eficaz cuando sea posible

La complejidad del proceso de diseño se basa directamente en el comportamiento de diseño de los elementos derivados de Panel que use. Por ejemplo, un control Grid o StackPanel proporciona mucha más funcionalidad que un control Canvas. El precio de este mayor aumento de funcionalidad es el mayor aumento de los costos de rendimiento. Sin embargo, si no necesita la funcionalidad que proporciona un control Grid, debe usar alternativas menos costosas, como Canvas o un panel personalizado.

Para más información, consulte Información general sobre elementos Panel.

Actualizar en lugar de reemplazar una propiedad RenderTransform

Es posible que pueda actualizar Transform en lugar de sustituirlo por el valor de una propiedad RenderTransform. Esto es especialmente cierto en escenarios que implican animación. Al actualizar un objeto Transform existente, evite iniciar un cálculo de diseño innecesario.

Compilar el árbol de arriba a abajo

Cuando se agrega o se quita un nodo del árbol lógico, se generan invalidaciones de propiedades en el elemento principal del nodo y en todos sus elementos secundarios. Como resultado, siempre debe seguir un patrón de compilación de arriba a abajo para evitar el costo de invalidaciones innecesarias en los nodos que ya están validados. En la siguiente tabla, se muestra la diferencia en la velocidad de ejecución entre la compilación de un árbol de arriba a abajo en comparación con la compilación de abajo a arriba, en el que el árbol tiene 150 niveles de profundidad con un solo objeto TextBlock y DockPanel en cada nivel.

Acción Compilación del árbol (en ms) Representar: incluye la compilación del árbol (en ms)
De abajo a arriba 366 454
De arriba a abajo 11 96

En el siguiente ejemplo de código se muestra cómo crear un árbol de arriba a abajo.

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

Para obtener más información sobre el árbol lógico, consulte Árboles en WPF.

Vea también