Treeview windows forms c

Последнее обновление: 15.01.2024

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: срабатывает перед / после скрытия узла дерева

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

Источник

- GitHub Copilot
  
  Write better code with AI
- GitHub Advanced Security
  
  Find and fix vulnerabilities
- Actions
  
  Automate any workflow
- Codespaces
  
  Instant dev environments
- Issues
  
  Plan and track work
- Code Review
  
  Manage code changes
- Discussions
  
  Collaborate outside of code
- Code Search
  
  Find more, search less
Explore
- Learning Pathways
- Events & Webinars
- Ebooks & Whitepapers
- Customer Stories
- Partners
- Executive Insights
- GitHub Sponsors
  
  Fund open source developers
- The ReadME Project
  
  GitHub community articles
- Enterprise platform
  
  AI-powered developer platform
Pricing

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Источник

TreeView. This displays text and icon data. TreeView must have nodes added to it through the Nodes collection. It represents hierarchical text and icon data in a convenient way.

Get started. We add a TreeView control to the Windows Forms Application project. To do this, open the Toolbox panel by clicking on the View and then Toolbox menu item in Visual Studio.

Add example. Double-click on the Form1 window to create the Form1_Load event. In this event handler, we will insert code to build the nodes in the TreeView control.

Info To add the Form1_Load event, double-click on the window of the program in the Visual Studio designer.

Note The Nodes.Add() call adds a node instance to the treeView1 instance of the TreeView that exists.

Detail You can call the Add instance method and pass it an argument of type TreeNode to add a node to the TreeView.

using System;
using System.Windows.Forms;

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

private void Form1_Load(object sender, EventArgs e)
{
//
// This is the first node in the view.
//
TreeNode treeNode = new TreeNode(«Windows»);
treeView1.Nodes.Add(treeNode);
//
// Another node following the first node.
//
treeNode = new TreeNode(«Linux»);
treeView1.Nodes.Add(treeNode);
//
// Create two child nodes and put them in an array.
// … Add the third node, and specify these as its children.
//
TreeNode node2 = new TreeNode(«C#»);
TreeNode node3 = new TreeNode(«VB.NET»);
TreeNode[] array = new TreeNode[] { node2, node3 };
//
// Final node.
//
treeNode = new TreeNode(«Dot Net Perls», array);
treeView1.Nodes.Add(treeNode);
}
}
}

Click. We can add a double-click event handler to your TreeView program. This means that when the user double-clicks on an item, you can execute code based on that node.

Tip To add the MouseDoubleClick event handler, right-click the TreeView in the designer and select Properties.

Then Select «MouseDoubleClick» and click twice on that entry. You can then change treeView1_MouseDoubleClick, which was generated.

using System;
using System.Windows.Forms;

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

private void Form1_Load(object sender, EventArgs e)
{
// Insert code here. [OMIT]
}

private void treeView1_MouseDoubleClick(object sender, MouseEventArgs e)
{
//
// Get the selected node.
//
TreeNode node = treeView1.SelectedNode;
//
// Render message box.
//
MessageBox.Show(string.Format(«You selected: {0}», node.Text));
}
}
}

Using SelectedNode property. In the treeView1_MouseDoubleClick method, you can see that the SelectedNode property is accessed on the treeView1 control.

And This returns the selected node if one is selected. After a double-click, a node is selected so this returns a reference to that node.

Using Text property. The treeView1_MouseDoubleClick event handler also accesses the Text instance property on the treeView1 control.

And This returns a reference to the string that represents the text in the TreeNode.

Tip If you double-click on the node «Linux», a MessageBox is shown with that text.

MessageBox.Show

Summary. We added TreeNode references and children nodes to a TreeView. Next, we added an event handler, which enables primitive interaction with the TreeView nodes by the user.

Dot Net Perls is a collection of pages with code examples, which are updated to stay current. Programming is an art, and it can be learned from examples.

Donate to this site to help offset the costs of running the server. Sites like this will cease to exist if there is no financial support for them.

Sam Allen is passionate about computer languages, and he maintains 100% of the material available on this website. He hopes it makes the world a nicer place.

This page was last updated on Sep 29, 2022 (edit).

Источник

Для начала создадим Windows Forms приложение. После чего добавим на форму элемент управления TreeView, который будет заполняться данными из XML файла.

Добавим в проект XML файл. Если вы не знаете, как это сделать, то можете прочитать об этом здесь

Структура файла:

<?xml version="1.0" encoding="utf-8" ?>
<cars>
<models name = "rusAuto">
<car id="1"> VAZ </car>
<car id="2"> UAZ </car>
</models>
</cars>

Затем добавим ссылку типа XmlDocument и путь к xml файлу.

public partial class MainForm : Form
{
XmlDocument xmlDoc;
string xmlpath = @"..\..\Example.xml";

Заполнение TreeView данными из XML файла

Изобретать чего-то нового не будем, а воспользуемся готовым решением с сайта MSDN и просто скопируем код. После чего первую часть кода поместим в обработчик события Load главной формы.

private void MainForm_Load(object sender, EventArgs e)
{
xmlDoc = new XmlDocument();
xmlDoc.Load(xmlpath);
treeView1.Nodes.Clear();
treeView1.Nodes.Add(new TreeNode(xmlDoc.DocumentElement.Name));
TreeNode rootNode = new TreeNode();
rootNode = treeView1.Nodes[0];
AddNode(xmlDoc.DocumentElement, rootNode);
treeView1.ExpandAll();
}

Затем добавим вторую часть скопированного кода

private void AddNode(XmlNode inXmlNode, TreeNode inTreeNode)
{
XmlNode xNode;
TreeNode tNode;
XmlNodeList nodeList;
int i;
if (inXmlNode.HasChildNodes)
{
nodeList = inXmlNode.ChildNodes;
for (i = 0; i  1; i++)
{
xNode = inXmlNode.ChildNodes[i];
inTreeNode.Nodes.Add(new TreeNode(xNode.Name));
tNode = inTreeNode.Nodes[i];
AddNode(xNode, tNode);
}
}
else
{
inTreeNode.Text = (inXmlNode.OuterXml).Trim();
}
}

Пробуем запустить приложение, нажимаем кнопку F5.

Древовидная структура успешно отобразилась и теперь можно переходить к решению часто встречающихся задач.

Работа с элементами

Все примеры этой главы нужно поместить в обработчик события NodeMouseClick элемента управления TreeView.

private void treeView1_NodeMouseClick(object sender,
TreeNodeMouseClickEventArgs e)
{
}

Благодаря второму параметру «e» мы можем получить любую информацию о выделенном элементе в TreeView.

1. Получить название выделенного элемента

e.Node.Text;
Например: MessageBox.Show(e.Node.Text);

2. Получить индекс выделенного элемента

int indexNode =  e.Node.Index;

3. Получить количество дочерних элементов:

int countChildNodes = e.Node.Nodes.Count;

4. Изменить название выделенного элемента

e.Node.Text = "MAZ";

5. Изменить название дочернего элемента

e.Node.Nodes[0].Text = "GAZEL";

6. Удалить выделенный элемент

e.Node.Remove();

Например, удалим VAZ.

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

7. очистить TreeView

treeView1.Nodes.Clear();

Все выше описанные действия затрагивают только данные внутри элемента управления TreeView и не как не отражаются в XML файле. То есть, к примеру, удаляя выделенный элемент, вы удаляете его только из коллекции элементов TreeView, но не из файла XML.

Работа с Xml файлом

Теперь рассмотрим пару примеров, как можно взаимодействовать с XML файлом. Но перед этим дополним графический интерфейс нашего приложения, добавив на форму: 2 лейбла, 2 текстовых поля: txtboxAtrName (имя атрибута), txtboxAtrValue (значение атрибута) и кнопку с надписью «изменить».

1. Выбрав элемент, мы хотим получить все его атрибуты в виде пары: название и значение.

private void treeView1_NodeMouseClick(object sender, 
TreeNodeMouseClickEventArgs e)
{
//находим узел по имени
XmlNodeList nodes = xmlDoc.GetElementsByTagName(e.Node.Text);
txtboxAtrName.Text = "";
txtboxAtrValue.Text = "";
if (nodes.Count > 0)
{
XmlAttributeCollection atrCol;
atrCol = nodes[e.Node.Index].Attributes;
if (atrCol.Count > 0)
{
//получаем все атрибуты
foreach (XmlAttribute atr in atrCol)
{
txtboxAtrName.Text = atr.Name;
txtboxAtrValue.Text = atr.Value;
}
}
}
}

Например, получим имя и значение атрибута элемента models. Результат на картинке

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

2. Хотим изменить значение какого-либо атрибута в xml файле

private void btnChange_Click(object sender, EventArgs e)
{
if (treeView1.SelectedNode != null)
{
XmlNodeList nodes;
nodes = xmlDoc.GetElementsByTagName(treeView1.SelectedNode.Text);
//получаем индекс
int index = treeView1.SelectedNode.Index;
if (nodes.Count > 0)
{
foreach (XmlAttribute attribute in nodes[index].Attributes)
{
attribute.InnerText = txtboxAtrValue.Text;
}
//вносим изменения в XML файл
xmlDoc.Save(xmlpath);
}
}
}

Принцип работы прост. Выделяем элемент в TreeView и получаем название и значение его атрибута, используя предыдущий пример.

Затем изменим, значение атрибута в textbox.Value и нажмём кнопку «изменить»

Если сейчас открыть добавленный в проект XML файл то появиться надпись, о том, что файл был изменён и будет предложено обновить информацию в нём.

Нажимаем кнопку с надписью «YES», после чего данные внутри XML файла изменяться.

Update

Если загрузка элементов в TreeView происходит слишком медленно, то попробуйте воспользоваться методом BeginUpdate

treeView1.BeginUpdate(); //добавить
treeView1.Nodes.Clear();
treeView1.Nodes.Add(new TreeNode(xmlDoc.DocumentElement.Name));
TreeNode rootNode = new TreeNode();
rootNode = treeView1.Nodes[0];
AddNode(xmlDoc.DocumentElement, rootNode);
treeView1.ExpandAll();
treeView1.EndUpdate(); //добавить

Видео 1.

Видео 2.

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

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

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

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Заполнение TreeView данными из XML файла

Работа с элементами

Работа с Xml файлом

Related Links:

Related Links