4.17 树型视图控件与图像列表控件

树型视图控件是Visual Basic中的高级控件之一，通常用其显示有目录结构的内容。其使用方法相对其他普通控件较复杂。图像列表控件是Visual Basic中较常用的控件之一，主要用其存放图形文件。本节将介绍树型视图控件的一部份内容和图像列表控件的使用方法。

4.17.1 创建树型视图

Windows资源管理器左边的目录树就是一个树型视图，如图4.40所示。这种视图形式主要是用来清晰地表达层次结构。在一些复杂的资料管理系统中为了方便地组织和管理资料文档会经常使用这种视图形式。

创建树型视图要用到树型视图（TreeView）控件。该控件与RichTextBox控件一样也需要手动添加到工具箱中。方法如前所述，在工具箱上单击右键，从弹出式快捷菜单中选择“部件”菜单项，打开“部件”对话框的“控件”选项卡，从列表中找到“Microsoft Windows Common Control 6.0”项，在其前面的复选框内打勾，并单击“应用”按钮后，工具箱内会多出TreeView 、ListView 、ImageList、Toolbar、StatusBar、ProgressBar等9个控件。TreeView控件在工具箱中的图标是，单击此图标然后在窗体上画出一个树型视图，其默认名称应该为TreeView1。

图4.40 资源管理器界面

4.17.2 设置树型视图的外观

设置树型视图的外观，主要用到Style和LineStyle两个属性。Style属性有7种值可以选择，其意义如表4.21所示。

表4.21 Style属性值

LineStyle属性设置在结点之间显示的线的样式，其值可以设置0和1。如果设置为0则根结点之间没有线连接，而如果设置为1根结点之间就会有连线出现，如图4.41所示。

图4.41 LineStyle属性效果

只设置上述两个属性并不能真正地达到设置外观的目的，因为树型视图结点前的图标仍旧没有出现。要设置图标必须将树型视图控件和图像列表控件链接起来才可以。

4.17.3 图像列表控件

图像列表（ImageList）控件在程序运行时是不可见的。该控件是加入树型视图控件时在工具箱中多出来的9个控件之一，它也位于Microsoft Windows Common Control 6.0控件中。其在工具箱中的图标为。ImageList控件的用法很简单，作为图片的容器主要用来给其他控件提供图标，比如树型视图控件。下面讲述向ImageList中添加图片的方法。

1. 向ImageList中添加图片

向ImageList中添加图片的具体操作步骤如下。

（1）在窗体中画一个ImageList控件，其默认名应该是ImageList1。并在其上单击鼠标右键，在弹出的快捷菜单中选择“属性”菜单项。

（2）在打开的“属性页”窗口中的“通用”选项卡内选择16×16单选按钮（当然也可以选择其他选项，该选项用来设置图标的大小）。

（3）打开“图像”选项卡，使用“插入图片”按钮添加图片，添加进来的图片会以缩略图的形式显示在图像栏中，如图4.42所示。也可以使用“删除图片”按钮将多余的图删掉。

图4.42 ImageList属性页窗口（图像选项卡）

（4）单击“确定”按钮退出窗体。

2. 链接TreeView控件和ImageList控件

通过上述步骤设置好图像列表控件后，接下来就应该把树型视图控件和图像列表控件链接起来，具体操作步骤如下。

（1）在TreeView1上单击鼠标右键，在弹出的快捷菜单中选择“属性”菜单项。

（2）在打开的“属性页”窗口中的“通用”选项卡内找到“图像列表”栏，从中选择上面设置好的图像列表控件—ImageList1，如图4.43所示。

（3）单击“确定”按钮退出“属性页”窗口后就可以看到TreeView1中的结点前出现了“绿色书”的图标，如图4.44所示。这个图标其实就是ImageList1控件中的第一幅图。

图4.43 TreeView控件的属性页窗口（通用选项卡）

图4.44 TreeView1

4.17.4 给树型视图添加内容

要给树型视图添加内容只能通过程序实现，而且要用到Node对象，因为视图中的每一个结点都是一个Node对象。下面的代码可以给TreeView1添加内容。

        01 Private Sub Form_Load()
        02             Dim nt As Node
        03             Set nt = TreeView1.Nodes.Add(, , "root", "大陆", 1)
        04             Set nt = TreeView1.Nodes.Add("root", tvwChild, , "孙楠", 1)
        05             Set nt = TreeView1.Nodes.Add("root", tvwChild, , "那英", 1)
        06             Set nt = TreeView1.Nodes.Add("root", tvwChild, , "零点", 1)
        07             Set nt = TreeView1.Nodes.Add("root", tvwChild, , "韩红", 1)
        08
        09             Set nt = TreeView1.Nodes.Add(, , "root1", "港台", 1)
        10             Set nt = TreeView1.Nodes.Add("root1", tvwChild, , "刘德华", 1)
        11             Set nt = TreeView1.Nodes.Add("root1", tvwChild, , "张学友", 1)
        12             Set nt = TreeView1.Nodes.Add("root1", tvwChild, , "刘若英", 1)
        13             Set nt = TreeView1.Nodes.Add("root1", tvwChild, , "王力宏", 1)
        14
        15 End Sub

【代码说明】第02行声明了一个结点（Node）型的变量。第03行是给树TreeView1增加了一个根结点，其关键字为“root”、其标题文本为“大陆”。第04、05、06、07行是在刚才的“大陆”根结点下建立的4个子结点。其他语句的作用同上。运行结果如图4.45所示。

图4.45 TreeView1中的内容

4.17.5 设置展开/折叠和单击结点时的图标

1. 设置展开/折叠结点时的图标

运行程序后，内容是添加到TreeView1上了，可是根（父）结点展开和折叠时的图标是相同的，这样不利于观察树的层次结构。为了解决这一问题，首先了解一下树型视图的两个事件—Expand和Collapse。其中，Expand事件是在展开结点时被触发，Collapse事件是在折叠结点时被触发。所以，解决展开/折叠时更换图标的代码如下。

        01 Private Sub TreeView1_Expand(ByVal Node As MSComctlLib.Node)
        02        Node.Image = 2
        03 End Sub
        04
        05 Private Sub TreeView1_Collapse(ByVal Node As MSComctlLib.Node)
        06        Node.Image = 1
        07 End Sub

代码中Expand事件的括号内有个参数Node，这个Node代表当前被展开的那个结点，例如单击“大陆”结点前的加号（+），展开结点时，就会触发Expand事件，此时参数Node代表“大陆”结点。事件中的语句：

        Node.Image = 2

的作用是将当前Node结点的图标变更为图像列表控件（ImageList1）中的第二幅图。Collapse事件Node参数的意义和Expand事件的相同，事件过程中语句的作用是将当前Node结点的图标变更为图像列表控件（ImageList1）中的第一幅图。加完代码后运行效果如图4.46所示。

图4.46 展开/折叠结点图标

2. 设置单击结点时的图标

树型视图最重要的一个事件是NodeClick事件，该事件在单击树中某个结点时会被触发。因此该事件内可以写入单击结点后要执行的程序。例如，下面的程序可以在程序运行时单击某个结点就会改变那个结点的图标。

        01 Private Sub TreeView1_NodeClick(ByVal Node As MSComctlLib.Node)
        02       Node.SelectedImage = 3
        03 End Sub

NodeClick事件的Node参数的作用与Expand、Collapse两个事件的Node参数的作用相同，代表当前被单击的那个结点。事件中唯一的一条语句的作用是把单击选中的结点的图标改变为图像列表控件中的第三幅图。读者可以试着将上面的语句改为

        Node. Image = 3

运行后多选择几个结点，这样就会发现所有单击过的结点图标都会变成第三幅图。若只想让被选中的结点图标变化，必须使用Node对象的SelectedImage属性，而并非Image属性。

4.17.6 获取被选中的结点的信息

反映结点信息的常用属性有FullPath、Text、Key等属性。

1. FullPath属性

该属性获取结点的完整路径，例如下面的程序：

        01 Private Sub TreeView1_NodeClick(ByVal Node As MSComctlLib.Node)
        02        MsgBox Node.FullPath
        03 End Sub

运行程序，并单击“零点”结点时，弹出的消息框如图4.47所示，消息框中的内容为被单击结点的完整路径。路径中间的“\”可以被设置成其他的分隔符，设置的方法是通过树型视图控件的PathSeparator属性。

2. Text属性

可以用该属性获取结点的标题文本，例如将上面NodeClick事件中的语句换为：

        MsgBox Node.Text

后，消息框中显示的内容为“零点”两个字。编程时可以用此属性值判断用户单击了哪个结点，根据单击不同的结点执行不同的语句。

图4.47 FullPath属性结果

3. Key属性

该属性用来获取结点的关键字，关键字就跟身份证号码一样，用于识别树中唯一的结点，一棵树中任意两个结点的关键字都不能相同。例如，上面的TreeView1中两个根结点的关键字分别为“root”和“root1”，而其他的子结点的关键字都被省略掉了。如果想在某个结点下面添加子结点时必须要设置该结点的关键字。例如，在TreeView1中，如果要想在“那英”结点下添加一个“雾里看花”子结点，那么Form_Load()事件中的程序应该改写为：

        01 Private Sub Form_Load()
        02        ......
        03        Set nt = TreeView1.Nodes.Add("root", tvwChild, , "孙楠", 1)
        04        Set nt = TreeView1.Nodes.Add("root", tvwChild, "naying", "那英", 1)
        05        Set nt = TreeView1.Nodes.Add("naying", tvwChild, , "雾里看花", 1)
        06        Set nt = TreeView1.Nodes.Add("root", tvwChild, , "零点", 1)
        07        ......
        08 End Sub

该程序中，给“那英”结点设置关键字为“naying”，为了让“雾里看花”结点变为其子结点，语句

        Set nt = TreeView1.Nodes.Add("naying", tvwChild, , "雾里看花", 1)

中Add方法的第一个参数写为了“naying”。Key属性比起Text属性更能准确无误地判断用户单击了哪个结点，因为在复杂的系统里有时树中会有不同根结点下的两个或多个结点的名称相同。