trackbar 控件高级玩法

admin2022-01-05  886

 ​Jacen He

创建 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/*_NM_CUSTOMDRAW*/ ){
    var lvcd = winform.trackbar.getNotifyCustomDraw(code,ptr);
    if( lvcd.dwDrawStage == 1/*_CDDS_PREPAINT*/ ){
      lvcd.uItemState = lvcd.uItemState &  ~0x10/*_CDIS_FOCUS*/;
      lvcd.update();
    }
  }
}


如果我们想让 trackbar 变得更漂亮一些,用系统 trackbar 就比较为难了。我们可以用 aardio 中最强大的控件 —— plus 控件来绘制 trackbar 控件。方法很简单,先拖一个 plus 控件到界面上,然后打开「工具 / 滑尺配色工具」


图片

配置好外观与样式,然后「导出到窗体设计器选中控件」就行了:


图片

下面看自动生成的范例,运行效果:

图片

范例代码很简单:

import win.ui;
/*DSG{{*/
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)
    
    /*
    注意刻度最小单位总是1,
    如果要改为其他单位,只要修改显示数值就可以,
    例如下面显示的 pos 修除以 10,对于用户来说就实现了最小单位 0.1 相同的效果。
    */
    toolinfo.setText(pos / 10).trackPopup(true,x,y cy); 
  }
}

以上所有范例都已经添加到新版 aardio 中。

转载请注明原文地址: http://www.aardio.net/read-290.html
最新回复(0)
aardio问答
aardio编程语言