WPF - Дерево элементов

Существует множество технологий, в которых элементы и компоненты упорядочены в древовидной структуре, чтобы программисты могли легко обрабатывать объект и изменять поведение приложения. Windows Presentation Foundation (WPF) имеет исчерпывающую древовидную структуру в виде объектов. В WPF есть два способа концептуализации полного дерева объектов:

Логическая древовидная структура
Визуальная древовидная структура

С помощью этих древовидных структур вы можете легко создать и идентифицировать отношения между элементами пользовательского интерфейса. В основном разработчики и дизайнеры WPF либо используют процедурный язык для создания приложения, либо проектируют часть пользовательского интерфейса приложения в XAML с учетом древовидной структуры объектов.

Логическая древовидная структура

В приложениях WPF структура элементов пользовательского интерфейса в XAML представляет собой логическую древовидную структуру. В XAML основные элементы пользовательского интерфейса объявляются разработчиком. Логическое дерево в WPF определяет следующее:

Свойства зависимости
Статические и динамические ресурсы
Привязка элементов к его имени и т. Д.

Давайте посмотрим на следующий пример, в котором созданы кнопка и список.

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

Если вы посмотрите на код XAML, вы увидите древовидную структуру, то есть корневой узел - это Window, а внутри корневого узла есть только один дочерний элемент, это StackPanel. Но StackPanel содержит два дочерних элемента, кнопку и поле со списком. Окно списка имеет еще три дочерних элемента списка.

Визуальная древовидная структура

В WPF концепция визуального дерева описывает структуру визуальных объектов, представленную базовым классом Visual. Он обозначает все элементы пользовательского интерфейса, которые отображаются на экране вывода.

Когда программист хочет создать шаблон для определенного элемента управления, он фактически визуализирует визуальное дерево этого элемента управления. Визуальное дерево также очень полезно для тех, кто хочет рисовать элементы управления более низкого уровня по причинам производительности и оптимизации.

В приложениях WPF визуальное дерево используется для -

Визуализация визуальных объектов.
Рендеринг макетов.
Перенаправленные события в основном перемещаются по визуальному дереву, а не по логическому дереву.

Чтобы увидеть визуальное дерево вышеупомянутого простого приложения, которое содержит кнопку и поле со списком, давайте скомпилируем и выполним код XAML, и вы увидите следующее окно.

Когда приложение запущено, вы можете увидеть визуальное дерево работающего приложения в окне Live Visual Tree, которое показывает полную иерархию этого приложения, как показано ниже.

Визуальное дерево обычно является надмножеством логического дерева. Здесь вы можете видеть, что все логические элементы также присутствуют в визуальном дереве. Таким образом, эти два дерева на самом деле представляют собой два разных представления одного и того же набора объектов, составляющих пользовательский интерфейс.

Логическое дерево не учитывает множество деталей, позволяя вам сосредоточиться на основной структуре пользовательского интерфейса и игнорировать детали того, как именно он был представлен.
Логическое дерево - это то, что вы используете для создания базовой структуры пользовательского интерфейса.
Визуальное дерево будет интересно, если вы сосредоточитесь на презентации. Например, если вы хотите настроить внешний вид любого элемента пользовательского интерфейса, вам нужно будет использовать визуальное дерево.