搜索
aardio官方社区 门户 查看主题

系列教程:使用plus控件制作精美界面

发布者: Jacen.He | 发布时间: 2014-1-18 00:21| 查看数: 54323| 评论数: 101|帖子模式

plus控件简单介绍
可支持jpg图像,透明gif图像,透明动画,半透明png图像,并可设定多种不同的绘图模式、九宫格贴图等等,使用plus控件可以简单的通过在窗体设计器中拖拉创建各种漂亮的控件效果、可创建静态图片框、动画播放控件、按钮、透明按钮、不规则按钮、复选框、超链接、进度条、扇形进度条、滑块跟踪条......plus控件还提供了非常多的灵活的可调整参数,如果您擅于发挥可以做出更多的控件效果。

为配合plus控件、新版本对窗体的背景图功能也进行了改进,使之支持九宫格,缓存绘图、以拥有更流畅的显示效果。

一个完全用plus实现的界面示例:

plus.ui.jpg

源码下载: plus.新年快乐.7z (317.36 KB, 下载次数: 3452)

评分

参与人数 46银币 +1204 收起 理由
lrbm + 5 很给力!
未来星 + 1 很给力!
angelVwind + 15 你竟然有老婆。。。
jewel3 + 1
fengde + 5 很给力!
囧大卧虫囧 + 5 很给力!
abell + 5 很给力!
yeqiuliang + 5 很给力!
longyujz + 5 很给力!
a31072456 + 2 赞一个!
dajiashuone + 10 很给力!
handongcn + 10 赞一个!
嗡嗡嗡 + 5 很给力!
Gafek + 5 很给力!
pps无头 + 5 赞一个!
captlu + 10 赞一个!, 越来越强大了
xshrimp + 5 赞一个!
oney + 10 很给力!
yyy + 30 很给力!
喵星若 + 10 很给力!

查看全部评分

最新评论

Jacen.He 发表于 2017-3-7 16:46:44

使用plus控件中显示FontAwesome图标字体



import win.ui;
import gdip.fontAwesome;
/*DSG{{*/
var winform = win.form(text="FontAwesome图标字体演示";right=455;bottom=286)
winform.add(
plus={cls=
"plus";text='\uF1f7'/*_FA_BELL_SLASH_O*/;left=64;top=75;right=109;bottom=117;color=32768;font=LOGFONT(name='FontAwesome';h=-35);transparent=1;z=1};
plus2={cls=
"plus";text='\uF25a'/*_FA_HAND_POINTER_O*/;left=154;top=77;right=199;bottom=119;color=32768;font=LOGFONT(name='FontAwesome';h=-35);transparent=1;z=2};
plus3={cls=
"plus";text= '\uF1d6 点这里联系我们'/*_FA_QQ*/;left=248;top=76;right=420;bottom=118;color=32768;font=LOGFONT(name='FontAwesome';h=-16);transparent=1;z=3}
)
/*}}*/

var hyperlink = {
     color = {
        hover = 0xFFFF0000;
//鼠标移上去的颜色
        active = 0xFF00FF00; //鼠标按下去的颜色
    }
}
winform.plus.skin(hyperlink)
winform.plus2.skin(hyperlink)
winform.plus3.skin(hyperlink)

winform.show()
win.loopMessage();

Jacen.He 发表于 2014-1-18 00:21:49

控件绘图基础知识

这一节有些啰嗦,没耐心的可以跳过不看。
plus控件已经针对懒人做了很多的优化,即使你不了解下面这些知识,大多时候你可以把plus控件用好。
当然如果你素有刨根究底的革命精神,可以看下本节的内容。

Z序
控件在Z轴上的排序,X轴表示横坐标,Y轴表示纵坐标,而Z轴表示的是窗口在屏幕上的前后叠加顺序,
当你打开aardio,从工具箱里往窗体上拖放控件,先放上去的Z序较小,后放上去的Z序较大。在运行时默认的控件会从Z序较小的开始创建、先创建的控件Z序较小。你可以理解为:窗口内部有一个数组维护了所有子窗口的句柄,按Z序从小到大依次排列。

1.jpg

在窗口设计器中,可以在控件上使用鼠标右键点击,
在弹出的右键菜单中点击【前置】【后置】【最前面】【最后面】等菜单项调整Z序。
zmenu.jpg

Z序与默认绘图顺序

默认的控件会按Z序从小到大显示,也就是先创建的控件先显示,后创建的控件后显示。

Z序与事件触发顺序

其实窗口上的控件默认对前后叠放支持的不好,如果你将控件前后叠放,从理论上来说:后面的控件先触发。
所以有时候你会遇到这种怪异的现象,很奇怪为什么后面的控件先接受到事件了呢?例如拖放文件消息就有这个问题,其实窗口内部分法消息时是按Z序来分发的,这就导致默认显示在后面的Z序较小的控件先收到消息。

Z序与动态控件


这里的动态控件指的是该控件可以响应事件,
静态文本框、图片框、以及plus控件等默认都不接收鼠标按键事件,所以他们默认都是静态控件。
静态控件通常可以前后叠放(注意不是绝对的),而动态控件就不同了,你放两个按钮前后叠放,结果是你点谁谁就会跑到前面。

2.jpg
注意:静态控件通常可以在属性中设置【事件回调】为true,使之可以响应鼠标、按钮变成动态控件

Z序与 _WS_CLIPSIBLINGS样式

在控件属性中设置【重叠裁剪】为true,就会为控件添加WS_CLIPSIBLINGS样式,
添加了该样式的控件,他总是让Z序比他小的控件穿透他显示在前面,也就是说如果所有控件都加了这个样式,显示的顺序就会倒过来。大家可以拖几个控件,全选然后修改该属性设一下。

4.jpg    3.jpg   
添加了_WS_CLIPSIBLINGS样式以后,即使是动态控件也可以相互重叠,互不干扰。
这个等于是在前面的控件中剪切掉一个矩形显示后面的控件,所以外形不规则的控件就尴尬了,大家可以自行试试。

桌面上的顶层窗体(独立窗体)都默认具有_WS_CLIPSIBLINGS样式,而且你无法移除。
所以顶层窗体总是Z序最小的显示在前面,而且他们相互剪切,绘图互不干扰。


Z序与_WS_EX_TRANSPARENT样式

如果你在设计器的控件属性面板中设置【浮动透明】属性为true,就会为控件添加_WS_EX_TRANSPARENT样式,
这个名字比较误导,实际上他大多时候并不能使控件透明,窗体会延后所有具有_WS_EX_TRANSPARENT样式的控件的绘图顺序,默认会按Z序从小到大显示所有的控件,然后再显示所有的_WS_EX_TRANSPARENT样式控件。

如果父窗体指定了【内部剪切属性】:也就是添加_WS_CLIPCHILDREN样式,那么默认的每次重绘他不会绘制子窗口。
但是具有_WS_EX_TRANSPARENT样式的子窗口他会去重绘他,因为这个控件说了自己要透明,父窗口的背景重绘就无条件的触发控件的重绘。

具有_WS_EX_TRANSPARENT样式的控件,在你调用redraw()函数手动重绘时,他会主动去刷新父窗口的背景(当然这是aardio标准库添加的一步 )。如果不做这一步,那么上次绘图的残影会留下来。但是从上面可以看出,这种透明是很低效的,每次重绘都有可能触发多个窗口的重绘,处理不好会产生闪烁感。

窗口绘图为什么会闪烁

实际上你把图像画到屏幕上,这个速度是有点慢的,如果一个窗口包含几十个控件,那么每重绘一次,他就要画几十次以上,实际产生的绘图次数上远不止几十次。往屏幕上绘图慢,而绘图之间又有多多少少的间隔,那么正常的显示一帧的图像,就变成了数十帧停顿显示的图像,人眼看上去就是闪烁感了。所以现在有一些DirectUI的技术,去掉了这种机制,图像在内存中生成,只要把改变的图像画一次就可以了,因为这个速度极快,人眼感觉不出来,所以看上去非常的流畅。

传统控件如果产生了闪烁,通常可以使用下面的一些解决方案
1、处理 _WM_ERASEBKGND消息返回0,如果是窗体可以直接处理 winform.onEraseBkgnd事件并返回0,一个窗口绘图大多会分为两步走,在_WM_ERASEBKGND消息里擦除背景,在_WM_PAINT里绘前景图,很多时候这种分步走的绘图会产生不必要的闪烁,例如你放一个网页控件,网页本身就会绘制背景,如果控件也擦除一次背景,就会快速的看到一次灰色的闪屏,这时候可以用这个方法去掉这个不必要的过程。
2、在父窗体添加_WS_CLIPCHILDREN样式( 可以在属性面板中直接设置窗体的 【内部剪切】属性为true ),这样父窗体就不会管所有的子窗口了,所有控件自己负责绘制背景,但是如果有的控件要透明就尴尬了,背景是没有的残缺的,这时候你可以为控件添加 _WS_EX_TRANSPARENT样式(也就是在控件属性里设置【浮动透明】为true),他会告知父窗体不要剪切自己并绘制自己需要的背景(当然这样搞,前面闪烁的问题又来了)
3、为控件添加_WS_CLIPSIBLINGS样式( 也就是在控件属性面板中设置【重叠裁剪】为true )
4、为窗体启用 _WS_EX_COMPOSITED样式( 也就是在窗体的属性中设置【双缓冲】为true ), 启用双缓冲可以更好的支持浮动透明样式解决闪烁问题,详见下一节。

窗体双缓冲优化

在窗体中有一个【双缓冲】属性,如果启用该属性则为窗体添加 _WS_EX_COMPOSITED样式以启用系统提供的双缓冲优化功能。如果窗体具有这个样式,所有的控件会被合成后再显示出来,也就是减少了绘图次数,去掉了闪烁感。

_WS_EX_COMPOSITED样式会让所有的控件显示顺序反过来,这个样式虽然似乎是一个“完美”的方案,但是他存在不少的BUG, 例如他在XP系统上不支持GDI+( plus控件可以正常显示 ) 在win7上会让不规则窗口失效( 设为分层透明窗口可以解决 ),另外有不少控件例如listview不支持该功能( HTMLayout作为子窗口时也不支持双缓冲 ),不过plus控件可以较好的支持_WS_EX_COMPOSITED ( 双缓冲模式如果在刷新plus控件时闪烁,请将plus控件的【剪切背景】设为false,将【浮动透明】设为true, 启用双缓冲可以更好的支持浮动透明样式)。

有趣的是:分层窗口默认是不能在上面放控件的,但是加了_WS_EX_COMPOSITED样式就可以放了。
为窗体添加_WS_EX_LAYERED样式,或者调用 winform.transparent(true) 都可以创建分层窗口。

如果你的窗体使用了 _WS_EX_COMPOSITED样式,记住在不同操作系统上分别做一下测试,如果显示正常就没有问题,因为这个样式有时候会有一些怪异的BUG。

为什么很多传统控件不支持透明图像

看了前面绘图闪烁的原因,大家可以理解了,如果控件都可以透明,按传统控件的这种机制,每个控件重绘都要先去重绘他后面的控件或背景,那么界面就绘闪的无法忍受了,性能不不会太好。其实用GDI+画个透明图像是很容易的,但是要做到自由的透明变换并且不闪烁那不太容易。

plus控件是如何支持透明图象、透明动画、又可以做到不闪烁

首先plus控件支持背景图像、前景图像等等,然后在内存中一次性的把图像进行合成并创建缓存。
在绘图时使用了双缓冲优化,这就减少了绘图的次数,使绘图的速度极快,看上去就会非常流畅。
而且plus控件使用了GDI+,所以可以支持透明的GIF,半透明的png,以及透明字体颜色。

plus控件放弃了那种过度追求完美的设计思想,针对最常用的方式进行了优化处理。
例如【剪切背景】功能针对直接放在窗体上的控件做了背景优化:他会把自己所需要的父窗口原始的背景剪切并缓存下来,合并到自己的缓存图像中。
使两次绘图变为一次,从而去掉闪烁感。

这非常有用:如果你的plus控件上的图像会在运行时不断变换,并且透明的外形是不规则的并且会变化的(即背景会被反复破坏需要重绘),使用【剪切背景】可以使图像可以流畅的透明、透明动画非常的流畅。

当然其缺点是剪切了父窗口的背景,如果他后面有其他的控件就会被忽视并穿透,如果要避免这一点:就要把【剪切背景】设为false,失去了这种优化你就要注意:如果图像是透明的并且会变换,那么请保持所有变换的图像有一致的外形,以避免破坏背景(注意一下很多不规则按钮的设计,他们在不同状态下外形是一致的 - 这可以在切换绘图的时获得较好的显示效果)。

如果必须要在后面放其他的控件,并且透明图像是会变换的、外形也是会变换的,这时候可以启用【浮动透明】(即添加 _WS_EX_TRANSPARENT 样式),当然 _WS_EX_TRANSPAREN会增加闪烁感,这时候可以启用窗体的双缓冲优化(即添加 _WS_EX_COMPOSITED样式 )获得更好的显示效果。



Jacen.He 发表于 2014-1-18 00:21:50

plus控件基本用法

首先,请新建一个窗体,
然后在工具箱中如下图点选plus控件(高级图像控件),并在窗体上拖曳画出控件。
plus.png

在窗体上点选添加上去的plus控件,可以在右则属性面板中修改前景图、背景图像,如下图:
plus2.png

注意plus控件使用的图像一定要包含在工程目录下(并且目录的“内嵌资源”属性应设为true),
plus控件并不象picturebox那样使用$操作符直接将图像编译到代码中,所以你必须将图像添加到资源目录下。
res.jpg

plus控件支持jpg,gif动画,透明动画,png半透明图像。可以设置背景图、前景图并合成新的图像。
设置background属性显示背景图像,设置foreground属性显示前景图像。如果图像是一个GIF动画会自动播放。

注意plus控件与picturebox有所区别。
picturebox添加图像时默认为会在路径前添加包含操作符$通过内存载入图像,图像不需要添加到工程管理器中。
而plus控件默认不会这么做,应当将图像添加到工程中(可以放在资源目录下,在工程管理器右键菜单中简单的点击【同步本地目录】),如果你指定一个文件名而不是内存数据,plus控件将可以更好的缓存优化图像。

背景模式、前景模式可以设置图像的显示模式,其含义如下:
1、expand: 九宫格拉伸模式,按你设定的上、右、下、左四个坐标把图像划四条线把图像切分为九个格子,四个角的图像保持原来的大小显示在屏幕上,而其他中间的块则拉伸显示。

2、stretch:普通拉伸模式,控件多大图像就缩放到适应的大小显示。

3、center: 绝对居中模式,图像保持原始大小,图像的中心对准控件的中心,如果图像比控件大则只会显示能显示的部分,超出控件的被剪切掉不显示。

4、scale:保持图像原来的比例不变、并缩放到适应控件的大小

5、tile:图像保持原来的大小并横向、纵向重复平铺显示

6、repeat-x:仅横向重复平铺显示

6、repeat-y:仅纵向重复平铺显示

plus1.jpg
如果指定expand模式,则可以在下面指定九宫格切图位置:

9.jpg

可以用鼠标点选上面的滚动选框,然后滚动鼠标滚轮调整切图位置。
在设计器中,分别使用不同颜色的线条标明背景、前景的切图位置。

可以设置控件的内边距属性限制前景图与文本的显示范围:
10.jpg


如果不希望前景图被内边距限制显示范围,可以将前景模式设为"point"模式。
point模式按x,y指定的坐标显示前景图,x,y如果为小数则按百分比划分图像与控件间的剩余空间。如果为负数则表示相对右下角的坐标。

注意:point模式的坐标是相对于控件并且忽略内边距参数的:
11.jpg
Jacen.He 发表于 2014-1-18 00:21:51

窗体背景也用九宫格贴图

要想有精美的界面,窗体的背景图是必不可少了。
窗体的背景图做了与plus控件类似的缓存优化,但是要注意窗体绘制背景使用的是GDI而不是GDI+,所以不支持PNG图像,可以支持bmp,jpg,gif等格式,bmp格式的图像体积太大一般不建议使用。

如果你发现你添加的图像在界面上显示不出来,请检查图像的后缀名是否正确,例如jpg文件你使用了 a.png作为名字,某些图像浏览器可能会自动修正这些错误,但你自己写的程序请不要犯这种错误。
一、使用九宫格

设置好背景图像以后,可以启用九宫格模式,
5.jpg
所谓九宫格,就是按你设定的上、右、下、左四个坐标把图像划四条线切为九个格式,四个角的图像保持原来的大小显示在屏幕上,而其他中间的块则拉伸显示。

请看下面的背景图像
expand.jpg


设为窗体背景并启用九宫格模式后显示效果如下:
7.jpg

二、创建不规则窗体


如果你设置了一个很酷的不规则背景图,你希望窗体也自动变成不规则的,
那么很简单,右键点击窗体,在弹出菜单中首先点击【调整为背景图大小】,再次在菜单中点击【创建不规则窗口】将会生成下面的代码:
  1. import win.region.bitmap;
  2. win.region.bitmap( winform )
复制代码
很简单这两句代码就可以了。

注意 win.region.bitmap 只是对图像做简单的分析,运行时处理图像不是我们所需要的,
所以你需要知道一些规则,图像是深色的、背景就应当是浅色的,图像是浅色的背景则应当是深色的,如果处理后的图像有杂边, 在win.region.bitmap( winform 参数后面输入逗号,看IDE的参数提示,注意反复调整最后一个参数(在0x101010~0到0x303030之间调整出最佳效果)

当然,你也可以另外做一个黑白对比的掩码图更明确的标明背景取代背景图来创建不规则窗口,这会有更好的效果,示例代码如下:
  1. import win.region.bitmap;
  2. win.region.bitmap("/res/winform.regin.jpg").updateWindow(winform.hwnd)
复制代码


制作掩码图很简单,使用Photoshop建立图像,双击背景转换为图层并在编辑菜单中选择【填充】为白色,
然后按住CTRL键点击前景图层在前景图像上创建选框,删除图像并填充为黑色即可。





Jacen.He 发表于 2014-1-18 00:21:52

使用plus控件指作按钮

在窗体设计器中添加一个plus控件,然后设置好背景图或前景图等参数。
然后双击该控件添加代码如下:

  1. //设定按钮切换到不同状态时的样式
  2. winform.plus.skin(

  3.     background = { //指定背景图像在不同状态下的样式
  4.         hover = "/res/btn-hover.png";//鼠标移到控件上的图像
  5.         focus = "/res/btn-focus.png";//控件得到焦点的图像
  6.         active = "/res/btn-active.png";//鼠标按下时的图像
  7.         disabled = "/res/btn-disabled.png"; //控件禁用的图像
  8.     }
  9. )

  10. // 点击按钮时触发下面的事件
  11. winform.plus.oncommand = function(id,event){
  12.         
  13. }
复制代码


winform.plus.skin() 的参数是一个表对象,可以指定background不同状态下的图像,同样也可以使用foreground指定不同状态下的前景图像,以及使用color属性指定不同状态下的字体颜色。

下面是一个完整的范例:
21.png

范例源码下载: plus.按钮.7z (113.14 KB, 下载次数: 818)
Jacen.He 发表于 2014-1-18 00:21:53

使用plus控件创建超链接

创建超链接很简单,在设计器中双击plus控件,修改skin函数调用代码如下:
winform.plus.skin(
    color = { //颜色样式,颜色格式为0xAARRGGBB 其中A为透明度,R为红色分量,G为绿色分量,B为蓝色分量
        hover = 0xFFFF0000; //鼠标移上去的颜色
        active = 0xFF00FF00; //鼠标按下去的颜色
    }
)
下面是一个完整的示例:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form(text="用plus控件创建超链接演示";right=492;bottom=254;bgcolor=4448391;max=false )
  4. winform.add(
  5. plus={cls="plus";text="http://www.aau.cn";left=122;top=79;right=340;bottom=107;color=15793151;font=LOGFONT( h=-24 );notify=1;z=2};
  6. progress={cls="plus";left=119;top=107;right=377;bottom=131;align="left";background="\res\progress-bg.jpg";color=16777215;foreRepeat="expand";foreground="\res\progress.jpg";z=1}
  7. )
  8. /*}}*/

  9. winform.plus.skin(
  10.         color = { //颜色样式,颜色格式为0xAARRGGBB 其中A为透明度,R为红色分量,G为绿色分量,B为蓝色分量
  11.                 hover = 0xFFFF0000; //鼠标移上去的颜色
  12.                 active = 0xFF00FF00; //鼠标按下去的颜色
  13.         }
  14. )

  15. import process;
  16. //鼠标点击超链接触发下面的函数
  17. winform.plus.onMouseClick = function(wParam,lParam){
  18.         process.execute("http://www.aau.cn");//打开网页
  19. }

  20. winform.show()
  21. win.loopMessage();
复制代码




plus控件默认使用透明背景,也可以如下指定不同状态下的背景色:

    winform.plus.skin(
        background = {
            active = 0xFF004444;
            hover = 0xFFCCCC00;
        }
    )
Jacen.He 发表于 2014-1-18 00:21:54

使用plus控件制作复选框

使用plus控件创建复选框控件的关键代码如下
//定义复选框控件外观
checkboxSkin = {
    checked = {
//选中状态的样式
        foreground = { //前景图样式
            default = "/res/images/check1.png";//默认状态
            hover = "/res/images/check-hover1.png"; //鼠标移上去的状态
            active = "/res/images/check-active1.png";//鼠标按下去的状态
            disabled = "/res/images/check-disabled1.png";//控件禁用时的状态
        }
    }
    foreground = {
//前景图样式
        default = "/res/images/uncheck1.png";//默认状态
        hover = "/res/images/uncheck-hover1.png"; //鼠标移上去的状态
        active = "/res/images/uncheck-active1.png";//鼠标按下去的状态
        disabled = "/res/images/uncheck-disabled1.png"; //控件禁用时的状态
    }
}
要注意指定内边距,使文本向右移动产生缩进。
前景模式应指定为"point",前景图x,y坐标调整到与文本对齐即可。

下面是一个完整示例:
22.png

范例源码下载: plus.复选框控件.7z (57.6 KB, 下载次数: 688)
Jacen.He 发表于 2014-1-18 00:21:55

使用plus控件制作进度条

使用plus控件创建进度条比较简单,
进度条需要添加背景图、前景图,并且显示模式都应当指定为"expand"模式(九宫格贴图 )
然后只需要添加一句代码 winform.plus.setProgressRange(1,100) 指定进度条的最小值、最大值即可。

进度条也可以显示文件,文本被限制在前景图范围内。

下面是一个完整示例:
progress.png

范例源码下载: plus.进度条.7z (22.03 KB, 下载次数: 738)
Jacen.He 发表于 2014-1-18 00:21:56

用plus控件微作圆形进度条

与创建普通进度条的方法类似,
区别是使用 winform.plus.setPieRange(1,100); 设定进度条的进度范围。
另外,扇形进度条的前景图、背景图都应当设置为“center”模式( 即绝对居中 )

下面是一个完整的范例:
24.png

范例源码: plus.pie.7z (126.63 KB, 下载次数: 808)
Jacen.He 发表于 2014-1-18 00:21:57

用plus控件制作滑块控件

创建滑块控件与创建进度条类似,
区别是使用 winform.plus.setTrackbarRange(1,100) 设置进度范围.

背景图、前景图都必须使用"expand"模式( 九宫格模式 )
前景图的九宫格切图需要指定右侧切图的宽度为滑块按钮的宽度,见下图:
25.png

滑块控件可以是横向的,也可以是竖向的,你不需要设置任何参数,plus控件会自动识别(根据你拖拉出的是什么外观 ),
与此类似,当plus控件作为普通进度条使用时也自动支持横向、竖向进度条。

下面是完整范例:
26.png


范例源码下载: plus.滑块控件.7z (38.37 KB, 下载次数: 539)
Jacen.He 发表于 2014-1-18 00:21:58

用plus控件美化文本框

plus控件用于静态显示图像时,可以作为文本框的背景用于美化文本框。
需要注意plus控件要设置【事件回调】为false( 这个是默认值,表示不响应鼠标按键事件 )以避免与文本框争抢绘图。

文本框用于显示单行文本时可以将高度调整的较小,加上背景图显示效果就比较好了。
注意要在属性面板中设置【多行】属性为false,多行文本框调整太小了光标就看不到了。

下面是一个完整范例(同时演示了使用plus控件创建无边框窗体、以及GIF动画效果):
27.png

范例源码下载: plus.登录界面.7z (322.98 KB, 下载次数: 1417)
Jacen.He 发表于 2014-1-18 00:21:59

不规则窗口示例

范例效果:
28.png

范例源码下载: plus.不规则界面.7z (952.89 KB, 下载次数: 1266)
Jacen.He 发表于 2014-1-18 00:22:00

无边框窗体、横版导航、orphanWindow

在窗体的属性面板中设置【边框】属性为"none"以设置为无边框窗体。
使用plus控件创建最小化、最大化、关闭按钮。下面是最大化按钮的关键代码:
winform.btnMax.oncommand = function(id,event){
        
//点击最大化或还原按钮,并将当前窗体是否最大化设为控件的checked状态
        winform.btnMax.checked = winform.hitmax();
}

winform.btnMax.skin(
        checked = {
//还原按钮的样式
                background = {
                        hover =
"/res/restore-hover.png";
                        active =
"/res/restore-active.png";
                        default =
"/res/restore-default.png";
                }
        }
        
//下面是最大化按钮的样式
        background = {
                hover =
"/res/max-hover.png";
                active =
"/res/max-active.png";
                default =
"/res/max-default.png";
        }
)

窗体添加下面的代码以支持鼠标拖动窗体:
winform.wndproc = {
    [ 0x201/*_WM_LBUTTONDOWN*/ ] = function(hwnd,message,wParam,lParam){
        winform.hitCaption();
    }
}

下面的代码为窗体添加可拖动改变大小的边框
import win.ui.resizeBorder;
win.ui.resizeBorder( winform )

完整范例源码下载: plus.无边框窗体.7z (239.62 KB, 下载次数: 792)
flyingkob 发表于 2014-1-18 01:15:25

谢谢老大和嫂子分享

谢谢老大和嫂子分享
美丽草原 发表于 2014-1-18 01:52:54

太漂亮啦!

太漂亮啦!
dem 发表于 2014-1-18 01:53:50

期待已久的好教程。3Q~

期待已久的好教程。3Q~
快乐小鸟 发表于 2014-1-18 02:06:09

哇塞,老大太伟大了,这么晚了还给咱更新程序写如此详尽的教程真是让人感动啊!真是振奋人心的升级啊! 此时此刻不知道该说些啥好. 老大:您辛苦了!谢谢您!^_^

哇塞,老大太伟大了,这么晚了还给咱更新程序写如此详尽的教程真是让人感动啊!真是振奋人心的升级啊!
此时此刻不知道该说些啥好.
老大:您辛苦了!谢谢您!^_^
笑问天 发表于 2014-1-18 03:03:48

不错的教程,非常详细、非常实用,感谢Jacen、pinky的多年来的付出、大力支持,愿你们幸福美满,更愿aardio遍地开花。

不错的教程,非常详细、非常实用,感谢Jacen、pinky的多年来的付出、大力支持,愿你们幸福美满,更愿aardio遍地开花。
look 发表于 2014-1-18 07:07:41

结合九宫格太方便了!支持!老大辛苦了!

结合九宫格太方便了!支持!老大辛苦了!

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-6-27 01:18 , Processed in 0.171875 second(s), 31 queries , Wincache On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表