How to implement Tree concepts in WPF Applications

Tree in WPF:-
All elements of  a WPF UI (User Interface) are hierarchically related.The template of WPF contains two types of tree concepts...

1. Logical Tree
2. Visual Tree.

Why we use Logical and visual tree in WPF:-

We generally use these two tree (Logical & visual ) in WPF application  A WPF application uses multiple controls to develop a real application with the help of XAML .Each control consist of more primitive controls.

Ex .  Label control :-

 It contains the following UI element classes:-

1.) Border

2.) Content presenter 

3.) Text Block

Here Label is a part of a logical tree . Border ,Contentpresenter & Text Block are the part of visual tree.

These elements are visual children of label control .It is helpful to rendering the Label values We can't display the Label control's values without this visual tree(Border ,  Contentpresenter & Text Block). So these both tree are important to visualize the UI element in WPF Application.

Logical Tree:-

• Each Element that we explicitly add to window ,be it layout control or content will be part of the window's logical tree.This tree is the exact representation of what you have specified to be display. 
• The Logical Tree describes the relationship between elements of UI (user interface).

Advantage:-

• It inherit the dependency property values.
• It is used to binding the elements.
• It is used for forwarding the Routing events.
• It is helpful to resolve the dynamic resources.
• It is used as a root element in any template.

Example:-

XAML Codes:-

<DockPanel>
            <Label>Ram</Label>
            <Label>Mohan</Label>
            <Button Click="Onclick">Submit</Button>
 </DockPanel>

Visual Tree:-

• The Visual tree Contains all the rendering information needed to compose the output to a display device (computer).These are harder to visualize by looking at codes.
• The Visual tree contains all the Logical elements + Visual elements of the UI (Template) of each element.

Advantage:-

1. It is helpful to rendering (displaying) the visual elements.
2. It contains number of additional UI element classes for each entry in the logical tree.
3. It propagate the IsEnabled Properties.
4. It propagate the ambiguity. 

Example1

XAML Codes:-

<StackPanel>
    <Label>Hello Friends...</Label>
    <Button Click="Onclick">Submit</Button>
 </StackPanel>

Example 2:-

XAML Codes:-

<Button Click="Onclick">Submit</Button>

Note :-
The WPF tool, XAMLPAD ,provides an option for viewing and exploring the visual tree that corresponds to the currently defined XAML Content.

Visual Tree V/S Logical Tree

UI Thread Visual and Render Thread Composition Tree:-

• The Render thread is responsible for creating and managing a composition tree based on the visual tree.
• It is responsible for taking to Direct3D and rendering the content.
• The wpf threading model is STA .This Means that like other UI technology such as window Forms,Only the thread that create the UI is allowed to access it.

Example:-

Note:- In this post, I have mostly used Images so that student can easily understand the actual concepts of Tree in WPF Application.
Please share this application with your friends.....