C# 树形图(TreeView)控件的使用

C# 树形图(TreeView)控件的使用

主要内容

树形图控件添加根节点、添加子节点、删除选定节点

树形图点添加图标

树形图的外观:不显示线条

读取SQL Server数据(模拟数据库读取)

监听事件:右击菜单事件、判断TreeView层级

环境

C# 语言

.Net Framework 4.5.2 框架

目录

树形图(TreeView)控件的基本用法

添加根节点

添加子节点

删除选中的节点

给节点添加图标

初始化Demo值

绑定ImageList控件

设置不同的图标

树形图(TreeView)不连接显示线条

树形图(TreeView)控件的右击菜单事件

判断树形图层级

1. TreeView 控件的基本用法

为了演示相关用法,属性方法。通过Visual Studio 2019创建一个WinForm项目,窗体如下所示。

1.1 添加根节点

///

/// 添加根节点

///

///

///

private void btn_AddNodes_Click(object sender, EventArgs e)

{

//判断输入数值非空

if (string.IsNullOrEmpty(txt_Name.Text.Trim()))

{

MessageBox.Show("要添加的节点名称不能为空!");

return;

}

//添加节点

treeView_main.Nodes.Add(txt_Name.Text.Trim());

txt_Name.Text = "";

}

1.2添加子节点

///

/// 添加子节点

///

///

///

private void btn_SonNodes_Click(object sender, EventArgs e)

{

//判断节点非空

if (string.IsNullOrEmpty(txt_Name.Text.Trim()))

{

MessageBox.Show("要添加的节点名称不能为空!");

return;

}

if (treeView_main.SelectedNode == null)

{

MessageBox.Show("请选择要添加的节点!");

return;

}

else

{

treeView_main.SelectedNode.Nodes.Add(txt_Name.Text.Trim());

txt_Name.Text = "";

}

}

1.3删除选中的节点

///

/// 删除选定结点

///

///

///

private void btn_NodeDelete_Click(object sender, EventArgs e)

{

if (treeView_main.SelectedNode == null)

{

MessageBox.Show("请选择要删除的节点!");

return;

}

else

{

treeView_main.SelectedNode.Remove();

}

}

}

2. 树形图(TreeView)添加节点图标

右击树形图属性,发现节点与图标相关的属性如下:

ImageIndex:节点的默认图像索引

ImageKey:节点默认图像键

ImageList :从获取节点图像的ImageList键

SelectedImageIndex :选定节点默认图像索引

SelectedImageIndex:选定节点默认图像

StateImageList:树形图用于表示自定义状态的ImageList(CheckBox选中状态)

CheckBoxs:指示是否在节点旁显示复选框

因此,我们定义树形图不同状态下图片包括:默认状态、选定状态、自定义状态。

2.1 初始化Demo值

为了验证节点,在窗口初始化事件添加方法loadTreeView()用于测试数据,测试数据代码如下:

///

/// 初始化TreeView

///

private void loadTreeView()

{

for (int i = 0; i < 5; i ++)

{

TreeNode treeNode_1 = new TreeNode(); //添加根节点

treeNode_1.Text = "根节点" + i;

treeView_main.Nodes.Add(treeNode_1);

//添加子节点

for (int j = 0; j < 5; j ++) //添加二级节点

{

TreeNode treeNode_2 = new TreeNode();

treeNode_2.Text = i + ":二级节点" + j;

treeNode_1.Nodes.Add(treeNode_2);

}

}

}

运行后执行显示如下:

2.2 绑定ImageList控件

页面插入ImageList控件(更改合适的名字)。属性点击Images集合,在这里编辑图标排序。

2.3. 设置不同图标

方法1:直接在设计页面修改树形图属性。

绑定ImageList、ImageIndex/imagekey 、SelectedImageIndex/SelectedImageKey、checkBoxs、StateImageList。

如图,默认状态下,图标为 ,选中状态下,图标为 。复选框未选中时图标为 ,目标选中时,图标为。

对应的页面的*.Designer.cs代码(以ImageIndex和SelectedImageIndex为例):

this.treeView_main.CheckBoxes = true; //是否复选框

this.treeView_main.Dock = System.Windows.Forms.DockStyle.Fill;

this.treeView_main.ImageIndex = 0; //默认图标索引

this.treeView_main.ImageList = this.imageList1; //默认图标绑定图片列控件

this.treeView_main.Location = new System.Drawing.Point(0, 0);

this.treeView_main.Name = "treeView_main";

this.treeView_main.SelectedImageIndex = 1; //选中图标对应索引

this.treeView_main.Size = new System.Drawing.Size(200, 450);

this.treeView_main.StateImageList = this.imageList_State; //自定义状态(复选框是否选中)状态绑定图片控件,(默认第0张,选中第1张)

this.treeView_main.TabIndex = 0;

对应的页面的*.Designer.cs代码(以ImageKey和SelectedImageKey为例):

this.treeView_main.CheckBoxes = true; //是否复选框

this.treeView_main.Dock = System.Windows.Forms.DockStyle.Fill;

this.treeView_main.ImageKey = "tree_add.png"; //默认图标名称

this.treeView_main.ImageList = this.imageList1; //默认图标绑定图片列控件

this.treeView_main.Location = new System.Drawing.Point(0, 0);

this.treeView_main.Name = "treeView_main";

this.treeView_main.SelectedImageKey = "tree_plus.png"; //选中图标名称

this.treeView_main.Size = new System.Drawing.Size(200, 450);

this.treeView_main.StateImageList = this.imageList_State; //自定义状态(复选框是否选中)状态绑定图片控件,(默认第0张,选中第1张)

this.treeView_main.TabIndex = 0;

方法2:修改后台代码

后台代码如下:

///

/// 初始化加载方法

///

///

///

private void Form1_Load(object sender, EventArgs e)

{

treeView_main.ImageList = imageList1; //绑定图片列控件

treeView_main.ImageIndex = 0; //默认图标

treeView_main.SelectedImageIndex = 1; //选中时图标

treeView_main.CheckBoxes = true; //是否复选框(默认情况第0个图标,选中情况第1个图标)

treeView_main.StateImageList = imageList_State; //用户自定义状态控件

loadTreeView(); //初始化加载TreeView

}

///

/// 初始化TreeView

///

private void loadTreeView()

{

for (int i = 0; i < 5; i ++)

{

TreeNode treeNode_1 = new TreeNode(); //添加根节点

treeNode_1.Text = "根节点" + i;

treeView_main.Nodes.Add(treeNode_1);

//添加子节点

for (int j = 0; j < 5; j ++) //添加二级节点

{

TreeNode treeNode_2 = new TreeNode();

treeNode_2.Text = i + ":二级节点" + j;

treeNode_1.Nodes.Add(treeNode_2);

}

}

}

如图,默认状态下,图标为 ,选中状态下,图标为 。复选框未选中时图标为 ,目标选中时,图标为 。

3. 树形图(TreeView)不显示线条

如图,树形图包含属性LineColor,可以设置LineColor与背景色同色,则在视觉上能够不显示线条。

4. 树形图(TreeView)控件右击菜单事件

假设需要完成的效果为,右击树形图(TreeView)的节点,选择对应的菜单栏。如下图所示:

1. 从工具箱找到控件ContextMenuStrip,并将其拖拽至页面。

2. 编辑ContextMenuStrip的选项。选择ContextMenuStrip的items集合(位于该控件的【属性】→【数据】→【items】)的“…”标志。

弹出项集合编辑器,可以看到一共有4种控件,每种控件的和方法都在编辑器的右边,具体属性和事件就不逐一举例了。

3.树形图绑定右击菜单。为树形图(treeView)选择对应ContextMenuStrip菜单(位于该控件【属性】→【行为】→【ContextMenuStrip】)。

5. 判断树形图(TreeView)层级

显示菜单栏当前层级的关键代码如下:

treeView.SelectedNode.Level

可以在其点击后判断层级,代码如下:

private void treeView1_AfterSelect(object sender, TreeViewEventArgs e)

{

int level = treeView1.SelectedNode.Level;

MessageBox.Show(level.ToString());

}

参考网址

[1] C# TreeView 控件的综合使用方法: https://blog.csdn.net/imxiangzi/article/details/81200517

[2]官网TreeNode说明: https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.forms.treenode?view=netframework-4.7.2

相关数据

淘宝类目是什么意思
365bet正版网址

淘宝类目是什么意思

📅 07-17 👁️ 2788
致全体《刀锋铁骑》玩家的一封信
365bet正版网址

致全体《刀锋铁骑》玩家的一封信

📅 09-25 👁️ 6895