Difference between Logical Tree and Visual Tree in WPF
In this article we will focus on the differences between the Logical Tree and Visual Tree in WPF. This is very important and useful concept to know if you want to know about the controls.
A Logical Tree comprises of the elements as they are listed in the XAML whereas a Visual Tree comprises of the parts that make up the controls and panels.
In this article we will focus on the differences between the Logical Tree and Visual Tree in WPF. This is very important and useful concept to know if you want to know about the controls.
To simplify the concept, Let us consider the following xaml:
<Window x:Class="WPFXamlDemo.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Demo" Height="300" Width="300">
<StackPanel>
<TextBlock>This is Demo</TextBlock>
<Button>Click Here</Button>
</StackPanel>
</Window>
A xaml file is an xml file that contains nodes which in turn might contain one or more nodes. This forms a Tree like containment structure.
In the above xaml, we have a simple window that contains a stackpanel which in turn contains a TextBlock and a Button.
Here Window, StackPanel, TextBlock, Button form a Tree of elements.
In WPF we have Logical Tree and Visual Tree. Let us focus on what makes a logical Tree and What is a Visual Tree.
A Logical Tree comprises of the elements as they are listed in the XAML. For Example in the above xaml: Window, StackPanel, TextBlock, Button are part of logical tree.
A Visual Tree comprises of the parts that make up the controls and panels. For Example, in the above xaml, the following is a Visual Tree
a. Window element internally contains a Border,AdornerDecorator,ContentPresenter and StackPanel
b. StackPanel contains a TextBlock and Button
c. Button internally comprises of Chrome, ContentPresenter, TextBlock