WPF - Elements Tree

In WPF, there are two ways that a complete object tree is conceptualized, as shown below.

• Logical Tree structure
• Visual Tree structure

With the help of these tree structures, you can easily create and identify the relationship between UI elements. Mostly, WPF developers and designers either use procedural language to create an Application or design UI part of the Application in XAML by keeping in mind; Object Tree structure.

Logical Tree structure

In WPF Applications, the structure of UI elements in XAML represents Logical Tree structure. In XAML, the basic elements of UI are declared by the developer. Logical tree in WPF defines the following,

• Dependency properties.
• Static and dynamic resources.
• Binding the elements on its name etc.

Let’s have a look at the example given below in which a button and a list box are created.

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

If you look at XAML code, you will observe a Tree structure, i.e. the root node is Window and inside the root node, there is only one child, i.e. StackPanel but StackPanel contains two child elements, button and list box. List box has three more child list box items.

Visual Tree structure

In WPF, the concept of the visual tree describes the structure of visual objects, as represented by Visual Base Class. It signifies all UI elements, which are rendered to the output screen.

When a programmer wants to create a template for a particular control, he is actually rendering a visual tree of that control. The visual tree is also very useful for those, who want to draw lower level controls for the performance and optimization reasons.

In WPF Applications, visual tree is used for

• Rendering visual objects.
• Rendering layouts.
• The routed events mostly travel along Visual Tree and not Logical Tree.

To see Visual Tree of the above simple Application, which contains a button and a list box, let’s compile and execute XAML code and you will see the Window given below.

When the Application is running, you can see Visual Tree of the running Application in Live Visual Tree Window, which shows the complete hierarchy of this Application, as shown below.

Visual tree is typically a superset of Logical Tree. You can see here that all the logical elements are also present in the Visual Tree. These two trees are really just two different views of the same set of the objects, which makes up UI.

• Logical Tree leaves out a lot of detail, which enables you to focus on the core structure of the user interface and to ignore the details of exactly how it has been presented.
• Logical Tree is what you use to create the basic structure of the user interface.
• Visual Tree will be of interest, if you're focusing on the presentation. For example, if you wish to customize the appearance of any UI element, you will need to use Visual Tree.