In this article I will show you some methods to process XAML. With "process" I mean the abilities to use the visual and the logical element tree and the possibilities to write and read XAML.

Logical element tree

The logical element tree contains all elements as they were defined through XAML or the code and shown in the GUI. The tree could always be determined through the properties "Content", "Children" and "Items". The logical tree doesn't contain elements like self defined animations, fill patterns or something else.

Visual element tree

The visual element tree contains all elements through which the GUI is painted at last. It contains only elements, which inherit from the classes "Visual" and "Visual3D", because only this elements could present themselves.

You can easily run through both trees with some utility classes, already defined in the WPF: "LogicalTreeHelper" and "VisualTreeHelper". The class "LogicalTreeHelper" offers the method "GetChildren()". This method returns an "IEnumerable" object. You can again easily run through this collection and identify the available children. The class "VisualTreeHelper" is a little bit different. It offers the method "GetChildCount()" which returns the number of available children. With this information you can create a for-loop and access the children through the method "GetChild()".

The following first code example shows the method, which goes through the collection "LogicalTreeHelper.GetChildren()" returns:

Loop for the logical element tree (13 lines, approx. 607 Bytes)

The second example shows the method, which uses the "VisualTreeHelper.GetChild()" method:

Loop for the visual element tree (12 lines, approx. 649 Bytes)

Normally, both trees are not really relevant, but maybe you can learn more about existing WPF elements and their internal design.

The two methods fill a TreeView element with items, as you can see on the screenshot at the left side. At the top there are one Button element, one Border element (filled with blue color) and one TextBox element. Inside the TreeView you can see the logical and the visual element tree of the current window, but without the TreeView itself, because it's created and added to the window at runtime. You can see very good the difference between both trees (the visual tree contains much more elements, because there are much more visual things needed, to draw the GUI.

Read and write XAML

One great functionality is the possibility to read and write XAML. You can use the class "XamlWriter" for writing XAML and the class "XamlReader" for reading. We can use this classes to load XAML dynamically at runtime. If you read XAML content out of a file, the result is an object. You must cast it to the root element of the XAML code you got out of the file, in order to use it.

The following example shows a little cut-out of the complete C# code. It retrieves the content of a selected file (through the "FileStream" object), get and cast the first element to a Grid (it must be a Grid in this simple example!) and sets this Grid as a child element of a border element:

Reading XAML in C# (14 lines, approx. 381 Bytes)

The screenshot shows the application after a file with XAML has been loaded successfully. As you maybe remember, it's the same example than in the WPF Part 2 of this series (rather the Loose XAML example). The same code can be loaded here! Just press the button and choose another XAML file. It will be loaded immediately into the Border element below the button.

Writing XAML in C# (19 lines, approx. 626 Bytes)

The last screenshot shows the example for writing XAML code. The window only contains a TextBox element (inside a Border element) with some text in it and a button. If you press the button, you can choose a XAML file. The complete Border element and everything in it will be written in the previous selected file.

Written XAML example (8 lines, approx. 271 Bytes)

You can download all examples (three projects) in one Visual Studio 2008 solution here.