利用自绘给listbox前面插入icon图标增加动态效果

前面有几篇文章里讲过对listbox的自绘, 也提供了效果代码, 有兴趣的可以看看.

listbox是不支持imagelist属性的, 要添加图标只能自绘.

这次的效果也不需要那么复杂, 只是在listbox每项前面添加个图标,当选择某项时候改变图标即可.

listboxEx.aardio扩展库代码:

//列表样式
import fonts.fontAwesome;
class listboxEx{
	ctor( winform,itemHeight){
		winform.bgcolor = 0xFFFFFF;
		winform.onMeasureItem = function(measureItem){
    		measureItem.itemHeight = itemHeight;  
		}
		
		winform.onDrawItem = function(drawItem){
     		..gdi.selectBrush(
        		function(hdc,pen,brush){
            		var rc = drawItem.rcItem;
					 
            		var text = winform.getItemText(drawItem.itemID + 1);

            		if (drawItem.itemState & 1/*_ODS_SELECTED*/) {  
                		..gdi.fillRect(hdc,0xFFEAC9,rc);
                		var font = ::LOGFONT(weight=600;color=0x00B900);
                		..gdi.textOut(hdc,font,text,rc.left+30, rc.top+10);
                		var ICO = '\uF0A9';
						var font = ::LOGFONT(color=0x00B900;h=-22;name='FontAwesome'); 
						..gdi.textOut(hdc,font,ICO,rc.left+6, rc.top+6);
            		}else {
                		..gdi.fillRect(hdc,0xFFFFFF,rc);
                		var font = ::LOGFONT(weight=400;color=0x000000);
                		..gdi.textOut(hdc,font,text,rc.left+30, rc.top+10);
                		var ICO = '\uF111';
						var font = ::LOGFONT(color=0xC9C9C9;h=-14;name='FontAwesome'); 
						..gdi.textOut(hdc,font,ICO,rc.left+10, rc.top+10);
            		}

					if (drawItem.itemID > 0) {  
                    	..gdi.drawLine(hdc,rc.left, rc.top,rc.right, rc.top);
                    }  
					
					if (drawItem.itemState & 0x10/*_ODS_FOCUS*/) {
						//去掉焦点框  
                		::DrawFocusRect(hdc,rc);
            		}

         		},drawItem.hDC,0xa0a0a0/*背景色*/,0xE6E6E6/*画笔色*/)
		}
	};	
}

使用:

注意: 先手动在属性面板开启listbox[自绘]

import listboxEx;
//绑定样式
listboxEx(mainForm.listbox,32);
//之后添加内容
mainForm.listbox.items = {
"1|应用管理";
"1.1|应用_demo1";
"1.2|应用_demo2";
"1.3|应用_demo3";
"1.4|应用_demo4";
"1|应用管理";
"1.1|应用_demo1";
"1.2|应用_demo2";
"1.3|应用_demo3";
"1.4|应用_demo4";
"1|应用管理";
"1.1|应用_demo1";
"1.2|应用_demo2";
"1.3|应用_demo3";
"1.4|应用_demo4";
};