How to display folder structure from xml file to wpf treeview?

To display the data from your XML file in a TreeView, the data will be organized in a data model, which makes its manipulation and representation through the TreeView easy.

1. The data model

Every entry in the tree will derive from a common base type.

public abstract class NamedTreeEntry
{
    public string DisplayName { get; set; }
}

Since all entries will have to display a name, an appropriate property DisplayName is also declared within the base type.

For our case, two concrete types deriving from that base type have to be considered: directories and files.

public class FileEntry : NamedTreeEntry
{
    // ... and other file-specific public properties and methods
}

public class DirectoryEntry : NamedTreeEntry
{
    public ObservableCollection<NamedTreeEntry> ChildEntries
    {
        get { return _collChildren; }
    }
    private readonly ObservableCollection<NamedTreeEntry> _collChildren;

    public DirectoryEntry(IEnumerable<NamedTreeEntry> childEntries)
    {
        _collChildren = (childEntries != null) ?
            new ObservableCollection<NamedTreeEntry>(childEntries)
            : new ObservableCollection<NamedTreeEntry>();
    }

    // ... and other directory-specific public properties and methods
}

Note the usage of the ObservableCollection<T> type for the children list. Although not strictly necessary for the example outlined here, ObservableCollection<T> allows dynamically adding or removing child entries while the TreeView control is being kept up-to-date automatically.

2. Transforming the XML into the data model

Reading and transforming the XML data into the data model using the types introduced above can be rather straightforward. Using Linq (in conjunction with XDocument/XElement), the required code is only a few lines:

public DirectoryEntry CreateDataModelFromXml(Stream xmlFileStream)
{
    XDocument xDoc = XDocument.Load(xmlFileStream);
    return new DirectoryEntry(QueryChildEntries(xDoc.Element("Folder")))
    {
        Name = "ROOT"
    };
}

private IEnumerable<NamedTreeEntry> QueryChildEntries(XElement xElem)
{
    return
        from childElem in xElem.Elements()
        where childElem.Name == "dir" || childElem.Name == "file"
        select (childElem.Name == "file") ?
            (NamedTreeEntry) new FileEntry()
                {
                    Name = childElem.Element("name").Value
                }
            : new DirectoryEntry(QueryChildEntries(childElem))
                {
                    Name = childElem.Element("name").Value,
                };
}

For the sake of readability, any kind of exception handling and sanity checks have been omitted. In your real code, these things MUST be done. The given example code might behave funny if fed with malformed/incorrect XML data.

(This example code assumes the <dir>,<file> elements being children of the <Folder> node. However, in your XML, <dir>,<file> are children of the <FolderName> element, which looks like a mistake. If this is indeed intentional, you will need to adopt the example code accordingly.)

At an appropriate place in your source code, simply call:

DirectoryEntry rootEntry;
using (FileStream stream = new FileStream(xmlFilePathString, FileMode.Open, FileAccess.Read))
{
    rootEntry = CreateDataModelFromXml(stream);
}

3. The TreeView

Now, you only need to assign the collection with the top-level entries to the TreeView control (which is called MyTreeView in this example).

MyTreeView.ItemsSource = rootEntry.ChildEntries;

If you also want to display the root entry in the tree view, do something like the following:

MyTreeView.ItemsSource = new DirectoryEntry[] { rootEntry };

In your real code, you will probably use data binding in XAML instead of setting the ItemsSource property in code-behind.

Well, with what we have done so far, the TreeView control will show only the entries in the first level. But it will not show any child entries, simply because it does not know about them. Time to introduce HierarchicalDataTemplate. HierarchicalDataTemplate not only specifies the look and feel for an entry, but it also has a parameter to bind to the collection with child entries.

For a directory entry, the HierarchicalDataTemplate could look as follows:

<HierarchicalDataTemplate DataType="{x:Type My:DirectoryEntry}" ItemsSource="{Binding ChildEntries}">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Dir: " />
        <TextBlock Text="{Binding Name}" />
    </StackPanel>
</HierarchicalDataTemplate>

Note the DataType of the template, and the ItemsSource parameter which binds to DirectoryEntry's ChildEntries property with the collection of child entries.

For file entries a DataTemplate is sufficient, since they don't have children.

<DataTemplate DataType="{x:Type My:FileEntry}">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="File: " />
        <TextBlock Text="{Binding Name}" />
    </StackPanel>
</DataTemplate>

Now the TreeView control only needs to know which of these two templates is to be used for which entry. For many use cases, the TreeView control makes this very easy - just add these two templates to the TreeView control's local resource dictionary. The TreeView will select the first data template (HierarchicalDataTemplate is also a data template) from its resource dictionary whose data type matches that of the respective entry.

In summary, the complete XAML for the TreeView would look like this:

    <TreeView Name="MyTreeView">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type My:DirectoryEntry}" ItemsSource="{Binding ChildEntries}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Dir: " />
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </HierarchicalDataTemplate>
            <DataTemplate DataType="{x:Type My:FileEntry}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="File: " />
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </DataTemplate>
        </TreeView.Resources>
    </TreeView>

(In cases, where selection of a template by data type is not feasible, an ItemTemplateSelector can be used instead.)