Explain the difference between visual and logical tree in WPF?

WPF UI is represented in XAML which is a XML format. In XML elements are arranged in a hierarchical fashion. For example if you look at the below XAML (it has been downsized for simplicity) we have a Window element, the window element has a Grid control and the grid control has a button inside it.


So if you visualize the above XAML logically you can think that the button control is a child element of the Grid and the grid is the child element of the Window. This relationship between the elements which looks logical looking at the XAML is termed as “Logical tree”.

Logical Tree and Visual Tree

Logical Tree and Visual Tree

But now to display this Logical tree on to your screen you need lot of visual elements. like border, text etc. So when you add these visual elements to the logical tree that complete structure is termed as “Visual Tree”.