Optimización del diseño XAML

Las APIs importantes

• Panel de

El diseño es el proceso de definir la estructura visual de la interfaz de usuario. El mecanismo principal para describir el diseño en XAML es a través de paneles, que son objetos contenedores que permiten colocar y organizar los elementos de la interfaz de usuario dentro de ellos. El diseño puede ser una parte costosa de una aplicación XAML, tanto en el uso de CPU como en la sobrecarga de memoria. Estos son algunos pasos sencillos que puedes seguir para mejorar el rendimiento del diseño de la aplicación XAML.

Reducir la estructura de diseño

La mayor ganancia en el rendimiento del diseño proviene de simplificar la estructura jerárquica del árbol de elementos de la interfaz de usuario. Los paneles existen en el árbol visual, pero son elementos estructurales, no píxeles que producen elementos como un botón de o un rectángulo de . Simplifique el árbol reduciendo el número de elementos que no producen píxeles normalmente proporciona un aumento significativo del rendimiento.

Muchas interfaces de usuario se implementan mediante el anidamiento de paneles, lo que da como resultado árboles profundos y complejos de paneles y elementos. Resulta conveniente anidar paneles, pero en muchos casos la misma interfaz de usuario puede lograrse con un solo panel más complejo. El uso de un único panel proporciona un mejor rendimiento.

Cuándo reducir la estructura de diseño

La reducción de la estructura de diseño de una manera trivial (por ejemplo, la reducción de un panel anidado desde la página de nivel superior) no tiene un efecto notable.

Las mayores ganancias de rendimiento proceden de reducir la estructura de diseño que se repite en la interfaz de usuario, como en una ListView o GridView. Estos elementos ItemsControl utilizan un DataTemplatede , que define un subárbol de elementos de UI que se instancia múltiples veces. Cuando el mismo subárbol se duplica muchas veces en la aplicación, cualquier mejora en el rendimiento de ese subárbol tiene un efecto multiplicativo en el rendimiento general de la aplicación.

Ejemplos

Tenga en cuenta la siguiente interfaz de usuario.

ejemplo de diseño de formulario de

En estos ejemplos se muestran tres formas de implementar la misma interfaz de usuario. Cada opción de implementación da como resultado píxeles casi idénticos en la pantalla, pero difiere sustancialmente en los detalles de implementación.

Option1: Elementos StackPanel anidados

Aunque este es el modelo más sencillo, usa 5 elementos de panel y da como resultado una sobrecarga significativa.

  <StackPanel>
  <TextBlock Text="Options:" />
  <StackPanel Orientation="Horizontal">
      <CheckBox Content="Power User" />
      <CheckBox Content="Admin" Margin="20,0,0,0" />
  </StackPanel>
  <TextBlock Text="Basic information:" />
  <StackPanel Orientation="Horizontal">
      <TextBlock Text="Name:" Width="75" />
      <TextBox Width="200" />
  </StackPanel>
  <StackPanel Orientation="Horizontal">
      <TextBlock Text="Email:" Width="75" />
      <TextBox Width="200" />
  </StackPanel>
  <StackPanel Orientation="Horizontal">
      <TextBlock Text="Password:" Width="75" />
      <TextBox Width="200" />
  </StackPanel>
  <Button Content="Save" />
</StackPanel>

Opción 2: una única cuadrícula

El Grid agrega cierta complejidad, pero solo usa un solo elemento de panel.

<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <TextBlock Text="Options:" Grid.ColumnSpan="2" />
  <CheckBox Content="Power User" Grid.Row="1" Grid.ColumnSpan="2" />
  <CheckBox Content="Admin" Margin="150,0,0,0" Grid.Row="1" Grid.ColumnSpan="2" />
  <TextBlock Text="Basic information:" Grid.Row="2" Grid.ColumnSpan="2" />
  <TextBlock Text="Name:" Width="75" Grid.Row="3" />
  <TextBox Width="200" Grid.Row="3" Grid.Column="1" />
  <TextBlock Text="Email:" Width="75" Grid.Row="4" />
  <TextBox Width="200" Grid.Row="4" Grid.Column="1" />
  <TextBlock Text="Password:" Width="75" Grid.Row="5" />
  <TextBox Width="200" Grid.Row="5" Grid.Column="1" />
  <Button Content="Save" Grid.Row="6" />
</Grid>

Opción 3: Una sola RelativePanel:

Este único panel también es un poco más complejo que usar paneles anidados, pero puede ser más fácil de entender y mantener que un Grid.

<RelativePanel>
  <TextBlock Text="Options:" x:Name="Options" />
  <CheckBox Content="Power User" x:Name="PowerUser" RelativePanel.Below="Options" />
  <CheckBox Content="Admin" Margin="20,0,0,0" 
            RelativePanel.RightOf="PowerUser" RelativePanel.Below="Options" />
  <TextBlock Text="Basic information:" x:Name="BasicInformation"
           RelativePanel.Below="PowerUser" />
  <TextBlock Text="Name:" RelativePanel.AlignVerticalCenterWith="NameBox" />
  <TextBox Width="200" Margin="75,0,0,0" x:Name="NameBox"               
           RelativePanel.Below="BasicInformation" />
  <TextBlock Text="Email:"  RelativePanel.AlignVerticalCenterWith="EmailBox" />
  <TextBox Width="200" Margin="75,0,0,0" x:Name="EmailBox"
           RelativePanel.Below="NameBox" />
  <TextBlock Text="Password:" RelativePanel.AlignVerticalCenterWith="PasswordBox" />
  <TextBox Width="200" Margin="75,0,0,0" x:Name="PasswordBox"
           RelativePanel.Below="EmailBox" />
  <Button Content="Save" RelativePanel.Below="PasswordBox" />
</RelativePanel>

Como se muestra en estos ejemplos, hay muchas maneras de lograr la misma interfaz de usuario. Debe elegir teniendo en cuenta cuidadosamente todas las ventajas, incluido el rendimiento, la legibilidad y el mantenimiento.

Use cuadrículas de una sola celda para la superposición de interfaz de usuario.

Un requisito común de la interfaz de usuario es tener un diseño en el que los elementos se superpongan entre sí. Normalmente, el relleno, los márgenes, las alineaciones y las transformaciones se usan para colocar los elementos de esta manera. El control Grid de XAML está optimizado para mejorar el rendimiento del diseño de los elementos que se superponen.

importante Para ver la mejora, use una Grid de una sola celda. No defina las rowDefinitions ni las columnDefinitions.

Ejemplos

<Grid>
    <Ellipse Fill="Red" Width="200" Height="200" />
    <TextBlock Text="Test" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center" />
</Grid>

<Grid Width="200" BorderBrush="Black" BorderThickness="1">
    <TextBlock Text="Test1" HorizontalAlignment="Left" />
    <TextBlock Text="Test2" HorizontalAlignment="Right" />
</Grid>

Usar las propiedades de borde integradas de un panel

Grid, StackPanel, RelativePanely ContentPresenter controles tienen propiedades de borde integradas que permiten dibujar un borde alrededor de ellos sin agregar un elemento Border adicional a tu XAML. Las nuevas propiedades que admiten el borde integrado son: BorderBrush, BorderThickness, CornerRadiusy Padding. Cada uno de estos es un propiedad de dependencia, por lo que puede utilizarlos con vinculaciones y animaciones. Están diseñados para ser un reemplazo completo de un elemento Border independiente.

Si la interfaz de usuario tiene elementos de borde alrededor de estos paneles, use el borde integrado en su lugar, lo que ahorra un elemento adicional en la estructura de diseño de la aplicación. Como se mencionó anteriormente, esto puede ser un ahorro significativo, especialmente en el caso de la interfaz de usuario repetida.

Ejemplos

<RelativePanel BorderBrush="Red" BorderThickness="2" CornerRadius="10" Padding="12">
    <TextBox x:Name="textBox1" RelativePanel.AlignLeftWithPanel="True"/>
    <Button Content="Submit" RelativePanel.Below="textBox1"/>
</RelativePanel>

Utilice eventos SizeChanged para responder a los cambios de diseño

La clase FrameworkElement expone dos eventos similares para responder a los cambios de diseño: LayoutUpdated y SizeChanged. Es posible que esté usando uno de estos eventos para recibir notificaciones cuando se cambia el tamaño de un elemento durante el diseño. La semántica de los dos eventos es diferente y hay consideraciones de rendimiento importantes al elegir entre ellos.

Para obtener un buen rendimiento, SizeChanged es casi siempre la opción correcta. SizeChanged tiene semántica intuitiva. Se eleva durante la disposición cuando se ha actualizado el tamaño del FrameworkElement de .

LayoutUpdated también se genera durante el diseño, pero tiene semántica global, se genera en cada elemento cada vez que se actualiza cualquier elemento. Es habitual realizar solo el procesamiento local en el controlador de eventos, en cuyo caso el código se ejecuta con más frecuencia de lo necesario. Use LayoutUpdated solo si necesita saber cuándo se cambia la posición de un elemento sin cambiar el tamaño (que es poco frecuente).

Elección entre paneles

El rendimiento no suele considerarse al elegir entre paneles individuales. Normalmente, esa opción se realiza teniendo en cuenta qué panel proporciona el comportamiento de diseño más cercano a la interfaz de usuario que está implementando. Por ejemplo, si elige entre Grid, StackPanel y RelativePanel, debe elegir el panel que proporciona la asignación más cercana al modelo mental de la implementación.

Cada panel XAML está optimizado para un buen rendimiento y todos los paneles proporcionan un rendimiento similar para una interfaz de usuario similar.