WPF - Árbol de elementos

Hay muchas tecnologías donde los elementos y componentes están ordenados en una estructura de árbol para que los programadores puedan manejar fácilmente el objeto y cambiar el comportamiento de una aplicación. Windows Presentation Foundation (WPF) tiene una estructura de árbol completa en forma de objetos. En WPF, hay dos formas en que se conceptualiza un árbol de objetos completo:

  • Estructura de árbol lógico
  • Estructura de árbol visual

Con la ayuda de estas estructuras de árbol, puede crear e identificar fácilmente la relación entre los elementos de la interfaz de usuario. En su mayoría, los desarrolladores y diseñadores de WPF usan un lenguaje de procedimientos para crear una aplicación o diseñar la parte de la interfaz de usuario de la aplicación en XAML teniendo en cuenta la estructura del árbol de objetos.

Estructura de árbol lógico

En las aplicaciones WPF, la estructura de los elementos de la interfaz de usuario en XAML representa la estructura del árbol lógico. En XAML, el desarrollador declara los elementos básicos de la interfaz de usuario. El árbol lógico en WPF define lo siguiente:

  • Propiedades de dependencia
  • Recursos estáticos y dinámicos
  • Vinculando los elementos en su nombre, etc.

Echemos un vistazo al siguiente ejemplo en el que se crean un botón y un cuadro de lista.

<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 observa el código XAML, observará una estructura de árbol, es decir, el nodo raíz es la ventana y dentro del nodo raíz, solo hay un hijo, que es StackPanel. Pero StackPanel contiene dos elementos secundarios, botón y cuadro de lista. El cuadro de lista tiene tres elementos de cuadro de lista secundarios más.

Estructura de árbol visual

En WPF, el concepto de árbol visual describe la estructura de los objetos visuales, tal como los representa la clase Visual Base. Significa todos los elementos de la interfaz de usuario que se representan en la pantalla de salida.

Cuando un programador quiere crear una plantilla para un control en particular, en realidad está renderizando el árbol visual de ese control. El árbol visual también es muy útil para aquellos que desean dibujar controles de nivel inferior por razones de rendimiento y optimización.

En las aplicaciones WPF, el árbol visual se utiliza para:

  • Renderizando los objetos visuales.
  • Renderizando los diseños.
  • Los eventos enrutados viajan principalmente a lo largo del árbol visual, no del árbol lógico.

Para ver el árbol visual de la aplicación simple anterior que contiene un botón y un cuadro de lista, compilemos y ejecutemos el código XAML y verá la siguiente ventana.

Cuando la aplicación se está ejecutando, puede ver el árbol visual de la aplicación en ejecución en la ventana Live Visual Tree que muestra la jerarquía completa de esta aplicación, como se muestra a continuación.

El árbol visual suele ser un superconjunto del árbol lógico. Puede ver aquí que todos los elementos lógicos también están presentes en el árbol visual. Entonces, estos dos árboles son en realidad solo dos vistas diferentes del mismo conjunto de objetos que componen la interfaz de usuario.

  • El árbol lógico omite muchos detalles, lo que le permite centrarse en la estructura principal de la interfaz de usuario e ignorar los detalles de cómo se ha presentado exactamente.

  • El árbol lógico es lo que utiliza para crear la estructura básica de la interfaz de usuario.

  • El árbol visual será de interés si se está enfocando en la presentación. Por ejemplo, si desea personalizar la apariencia de cualquier elemento de la interfaz de usuario, deberá utilizar el árbol visual.