WinForms零基础进阶控件教程(超实用详细版)

文章目录

树型控件TreeView
- 常用属性
- 常用事件
- 添加、删除树节点
- 通过代码添加树节点
- 通过代码删除树节点：
- 管理节点图标
- 响应事件，获取选中节点
列表视图ListView
- 常用属性
- 常用事件
- 添加、删除项
- 使用ListViewItem集合编辑器添加，删除项：
- 通过代码添加 / 删除项
- 响应事件，获取选中项目内容。
- 结合右键实现删除以及视图切换
- - 删除菜单响应代码：
  - 各种视图菜单响应代码：
数据显示DataGridView
- 绑定数据到控件
- 根据内容自动调整控件size
- AutoSizeColumnsMode属性
音乐播放控件MediaPlayer
- Winform添加打开MediaPlayer控件:
- 常用属性及方法
总结

在上一篇博客中，我们介绍了WinForms基础控件的使用。今天，我们将深入探讨更高级的控件，包括树型控件（TreeView）、列表视图（ListView）和数据显示控件（DataGridView），以及音乐播放控件（MediaPlayer）。我们将通过实际代码示例，帮助大家更好地理解和应用这些控件。

树型控件TreeView

TreeView控件用于显示具有层次结构的数据。它由层叠的节点（Node）分支构成，每个节点由图像和标签组成。节点可以展开或折叠，显示其子节点。

常用属性

Name: 获取或设置控件的名称。
Dock: 控件在父容器中的停靠方式。
Nodes: TreeView控件根节点集合。
SelectedNode: 获取或设置当前TreeView控件中选定的树节点。
ImageList: 获取或设置TreeView中所使用的图像集。

常用事件

AfterCollapse: 在折叠树节点后触发。
AfterExpand: 在展开树节点后触发。
AfterSelect: 在更改选中节点后触发。
Click: 在点击TreeView控件时触发。

添加、删除树节点

我们可以通过两种方式添加、删除树节点：

在TreeNode编辑器中添加、删除树节点。

在这里插入图片描述
2. 通过代码添加、删除树节点。

通过代码添加树节点

窗体添加Load事件，在事件处理函数中编码添加树节点

private void Form_Load(object sender, EventArgs e)
{//方案一：使用TreeNode对象进行添加节点// 创建根节点TreeNode root = new TreeNode("北京**********学院");// 将根节点添加至TreeView控件上this.tvSchool.Nodes.Add(root);// 创建专业节点TreeNode tnPro1 = new TreeNode("电子与电气");TreeNode tnPro2 = new TreeNode("电子商务");// 将专业节点添加至根节点root.Nodes.Add(tnPro1);root.Nodes.Add(tnPro2);// 创建课程节点TreeNode tnCourse1 = new TreeNode("C#");TreeNode tnCourse2 = new TreeNode("SQL SERVER");// 将课程节点添加至专业节点tnPro1.Nodes.Add(tnCourse1);tnPro1.Nodes.Add(tnCourse2);// 展开TreeView的所有节点this.tvSchool.ExpandAll();
//方案二：使用键值对的方式进行添加节点
private void TreeViewForm1_Load(object sender, EventArgs e)
{this.tvSchool.Nodes.Add("001", "北京**********学院");this.tvSchool.Nodes["001"].Nodes.Add("001001", "电子与电气");this.tvSchool.Nodes["001"].Nodes.Add("001002", "电子商务");this.tvSchool.Nodes["001"].Nodes["001001"].Nodes.Add("001001001","C#");this.tvSchool.Nodes["001"].Nodes["001001"].Nodes.Add("001001002", "SQL SERVER");this.tvSchool.Nodes["001"].Nodes["001002"].Nodes.Add("001002001", "搜索引擎优化");this.tvSchool.Nodes["001"].Nodes["001002"].Nodes.Add("001002002", "网络营销推广");this.tvSchool.ExpandAll();
}

通过代码删除树节点：

例如在上面添加的节点中删除"搜索引擎优化"节点

//通过节点对象删除
this.tvSchool.Nodes.Remove(tnCourse3);
//通过索引下标删除
this.tvSchool.Nodes[0].Nodes[1].Nodes.RemoveAt(0);
//通过键删除节点
this.tvSchool.Nodes["001"].Nodes["001002"].Nodes.RemoveByKey("001002001");

管理节点图标

为了在TreeView的节点中使用图标，我们需要借助ImageList控件。首先向窗体中添加ImageList控件，并向其中添加需要的图片。然后将ImageList控件与TreeView控件进行关联。
给节点设置图标有两种情况：

所有节点图标都一样：

此时直接在属性栏中或者通过代码找到TreeView控件，设置ImageIndex属性(未选中的展示图片索引)和SelectedImageIndex属性（选中情况下的图片索引）。
在这里插入图片描述

节点的图标不一致：

通过编辑器添加的节点，直接在编辑中为每个节点设置ImageIndex属性和SelectedImageIndex属性。
通过代码，使用TreeNode对象添加的节点，在代码中为每个TreeNode设置ImageIndex属性和SelectedImageIndex属性。下面代码只为一个节点添加了图标，其他节点省略。

//方案一：
TreeNode root = new TreeNode("北京**********学院",0,1);
//方案二：
TreeNode root = new TreeNode("北京**********学院");
root.ImageIndex = 0;
root.SelectedImageIndex = 1;

通过代码，使用键值对的方式添加的节点，在代码中为每个TreeNode设置ImageIndex属性和SelectedImageIndex属性。下面代码只为一个节点添加了图标，其他节点省略。

//方案一：
this.tvSchool.Nodes.Add("001", "北京**********学院",0,1);
//方案二：
this.tvSchool.Nodes.Add("001", "北京**********学院");
this.tvSchool.Nodes["001"].ImageIndex = 0;
this.tvSchool.Nodes["001"].SelectedImageIndex = 1;

响应事件，获取选中节点

为TreeView控件添加AfterSelect事件，节点被选中后触发，在事件处理函数中，获取选中节点，并提示其标签文本值和key。

TreeNode selectedNode = this.tvSchool.SelectedNode;
//如果在添加节点的时候，并不是以键值对的方式添加的或者没有设置Name值，那么selectedNode.Name里面是空字符串
MessageBox.Show(selectedNode.Text + "," + selectedNode.Name);

在这里插入图片描述
注意，运行时窗体会先弹出目前所选(或上次停留的节点),点击弹窗的按键后,窗体会“消失”,但实际上未关闭,点击下方任务栏中窗体的图标，即可选择其他节点展示。

列表视图ListView

ListView控件可以展示多项数据，每一项均为ListViewItem对象，每个ListViewItem对象中包含SubItems属性表示该项中所有子项的集合。

常用属性

属性	说明
Name	控件的名称
Dock	控件在父容器中的停靠方式
Items	包含控件中所有项的集合
Columns	控件中显示的所有列标题的集合
View	控件的显示视图
LargeImageList	当控件以大图标视图显示时使用的ImageList
SmallImageList	当控件以小图标视图显示时使用的ImageList
GridLines	在包含控件中的行和列之间是否显示网格线
MultiSelect	是否可以选择多项
SelectedItems	获取在控件选定的项
FullRowSelect	单击某项是否选择其所有子项

常用事件

Click: 在单击ListView控件时触发。
SelectedIndexChanged: 当选定项发生更改时触发。

添加、删除项

我们可以通过两种方式添加、删除项：

使用ListView编辑器添加、删除项。
使用代码为ListView添加、删除项。

ListView控件具有5种显示视图，由View属性设置，View属性的值及说明见下表：

属性值	说明
Details	详细视图，标准的二维表格，第一行为表头
LargeIcon（默认值）	大图标，每一项显示为一个大图标
SmallIcon	小图标，每一项显示为一个小图标
List	列表，每项显示一行
Tile	平铺，显示大图标，并在右侧显示详细信息

使用ListViewItem集合编辑器添加，删除项：

实现步骤：

（1）创建窗体，并向其中拖入ListView控件

（2）设置ListView控件的Dock属性在父容器中停靠。

（3）向ListView控件中添加，删除列。

（4）设置ListView控件的显示视图为Detail，此时可以看到列标题
（注意:编辑列之后 Details 视图才能正常显示）

（5）向ListView控件中添加，删除项（点击右上角三角，编辑项）

（6）添加ListViewItem项目，在text属性中设置第一列内容，在SubItems里面设置其他列内容。

注意：如果该项数据有图片，需要拖入两个ImageList控件，分别存储大图标和小图标的图片。

在这里插入图片描述

点击ListView控件右上角三角，使用LargeImageList\SmallImageList属性将ListView控件与两个ImageList控件关联。
然后直接在该项ListViewItem上设置ImageIndex属性设置图片的索引。

特别注意：如果ListView与ImageList关联，ListView的Detail视图中的行高会随着小图标视图的ImageList的图像高度而改变。而且取消与ImageList的关联后也无法还原，此时可以通过设置ImageList的图像大小来控制行高。

通过代码添加 / 删除项

private void Form_Load(object sender, EventArgs e)
{// 创建ListViewItem对象，设置text值（第一列的值）ListViewItem item1 = new ListViewItem("安琪拉");item1.Name = "itemAjl"; // 设置当前项的名字item1.ImageIndex = 0;  // 设置图标索引// 设置除第一列外其他列数据item1.SubItems.Add("超弱");item1.SubItems.Add("中等");item1.SubItems.Add("超强");item1.SubItems.Add("难");this.lvTimi.Items.Add(item1);// 下面同理，添加其他项// ......
}

//直接通过ListViewItem对象名删除
this.lvTimi.Items.Remove(item1);
//通过索引小标删除
this.lvTimi.Items.RemoveAt(0);
//通过键值对中的键删除，此处的键就是ListViewItem对象的name
this.lvTimi.Items.RemoveByKey("itemAjl");

响应事件，获取选中项目内容。

设置FullRowSelect属性为true，保证单击某项整行选中效果，选择ListView控件的DoubleClick（双击）事件,编写如下代码：

ListViewItem item = this.lvTimi.SelectedItems[0];
if (item == null)return;
string result = "";
result += "名字:" + item.Text + "\n";
result += "生存能力:" + item.SubItems[1].Text +"\n";
result += "攻击伤害:" + item.SubItems[2].Text + "\n";
result += "技能效果:" + item.SubItems[3].Text + "\n";
result += "上手难度:" + item.SubItems[4].Text + "\n";
MessageBox.Show(result);

结合右键实现删除以及视图切换

拖入ConTextMenuStrip控件，制作如下菜单，并设置ListView控件的ContextMenuStrip属性用来关联ListView控件和ContextMenuStrip控件：
在这里插入图片描述

删除菜单响应代码：

private void 删除ToolStripMenuItem_Click(object sender, EventArgs e)
{if (this.lvTimi.SelectedItems.Count == 0){MessageBox.Show("您没有选中项目!");return;}ListViewItem item = this.lvTimi.SelectedItems[0];this.lvTimi.Items.Remove(item);
}

各种视图菜单响应代码：

private void 大图标ToolStripMenuItem_Click(object sender, EventArgs e)
{this.lvTimi.View = View.LargeIcon;
}private void 小图标ToolStripMenuItem_Click(object sender, EventArgs e)
{this.lvTimi.View = View.SmallIcon;
}private void 详细ToolStripMenuItem_Click(object sender, EventArgs e)
{this.lvTimi.View = View.Details;
}private void 列表ToolStripMenuItem_Click(object sender, EventArgs e)
{this.lvTimi.View = View.List;
}private void 平铺ToolStripMenuItem_Click(object sender, EventArgs e)
{this.lvTimi.View = View.Tile;
}

数据显示DataGridView

DataGridView控件是一个强大的数据显示和用户输入控件。它允许用户编辑、更新和排序数据。

属性	说明
DataSource	要显示的数据集 (源)
ValueMember	绑定处理程序标识，给程序员看的
DisplayMember	绑定显示的数据，一般是显示给客户看的

绑定数据到控件

DataTable dataTable = new DataTable();
this.dataGridView1.DataSource = dataTable;

根据内容自动调整控件size

private void AutoSizeTable()
{int height = dataGridView1.Height;int width = 0;foreach (DataGridViewColumn col in dataGridView1.Columns){width += col.Width;}width += dataGridView1.RowHeadersWidth;width = (width > 650) ? 650 : width;dataGridView1.ClientSize = new Size(width + 2, height + 2);
}

在这里插入图片描述

AutoSizeColumnsMode属性

更改datagridview的column的AutoSizeMode

成员名称	说明
None	列宽不会自动调整
AllCells	调整列宽，以适合该列中的所有单元格的内容，包括标题单元格
AllCellsExceptHeader	调整列宽，以适合该列中的所有单元格的内容，不包括标题单元格
ColumnHeader	调整列宽，以适合列标题单元格的内容
DisplayedCells	调整列宽，以适合当前屏幕上显示的行的列中的所有单元格的内容，包括标题单元格
DisplayedCellsExceptHeader	调整列宽，以适合当前屏幕上显示的行的列中的所有单元格的内容，不包括标题单元格
Fill	调整列宽，使所有列的宽度正好填充控件的显示区域，只需要水平滚动保证列宽在MinimumWidth 属性值以上。相对列宽由相对 FillWeight 属性值决定