# aardio 范例: 列表框控件（listbox） - GDI+ 自绘



```aardio
//列表框控件（listbox） - GDI+ 自绘
//窗口绘图基础: https://www.aardio.com/zh-cn/docs/library-guide/std/win/ui/drawing.html
import win.ui;
/*DSG{{*/
winform = win.form(text="listbox 自绘演示(GDI+)";right=973;bottom=619)
winform.add(
listbox={cls="listbox";left=41;top=18;right=950;bottom=597;bgcolor=0xFFFFFF;anchors={left=1;top=1;right=1;bottom=1};items={};ownerDraw=1;z=1}
)
/*}}*/

winform.listbox.onMeasureItem = function(measureItem,dpiScaleX,dpiScaleY){
    //注意listbox的实际高度受行高的影响,只有自绘时才能设置行高
	measureItem.itemHeight = 61 * dpiScaleY;  
}

import gdip;
winform.listbox.onDrawItem = function(drawItem,dpiScaleX,dpiScaleY){
    var rc = drawItem.rcItem;
    
    //创建画板
	var graphics = gdip.graphics(drawItem.hDC);
	
	//创建背景刷子
	var brush = gdip.solidBrush(0xFFFFFFFF);
	graphics.fillRect(brush,rc.left,rc.top,rc.width(),rc.height())
	brush.delete(); 
	
	//画选区渐变背景
	if( drawItem.itemState & 0x1/*_ODS_SELECTED*/){
		var p1 = ::POINTF(rc.left,rc.top)
		var p2 = ::POINTF(rc.left,rc.bottom)  
		var lineBrush = gdip.lineBrush(p1/*渐变起始坐标*/, p2 /*渐变终止坐标*/ , 0x2FFFFFFF/*起始颜色*/, 0xFFFFFFE0/*结束颜色*/, 2/*_GdipWrapModeTileFlipY*/ )
		graphics.fillRect(lineBrush,rc.left,rc.top,rc.width(),rc.height());
		lineBrush.delete()
	}
	
	//第二个项目开始顶部画线	
	if( drawItem.itemID > 0 ){
		var pen = gdip.pen(0xFFDCDCCC,1);
		graphics.drawLine(pen, rc.left,rc.top,rc.right,rc.top);
		pen.delete()
	}
	
	//获取字体
	var font = gdip.font(drawItem.hDC);
	var strFormat = gdip.stringFormat (); 
  
	var str = winform.listbox.getItemText(drawItem.itemID + 1);
	var brush = gdip.solidBrush(0xFF222222);
	graphics.drawString( str , font , rc.inflate(-16,-16).float(), strFormat,brush);
 
 	//释放对象
 	font.delete();
 	strFormat.delete();
 	brush.delete();
    graphics.delete();
}
 
for(i=1;10;2){  
	winform.listbox.add("控件属性面板中点击「行为 / 自绘」设为 true");
	winform.listbox.add("也就是在控件创建参数里添加 ownerDraw=true");
}
 
winform.enableDpiScaling();
winform.show();

return win.loopMessage();
```