WPF - Elementbaum

Es gibt viele Technologien, bei denen die Elemente und Komponenten in einer Baumstruktur angeordnet sind, sodass die Programmierer das Objekt leicht handhaben und das Verhalten einer Anwendung ändern können. Windows Presentation Foundation (WPF) verfügt über eine umfassende Baumstruktur in Form von Objekten. In WPF gibt es zwei Möglichkeiten, einen vollständigen Objektbaum zu konzipieren:

• Logische Baumstruktur
• Visuelle Baumstruktur

Mithilfe dieser Baumstrukturen können Sie auf einfache Weise die Beziehung zwischen UI-Elementen erstellen und identifizieren. Meistens verwenden WPF-Entwickler und -Designer entweder eine prozedurale Sprache, um eine Anwendung zu erstellen, oder sie entwerfen den UI-Teil der Anwendung in XAML unter Berücksichtigung der Objektbaumstruktur.

Logische Baumstruktur

In WPF-Anwendungen repräsentiert die Struktur der UI-Elemente in XAML die logische Baumstruktur. In XAML werden die Grundelemente der Benutzeroberfläche vom Entwickler deklariert. Der logische Baum in WPF definiert Folgendes:

• Abhängigkeitseigenschaften
• Statische und dynamische Ressourcen
• Bindung der Elemente an den Namen usw.

Schauen wir uns das folgende Beispiel an, in dem eine Schaltfläche und ein Listenfeld erstellt werden.

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

Wenn Sie sich den XAML-Code ansehen, sehen Sie eine Baumstruktur, dh der Stammknoten ist das Fenster, und innerhalb des Stammknotens gibt es nur ein untergeordnetes Element, nämlich StackPanel. StackPanel enthält jedoch zwei untergeordnete Elemente, die Schaltfläche und das Listenfeld. Das Listenfeld enthält drei weitere untergeordnete Listenfeldelemente.

Visuelle Baumstruktur

In WPF beschreibt das Konzept des visuellen Baums die Struktur visueller Objekte, wie sie durch die Visual Base Class dargestellt wird. Es kennzeichnet alle UI-Elemente, die auf dem Ausgabebildschirm gerendert werden.

Wenn ein Programmierer eine Vorlage für ein bestimmtes Steuerelement erstellen möchte, rendert er tatsächlich den visuellen Baum dieses Steuerelements. Der visuelle Baum ist auch sehr nützlich für diejenigen, die aus Leistungs- und Optimierungsgründen Steuerelemente auf niedrigerer Ebene zeichnen möchten.

In WPF-Anwendungen wird der visuelle Baum verwendet für -

• Rendern der visuellen Objekte.
• Layouts rendern.
• Die gerouteten Ereignisse wandern meistens entlang des visuellen Baums, nicht entlang des logischen Baums.

Um den visuellen Baum der obigen einfachen Anwendung zu sehen, der eine Schaltfläche und ein Listenfeld enthält, kompilieren wir den XAML-Code und führen ihn aus. Das folgende Fenster wird angezeigt.

Wenn die Anwendung ausgeführt wird, können Sie den visuellen Baum der ausgeführten Anwendung im Fenster "Live Visual Tree" sehen, in dem die vollständige Hierarchie dieser Anwendung angezeigt wird (siehe unten).

Der visuelle Baum ist normalerweise eine Obermenge des logischen Baums. Sie können hier sehen, dass alle logischen Elemente auch im visuellen Baum vorhanden sind. Diese beiden Bäume sind also eigentlich nur zwei verschiedene Ansichten derselben Gruppe von Objekten, aus denen die Benutzeroberfläche besteht.

• Der logische Baum lässt viele Details aus, sodass Sie sich auf die Kernstruktur der Benutzeroberfläche konzentrieren und die Details der genauen Darstellung ignorieren können.

• Mit dem logischen Baum erstellen Sie die Grundstruktur der Benutzeroberfläche.

• Der visuelle Baum ist von Interesse, wenn Sie sich auf die Präsentation konzentrieren. Wenn Sie beispielsweise das Erscheinungsbild eines UI-Elements anpassen möchten, müssen Sie den visuellen Baum verwenden.