Edit TreeView Nodes from XML document

Question

I have one XML file that look like this:-

I want to display it like this image:-

How can I re-format/populate the output for each node like in the image? I have tried populate treeview from XML using below code:

private void AddNode(XmlNode inXmlNode, TreeNode inTreeNode)
    {
        if (inXmlNode is XmlElement)
        {
           foreach (var att in inXmlNode.Attributes.Cast<XmlAttribute>().Where(a => !a.IsNamespaceDeclaration()))
            {
                inTreeNode.Text = FirstCharToUpper(att.Name) + ": " + att.Value;
            }

            foreach (XmlNode xNode in inXmlNode.ChildNodes)
            {
                var tNode = inTreeNode.Nodes[inTreeNode.Nodes.Add(new TreeNode(xNode.Name))];
                AddNode(xNode, tNode);
            }
        }
        else
        {
            inTreeNode.Text = (inXmlNode.OuterXml).Trim();
        }
        treeViewMenu.ExpandAll();
    }

And I get the output like this:-

Already refer to this post: Replacing the innertext of an Xml node/element

However I still unclear about the flow or at which part I have to change.