WPF - Arbre des éléments

Il existe de nombreuses technologies dans lesquelles les éléments et les composants sont classés dans une arborescence afin que les programmeurs puissent facilement manipuler l'objet et modifier le comportement d'une application. Windows Presentation Foundation (WPF) possède une arborescence complète sous la forme d'objets. Dans WPF, il existe deux façons de conceptualiser une arborescence d'objets complète:

Arborescence logique
Arborescence visuelle

À l'aide de ces arborescences, vous pouvez facilement créer et identifier la relation entre les éléments de l'interface utilisateur. La plupart du temps, les développeurs et concepteurs WPF utilisent un langage procédural pour créer une application ou conçoivent la partie interface utilisateur de l'application en XAML en gardant à l'esprit la structure de l'arborescence des objets.

Arborescence logique

Dans les applications WPF, la structure des éléments d'interface utilisateur en XAML représente l'arborescence logique. En XAML, les éléments de base de l'interface utilisateur sont déclarés par le développeur. L'arbre logique dans WPF définit ce qui suit -

Propriétés de dépendance
Ressources statiques et dynamiques
Lier les éléments sur son nom etc.

Jetons un coup d'œil à l'exemple suivant dans lequel un bouton et une zone de liste sont créés.

<Window x:Class = "WPFElementsTree.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button x:Name = "button" Height = "30" Width = "70" Content = "OK" Margin = "20" /> 
		
      <ListBox x:Name = "listBox" Height = "100" Width = "100" Margin = "20"> 
         <ListBoxItem Content = "Item 1" /> 
         <ListBoxItem Content = "Item 2" /> 
         <ListBoxItem Content = "Item 3" /> 
      </ListBox> 
		
   </StackPanel> 
	
</Window>

Si vous regardez le code XAML, vous observerez une structure arborescente, c'est-à-dire que le nœud racine est la fenêtre et à l'intérieur du nœud racine, il n'y a qu'un seul enfant, c'est StackPanel. Mais StackPanel contient deux éléments enfants, un bouton et une zone de liste. La zone de liste a trois autres éléments de zone de liste enfants.

Arborescence visuelle

Dans WPF, le concept de l'arborescence visuelle décrit la structure des objets visuels, représentée par la classe Visual Base. Il signifie tous les éléments de l'interface utilisateur qui sont rendus sur l'écran de sortie.

Lorsqu'un programmeur souhaite créer un modèle pour un contrôle particulier, il rend en fait l'arborescence visuelle de ce contrôle. L'arbre visuel est également très utile pour ceux qui souhaitent dessiner des contrôles de niveau inférieur pour des raisons de performances et d'optimisation.

Dans les applications WPF, l'arborescence visuelle est utilisée pour -

Rendu des objets visuels.
Rendu des mises en page.
Les événements routés voyagent principalement le long de l'arborescence visuelle, pas de l'arborescence logique.

Pour voir l'arborescence visuelle de l'application simple ci-dessus qui contient un bouton et une zone de liste, compilons et exécutons le code XAML et vous verrez la fenêtre suivante.

Lorsque l'application est en cours d'exécution, vous pouvez voir l'arborescence visuelle de l'application en cours d'exécution dans la fenêtre Live Visual Tree qui montre la hiérarchie complète de cette application, comme indiqué ci-dessous.

L'arbre visuel est généralement un sur-ensemble de l'arbre logique. Vous pouvez voir ici que tous les éléments logiques sont également présents dans l'arborescence visuelle. Ainsi, ces deux arbres ne sont en réalité que deux vues différentes du même ensemble d'objets qui composent l'interface utilisateur.

L'arbre logique laisse de côté beaucoup de détails vous permettant de vous concentrer sur la structure de base de l'interface utilisateur et d'ignorer les détails de la façon exacte dont elle a été présentée.
L'arbre logique est ce que vous utilisez pour créer la structure de base de l'interface utilisateur.
L'arbre visuel sera intéressant si vous vous concentrez sur la présentation. Par exemple, si vous souhaitez personnaliser l'apparence de n'importe quel élément de l'interface utilisateur, vous devrez utiliser l'arborescence visuelle.