#113 – An Application for Viewing a WPF Visual Tree

Here’s a little WPF application that can load .xaml files and then display the underlying logical and visual trees. It uses the LogicalTreeHelper.GetChildren and VisualTreeHelper.GetChild methods to recursively descend through the logical and visual trees and display them in two TreeView controls.  (Currently only works if root element of the .xaml file is a <Window> element).

You can download an executable version of the application from: DisplayWpfTrees.zip

You can find a more detailed explanation of the application at: An Application to Let You View WPF Logical Trees

You can find full source code at the WPFLogicalTree project on Codeplex.

#110 – An Application for Viewing a WPF Logical Tree

Here’s a little WPF application that can load .xaml files and then display the underlying logical tree.  It uses the LogicalTreeHelper.GetChildren method to recursively descend through the logical tree and display it in a TreeView control.

You can download an executable version of the application from: DisplayWpfTrees.zip

You can find a more detailed explanation of the application at: An Application to Let You View WPF Logical Trees

You can find full source code at the WPFLogicalTree project on Codeplex.

#109 – Navigating the Logical Tree in Code

You can use the LogicalTreeHelper.GetChildren method to traverse a logical tree and enumerate all of the objects in the tree.

Every element in a logical tree is a DependencyObject, so you pass a top-level object that derives from DependencyObject into the GetChildren method.  The method returns a collection of children of that object.

 // Enumerate each immediate child of main window.  (Does NOT descend down tree)
 foreach (Object obj in LogicalTreeHelper.GetChildren(mainWindow as DependencyObject))
     Debug.WriteLine(obj.ToString());

You could extend this example and descend down the logical tree by calling GetChildren on the children returned from the first call.

#108 – The Logical Tree

In WPF, the logical tree is the hierarchy of elements that make up your user interface.  If your user interface is defined in XAML, the logical tree is the set of elements from the XAML, organized into a tree based on their parent/child relationships.

The logical tree can also be thought of as a model that describes the relationships between objects at runtime.  Knowing the logical tree can be helpful in understanding:

  • Resource lookup
  • Property inheritance
  • Event routing

As an example, the logical tree for the following XAML:

 <Window x:Class="WpfApplication4.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Title="A window.." Height="350" Width="525">
     <StackPanel>
         <Button Content="Click Me" Height="23" HorizontalAlignment="Left" Width="75" Click="button1_Click" />
         <TextBox />
         <ListBox>
             <ListBoxItem Content="Barley"/>
             <ListBoxItem Content="Oats"/>
         </ListBox>
     </StackPanel>
 </Window>

looks like this:

#32 – FrameworkElement

The FrameworkElement class inherits from UIElement and is in turn the parent class for all controls in WPF.

FrameworkElement builds on UIElement and adds the following functionality:

  • Layout – implements a layout model by implementing properties like HorizontalAlignment, MinWidth and Margin
  • Support of animation through BeginStoryboard method
  • Data binding
  • Data templates for binding
  • Styles

FrameworkElement is also the main base class for objects that will be added to a logical tree (a hierarchy of visual objects that comprise your user interface).