Деревья в с sharp

Работа с элементом TreeView в C# (Часть 1)

Доброго времени суток, друзья. В этой статье мы разберём основные принципы работы с элементом TreeView. Этот элемент управления предназначается для представления каких-то элементов (или узлов от англ. nodes) в виде древовидной структуры.

Попутно в рамках статьи и урока мы познакомимся с такими элементами управления как:

• ToolStripContainer
• ContextMenuStrip
• MenuStrip
• SplitContainer
• TableLayoutPanel
• ToolStripMenuItem

После ознакомления мы научимся с вами:

• Создавать новый проект для Windows Forms и настраивать главную форму тестового приложения
• Добавлять на форму ToolStripContainer для удобного расположения элементов на форме
• Работать со SplitContainer для выделения левой и правой области формы с возможностью регулировки ширины
• Работать с контекстным меню ContextMenuStrip, добавлять в него элементы и привязывать его к элементу TreeView
• Добавлять элементы в TreeView, реагировать на основные события (AfterSelect, MouseClick, MouseUp), которые нужны в большинстве случаев при работе с TreeView
• Удалять элементы из TreeView при выборе соответствующего пункта контекстного меню

Тестовое приложение, которое мы разработаем, будет выглядеть следующим образом:

В левой области главной формы будет располагаться элемент TreeView, в который можно будет добавлять новый элементы, а также удалять существующие. В правой области будет текстовое поле, куда будут выводиться сообщения с описанием действий, производимых с элементом TreeView, а также кнопка «Очистить лог», которая будет стирать всё содержимое лога.

Мы также поддержим контекстное меню для элемента TreeView с двумя пунктами меню — «Добавить элемент» и «Удалить выбранный элемент»:

Ещё мы разработаем отдельное диалоговое окно для ввода названий новых элементов, которые будут добавляться в TreeView:

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

Также в конце статьи будет доступна ссылка на архив, содержащий все исходные коды примера.

Теперь остановимся на ключевых моментах при работе с элементом TreeView.

Добавление новых элементов в TreeView

Для добавления новых элементов в TreeView, которое используется с именем TreeViewMain в нашем примере, используется следующий код:

TreeViewMain.Nodes.Add("Элемент 1"); TreeViewMain.Nodes.Add("Элемент 2"); TreeViewMain.Nodes.Add("Элемент 3"); TreeViewMain.Nodes.Add("Элемент 4"); TreeViewMain.Nodes.Add("Элемент 5");

Внутреннее свойство Nodes, доступное в элементе TreeView возвращает коллекцию узлов дерева, и по умолчанию она пуста. Как видите, чтобы добавить новый элемент, достаточно использовать метод Add(string text) для данного свойства.

В тестовом примере не рассматривается добавление вложенных элементов к тем, что находятся на самом верхнем уровне дерева, однако это не составит труда, поскольку метод Add(string text) возвращает добавленный узел в виде объекта класса TreeNode и к нему точно так же можно обратиться для добавления его дочерних узлов — через свойство Nodes и тот же метод Add(string text). В примере данной статьи и тестовом проекте этого не сделано, предлагаю попрактиковаться с этим вам. Если возникнут какие-то проблемы или вопросы — пишите в комментариях, и я постараюсь ответить.

Обработка события выбора элемента TreeView

Когда мы производим выбор элемента в дереве, вызывается событие AfterSelect. Метод-обработчик этого события TreeViewMain_AfterSelect принимает вторым аргументом экземпляр класса TreeViewEventArgs с именем e. Через этот объект мы можем получить, к примеру, свойство Node, которое указывает на тот узел дерева, который был выбран. Для безопасности можно проводить его проверку на null, чтобы предотвратить исключение в приложении. Если же ссылка непустая, то она будет содержать выбранный узел дерева. В нашем тестовом приложении мы просто выводим текст выбранного элемента дерева в текстовое поле с именем TextBoxLog (это минималистичный лог сообщений, происходящих при работе с деревом):

private void TreeViewMain_AfterSelect(object sender, TreeViewEventArgs e) < TreeNode node = e.Node; if (node == null) < return; >TextBoxLog.Text += "Выбран элемент: " + node.Text + "\r\n"; >

Получение выбранного узла дерева

Для доступа к выбранному узлу дерева используется свойство SelectedNode:

TreeNode selectedNode = TreeViewMain.SelectedNode;

Желательно проверять, что возвращённое значение не равно null, во избежание исключений в программе, поскольку может быть ситуация, что в дереве не выбран узел, а значит, SelectedNode может вернуть null.

Удаление элементов из дерева

Для удаления какого-то узла из дерева используется всё то же свойство Nodes и специальный метод Remove(TreeNode node). К примеру, в нашей программе, при клике по контекстному меню «Удалить выбранный элемент» будет удалён выбранный элемент:

private void CtxMenuRemoveElement_Click(object sender, EventArgs e) < TreeNode selectedNode = TreeViewMain.SelectedNode; if (selectedNode == null) < return; >TreeViewMain.Nodes.Remove(selectedNode); >

На этом пока всё, мы рассмотрели с вами основные операции с элементом TreeView.

Ниже ссылка для скачивания тестового проекта, разработанного в статье:

Источник

Деревья в с sharp

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. А в файле кода формы пропишим следующий код:

using System; using System.Collections.Generic; using System.ComponentModel; using System.IO; using System.Windows.Forms; namespace HelloApp < public partial class Form1 : Form < public Form1() < InitializeComponent(); treeView1.BeforeSelect += treeView1_BeforeSelect; treeView1.BeforeExpand += treeView1_BeforeExpand; // заполняем дерево дисками FillDriveNodes(); >// событие перед раскрытием узла void treeView1_BeforeExpand(object sender, TreeViewCancelEventArgs e) < e.Node.Nodes.Clear(); string[] dirs; try < if (Directory.Exists(e.Node.FullPath)) < dirs = Directory.GetDirectories(e.Node.FullPath); if (dirs.Length != 0) < for (int i = 0; i < dirs.Length; i++) < TreeNode dirNode = new TreeNode(new DirectoryInfo(dirs[i]).Name); FillTreeNode(dirNode, dirs[i]); e.Node.Nodes.Add(dirNode); >> > > catch (Exception ex) < >> // событие перед выделением узла void treeView1_BeforeSelect(object sender, TreeViewCancelEventArgs e) < e.Node.Nodes.Clear(); string[] dirs; try < if(Directory.Exists(e.Node.FullPath)) < dirs = Directory.GetDirectories(e.Node.FullPath); if (dirs.Length!= 0) < for(int i=0; i> > > catch (Exception ex) < >> // получаем все диски на компьютере 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 ex) < >> // получаем дочерние узлы для определенного узла 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 ex) < >> > >

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

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

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

Источник