主要内容
树形图控件添加根节点、添加子节点、删除选定节点
树形图点添加图标
树形图的外观:不显示线条
读取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