TreeView

TreeView представляет визуальный элемент в виде дерева. Дерево содержит узлы, которые представляют объекты TreeNode. Узлы могут содержать другие подузлы и могут находиться как скрытом, так и в раскрытом состоянии. Все узлы содержатся в свойстве Nodes.

Если мы нажем в панели Свойств на свойство Nodes, то нам откроется окно редактирования узлов TreeView:

В этом окне мы можем добавить новые узлы, создать для них подузлы, удалить уже имеющиеся, настроить свойства узлов. Рассмотрим некоторые свойства, которые мы здесь может установить:

• BackColor: фоновый цвет узла

• Checked: если равно true, то данный узел будет отмечен флажком

• NodeFont: шрифт узла

• ForeColor: цвет шрифта

• Text: текст узла

• ImageIndex: получает или задает индекс изображения, выводимого для данного узла

• ImageKey: получает или задает индекс изображения для данного узла

• SelectedImageKey: получает или задает индекс изображения для данного узла в выбранном состоянии

• SelectedImageIndex: получает или задает индекс изображения, выводимого для данного узла в выбранном состоянии

• StateImageIndex: получает или задает индекс изображения состояния (например установленного или снятого флажка, указывающего состояние элемента)

• Tag: тег узла

И затем все добавленные узлы мы сможем увидеть в приложении на форме:

Кроме данных свойств, управляющих визуализацией, элемент TreeNode имеет еще ряд важных свойств, которые мы можем использовать к коде:

• FirstNode: первый дочерний узел

• LastNode: последний дочерний узел

• NextNode: возвращает следующий сестринский узел по отношению к текущему

• NextVisibleNode: возвращает следующий видимый узел по отношению к текущему

• PrevNode: возвращает предыдущий сестринский узел по отношению к текущему

• PrevVisibleNode: возвращает предыдущий видимый узел по отношению к текущему

• Nodes: возвращает коллекцию дочерних узлов

• Parent: возвращает родительский узел для текущего узла

• TreeView: возвращает объект TreeView, в котором определен текущий узел

Программное управление узлами

Рассмотрим программное добавление и удаление узлов:

TreeNode tovarNode = new TreeNode("Товары");
// Добавляем новый дочерний узел к tovarNode
tovarNode.Nodes.Add(new TreeNode("Смартфоны"));
// Добавляем tovarNode вместе с дочерними узлами в TreeView
treeView1.Nodes.Add(tovarNode);
// Добавляем второй очерний узел к первому узлу в TreeView
treeView1.Nodes[0].Nodes.Add(new TreeNode("Планшеты"));
// удаление у первого узла второго дочернего подузла
treeView1.Nodes[0].Nodes.RemoveAt(1);
// Удаление узла tovarNode и всех его дочерних узлов
treeView1.Nodes.Remove(tovarNode);

Скрытие и раскрытие узлов

Для раскрытия узлов к объекту TreeNode применяется метод Expand(), а для скрытия - метод Collapse():

// раскрытие узла
tovarNode.Expand();
// раскрытие не только узла, но и всех его дочерних подузлов
tovarNode.ExpandAll();
// скрытие узла
tovarNode.Collapse();

Добавление чекбоксов

Чтобы добавить чекбоксы к узлам дерева, надо у TreeView установить свойство CheckBoxes = true:

treeView1.CheckBoxes = true;
TreeNode smartNode = new TreeNode("Смартфоны");
smartNode.Checked = true;
treeView1.Nodes.Add(smartNode);

treeView1.Nodes.Add(new TreeNode("Планшеты"));
treeView1.Nodes.Add(new TreeNode("Ноутбуки"));

Добавление изображений

Для добавления изображений нам нужен компонент ImageList, в котором имеется несколько картинок. Добавим эти картинки к узлам:

// установка источника изображений
treeView1.ImageList = imageList1;

TreeNode argentinaNode = new TreeNode { Text = "Аргентина", ImageIndex=0, SelectedImageIndex=0 };
treeView1.Nodes.Add(argentinaNode);

TreeNode braziliaNode = new TreeNode { Text = "Бразилия", ImageIndex = 1, SelectedImageIndex=1 };
treeView1.Nodes.Add(braziliaNode);

TreeNode chilieNode = new TreeNode { Text = "Чили", ImageIndex = 2, SelectedImageIndex=2 };
treeView1.Nodes.Add(chilieNode);

TreeNode columbiaNode = new TreeNode { Text = "Колумбия", ImageIndex = 3, SelectedImageIndex=3 };
treeView1.Nodes.Add(columbiaNode);

При установке изображений надо учитывать, что если мы не установим свойство SelectedImageIndex для каждого узла, то в качестве картинки для выделенного узла по умолчанию будет использоваться первое изображение из ImageList.

TreeView. Практический пример

Выполним небольшую задачу с TreeView. А именно попробуем сделать примитивный интерфейс на подобие проводника. Для этого добавим на форму элемент TreeView. А в файле кода формы пропишим следующий код:

namespace HelloApp
{
    public partial class Form1 : Form
    {
        TreeView treeView1;
        public Form1()
        {
            InitializeComponent();
            treeView1 = new();
            treeView1.Dock = DockStyle.Fill;
            Controls.Add(treeView1);
            treeView1.BeforeSelect += treeView1_BeforeSelect;
            treeView1.BeforeExpand += treeView1_BeforeExpand;
            // заполняем дерево дисками
            FillDriveNodes();
        }
        // событие перед раскрытием узла
        void treeView1_BeforeExpand(object? sender, TreeViewCancelEventArgs e)
        {
            e.Node?.Nodes.Clear();
            try
            {
                if (Directory.Exists(e.Node?.FullPath))
                {
                    string[] dirs = Directory.GetDirectories(e.Node.FullPath);
                    foreach (string dir in dirs)
                    {
                        TreeNode dirNode = new TreeNode(new DirectoryInfo(dir).Name);
                        FillTreeNode(dirNode, dir);
                        e.Node.Nodes.Add(dirNode);
                    }
                }
            }
            catch (Exception) { }
        }
        // событие перед выделением узла
        void treeView1_BeforeSelect(object? sender, TreeViewCancelEventArgs e)
        {
            e.Node?.Nodes.Clear();
            try
            {
                if (Directory.Exists(e.Node?.FullPath))
                {
                    string[] dirs = Directory.GetDirectories(e.Node.FullPath);

                    foreach (string dir in dirs)
                    {
                        TreeNode dirNode = new TreeNode(new DirectoryInfo(dir).Name);
                        FillTreeNode(dirNode, dir);
                        e.Node.Nodes.Add(dirNode);
                    }
                }
            }
            catch (Exception) { }
        }

        // получаем все диски на компьютере
        private void FillDriveNodes()
        {
            try
            {
                foreach (DriveInfo drive in DriveInfo.GetDrives())
                {
                    TreeNode driveNode = new TreeNode { Text = drive.Name };
                    FillTreeNode(driveNode, drive.Name);
                    treeView1.Nodes.Add(driveNode);
                }
            }
            catch (Exception) { }
        }
        // получаем дочерние узлы для определенного узла
        private void FillTreeNode(TreeNode driveNode, string path)
        {
            try
            {
                string[] dirs = Directory.GetDirectories(path);
                foreach (string dir in dirs)
                {
                    TreeNode dirNode = new TreeNode();
                    dirNode.Text = dir.Remove(0, dir.LastIndexOf("\\") + 1);
                    driveNode.Nodes.Add(dirNode);
                }
            }
            catch (Exception) { }
        }
    }
}

TreeView имеет ряд событий, которые позволяют нам управлять деревом. Наиболее важные из них:

• BeforeSelect / AfterSelect: срабатывает перед / после выбора узла дерева

• BeforeExpand / AfterExpand: срабатывает перед / после раскрытия узла дерева

• BeforeCollapse / AfterCollapse: срабатывает перед / после скрытия узла дерева

В вышеприведенном коде мы заблаговременно перед раскрытием или выбором наполняем выбранный узел дочерними подузлами, благодаря чему у нас появляется видимость, что узлы заполнены.