How to create treeview from XML file using WPF?

Question

This is XML file

 <Root>
 <RootNode name="CurrentDbName" value="DeltaTest Backup" DesiPath="E:\BuildBackups">
 <ChildNode name="Application" value="App">
  <LeafNode name="Source" value="Source" SourcePath="E:\Alertv2" /> 
  <LeafNode name="Publish" value="Publish" SourcePath="C:\Alert_Source" /> 
  </ChildNode>
 <ChildNode name="Database" value="DB">
  <LeafNode name="Dev" value="Dev" SourcePath="C:\Kiran3" /> 
  <LeafNode name="Build" value="Build" SourcePath="C:\Kiran4" /> 
  </ChildNode>
  </RootNode>  </Root>

From this, I want to create a treeview in WPF and looks like

-Root
 --DeltaTestBaclup
  ---App
    ----Source
    ----Publish
  ---Db
    ----Dev
    ----Build

So please help me to create this treeview.

Answer 1

You can read about that here, an example from that site:

<TreeView Margin="10,10,0,13" Name="TreeView1" HorizontalAlignment="Left"
 VerticalAlignment="Top" Width="194" Height="200">
    <TreeViewItem Header="Cold Drinks">
        <TreeViewItem Header="Coke"></TreeViewItem>
        <TreeViewItem Header="Pepsi"></TreeViewItem>
        <TreeViewItem Header="Orange Juice"></TreeViewItem>
        <TreeViewItem Header="Milk"></TreeViewItem>
        <TreeViewItem Header="Iced Tea"></TreeViewItem>
        <TreeViewItem Header="Mango Shake"></TreeViewItem>
    </TreeViewItem>
</TreeView>

That would result in this

So in your case you need to add some more TreeViewItems and nest them up a bit, play with the above code to get the result you want!

Answer 2

Welcome to stackoverflow, if you could post some sample xml - it would help to visualise what your working towards. I think you need to use 1 or more HierarchicalDataTemplate.

Assuming an xml file called data.xml:

<?xml version="1.0" encoding="utf-8" ?>
<root>
     <item>
      <DeltaTestBaclup>aaa</DeltaTestBaclup>
      <App>bbb</App>
      <Source>ccc</Source>
      <Publish>ddd</Publish>
    </item>
    <item>
      <DeltaTestBaclup>aaa</DeltaTestBaclup>
      <App>bbb</App>
      <Source>ccc</Source>
      <Publish>ddd</Publish>
    </item>
</root>

You could use xaml something similar to:

 <Grid>
        <Grid.DataContext>
            <XmlDataProvider Source="data.xml"></XmlDataProvider>
        </Grid.DataContext>
        <Grid.Resources>
            <HierarchicalDataTemplate x:Key="ItemTemplate" DataType="item">
                <TextBlock>
                    <TextBlock Text="{Binding XPath=DeltaTestBaclup}" />
                    <LineBreak></LineBreak>
                    <TextBlock Text="{Binding XPath=App}" />
                    <LineBreak></LineBreak>
                    <TextBlock Text="{Binding XPath=Source}" />
                    <LineBreak></LineBreak>
                    <TextBlock Text="{Binding XPath=Publish}" />                    
                </TextBlock>
            </HierarchicalDataTemplate>
        </Grid.Resources>

        <TreeView  Name="treeView" 
                   ItemsSource="{Binding Path=.,XPath=/root/item}" 
                   ItemTemplate="{StaticResource ItemTemplate}">      
        </TreeView>
    </Grid>

Answer 3

Here is a way to do it programatically. This is based on this website's solution: http://social.msdn.microsoft.com/forums/en-US/xmlandnetfx/thread/01501a8e-898a-465e-92f9-ad6a16aae065

public YourWindow()
{
    InitializeComponent();
    BuildTree(treeView, XDocument.Load(System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), @"testxml.xml")));
}

private void BuildTree(TreeView treeView, XDocument doc)
{
    TreeViewItem treeNode = new TreeViewItem 
    {  
        //Should be Root
        Header = doc.Root.Name.LocalName,
        IsExpanded = true
    };
    treeView.Items.Add(treeNode);
    BuildNodes(treeNode, doc.Root);
}

private void BuildNodes(TreeViewItem treeNode, XElement element)
{
    foreach (XNode child in element.Nodes())
    {
        switch (child.NodeType)
        {
            case XmlNodeType.Element:
                XElement childElement = child as XElement;
                TreeViewItem childTreeNode = new TreeViewItem
                {
                    //Get First attribute where it is equal to value
                    Header = childElement.Attributes().First(s => s.Name == "value").Value ,
                    //Automatically expand elements
                    IsExpanded = true
                };
                treeNode.Items.Add(childTreeNode);
                BuildNodes(childTreeNode, childElement)
                break;
            case XmlNodeType.Text:
                XText childText = child as XText;
                treeNode.Items.Add(new TreeViewItem { Header = childText.Value, });
                break;
        }
    }
}

That code behind will build the tree to your spec. This is the XAML

<Grid>
    <TreeView Margin="20" Background="LightGray" x:Name="treeView" />
</Grid>