創建 trackbar 控制項(跟蹤條、滑尺控制項) 非常簡單,從控制項工具條拖到界面上就可以了:
再切換到代碼視圖:
添加代碼
winform.trackbar.setRange(1,100)指定滑塊最小值、最大值就可以了。我們可以用 winform.trackbar.pos 隨時獲取到當前刻度,也可以添加事件回調函數 —— 這些大家可以看「範例 / Windows 窗口 / 窗口控制項 / 滑尺控制項 」,代碼很簡單不多講。
我們可能發現 trackbar 的刻度是整數,如果我們希望使用小數刻度,可以換算後再顯示或使用,例如 「範例 / Windows 窗口 / 窗口控制項 / 滑尺控制項 」裡就是這樣寫的:winform.trackbar.setRange(1,100)
winform.trackbar.oncommand = function(id,event,pos){ var pos = winform.trackbar.pos; winform.editTrackbar.text = pos / 10; winform.trackbar.tooltip = pos / 10; }有時候我們可能希望 trackbar 有透明的背景,這很簡單,在窗體設計器中點選 trackbar 控制項,然後把「浮動透明」屬性設為 true 就可以了:|
這種系統提供的 trackbar 控制項有一個奇葩的功能,點擊以後周圍會顯示一個虛線框,而且沒辦法簡單地取消或關掉,下面提供一個方法幹掉這個虛線框:winform.trackbar.onnotify = function(id,code,ptr){ if( code == 0xFFFFFFF4 ){ var lvcd = winform.trackbar.getNotifyCustomDraw(code,ptr); if( lvcd.dwDrawStage == 1 ){ lvcd.uItemState = lvcd.uItemState & ~0x10; lvcd.update(); } }}如果我們想讓 trackbar 變得更漂亮一些,用系統 trackbar 就比較為難了。我們可以用 aardio 中最強大的控制項 —— plus 控制項來繪製 trackbar 控制項。方法很簡單,先拖一個 plus 控制項到界面上,然後打開「工具 / 滑尺配色工具」
配置好外觀與樣式,然後「導出到窗體設計器選中控制項」就行了:下面看自動生成的範例,運行效果:
範例代碼很簡單:
import win.ui;var winform = win.form(text="滑尺控制項")winform.add(trackbar={cls="plus";left=225;top=266;right=667;bottom=281;bgcolor=14265123;border={radius=-1};foreRight=15;forecolor=1865727;paddingBottom=5;paddingTop=5;z=1})
winform.trackbar.setTrackbarRange(1,100);
winform.trackbar.skin({ background={ default=0xFF23ABD9; }; foreground={ default=0xFFFF771C; hover=0xFFFF6600; }; color={ default=0xFFFF5C00; hover=0xFFFF6600; }})
winform.show() win.loopMessage();如果希望在拖動滑塊時顯示提示,可添加以下代碼:
winform.trackbar.onMouseUp = function(wParam,lParam){ toolinfo.trackPopup(false);}
winform.trackbar.onPosChanged = function( pos,thumbTrack ){ if(thumbTrack){ var x,_ = win.getMessagePos(); var _,y,cx,cy = winform.trackbar.getPos(true) toolinfo.setText(pos / 10).trackPopup(true,x,y+cy); }}
以上所有範例都已經添加到新版 aardio 中。