WPF - Árvore de Elementos

Existem muitas tecnologias em que os elementos e componentes são ordenados em uma estrutura de árvore para que os programadores possam manipular facilmente o objeto e alterar o comportamento de um aplicativo. O Windows Presentation Foundation (WPF) possui uma estrutura de árvore abrangente na forma de objetos. No WPF, existem duas maneiras de conceituar uma árvore de objetos completa -

Estrutura Lógica da Árvore
Estrutura da Árvore Visual

Com a ajuda dessas estruturas de árvore, você pode criar e identificar facilmente o relacionamento entre os elementos da IU. Principalmente, os desenvolvedores e designers do WPF usam a linguagem procedural para criar um aplicativo ou projetam a parte da interface do usuário do aplicativo em XAML tendo em mente a estrutura da árvore do objeto.

Estrutura Lógica da Árvore

Em aplicativos WPF, a estrutura dos elementos da interface do usuário em XAML representa a estrutura lógica da árvore. Em XAML, os elementos básicos da IU são declarados pelo desenvolvedor. A árvore lógica no WPF define o seguinte -

Propriedades de dependência
Recursos estáticos e dinâmicos
Vinculando os elementos em seu nome etc.

Vamos dar uma olhada no exemplo a seguir, no qual um botão e uma caixa de listagem são criados.

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

Se você observar o código XAML, verá uma estrutura de árvore, ou seja, o nó raiz é a janela e dentro do nó raiz, há apenas um filho, que é StackPanel. Mas StackPanel contém dois elementos filhos, botão e caixa de listagem. A caixa de listagem possui mais três itens de caixa de listagem filha.

Estrutura da Árvore Visual

No WPF, o conceito de árvore visual descreve a estrutura dos objetos visuais, conforme representado pela Classe Base Visual. Significa todos os elementos da IU que são renderizados na tela de saída.

Quando um programador deseja criar um modelo para um controle específico, ele está realmente renderizando a árvore visual desse controle. A árvore visual também é muito útil para aqueles que desejam desenhar controles de nível inferior por motivos de desempenho e otimização.

Em aplicativos WPF, a árvore visual é usada para -

Renderizando os objetos visuais.
Renderizando os layouts.
Os eventos roteados principalmente viajam ao longo da árvore visual, não a árvore lógica.

Para ver a árvore visual do aplicativo simples acima, que contém um botão e uma caixa de listagem, vamos compilar e executar o código XAML e você verá a janela a seguir.

Quando o aplicativo está em execução, você pode ver a árvore visual do aplicativo em execução na janela Live Visual Tree que mostra a hierarquia completa deste aplicativo, conforme mostrado abaixo.

A árvore visual é normalmente um superconjunto da árvore lógica. Você pode ver aqui que todos os elementos lógicos também estão presentes na árvore visual. Portanto, essas duas árvores são, na verdade, apenas duas visualizações diferentes do mesmo conjunto de objetos que compõem a IU.

A árvore lógica deixa de fora muitos detalhes, permitindo que você se concentre na estrutura central da interface do usuário e ignore os detalhes de como exatamente ela foi apresentada.
A árvore lógica é o que você usa para criar a estrutura básica da interface do usuário.
A árvore visual será interessante se você estiver se concentrando na apresentação. Por exemplo, se desejar personalizar a aparência de qualquer elemento da IU, você precisará usar a árvore visual.