WPF: Logical and Visual Trees

WPF’s hierarchical structure requires a new conceptual model of application structure, which takes the form of an element tree

WPF's hierarchical structure requires a new conceptual model of application structure, which takes the form of an element tree. Two types of element trees are required to adequately represent an element structure: a Logical Tree and a Visual Tree.

LOGICAL TREE: The Logical Tree is a tree structure that represents the hierarchy of controls and elements that constitute a piece of user interface in WPF, but without their inner parts. The logical tree is responsible for:

1. Inherit DependencyProperty values
2. Resolving DynamicResources references
3. Looking up element names for bindings
4. Forwaring RoutedEvents

Example:

DockPanel
 +ListBox
   +Button
   +Button
   +Button

VISUAL TREE: The Visual Tree is a tree structure that represents the fine-grained hierarchy of Visuals that constitute what appears on the screen. It contains the same elements as the Logical Tree, but includes all the Visuals that are used to compose the Logical Tree's controls and elements, like the ControlTemplates and DataTemplates. The visual tree is responsible for:

1. Rendering visual elements
2. Propagate element opacity
3. Propagate Layout- and RenderTransforms
4. Propagate the IsEnabled property.
5. Do Hit-Testing
6. RelativeSource 

Example:

DockPanel
    +ListBox
      +Border
        +...
        +VirtualizingStackPanel
          +ListBoxItem
            +Button
              +Border
              +....