Доброго времени суток, друзья. В этой статье мы разберём основные принципы работы с элементом 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.
Ниже ссылка для скачивания тестового проекта, разработанного в статье:
Ссылка на архив с исходными кодами примера