图标化的TreeView控件:把信息呈现的更有魅力!

1. 引言

在当今的界面设计中，追求独特而精美的用户界面已成为一种趋势。而树形控件(TreeView)作为一种常见的界面元素，被广泛应用于各种应用程序中，用于展示层次结构和组织数据。然而，大多数默认的树形控件外观相对单调，缺乏吸引力和视觉冲击力。为了提升用户体验和界面的视觉吸引力，我们需要一种简单且高效的方法来增添其魅力。

正是在这样的背景下，为树形控件(TreeView)加入图标成为了一个备受关注的话题。通过添加图标，我们可以赋予TreeView控件更多的动态元素和个性化的特色。图标可以为树形节点提供可视化的标识，使用户更容易理解并导航数据。同时，巧妙运用图标还可以增强应用程序的品牌形象，为用户带来愉悦和独特的界面体验。

2. 添加图标步骤

A. 创建图像列表(Image List)
在为TreeView控件添加图标之前，我们首先需要创建一个图像列表(Image List)来存储我们所需的图标：

import win.imageList; 

// 创建图像列表
var imageList = win.imageList( winform.dpiScale(16,16) ); 

  

B. 为图像列表添加图标

// 添加更多的图标，图标在工程资源目录里
imageList.addIcon("\res\access.ico")
imageList.addIcon("\res\4chan.org.ico")
imageList.addIcon("\res\birdie.ico")

  

C. 关联treeview控件

//将图像列表与treeview控件关联
winform.treeview.setImageList( imageList);

  

D. 创建节点并指定图标索引

//为树形创建节点并指定图标索引
winform.treeview.insertItem(
    text="内核库1";
    iImage=1;//数字是图标索引
    iSelectedImage=1; //选中时显示的图标
    children={
        {text="math";iImage=0;iSelectedImage=1;};
        {text="com";iImage=1;iSelectedImage=1;};
        {text="io";iImage=2;iSelectedImage=1;};
   
    }
)

  

通过以上四步，我们就可以为节点添加图标，整个工程下载和效果图：

3. 工程下载和效果图

完整代码：

//树形控件加图标
import win.ui;
/*DSG{{*/
var winform = win.form(text="树形控件加图标";right=349;bottom=249;parent=...)
winform.add(
treeview={cls="treeview";left=22;top=17;right=326;bottom=230;asel=false;bgcolor=15793151;db=1;dl=1;dt=1;edge=1;hscroll=1;infoTip=1;vscroll=1;z=1}
)
/*}}*/

import win.ui.menu;
winform.treeview.onnotify = function(id,code,ptr){
 
    if( code == 0xFFFFFE3D/*_TVN_SELCHANGEDW*/ ){ //改变选项

		var hItem = winform.treeview.getSelection();
		if(hItem){
			winform.text = winform.treeview.getItemText(hItem);
		}
    }
    elseif(code = 0xFFFFFFFB/*_NM_RCLICK*/){ //鼠标右键单击
        var hItem,tvht = winform.treeview.hitTest();
        winform.treeview.setSelected(hItem);
        
        var menu = win.ui.popmenu(winform)
        menu.add("删除",
            function(){ 
                winform.treeview.delItem(hItem)
            }
        )
        menu.popup(x,y,true);
    }

}


import win.imageList; 

// 创建图像列表
var imageList = win.imageList( winform.dpiScale(16,16) ); 

// 添加更多的图标，图标在工程资源目录里
imageList.addIcon("\res\access.ico")
imageList.addIcon("\res\4chan.org.ico")
imageList.addIcon("\res\birdie.ico")

//将图像列表与treeview控件关联
winform.treeview.setImageList( imageList);

//为树形创建节点并指定图标索引
winform.treeview.insertItem(
    text="内核库1";
    iImage=1;//数字是图标索引
    iSelectedImage=1; //选中时显示的图标
    children={
        {text="math";iImage=0;iSelectedImage=1;};
        {text="com";iImage=1;iSelectedImage=1;};
        {text="io";iImage=2;iSelectedImage=1;};
   
    }
)

winform.treeview.insertItem(
    text="内核库2";
    iImage=0;//数字是图标索引
    iSelectedImage=1;
    children={
        {text="string";iImage=0;iSelectedImage=1;};
        {text="raw";iImage=1;iSelectedImage=1;};
        {text="table";iImage=2;iSelectedImage=1;};
   
    }
)

winform.treeview.insertItem(
    text="内核库3";
    iImage=2;//数字是图标索引
    iSelectedImage=1;
   children={
        {text="time";iImage=0;iSelectedImage=1;};
        {text="com";iImage=1;iSelectedImage=1;};
        {text="io";iImage=2;iSelectedImage=1;};
   
    }
)

winform.show() 
win.loopMessage();

工程下载包含图标：https://www.123pan.com/s/fyWbVv-TJmRv.html提取码:wTNn

效果图：

通过以上示例和截图效果，我们可以看到为TreeView控件添加图标可以提升用户界面的可读性和可视化吸引力。