Compartir a través de

Optimizando el rendimiento: disposición y diseño

El diseño de la aplicación WPF puede afectar a su rendimiento mediante la creación de una sobrecarga innecesaria para 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 en estas áreas.

Diseño

El término "pase de diseño" describe el proceso de medir y organizar los elementos de la colección de hijos de un objeto derivado de Panel, y luego dibujarlos en la pantalla. El paso de diseño es un proceso matemáticamente intensivo. Cuanto mayor sea el número de elementos secundarios en la colección, mayor será la cantidad de cálculos necesarios. Por ejemplo, cada vez que un objeto secundario UIElement de la colección cambia su posición, tiene la posibilidad de desencadenar un nuevo pase 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 comprender el tipo de eventos que pueden invocar el sistema de diseño. La aplicación funcionará mejor reduciendo tanto como sea posible las invocaciones innecesarias del pase de diseño.

El sistema de diseño completa dos pases para cada elemento hijo de una colección: un pase de medida y un pase de organización. Cada objeto secundario proporciona su propia implementación sobrescrita de los métodos Measure y Arrange para proporcionar su propio comportamiento de diseño específico. En su forma más sencilla, el diseño es un sistema recursivo que conduce a que un elemento tenga el tamaño, la posición y el dibujo en pantalla.

  • Un objeto secundario UIElement comienza el proceso de diseño al medir primero sus propiedades principales.

  • Las propiedades del FrameworkElement objeto relacionadas con el tamaño, como Width, Heighty Margin, se evalúan.

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

  • El contenido se organiza o coloca una vez que todos los objetos secundarios han sido medidos.

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

El proceso de paso de diseño se invoca de nuevo si se produce alguna de las acciones siguientes:

  • Se agrega un objeto secundario a la colección.

  • Se aplica LayoutTransform al objeto secundario.

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

  • Cuando se produce un cambio en el valor de una propiedad de dependencia marcada con metadatos que afectan a las pasadas de medida o organización.

Usar el Panel más eficaz siempre que sea posible

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

Para obtener más información, consulte Información general sobre paneles.

Actualizar en lugar de reemplazar un renderTransform

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

Construye tu árbol Top-Down

Cuando se agrega o quita un nodo del árbol lógico, las invalidaciones de propiedad se generan en el elemento primario del nodo y en todos sus elementos secundarios. Como resultado, siempre se debe seguir un patrón de construcción de arriba abajo para evitar el costo de invalidaciones innecesarias en los nodos que ya se han validado. En la tabla siguiente se muestra la diferencia en la velocidad de ejecución entre construir un árbol de arriba hacia abajo frente a de abajo hacia arriba, donde el árbol tiene una profundidad de 150 niveles con un único TextBlock y DockPanel en cada nivel.

Acción Creación de árboles (en ms) Render: incluye la construcción de árboles (en ms)
Desde abajo 366 454
De arriba a abajo 11 96

En el ejemplo de código siguiente se muestra cómo crear un árbol de arriba 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, vea Árboles en WPF.

Consulte también