【第十章 10.1】列表框控件listbox -- GDI自绘

列表框控件位置：

演示：

自绘开启为true;

代码：

//GDI自绘
// 导入 win.ui 库，用于创建图形界面
import win.ui;  
/*DSG{{*/
// 创建一个名为 winform 的窗口对象，并设置其属性
var winform = win.form(text="listbox自绘(GDI方式)";right=757;bottom=467)  
// 向窗口中添加一个列表框控件，并设置其属性
winform.add(
    listbox={cls="listbox";left=12;top=11;right=745;bottom=457;bgcolor=16777215;db=1;dl=1;dr=1;dt=1;items={};ownerDraw=1;vscroll=1;z=1}
)
/*}}*/

// 列表框的测量项事件处理函数
winform.listbox.onMeasureItem = function(measureItem,dpiScaleX,dpiScaleY){  
    // 设置列表项的高度
    measureItem.itemHeight = 61 * dpiScaleY;  
}

// 列表框的绘制项事件处理函数
winform.listbox.onDrawItem = function(drawItem,dpiScaleX,dpiScaleY){  
    // 使用 GDI 进行绘制操作
    gdi.selectBrush(  
        function(hdc,pen,brush){  
            // 获取绘制项的矩形区域
            var rc = drawItem.rcItem;  
            // 填充矩形区域为白色
            gdi.fillRect(hdc,0xFFFFFF,rc);  
            // 如果项的索引大于 0，绘制顶部线条
            if (drawItem.itemID > 0) {  
                /*
                  在 gdi.drawLine(hdc,rc.left, rc.top,rc.right, rc.top) 中： 
                  hdc：指定绘图设备的句柄。
                   rc.left、rc.top：表示起始点的横坐标和纵坐标。
                   rc.right、rc.top：表示结束点的横坐标和纵坐标。该函数会从起始点到结束点绘制一条直线。
                 */
                gdi.drawLine(hdc,rc.left, rc.top,rc.right, rc.top);
            }  
            // 如果项被选中
            if (drawItem.itemState & 1/*_ODS_SELECTED*/) {  
                // 填充渐变色
                gdi.fillGradient(hdc,rc,0xFFFFFF, 0xFFC4B5,1/*_GRADIENT_FILL_RECT_V*/)
            }  
            // 获取列表项的文本
            var str = winform.listbox.getItemText(drawItem.itemID + 1);  
            // 创建字体对象
            var font = ::LOGFONT(weight=400;point=10;color=0x000000);  
            // 在指定位置输出文本
            gdi.textOut(hdc,font,str,rc.left + 18/dpiScaleX, rc.top + 26/dpiScaleY);  
        },drawItem.hDC,0xF5FDFF/*背景色*/,0xEEEEEE/*画笔色*/)
}

// 使用 for 循环向列表框添加文本
for(i=1;10;2){  
    winform.listbox.add("控件属性面板中点击「行为 / 自绘」设为 true");
    winform.listbox.add("也就是在控件创建参数里添加 ownerDraw=true");
}

// 显示窗口
winform.show();
// 启动界面线程消息循环
win.loopMessage();

水平渐变或者垂直渐变：

// 水平渐变填充
gdi.fillGradient(dc,rect,0xFF0000,0x0000FF,0/*_GRADIENT_FILL_RECT_H*/);
// 垂直渐变填充
gdi.fillGradient(dc,rect,0xFF0000,0x0000FF,1/*_GRADIENT_FILL_RECT_V*/);