Optimiser votre mise en page XAML

Les APIs importantes

• panneau

La disposition est le processus de définition de la structure visuelle de votre interface utilisateur. Le mécanisme principal permettant de décrire la disposition en XAML consiste à utiliser des panneaux, qui sont des objets conteneur qui vous permettent de positionner et d’organiser les éléments d’interface utilisateur au sein d’eux. La disposition peut être une partie coûteuse d’une application XAML, à la fois dans l’utilisation du processeur et la surcharge de mémoire. Voici quelques étapes simples que vous pouvez effectuer pour améliorer les performances de disposition de votre application XAML.

Réduire la structure de disposition

Le plus grand gain en performances de disposition provient de simplifier la structure hiérarchique de l’arborescence des éléments d’interface utilisateur. Les panneaux existent dans l’arborescence visuelle, mais ils sont des éléments structurels, pas pixels produisant des éléments comme un bouton ou unrectangle . La simplification de l’arborescence en réduisant le nombre d’éléments qui ne produisent pas de pixels offre généralement une augmentation significative des performances.

De nombreuses interfaces utilisateur sont implémentées par l'imbrication de panneaux, ce qui entraîne des arborescences de panneaux et d'éléments à la fois profondes et complexes. Il est pratique d’imbriquer des panneaux, mais dans de nombreux cas, la même interface utilisateur peut être obtenue avec un seul panneau plus complexe. L’utilisation d’un seul panneau offre de meilleures performances.

Quand réduire la structure de disposition

Réduire la structure de disposition d’une manière triviale ( par exemple, réduire un panneau imbriqué de votre page de niveau supérieur) n’a pas d’effet notable.

Les gains de performances les plus importants proviennent de la réduction de la structure de disposition répétée dans l’interface utilisateur, comme dans un ListView ou GridView. Ces éléments ItemsControl utilisent une DataTemplate , qui définit une sous-arborescence d'éléments d'interface utilisateur instanciée plusieurs fois. Lorsque la même sous-arborescence est dupliquée plusieurs fois dans votre application, toutes les améliorations apportées aux performances de cette sous-arborescence ont un effet multiplicatif sur les performances globales de votre application.

Exemples

Considérez l’interface utilisateur suivante.

Ces exemples montrent 3 façons d’implémenter la même interface utilisateur. Chaque choix d’implémentation entraîne des pixels presque identiques sur l’écran, mais diffère sensiblement dans les détails de l’implémentation.

Option1 : éléments StackPanel imbriqués

Bien qu’il s’agit du modèle le plus simple, il utilise 5 éléments de panneau et entraîne une surcharge significative.

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

Option 2 : une seule grille

La grille ajoute une certaine complexité, mais n’utilise qu’un seul élément de panneau.

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

Option 3 : Un seul RelativePanel:

Ce panneau unique est également un peu plus complexe que l’utilisation de panneaux imbriqués, mais peut être plus facile à comprendre et à gérer qu’une grille.

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

Comme le montrent ces exemples, il existe de nombreuses façons d’atteindre la même interface utilisateur. Vous devez choisir en examinant soigneusement tous les compromis, notamment les performances, la lisibilité et la maintenance.

Utiliser des grilles à cellule unique pour les éléments superposés de l’interface utilisateur

Une exigence courante en matière d’interface utilisateur consiste à disposer d’une disposition où les éléments se chevauchent les uns les autres. En règle générale, le remplissage, les marges, les alignements et les transformations sont utilisés pour positionner les éléments de cette façon. Le contrôle XAML Grid est optimisé pour améliorer les performances de mise en page des éléments qui se chevauchent.

Important pour voir l’amélioration, utilisez une grille à cellule unique. Ne définissez pas RowDefinitions ou ColumnDefinitions.

Exemples

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

Utiliser les propriétés de bordure intégrées d’un panneau

grid, StackPanel, RelativePanel et contrôles ContentPresenter ont des propriétés de bordure intégrées qui vous permettent de dessiner une bordure autour de celles-ci sans ajouter d’élément Border supplémentaire à votre code XAML. Les nouvelles propriétés qui prennent en charge la bordure intégrée sont : BorderBrush, BorderThickness, CornerRadius et Padding. Chacun d’eux est un DependencyProperty, ce qui vous permet de les utiliser avec des liaisons et des animations. Ils sont conçus pour être un remplacement complet d’un élément Border distinct.

Si votre interface utilisateur a des éléments de bordure autour de ces panneaux, utilisez plutôt la bordure intégrée par défaut, ce qui économise un élément supplémentaire dans la structure de disposition de votre application. Comme mentionné précédemment, cela peut être une économie significative, en particulier dans le cas d’une interface utilisateur répétée.

Exemples

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

Utilisez les événements SizeChanged pour répondre aux modifications de mise en page

La classe FrameworkElement expose deux événements similaires pour répondre aux modifications de disposition : LayoutUpdated et SizeChanged. Vous pouvez utiliser l’un de ces événements pour recevoir une notification lorsqu’un élément est redimensionné pendant la disposition. La sémantique des deux événements est différente, et il existe des considérations importantes en matière de performances dans leur choix.

Pour de bonnes performances, SizeChanged est presque toujours le bon choix. SizeChanged a une sémantique intuitive. Il est signalé lors de la mise en page lorsque la taille du FrameworkElement a été mise à jour.

LayoutUpdated est également déclenché pendant la mise en page, mais il a une sémantique globale : il est déclenché sur chaque élément à chaque mise à jour d'un élément. Il est courant d’effectuer uniquement un traitement local dans le gestionnaire d’événements, auquel cas le code est exécuté plus souvent que nécessaire. Utilisez LayoutUpdated uniquement si vous devez savoir quand un élément est repositionné sans modifier la taille (ce qui est rare).

Choix entre les panneaux

Les performances ne sont généralement pas un facteur à prendre en compte lors du choix entre des panneaux individuels. Ce choix est généralement fait en considérant quel panneau fournit le comportement de disposition le plus proche de l’interface utilisateur que vous implémentez. Par exemple, si vous choisissez entre Grid, StackPanel et RelativePanel, vous devez choisir le panneau qui fournit le mappage le plus proche de votre modèle mental de l’implémentation.

Chaque panneau XAML est optimisé pour de bonnes performances, et tous les panneaux fournissent des performances similaires pour une interface utilisateur similaire.