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

User Rating: 5 / 5

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

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

Ссылка на архив с исходными кодами примера

Яндекс.Метрика