[Serie Yugong] Explicación detallada del control TreeView en el tema de control de Winform en septiembre de 2023

---

Prefacio

Los controles de Winform son elementos de la interfaz de usuario en Windows Forms. Se pueden usar para crear varios componentes visuales e interactivos de aplicaciones de Windows, como botones, etiquetas, cuadros de texto, cuadros de lista desplegable, casillas de verificación, cuadros de opción, barras de progreso, etc. . . Los desarrolladores pueden utilizar controles de Winform para crear interfaces de usuario y responder a las acciones del usuario para crear potentes aplicaciones de escritorio.

1. Explicación detallada del control TreeView

El control TreeView en Winform es un control que se utiliza para mostrar datos jerárquicos, que es similar a la estructura de árbol en el explorador de archivos. TreeView puede explorar y operar la estructura del árbol expandiendo y contrayendo nodos.

El control TreeView puede construir una estructura de árbol agregando nodos. Cada nodo puede contener una etiqueta de texto y cualquier número de nodos secundarios. Al hacer clic en un nodo, se seleccionará y se almacenará en la propiedad SelectedNode de TreeView. Puede personalizar el efecto de visualización del nodo configurando las propiedades del nodo, como el texto, la fuente, el icono, etc.

El control TreeView también puede manejar eventos de selección de nodos, como eventos que se activan cuando se hace clic con el mouse en un nodo. Puede utilizar estos eventos para manejar operaciones como la selección, expansión y colapso de nodos. Además, puede utilizar la función de búsqueda del control TreeView para encontrar nodos específicos.

Los usos avanzados del control TreeView incluyen el uso de enlace de datos para completar dinámicamente la estructura del árbol y el uso de nodos extendidos para agregar datos personalizados a cada nodo.

1. Introducción a las propiedades

1.1 Nodos

La propiedad Nodos del control TreeView es una propiedad que se utiliza para acceder a la colección de nodos del control TreeView. La propiedad Nodes es un objeto de tipo TreeNodeCollection, que contiene los nodos de todos los controles TreeView.

Utilice el atributo Nodos para agregar, eliminar, mover y acceder dinámicamente a la estructura de árbol. A continuación se muestran algunos métodos comunes para las propiedades de Nodos:

1. Método Add(): agrega nuevos nodos a la colección de nodos.

Por ejemplo:

TreeNode rootNode = new TreeNode("Root"); // 创建根节点
treeView1.Nodes.Add(rootNode); // 添加根节点到TreeView控件

2. Método Remove(): elimina el nodo especificado de la colección Nodes.

Por ejemplo:

TreeNode selectedNode = treeView1.SelectedNode; // 获取选中的节点
if (selectedNode != null)
{
    
    
    treeView1.Nodes.Remove(selectedNode); // 从TreeView控件中删除该节点
}

3. Método Clear(): elimina todos los nodos de la colección Nodes.

Por ejemplo:

treeView1.Nodes.Clear(); // 清空TreeView控件中所有的节点

4. Método Contiene (): determina si la colección Nodos contiene el nodo especificado.

Por ejemplo:

if (treeView1.Nodes.Contains(selectedNode))
{
    
    
    MessageBox.Show("该节点存在于TreeView控件中！");
}

5. Método Find(): busque el nodo especificado en la colección Nodes.

Por ejemplo:

TreeNode[] resultNodes = treeView1.Nodes.Find("SearchText", true); 
// 查找Nodes集合中标签为"SearchText"的节点，true表示查找所有子节点

Al utilizar la propiedad Nodos, puede operar fácilmente en los nodos en el control TreeView para lograr una construcción y edición dinámicas de la estructura de árbol.

1.2 casillas de verificación

La propiedad de casillas de verificación se utiliza para habilitar o deshabilitar las casillas de verificación de un nodo TreeView. Cuando esta propiedad se establece en verdadero, el nodo TreeView mostrará una casilla de verificación y el usuario puede seleccionar o anular la selección del nodo seleccionando la casilla de verificación. Al establecer esta propiedad en falso, el nodo TreeView no mostrará la casilla de verificación. A continuación se muestran ejemplos de uso:

private void Form1_Load(object sender, EventArgs e)
{
    
    
    // 添加根节点
    TreeNode rootNode = new TreeNode("根节点");
    this.treeView1.Nodes.Add(rootNode);

    // 添加子节点
    TreeNode childNode1 = new TreeNode("子节点1");
    TreeNode childNode2 = new TreeNode("子节点2");
    rootNode.Nodes.Add(childNode1);
    rootNode.Nodes.Add(childNode2);

    // 启用复选框
    this.treeView1.CheckBoxes = true;
}

Nota: Cuando una casilla de verificación está habilitada, la propiedad Marcado de un nodo seleccionado siempre será verdadera, incluso cuando el usuario anule la selección del nodo. Para obtener el estado de selección real de un nodo, utilice la propiedad IsChecked del nodo.

1.3 Selección de fila completa

La propiedad FullRowSelect es una propiedad del control TreeView, que especifica si se selecciona toda la fila de nodos. Si se establece en Verdadero, al hacer clic en cualquier columna se seleccionará toda la fila de nodos; si se establece en Falso, solo se seleccionará el nodo en el que se hizo clic.

En Winform, puede configurar la propiedad FullRowSelect del control TreeView de la siguiente manera:

1. Establecer en tiempo de diseño:

En el diseñador de Visual Studio, seleccione el control TreeView, luego busque la propiedad FullRowSelect en la ventana de propiedades y configúrela en Verdadero o Falso.

2. Establecer en código:

treeView1.FullRowSelect = true; //设置为整行选中节点

Nota: ShowLines es falso

1.4 Ocultar selección

La propiedad HideSelection del control TreeView es un valor booleano que especifica si el nodo aún muestra su estado seleccionado cuando pierde el foco. Si se establece en verdadero, el nodo se desmarca automáticamente cuando pierde el foco; si se establece en falso, el nodo permanece seleccionado hasta que se selecciona otro nodo.

De forma predeterminada, el valor de la propiedad HideSelection del control TreeView es verdadero. Si desea mantener el nodo seleccionado incluso si el control pierde el foco, puede establecer esta propiedad en falso. Por ejemplo, es posible que desee mostrar información relevante cuando se selecciona un nodo sin tener que preocuparse de que la información desaparezca cuando se pierda el foco.

El siguiente es un código de muestra que demuestra cómo cambiar la propiedad HideSelection de un control TreeView cuando se usa:

private void Form_Load(object sender, EventArgs e)
{
    
    
    // 将TreeView控件的HideSelection属性设置为false
    treeView1.HideSelection = false;
}

Después de configurar la propiedad HideSelection, puede ejecutar la aplicación nuevamente e intentar seleccionar nodos en el control TreeView. Incluso si el control TreeView pierde el foco, el nodo seleccionado conservará su estado seleccionado.

Nota: DrawMode es válido para OwnerDrawText

1.5 Seguimiento en caliente

La propiedad HotTracking en el control TreeView se usa para especificar si se resalta un nodo cuando se pasa el mouse sobre él. Cuando la propiedad HotTracking se establece en verdadero, el texto del nodo se resaltará cuando se pase el mouse sobre el nodo.

Puede configurar la propiedad HotTracking del control TreeView mediante el siguiente código:

treeView1.HotTracking = true;

1.6 Lista de imágenes、Índice de imágenes

El control TreeView es un control de uso común en Windows Forms, que puede mostrar datos en una estructura de árbol. Al utilizar el control TreeView, puede configurar sus propiedades ImageList e ImageIndex para personalizar el icono del nodo.

La propiedad ImageList es un objeto ImageList que se utiliza para administrar los iconos de todos los nodos en el control TreeView. Los iconos se pueden agregar a ImageList mediante código o el diseñador.

La propiedad ImageIndex es un valor entero que especifica el valor del índice en ImageList del icono utilizado por el nodo. Por ejemplo, si necesita mostrar un árbol de archivos en el control TreeView, puede agregar íconos de carpetas e íconos de archivos a ImageList y luego especificar el índice de íconos utilizado en cada nodo a través de la propiedad ImageIndex.

Aquí está el código de muestra para mostrar un árbol de archivos en un TreeView usando las propiedades ImageList e ImageIndex:

// 创建一个TreeView控件
TreeView treeView1 = new TreeView();

// 创建一个ImageList，并添加图标
ImageList imageList1 = new ImageList();
imageList1.Images.Add("folder", Image.FromFile("folder.png"));
imageList1.Images.Add("file", Image.FromFile("file.png"));
treeView1.ImageList = imageList1;

// 添加根节点
TreeNode rootNode = new TreeNode("Root");
rootNode.ImageKey = "folder";    // 指定文件夹图标索引
treeView1.Nodes.Add(rootNode);

// 添加子节点
TreeNode subdirNode = new TreeNode("SubDirectory");
subdirNode.ImageKey = "folder";    // 指定文件夹图标索引
rootNode.Nodes.Add(subdirNode);

TreeNode fileNode = new TreeNode("File.txt");
fileNode.ImageKey = "file";    // 指定文件图标索引
subdirNode.Nodes.Add(fileNode);

// 添加TreeView控件到表单中
this.Controls.Add(treeView1);

En el código anterior, crea un objeto ImageList y agrega dos iconos, y luego establece ImageList en la propiedad ImageList del control TreeView. En cada nodo, el índice de icono utilizado por el nodo se especifica a través del atributo ImageIndex, logrando así una visualización de árbol de archivos simple.

1.7 Sangría

La propiedad Sangría del control TreeView especifica la cantidad de sangría a la izquierda del texto de cada nodo del árbol. El valor predeterminado es 20 píxeles.

Cuando se expande un nodo de árbol, todos sus nodos secundarios se moverán. Sangrará los píxeles hacia la derecha en relación con el nodo principal para mostrar la jerarquía. Si el valor de Sangría es demasiado pequeño, el texto del nodo puede estar demasiado cerca del borde del control de árbol u otros nodos, y si el valor de Sangría es demasiado grande, es posible que se desperdicie espacio.

Puede utilizar el siguiente código para establecer la propiedad Sangría del control TreeView:

// 设置TreeView控件的Indent属性
treeView1.Indent = 30;

Esto aplicará una sangría de 30 píxeles al lado izquierdo del texto de cada nodo en el control TreeView.

1.8 Separador de ruta

La propiedad PathSeparator en el control TreeView se utiliza para establecer el separador de ruta del nodo. De forma predeterminada, el valor de este atributo es "\" (barra invertida), lo que indica que la ruta al nodo está separada por barras invertidas.

Si necesita utilizar otros separadores de ruta, puede establecer la propiedad PathSeparator en el separador que desea utilizar. Por ejemplo, si necesita utilizar una barra diagonal "/" como separador de rutas de nodo, puede establecer la propiedad PathSeparator en "/".

El siguiente es un ejemplo de código para configurar la propiedad PathSeparator:

// 将TreeView控件的PathSeparator属性设置为斜杠“/”
treeView1.PathSeparator = "/";

Nota: Cambiar el valor del atributo PathSeparator puede afectar el valor del atributo de ruta del nodo, provocando problemas con la búsqueda y el funcionamiento del nodo. Por lo tanto, antes de cambiar la propiedad PathSeparator, asegúrese de comprender su función y su impacto.

1.9 Índice de imagen seleccionada, clave de imagen seleccionada

Las propiedades SelectedImageIndex y SelectedImageKey del control TreeView se pueden usar para configurar el icono del nodo seleccionado. El uso específico es el siguiente:

1. Agregue un icono al nodo del control TreeView:

// 添加节点
TreeNode node = new TreeNode("节点名称");

// 设置节点的默认图标
node.ImageIndex = 0;

// 设置节点的选中图标
node.SelectedImageIndex = 1;

// 添加节点到TreeView控件中
treeView1.Nodes.Add(node);

2. Utilice el control ImageList para administrar los iconos de los nodos de control TreeView:

// 创建一个ImageList控件
ImageList imgList = new ImageList();

// 将图标添加到ImageList控件中
imgList.Images.Add("默认图标", Image.FromFile(@"default.png"));
imgList.Images.Add("选中图标", Image.FromFile(@"selected.png"));

// 设置TreeView控件的图标列表
treeView1.ImageList = imgList;

// 添加节点
TreeNode node = new TreeNode("节点名称");

// 设置节点的默认图标
node.ImageKey = "默认图标";

// 设置节点的选中图标
node.SelectedImageKey = "选中图标";

// 添加节点到TreeView控件中
treeView1.Nodes.Add(node);

En el código anterior, podemos ver que cuando usamos el control ImageList para administrar íconos, podemos usar el nombre del ícono para configurar el ícono del nodo para una fácil administración y mantenimiento.

1.10 ShowLines, ShowNodeToolTips, ShowPlusMinus, ShowRootLines

ShowLines, ShowNodeToolTips, ShowPlusMinus y ShowRootLines son una de las propiedades más utilizadas en el control TreeView.

1. Propiedad de líneas de presentación

La propiedad ShowLines es una propiedad booleana del control TreeView, utilizada para mostrar u ocultar las conexiones entre nodos. Su valor predeterminado es Verdadero, lo que significa que, de forma predeterminada, se mostrarán las conexiones entre nodos. Si desea ocultar estas conexiones, puede establecer esta propiedad en Falso.

2. ShowNodeToolTips Propiedad

La propiedad ShowNodeToolTips es una propiedad booleana del control TreeView, que se utiliza para mostrar u ocultar la información sobre herramientas de los nodos. Su valor predeterminado también es Verdadero, es decir, de forma predeterminada, cuando el mouse se mueve sobre el nodo, se mostrará la información sobre herramientas del nodo. Si desea ocultar esta información sobre herramientas, puede establecer esta propiedad en Falso.

3. MostrarPropiedadPlusMinus

La propiedad ShowPlusMinus es una propiedad booleana del control TreeView, que se utiliza para mostrar u ocultar los iconos más y menos para nodos expandidos y contraídos. Su valor predeterminado también es Verdadero, es decir, de forma predeterminada, los iconos más y menos se mostrarán junto al nodo. Si desea ocultar estos iconos, puede establecer esta propiedad en Falso.

4. ShowRootLines Propiedad

La propiedad ShowRootLines es una propiedad booleana del control TreeView, que se utiliza para mostrar u ocultar la conexión entre el nodo raíz y sus nodos secundarios. Su valor predeterminado también es Verdadero, es decir, de forma predeterminada, se mostrará una conexión entre el nodo raíz y sus nodos secundarios. Si desea ocultar estas conexiones, puede establecer esta propiedad en Falso.

El uso de estas propiedades se puede ajustar según las necesidades reales para mostrar mejor los datos en el control TreeView.

1.11 Lista de imágenes de estado

La propiedad StateImageList se utiliza para establecer la lista de imágenes de estado del nodo. Generalmente se usa para mostrar el estado seleccionado, el estado expandido, el estado colapsado, etc. de un nodo. Los siguientes son los pasos para usar la propiedad StateImageList para establecer el estado de un nodo de control TreeView:

1. Cree o importe una lista de imágenes de estado, generalmente una imagen que contiene varias imágenes de estado, que se puede crear usando el control ImageList incorporado de Visual Studio o importar usando un archivo de imagen externo.

2. Asigne la lista de imágenes de estado creada o importada a la propiedad StateImageList del control TreeView. Esto se puede configurar usando la ventana de propiedades o el código.

3. Establezca la propiedad de estado del nodo de control TreeView. Cada nodo tiene tres estados básicos: no seleccionado, parcialmente seleccionado y seleccionado. Puede usar la propiedad Checked del objeto de nodo para establecer el estado seleccionado del nodo y usar el tipo de enumeración TreeNodeStates para establecer el estado plegado y expandido del nodo.

Por ejemplo, el siguiente código crea una lista de imágenes de estado y la asigna a la propiedad StateImageList del control TreeView:

// 创建状态图像列表
ImageList stateImageList = new ImageList();
stateImageList.Images.Add(Properties.Resources.unchecked); // 未选中状态
stateImageList.Images.Add(Properties.Resources.checked); // 选中状态
stateImageList.Images.Add(Properties.Resources.partial_checked); // 部分选中状态

// 将状态图像列表分配给TreeView控件的StateImageList属性
treeView1.StateImageList = stateImageList;

Luego puede configurar el estado del nodo del control TreeView usando el siguiente código:

// 创建根节点
TreeNode rootNode = new TreeNode("根节点");
rootNode.Checked = false; // 未选中状态
rootNode.StateImageIndex = 0; // 未选中状态图片的索引

// 创建子节点1
TreeNode childNode1 = new TreeNode("子节点1");
childNode1.Checked = true; // 选中状态
childNode1.StateImageIndex = 1; // 选中状态图片的索引

// 创建子节点2
TreeNode childNode2 = new TreeNode("子节点2");
childNode2.Checked = false; // 未选中状态
childNode2.StateImageIndex = 0; // 未选中状态图片的索引

// 添加子节点到根节点
rootNode.Nodes.Add(childNode1);
rootNode.Nodes.Add(childNode2);

// 将根节点添加到TreeView控件
treeView1.Nodes.Add(rootNode);

En este ejemplo, el estado del nodo raíz y el nodo secundario 2 no está seleccionado, usando la imagen de estado del índice 0; el estado del nodo secundario 1 se selecciona, usando la imagen de estado del índice 1.

2. Escenarios comunes

El control TreeView es uno de los controles más utilizados en Winform y generalmente se usa para mostrar datos de estructuras jerárquicas, como sistemas de archivos, estructuras organizativas, etc. Los escenarios comunes incluyen:

1. Gestión de archivos: el control TreeView puede mostrar la estructura de directorios del sistema de archivos y los usuarios pueden usarlo para explorar, seleccionar y eliminar archivos o carpetas. Al mismo tiempo, también puedes distinguir archivos y carpetas personalizando los iconos de los nodos.

2. Navegación del sitio web: el control TreeView se puede utilizar para mostrar la estructura del sitio web, como la barra de navegación del sitio web. Al configurar las propiedades de texto y enlace del nodo, los usuarios pueden hacer clic en el nodo para ingresar a la página correspondiente.

3. Clasificación de datos: el control TreeView se puede utilizar para mostrar una clasificación jerárquica de datos, como la clasificación de productos. Al expandir y contraer nodos, los usuarios pueden ver fácilmente información de clasificación en diferentes niveles.

4. Estructura organizativa: el control TreeView se puede utilizar para mostrar un diagrama de estructura organizativa, como la jerarquía de empleados de una empresa. Al configurar el texto del nodo y los íconos del nodo, se pueden mostrar claramente varios departamentos, puestos y personal.

5. Menú de navegación: el control TreeView se puede utilizar para crear menús de navegación, como los menús de las aplicaciones Winform. Al configurar el texto del nodo y el icono del nodo, puede navegar rápidamente al módulo de función correspondiente.

3. Casos específicos

El siguiente es un caso completo del control TreeView en Winform: este caso demuestra cómo usar el control TreeView para mostrar la estructura de directorios del sistema de archivos y puede seleccionar carpetas, expandir y contraer nodos a través del control TreeView.

Primero, agregue un control TreeView y un control Botón en la vista de diseño de Winform.

Luego, agregue el siguiente código en el archivo Form1.cs:

using System;
using System.IO;
using System.Windows.Forms;

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

        private void LoadTree()
        {
    
    
            //获取计算机的根目录
            DriveInfo[] drives = DriveInfo.GetDrives();
            foreach (DriveInfo drive in drives)
            {
    
    
                //创建根节点
                TreeNode rootNode = new TreeNode(drive.Name);
                rootNode.Tag = drive.RootDirectory;

                //添加到TreeView控件中
                treeView1.Nodes.Add(rootNode);

                //判断是否可以访问该驱动器，并添加子节点
                if (drive.IsReady)
                {
    
    
                    try
                    {
    
    
                        DirectoryInfo[] dirs = drive.RootDirectory.GetDirectories();
                        foreach (DirectoryInfo dir in dirs)
                        {
    
    
                            TreeNode node = new TreeNode(dir.Name);
                            node.Tag = dir;
                            rootNode.Nodes.Add(node);
                            node.Nodes.Add(new TreeNode()); //添加空节点，以便展开节点时加载子节点
                        }
                    }
                    catch (UnauthorizedAccessException)
                    {
    
    
                        //如果没有访问权限，则不添加子节点
                    }
                }
            }
        }

        private void treeView1_BeforeExpand(object sender, TreeViewCancelEventArgs e)
        {
    
    
            //展开节点时加载子节点
            TreeNode node = e.Node;
            if (node.Nodes.Count == 1 && node.Nodes[0].Text == "")
            {
    
    
                node.Nodes.Clear();

                DirectoryInfo dir = (DirectoryInfo)node.Tag;
                try
                {
    
    
                    DirectoryInfo[] dirs = dir.GetDirectories();
                    foreach (DirectoryInfo subDir in dirs)
                    {
    
    
                        TreeNode subNode = new TreeNode(subDir.Name);
                        subNode.Tag = subDir;
                        node.Nodes.Add(subNode);
                        subNode.Nodes.Add(new TreeNode());
                    }
                }
                catch (UnauthorizedAccessException)
                {
    
    
                    //如果没有访问权限，则不添加子节点
                }
            }
        }

        private void button1_Click(object sender, EventArgs e)
        {
    
    
            //获取选定的文件夹
            if (treeView1.SelectedNode != null)
            {
    
    
                DirectoryInfo dir = (DirectoryInfo)treeView1.SelectedNode.Tag;
                MessageBox.Show(dir.FullName);
            }
        }
    }
}

En el método LoadTree, primero obtenga el directorio raíz de la computadora DriveInfo [] drives = DriveInfo.GetDrives (), luego recorra cada directorio raíz, cree el nodo raíz rootNode y agréguelo al control TreeView treeView1.Nodes.Add (rootNode) .

Luego determine si se puede acceder a la unidad y agregue subnodos. Si no hay permiso de acceso, no se agrega el nodo secundario. Cree un TreeNode para cada nodo secundario y agréguelo al nodo raíz rootNode. Para facilitar la carga de nodos secundarios al expandir un nodo, se agrega un nodo vacío node.Nodes.Add(new TreeNode()) a cada nodo secundario.

En el evento BeforeExpand, determine si el nodo actual ha cargado nodos secundarios. Si no se ha cargado, elimine el nodo vacío, cargue los nodos secundarios del nodo y agréguelos al conjunto de nodos secundarios del nodo. Del mismo modo, si no hay permiso para acceder al nodo secundario, no se agrega el nodo secundario.

Finalmente, obtenga la ruta completa de la carpeta seleccionada en el evento Click del Botón 1. Si no se selecciona ningún nodo, la operación no se realizará.

Ejecute el programa y el directorio raíz y los subdirectorios de la computadora se mostrarán en el control TreeView. Las carpetas se pueden seleccionar a través del control TreeView y las carpetas seleccionadas se pueden obtener a través del control Botón. Al mismo tiempo, los nodos secundarios se cargan automáticamente al expandir y contraer nodos.