利用plus美化和模拟滚动条代替listbox的系统滚动条

By admin at 2020-04-05 • 1人收藏 • 343人看过

前面写了个音乐播放器, 提到因为嫌弃系统自带的滚动条太丑, 所以就不使用滚动条,直接用鼠标滚轮来操作.

但是, 如果有人的鼠标没滚轮呢?(^_^,虽然不大可能)

那么我们能不能模拟个滚动条呢? 而且可以任意美化就更完美了.

plus控件是aardio对系统组件的重大扩展 , 很多东西都可以用它来实现.

下面我就利用plus的trackbar特性来模拟滚动条的双向交互.

GIF.gif



  1. 首先我们要获取listbox的鼠标滚轮消息, 以便转动滚轮的时候,模拟的滚动条能同时得到响应, 然后就可以改变trackbar的滑块的位置了.

  2. 当我们拖动trackbar的滑块的时候, 我们获取到这个消息, 然后在这个消息里发送移动listbox项的指令,使listbox移动.

下面是我封装的一个简易的测试代码库, 测试使用良好,哈哈

1. plusExbar.aardio 模拟滚动条扩展库

//plusExbar 模拟滚动条
class plusExbar{
    //绑定的listbox,与之绑定的plus,listbox每项的行高,前景色,背景色
	ctor( listbox,plus,iheight,foreColor=0xFF0097DE,backColor=0x757A7A7A ){
		plus.skin({
			background={
				default=backColor
			};
			color={
				default=foreColor;
			}
		})
		var max = listbox.count-..math.floor(listbox.height/iheight);
		var min = 0;
		plus.setTrackbarRange(max+1,1);
		
		if(max>0){
		        //锁定最小滑块大小20
			if(..math.round(plus.height/max)<=20){
				plus.foreTop = 20;
				var max = listbox.count-..math.floor((listbox.height-20)/iheight);
			}else{
				plus.foreTop = ..math.round(plus.height/max);
			}	
		}else {
			plus.foreTop = plus.height;
		}
		plus.progressPos = max+1;
		
		//..listboxExx(listbox).scrollFunc = function( num ){
		listbox.scrollFunc = function( num ){
			plus.progressPos +=num; 
		}
		plus.onPosChanged = function( pos,thumbTrack ){
			if(thumbTrack){
				//console.log(pos,max+1-pos,max)
				var goto = max+1-pos+1;
				var index = listbox.hitTest(1,1);
				if(goto == index){
					//null
				}else {
					if(goto>index){
						for(i=1;goto-index;1){
							::SendMessageInt(listbox.hwnd, 0x115/*_WM_VSCROLL*/, 1, 0); 
						}	
					}else {
						for(i=1;index-goto;1){
							::SendMessageInt(listbox.hwnd, 0x115/*_WM_VSCROLL*/, 0, 0);
						}
					}	
				}
				
			}
		}
		plus.orphanWindow(true)
	};
}

请将上面的代码放在工程的lib目录里.

2. 那么怎么使用呢?

我们首先要在窗口里 拖拽一个listbox , 然后加入上面的plusExbar库, 然后绑定它们即可

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=432;bottom=469)
winform.add(
listbox={cls="listbox";left=15;top=12;right=352;bottom=426;edge=1;items={};z=1};
plus={cls="plus";left=360;top=12;right=367;bottom=292;bgcolor=-8750470;border={radius=4};color=14587648;foreTop=33;paddingLeft=1;paddingRight=1;z=2}
)
/*}}*/

for(i=1;33){ 
	winform.listbox.add("测试项目--"++i);
}

winform.listbox.wndproc = function(hwnd,message,wParam,lParam){
	if(message == 0x20A/*_WM_MOUSEWHEEL*/){  //滚轮消息
    	var wheelDelta = ..raw.convert({int wParam=wParam },{word vk;word delta}).delta;
    	if( wheelDelta > 0 ){
        	::SendMessageInt(winform.listbox.hwnd, 0x115/*_WM_VSCROLL*/, 0, 0);
        	if(winform.listbox.scrollFunc){
            	    winform.listbox.scrollFunc(1);
        	}
    	}else {
        	::SendMessageInt(winform.listbox.hwnd, 0x115/*_WM_VSCROLL*/, 1, 0);
        	if(winform.listbox.scrollFunc){
            	    winform.listbox.scrollFunc(-1);
        	} 
    	}
    	return 0;
	};
	
}

import plusExbar;
plusExbar(winform.listbox,winform.plus,15,0xFFE057B6);


winform.show();
win.loopMessage();
return winform;

那么我们运行, 就可以看到绑定成功了!


这个库如果配合我之前在音乐播放器里发的listboxExx自绘扩展库, 会非常适用, 好看.

GIF2.gif

当然, 此次的plusExbar滚动条扩展库也同样适用于listview这样的控件. 大可一试


1 个回复 | 最后更新于 2020-04-09
2020-04-09   #1

参考jacen在另外一个listview模拟滚动条的帖子里提供的简化代码, 这个listbox滚动条也可以再次简化.

将plusExbar模拟库里面增加如下代码, 然后winform里面就可以不必写listbox的wndproc回调了.

listbox.wndproc = function(hwnd,message,wParam,lParam){
    if(message == 0x20A/*_WM_MOUSEWHEEL*/){ 
        if( ::HIWORD(wParam) & 0x8000  ){ 
            if( plus.stepProgress(-1,true) ){
                ::SendMessageInt(listbox.hwnd, 0x115/*_WM_VSCROLL*/, 1, 0);
            }  
        }
        else { 
            ::SendMessageInt(listbox.hwnd, 0x115/*_WM_VSCROLL*/, 0, 0);
            plus.stepProgress(1,true)
             
        }
        return 0;
    };
}


登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...