Aprende a representar un archivo / cadena XML en un widget TreeView en su aplicación Winforms.

Cómo representar un archivo/cadena XML en un componente TreeView en Winforms con C#

¿Está buscando una forma de convertir un documento XML completo en un TreeView de Winforms expandible? Seguramente no querrá recorrer cada nodo y escribir muchos "si" de acuerdo con el tipo y los datos que contiene el nodo, ¿no es así? En su lugar, queremos compartir con usted un enfoque interesante sobre cómo representar automáticamente cualquier estructura de archivo XML en un componente TreeView de Winforms que le facilitará la vida.

En este artículo, le mostraremos cómo renderizar un documento XML completo en un TreeView de su aplicación Winforms con C #.

1. Comprensión de la lógica de renderizado

En este ejemplo, tendremos una treeView1variable que representa un componente TreeView agregado al formulario mediante Arrastrar y soltar desde la caja de herramientas. Como primer paso, debe crear una variable que contenga la cadena XML, esto se puede obtener de una fuente local o remota, por lo que básicamente depende de usted cómo recuperar los datos del archivo XML que desea representar. A continuación, cree una nueva estructura de a XmlDocumentcon la cadena de datos XML que tiene utilizando el LoadXmlmétodo de la instancia creada.

Como asumimos que es posible que ya tenga algunos datos en el treeView, borraremos todos los nodos antes del proceso de renderizado usando el Nodes.Clearmétodo del TreeView. Ahora, como sabe, en cada archivo XML hay un nombre de documento que define de qué trata el archivo, por ejemplo:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<url>
		<loc>https://www.sitemaps.org/</loc>
		<lastmod>2016-11-21</lastmod>
	</url>
</urlset>

En el archivo XML anterior, el nombre del documento es urlset, y así sucesivamente con otros archivos xml. En nuestra lógica, también agregaremos este nodo y contendrá básicamente todos los nodos del archivo. Esto debe hacerse manualmente, así que agregue el nodo al treeView con Node.Addy luego, almacene este nodo en una variable que proporcionaremos como argumento para el método auxiliar AddNode:

try
{
    // 1. Leer archivo XML desde una ruta local
    string xmlString = File.ReadAllText(@"C:\Users\sdkca\Desktop\myXMLFile.xml", Encoding.UTF8);

    // 2. Cree un documento DOM XML y cargue los datos en él.
    XmlDocument dom = new XmlDocument();
    dom.LoadXml(xmlString);

    // 3. Inicialice el control TreeView. treeView1 se puede crear dinámicamente
    // y adjunto al formulario o simplemente puede arrastrar y soltar el widget desde la caja de herramientas
    // en el formulario.

    // Borrar cualquier contenido anterior del widget
    treeView1.Nodes.Clear();
    // Cree el nodo del árbol raíz, en cualquier archivo XML el contenedor (primera raíz)
    // será el nombre DocumentElement ya que cualquier contenido debe estar envuelto en algún nodo primero.
    treeView1.Nodes.Add(new TreeNode(dom.DocumentElement.Name));

    // 4. Cree una instancia del primer nodo en la vista de árbol (el que contiene el nombre DocumentElement)
    TreeNode tNode = new TreeNode();
    tNode = treeView1.Nodes[0];

    // 5. Complete el TreeView con los nodos DOM con la función auxiliar 'AddNode'
    this.AddNode(dom.DocumentElement, tNode);
}
catch (XmlException xmlEx)
{
    MessageBox.Show(xmlEx.Message);
}
catch (Exception ex)
{
    MessageBox.Show(ex.Message);
}

El método de ayuda AddNode es el siguiente:

/// <summary>
/// Renderiza un nodo de XML en un TreeNode. Recursivo si dentro del nodo hay más nodos secundarios.
/// </summary>
/// <param name="inXmlNode"></param>
/// <param name="inTreeNode"></param>
private void AddNode(XmlNode inXmlNode, TreeNode inTreeNode)
{
    XmlNode xNode;
    TreeNode tNode;
    XmlNodeList nodeList;

     // Recorre los nodos XML hasta llegar a la hoja.
     // Agregue los nodos a TreeView durante el proceso de bucle.
     // Si el nodo tiene nodos secundarios, la función se llamará a sí misma.
    if (inXmlNode.HasChildNodes)
    {
        nodeList = inXmlNode.ChildNodes;

        for (int i = 0; i <= nodeList.Count - 1; i++)
        {
            xNode = inXmlNode.ChildNodes[i];
            inTreeNode.Nodes.Add(new TreeNode(xNode.Name));
            tNode = inTreeNode.Nodes[i];
            AddNode(xNode, tNode);
        }
    }
    else
    {
         // Aquí debe extraer los datos del XmlNode según el
         // tipo de nodo, si se requieren valores de atributo, etc.
        inTreeNode.Text = (inXmlNode.OuterXml).Trim();
    }
}

Básicamente, convierte cada nodo XML en un nodo TreeView.

2. Ejemplo completo

Ahora que explicamos la lógica, podemos proceder con la implementación de un formulario. En este ejemplo, tendremos 2 elementos en el formulario, un TreeView llamado treeView1 y un botón llamado button1 que arrastramos desde la caja de herramientas y lo adjuntamos manualmente al formulario.

Luego, en nuestro código agregaremos un detector de eventos al botón, por lo que cuando el usuario haga clic en un cuadro de diálogo de archivo abierto, aparecerá y le permitirá seleccionar un archivo XML que se procesará en la Vista de árbol:

using System;
using System.IO;
using System.Text;
using System.Windows.Forms;
using System.Xml;

namespace Sandbox
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Cuando el usuario hace clic en el botón Cargar XML, se abrirá un diálogo de archivo
        /// aparece, lo que le permite elegir un archivo XML para representar en la vista de árbol
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button1_Click(object sender, EventArgs e)
        {
            OpenFileDialog saveFileDialog1 = new OpenFileDialog();
            saveFileDialog1.Filter = "XML Files (*.xml)|*.xml";
            saveFileDialog1.FilterIndex = 2;
            saveFileDialog1.RestoreDirectory = true;

            if (saveFileDialog1.ShowDialog() == DialogResult.OK)
            {
                this.RenderXMLFile(saveFileDialog1.FileName);
            }
        }

        private void RenderXMLFile(string filepath)
        {
            try
            {
                // 1. Leer archivo XML desde una ruta local
                string xmlString = File.ReadAllText(filepath, Encoding.UTF8);

                // 2. Cree un documento DOM XML y cargue los datos en él.
                XmlDocument dom = new XmlDocument();
                dom.LoadXml(xmlString);

                // 3. Inicialice el control TreeView. treeView1 se puede crear dinámicamente
                // y adjunto al formulario o simplemente puede arrastrar y soltar el widget desde la caja de herramientas
                // en el formulario.

                // Borrar cualquier contenido anterior del widget
                treeView1.Nodes.Clear();
                 // Cree el nodo del árbol raíz, en cualquier archivo XML el contenedor (primera raíz)
                 // será el nombre DocumentElement ya que cualquier contenido debe estar envuelto en algún nodo primero.
                treeView1.Nodes.Add(new TreeNode(dom.DocumentElement.Name));

                // 4. Cree una instancia del primer nodo en la vista de árbol (el que contiene el nombre DocumentElement)
                TreeNode tNode = new TreeNode();
                tNode = treeView1.Nodes[0];

                // 5. Complete el TreeView con los nodos DOM.
                this.AddNode(dom.DocumentElement, tNode);
            }
            catch (XmlException xmlEx)
            {
                MessageBox.Show(xmlEx.Message);
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
        }

        /// <summary>
        /// Renderiza un nodo de XML en un TreeNode. Recursivo si dentro del nodo hay más nodos secundarios.
        /// </summary>
        /// <param name="inXmlNode"></param>
        /// <param name="inTreeNode"></param>
        private void AddNode(XmlNode inXmlNode, TreeNode inTreeNode)
        {
            XmlNode xNode;
            TreeNode tNode;
            XmlNodeList nodeList;
            int i;

            // Recorra los nodos XML hasta llegar a la hoja.
            // Agregue los nodos a TreeView durante el proceso de bucle.
            if (inXmlNode.HasChildNodes)
            {
                nodeList = inXmlNode.ChildNodes;

                for (i = 0; i <= nodeList.Count - 1; i++)
                {
                    xNode = inXmlNode.ChildNodes[i];
                    inTreeNode.Nodes.Add(new TreeNode(xNode.Name));
                    tNode = inTreeNode.Nodes[i];
                    this.AddNode(xNode, tNode);
                }
            }
            else
            {
                // Aquí debe extraer los datos del XmlNode según el
                // tipo de nodo, si se requieren valores de atributo, etc.
                inTreeNode.Text = (inXmlNode.OuterXml).Trim();
            }
        }
    } 
}

Como se mencionó al principio del artículo, este enfoque funciona con todas las estructuras de XML, simplemente cargue un archivo aleatorio y se representará en la vista de árbol. Este enfoque es genérico, pero se puede personalizar fácilmente, por lo que puede modificarlo para agregar condicionales para filtrar por datos y otras cosas.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores