Optimizar el rendimiento: Presentación y diseño

Artículo
10/07/2008

Actualización: noviembre 2007

El diseño de la aplicación WPF puede afectar a su rendimiento creando sobrecarga innecesaria para calcular el diseño y validar referencias de objeto. La construcción de objetos, particularmente 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 en estas áreas.

Diseño

El término "paso de diseño" describe el proceso de medir y organizar los miembros de una colección de secundarios del objeto derivado Panel y, a continuación, dibujarlos en la pantalla. El paso de diseño es un proceso matemáticamente intensivo: cuanto mayor sea el número de elementos secundarios de la colección, mayor será el número de cálculos requeridos. Por ejemplo, cada vez que un objeto UIElement secundario de la colección cambia de posición, puede activar un nuevo paso por el sistema de diseño. Debido a la estrecha relación entre las características de objeto y el comportamiento de diseño, es importante entender el tipo de eventos que puede invocar el sistema de diseño. La aplicación rendirá mejor reduciendo tanto como sea posible cualquier invocación innecesaria del paso de diseño.

El sistema de diseño completa dos pasos por cada miembro secundario de una colección: un paso de medida y paso de organización. Cada objeto secundario proporciona su propia implementación reemplazada de los métodos Measure y Arrange para proporcionar su propio comportamiento de diseño concreto. En su versión más simple, el diseño es un sistema recursivo que conduce a la configuración del tamaño, posición y representación de un elemento en la pantalla.

Un objeto UIElement secundario comienza el proceso de diseño con la medición de sus propiedades básicas.
Se evalúan las propiedades del objeto FrameworkElement relacionadas con el tamaño, tales como Width, Height y Margin.
Se aplica la lógica concreta de Panel, tal como la propiedad Dock de DockPanel o la propiedad Orientation de StackPanel.
El contenido se organiza o se coloca una vez medidos todos los objetos secundarios.
La colección de objetos secundarios se dibuja en la pantalla.

Se invoca de nuevo el proceso de paso de diseño si se produce cualquiera de las acciones siguientes:

Se agrega un objeto secundario a la colección.
Se aplica un objeto 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 marcada con metadatos que afectan a la medida o a los pasos de organización.

Utilizar el panel más eficaz cuando sea posible

La complejidad del proceso del diseño está basada directamente en el comportamiento de diseño de los elementos derivados de Panel que utiliza. Por ejemplo, un control Grid o StackPanel proporciona mucha más funcionalidad que un control Canvas. El precio de este mayor aumento de la funcionalidad es un aumento mayor de los costes de rendimiento. Sin embargo, si no requiere la funcionalidad que proporciona un control Grid, debería utilizar alternativas menos costosas, tales como un control Canvas o un panel personalizado.

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

Actualizar en lugar de reemplazar una propiedad RenderTransform

Quizá pueda actualizar un objeto Transform en lugar de reemplazarlo como valor de una propiedad RenderTransform. Esto es particularmente cierto en escenarios que impliquen animación. Actualizando un objeto Transformexistente, evitará iniciar un cálculo de diseño innecesario.

Generar un árbol descendente

Cuando se agrega o se quita un nodo del árbol lógico, se provocan invalidaciones de propiedad en el elemento primario del nodo y en todos sus elementos secundarios. Como resultado, siempre debe seguirse un modelo de construcción descendente, para evitar el costo de invalidaciones innecesarias en nodos ya validados. La tabla siguiente muestra la diferencia en velocidad de ejecución entre la generación de un árbol descendente frente a uno ascendente, donde el árbol tiene 150 niveles de profundidad con un objeto TextBlock y un objeto DockPanel únicos en cada nivel.

Acción	Generación del árbol (en ms)	Representación: incluye la generación del árbol (en ms)
Ascendente	366	454
Descendente	11	96

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

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

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