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

JacenHe · 发表于 2014-1-18 00:21:48

此教程在 aardio 文档里存在另一个版本：
《 aardio 图形界面开发 - plus 控件使用指南》
主要是排版与插图的区别，文档修订与更新的优先级更高，论坛帖子一些小的问题不再处理。

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

aardio 的窗体背景图也支持九宫格，缓存绘图等功能。
另外 aardio 还提供bk,bkplus 等纯背景贴图控件（无句柄控件）。
使用这些背景贴图功能，再加上 plus 控件，可以轻松拖放出好看的界面。

界面效果可参考一个基本完全用 plus 控件制作界面的开源项目： wubiLex

上面的界面基本都是使用字体图标 + 配色实现。

下面再提供一个用 plus 控件 + 贴图功能实现的界面示例：

plus.ui.jpg

源码下载：

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

plus 控件的用法非常简单。

1、首先拖一个 plus 控件到界面上，选中 plus 控件。

2、鼠标双击并打开 aardio 工具 / plus 控件配色工具。

3、配置好颜色样式，或者点击预设的范例样式，
然后点击「导出到窗体设计器选中控件」就可以了。

视频教程链接：调整窗口外观

JacenHe · 发表于 2017-3-7 16:46:44

注意 plus 控件可以指定两个文本属性，一个是普通「文本」属性，一个是「图标文本」属性。
如果「图标文本」为空，则「图标字体」属性被忽略。普通文本的「字体」属性也可以指定为图标字体，但如果普通文本的「字体」属性用适合文本的 Tahoma 字体，而「图标文本」使用 FontAwesome 等图标字体效果会更好一些。

为 plus 控件指定图标字体是非常简单的：

1、选中 plus 控件。
2、点击 aardio 工具 / 界面 / 字体图标，选中需要的字体图标，然后点击字体图标就可以了。

import win.ui;
import fonts.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();

JacenHe · 发表于 2014-1-18 00:21:49

Z 序是使用原生窗口开发图形界面最重要的基础知识。

如果不了解 Z 序的原理与优化方法，可能遇到很多问题会理解不了，更不要说解决问题了。

Z 序

以 X 轴表示屏幕或窗口上的横坐标，Y 轴表示纵坐标，而 Z 轴表示的是窗口在屏幕上的前后叠加顺序。

Z 序就是指窗口在 Z 轴上的排序。

具体到一个窗口指的就是窗口内的控件在 Z 轴上的排序，控件也是窗口（父窗口内的子窗口）。

我们在开发界面时需要了解和处理的 Z 序问题通常指的是控件的 Z 序，也就是子窗口的 Z 序。

当你打开 aardio，从工具箱里往窗体上拖放控件，先放上去的 Z 序较小，后放上去的 Z 序较大。在运行时默也会先创建 Z 序较小的控件。

可以理解为：窗口内部有一个数组维护了所有子窗口的句柄，按 Z 序从小到大依次排列。

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

移动控件到【最前面】的快捷键是：Ctrl + Shift + 鼠标左键。
如果按住 Ctrl + Shift + 鼠标左键依次点击所有控件，就是重排全部 Z 序。注意 Tab 键切换焦点顺序等于 Z 序。

Z 序与默认绘图顺序

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

Z 序与事件触发顺序

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

Z 序与动态控件

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

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

Z 序与 _WS_CLIPSIBLINGS 样式

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

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

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

内部裁剪样式 _WS_CLIPCHILDREN

_WS_CLIPSIBLINGS 是剪切同级窗口，而内部裁剪样式 _WS_CLIPCHILDREN 是用来剪切子窗口的。
简单地说【内部裁剪】就是在绘制窗口时忽略该窗口上的所有子窗口，最常见的就是用于 COM 控件。以 web.form 为例，例如我们这样写：

import web.form;
var wb = web.form(mainForm.custom);
wb.go("https://example.com");

这时 mainForm.custom 控件就成为网页控件的宿主控件，实际上网页完全填充并覆盖了 mainForm.custom 控件，那么这时候 mainForm.custom 自身的绘制就变得不必要了 —— 多绘制一次反而带来不必要的闪烁（当然足够快可能不明显），有时候宿主控件重绘了 —— 内部的 COM 控件没有正确重绘会导致显示出现问题，这时候我们就可以指定 mainForm.custom 的【内部裁剪】属性为 true ，也就是为 mainForm.custom 加上 _WS_CLIPCHILDREN 样式。

千万不要跑去给 mainForm 加上 _WS_CLIPCHILDREN 样式 —— 来解决 mainForm.custom 的问题，这就好像张三头疼，你却跑去给李四吃头疼药 —— 把李四吃坏了张三还没冶好。当然，我们了解这个原理就行了，实际同现在 aardio 中嵌入 COM 控件时会自动处理好这个问题，如果宿主控件是 static 这样的普通控件则加上 _WS_CLIPCHILDREN 样式，如果宿主控件是 win.form 这样的窗口对象 —— 则会定义 onEraseBkgnd 以禁止绘制窗口背景。结果都是一样由 COM 控件自己负责绘制宿主控件内容。

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 的技术，去掉了这种机制，图像在内存中生成，只要把改变的图像画一次就可以了，因为这个速度极快，人眼感觉不出来，所以看上去非常的流畅。但是经过很多年 DirectUI 并没有真正成为一个更好解决问题的方案，唯有 Web UI 发展较好。

但是要考虑到 Web UI 毕竟不是主要为桌面软件图形界面所设计的，而传统窗口架构则是为这个目的而生。如果适合的技术用到适合的地方，使用传统窗口去开发界面可以做到更快更高效，而且也并不是所有软件都需要展现 Web 风格的排版。

传统控件如果产生了闪烁，通常可以使用下面的一些解决方案：

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 控件仅使用 GDI+ 绘制内存 DC），双缓冲模式如果在刷新plus控件时闪烁，请将plus控件的【剪切背景】设为 false，将【浮动透明】设为 true（启用双缓冲的一个好处是可以更好的支持浮动透明样式）。

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

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

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

解决方案：plus 控件如何支持透明图像、动画、又能做到不闪烁

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

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

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

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

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

解决方案：使用 bk,bkplus 控件实现重叠背景贴图

我们现在已经知道，传统窗口上的控件重叠是比较麻烦的，aardio 为了更好地解决这个问题，提供了 bk,bkplus 这几个纯背景贴图控件 —— 这种控件是无窗口的、静态的、虚拟的控件。bk,bkplus 控件并不会真的创建窗口，仅仅是用于在窗口背景上贴图。这种控件在窗口背景绘图的同时绘制，不会增加闪烁感。而且也像直实控件一样 —— 支持固定边距、自适应缩放等控件布局属性。

bk,bkplus 控件可以作为其他控件(包括 plus 控件）的背景，并且可以任意重叠组合。这比直接指定窗口背景图像更灵活。使用 bk,bkplus 控件，我们可以指定窗体背景上任何一小块背景的图像、颜色、或者布局、拉伸规则。

JacenHe · 发表于 2014-1-18 00:21:50

首先，请新建一个窗体，
然后在开发环境左下侧『界面控件』面板点选 plus 控件（高级图像控件），并在窗体上拖拽画出控件。

在窗体上点选添加上去的 plus 控件，然后在右侧属性面板中修改"前景图像"、"背景图像"等属性。等价于在代码中设置控件的 background 属性以显示背景图像，设置控件的 foreground 属性以显示前景图像。plus 控件支持 jpg ,gif 动画，透明动画，png 半透明图像。可以同时设置背景图、前景图在运行时合成新的图像。如果图像是一个 GIF 动画则会自动播放。

如下图：

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

控件属性中的背景模式、前景模式可以设置图像的显示模式，可选项如下：

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

如果指定 expand 模式，则可以通过控件属性"背景切图"、"前景切图"指定九宫格切图位置。我们可以用鼠标点选"背景切图"、"前景切图"坐标数值右侧的滚动选框，然后**滚动鼠标滚轮**调整切图位置。在"窗体设计器"中，会实时使用不同颜色的线条标明背景、前景的九宫格切图位置。

2. stretch:普通拉伸模式，控件多大图像就缩放到适应的大小显示。
3. center: 绝对居中模式，图像保持原始大小，图像的中心对准控件的中心，如果图像比控件大则只会显示能显示的部分，超出控件的被剪切掉不显示。
4. scale：保持图像原来的比例不变、并缩放到适应控件的大小
5. tile：图像保持原来的大小并横向、纵向重复平铺显示
6. repeat-x：仅横向重复平铺显示
7. repeat-y：仅纵向重复平铺显示

我们还可以设置控件的"前景边距"以指定前景图像与文本的显示外边距，"前景边距"不会改变背景图像的边距。

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

expand 模式是最常用的一种图像显示模式，自适应系统 DPI 缩放的效果较好。

JacenHe · 发表于 2014-1-18 00:21:51

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

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

一、使用九宫格

设置好背景图像以后，可以启用九宫格模式，

所谓九宫格，就是按你设定的上、右、下、左四个坐标把图像划四条线切为九个格式，四个角的图像保持原来的大小显示在屏幕上，而其他中间的块则拉伸显示。

请看下面的背景图像

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

实际上窗口的任何一块区域都可以拖一个 bk 或 bkplus 控件上去实现局部九宫格贴图。

而且利用 custom 控件，可以在窗口的任何一部分加载另一个窗体 —— 可以将窗体的任何一部分转换为其他窗体的容器。
请参考《aardio 中最重要的控件：自定义控件教程》

二、九宫格缩放布局

aardio 中的窗口、控件自带窗口缩放自适应功能。
每一个控件都可以在控件属性中设置自适应缩放、固定边距等属性。

而且我们可以一键为所有控件自设置这些参数，
方法很简单，右键点窗体，然后在弹出菜单中点击「九宫格缩放布局」即可。

请参考入门教程：《快速掌握九宫格( 井字格 )界面布局》

三、创建不规则窗体

如果你设置了一个很酷的不规则背景图，你希望窗体也自动变成不规则的，
那么很简单，右键点击窗体，在弹出菜单中首先点击【调整为背景图大小】，再次在菜单中点击【创建不规则窗口】将会生成下面的代码：

import win.region.bitmap;
win.region.bitmap( winform )

复制代码

很简单这两句代码就可以了。

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

当然，你也可以另外做一个黑白对比的掩码图更明确的标明背景取代背景图来创建不规则窗口，这会有更好的效果，示例代码如下:

import win.region.bitmap;
win.region.bitmap("/res/winform.regin.jpg").updateWindow(winform.hwnd)

复制代码

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

JacenHe · 发表于 2014-1-18 00:21:52

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

//设定按钮切换到不同状态时的样式
winform.plus.skin(
background = { //指定背景图像在不同状态下的样式
hover = "/res/btn-hover.png";//鼠标移到控件上的图像
focus = "/res/btn-focus.png";//控件得到焦点的图像
active = "/res/btn-active.png";//鼠标按下时的图像
disabled = "/res/btn-disabled.png"; //控件禁用的图像
}
)
// 点击按钮时触发下面的事件
winform.plus.oncommand = function(id,event){
}

复制代码

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

下面是一个完整的范例：

范例源码下载：

plus.按钮.7z (113.14 KB, 下载次数: 2921)

JacenHe · 发表于 2014-1-18 00:21:53

创建超链接很简单，在设计器中双击plus控件，修改skin函数调用代码如下：

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

下面是一个完整的示例：

import win.ui;
/*DSG{{*/
var winform = ..win.form(text="用plus控件创建超链接演示";right=492;bottom=254;bgcolor=4448391;max=false )
winform.add(
plus={cls="plus";text="http://www.aardio.com";left=122;top=79;right=340;bottom=107;color=15793151;font=LOGFONT( h=-24 );notify=1;z=2};
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}
)
/*}}*/
winform.plus.skin(
color = { //颜色样式,颜色格式为0xAARRGGBB 其中A为透明度,R为红色分量,G为绿色分量,B为蓝色分量
hover = 0xFFFF0000; //鼠标移上去的颜色
active = 0xFF00FF00; //鼠标按下去的颜色
}
)
import process;
//鼠标点击超链接触发下面的函数
winform.plus.onMouseClick = function(wParam,lParam){
process.execute("http://www.aardio.com");//打开网页
}
winform.show();
win.loopMessage();

复制代码

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

winform.plus.skin(
      background = {
         active = 0xFF004444;
         hover = 0xFFCCCC00;
      }
)

JacenHe · 发表于 2014-1-18 00:21:54

使用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坐标调整到与文本对齐即可。

下面是一个完整示例：

范例源码下载：

plus.复选框控件2.7z (57.69 KB, 下载次数: 2691)

使用plus控件创建单选按钮（或单选导航按钮）的方法类似上面创建复选框的方法，唯一的区别是在skin参数中使用group属性指定单选按钮的分组，例如：

winform.plus.skin(
background = {
hover = "/res/images/radio-hover.png";
active = "/res/images/radio-active.png";
default = "/res/images/radio.png";
}
checked = { //指定选中状态的样式
background = {
hover = "/res/images/radio-checked-hover.png";
active = "/res/images/radio-checked-active.png";
default = "/res/images/radio-checked.png";
}
}
group = "main";//这个参数指定按钮是单选按钮分组,使该分组中的按钮同时只能选中一个
}
)

复制代码

可以使用 winform.plus.radioValue() 函数获取当前选中的单选按钮文本。
至于实现单选导航按钮仅仅是外观上的区别，例如横版界面的大图标导航按钮 - 需要设置前景图标居中（坐标设为0.5 x 0.5 )，文本底部垂直对齐（并设置适当的文本内边距）。

JacenHe · 发表于 2014-1-18 00:21:55

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

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

进度条可以是横向的（宽度大于高度），也可以是竖向的（高度大于宽度），plus 控件会根据设计时的宽高比自动判断进度条的方向，不需要设置其他参数。

下面是一个完整示例：

范例源码下载：

plus.进度条.7z (22.03 KB, 下载次数: 2668)

JacenHe · 发表于 2014-1-18 00:21:56

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

下面是一个完整的范例：

范例源码：

plus.pie.7z (126.49 KB, 下载次数: 1541)

JacenHe · 发表于 2014-1-18 00:21:57

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

请参考：
教程 -《trackbar 控件高级玩法》
范例 - 使用 plus 控件创建滑尺控件

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

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

下面看自动生成的范例，运行效果：

上面的滑块只需要配色就可以了，
如果需要用图像制作滑块，背景图、前景图都必须使用"expand"模式（九宫格模式）。
前景图的九宫格切图需要指定右侧切图的宽度为滑块按钮的宽度，见下图：

滑块控件可以是横向的（宽度大于高度），也可以是竖向的（高度大于宽度），plus 控件会根据设计时的宽高比自动判断滑块的方向，不需要设置其他参数。

与此类似，当 plus 控件作为普通进度条使用时也自动支持横向、竖向进度条（同样根据设计时的宽高比自动判断）。

范例源码下载：

plus.滑块控件( 使用背景、前景图像 ).2.7z (38.46 KB, 下载次数: 1399)

JacenHe · 发表于 2014-1-18 00:21:58

plus 控件在窗体设计器属性面板中将【事件回调】属性设 false 则创建静态控件（这是默认值），设为 true 则创建可响应用户操作的动态控件。在窗体设计器双击 plus 控件，或在代码中调用 plus 控件的 skin 函数都会自动设置【事件回调】属性为 true 。

事件回调属性对应于代码中的 `notify` 属性，这个属性只能由控件的构造参数指定或者由 skin 函数自动设置。

plus 静态控件不会像动态控件那样争抢焦点并改变 Z 序，可作为其他控件的背景控件。相比 bk,bkplus 这样的纯背景控件，plus 静态控件提供了更多的外观选项。

下面是一个完整范例（同时演示了使用plus控件创建无边框窗体、以及GIF动画效果）：

范例源码下载：

plus.登录界面.7z (322.98 KB, 下载次数: 3718)

也可以在窗体设计器中点选 plus 控件，然后在控件属性中设置『允许编辑』为 "edit" 或 "richedit" 就可以在 plus 控件内部显示文本框（ edit 控件）或富文本框（ richedit 控件）。

下面的示例使用 plus 控件创建了一个背景透明、底部划线的单行输入框：

import win.ui;
/*DSG{{*/
var winform = win.form(text="用 plus 创建文本框示例")
winform.add(
plusEdit={cls="plus";left=100;top=48;right=321;bottom=74;align="right";border={bottom=1;color=-6908266};editable=true;textPadding={top=6;bottom=2};z=1}
)
/*}}*/
winform.show();
win.loopMessage();

复制代码

窗体设计器中控件的『允许编辑』属性对应于代码中的 editable 属性。`editable = true` 等价于 `editable = "richedit"` ，表示在 plus 控件内创建 richedit 控件。而 `editable = "edit"` 则表示在 plus 控件内创建 edit 控件。

注意：高度较小的单行文本框不要将『多行』属性设为 true （对应于代码中的 `multiline = true` ），避免多行文本框高度太小时无法显示输入光标。

JacenHe · 发表于 2014-1-18 00:21:59

范例效果：

范例源码下载：

plus.不规则界面.7z (952.89 KB, 下载次数: 3399)

JacenHe · 发表于 2014-1-18 00:22:00

在窗体的属性面板中设置【边框】属性为 "none" 就可以创建无边框窗体。

aardio 提供了为无边框窗口快速添加简单标题栏的方法：

import win.ui.simpleWindow;
win.ui.simpleWindow(winform);

为无边框窗口添加简单标题栏但不创建最大化按钮：

import win.ui.simpleWindow;
win.ui.simpleWindow2(winform);

为无边框窗口创建添加标题栏 —— 该标题栏使用 orphanWindow 功能悬浮在父窗口上面：

import win.ui.simpleWindow3
win.ui.simpleWindow3(winform);

我们也可以直接使用 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.onMouseDown = function(wParam,lParam){
winform.hitCaption()
}

下面的代码为窗体添加可拖动改变大小的边框:

import win.ui.resizeBorder;
win.ui.resizeBorder( winform )

下面的代码为窗体添加阴影 + 可拖动改变大小的边框:

import win.ui.shadow;
win.ui.shadow( winform )

完整范例源码下载：

plus.无边框窗体.7z (239.37 KB, 下载次数: 2582)

使用plus控件制作横版导航按钮

导航按钮控件使用plus控件制作，要点如下：
1、前景图标设置为"point"贴图模式，x坐标设为 0.5 （即50%居中对齐），y坐标设为0.2( 即20% 垂直偏上）
2、文本的垂直对齐设为 “bottom" 即显示在按钮底部，并修改【内边距】属性为合适的值，这里是（上：5 右：5 下：7 左：5 ），使文本与按钮的边框间有一定的空白。
3、双击按钮控件，设置不同状态下的背景图，示例如下：

mainForm.btnNav2.skin( {
background = {
      hover = "/res/images/main-nav-bg-hover.png";
      active = "/res/images/main-nav-bg-hover.png";
      default = "/res/images/main-nav-bg.png";
}
checked = { //指定选中状态的样式
      background = {
         hover = "/res/images/main-nav-bg-hover.png";
         active = "/res/images/main-nav-bg-hover.png";
         default = "/res/images/main-nav-bg-hover.png";
      }
}
group = "main";//这个参数指定按钮是单选按钮分组,使该分组中的按钮同时只能选中一个
} )

注意，这里所有的导航按钮的样式中都指定了 group = "main"; 这个属性，使之成为一组单选按钮（该分组中同时只能有一个按钮是选中状态）

这里我们使用custom控件模拟出tab选项卡的效果，
使用 var frmPage1 = winform.custom.loadForm("\forms\page1.aardio" ); 加载选项页，
切换选项页时，首先使用 winform.custom.showChildren(false); 隐藏所有的子窗口，然后调用 frmPage1.show(true); 显示当前选项页面，例如：

winform.btnNav1.oncommand = function(id,event){
winform.custom.showChildren(false);
frmPage1.show(true);
}

示例完整源码下载：

横版图标导航.7z (65.33 KB, 下载次数: 1623)

使用orphanWindow

在传统窗体中，要让一个控件完美透明，并且完美浮动在其他控件前面，是一件比较麻烦的事。
例如 plus 控件也有一些限制，使用剪切背景等方法修正透明带来的闪烁，但是你不能把plus控件浮动在一个按钮前面且显示透明动画。

一个窗体的子窗口总是显示在父窗口的内部，例如你在网页上看到flash是透明的，但是flash一半显示在网页里面，一半显示在浏览器外面在桌面上透明，这个实现起来就很麻烦了。

orphanWindow 就是用来解决上面的问题。
你只要在窗体设计器中拖好控件的位置（控件可以拖到窗口的外面），然后调用控件的一个函数 orphanWindow() 就行了。然后控件可以完美的浮动在其他控件前面并且透明。控件仍然可以象一个子窗口（实际上他不再是子窗口，只是伪装成子窗口）那样如影随形的跟随父窗口移动, 并且按照窗体设计器中预设的参数（例如固定边距）来自动调整位置和大小。

使用win.ui.layered在分层透明窗口上显示plus控件

我们知道可以透明显示的分层窗口，是无法显示窗口上的控件子窗口的，但是使用标准库提供的win.ui.layered，我们可以让分层窗口透明显示，并且还可以正常的显示窗口上的plus控件。以下是一个简单的例子：

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
plus={cls="plus";left=264;top=208;right=528;bottom=296;notify=1;repeat="center";z=1}
)
/*}}*/

import win.ui.layered;
win.ui.layered(winform);

import inet.http;
winform.plus.skin(
background = {
default = "http://bbs.aardio.com/static/image/common/aardio.png";
hover = 0xFF00FF33;
}
)

winform.plus.oncommand = function(id,event){
winform.close();
}

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

美丽草原 · 发表于 2014-1-18 01:52:54

太漂亮啦！

dem · 发表于 2014-1-18 01:53:50

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

快乐小鸟 · 发表于 2014-1-18 02:06:09

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

笑问天 · 发表于 2014-1-18 03:03:48

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

look · 发表于 2014-1-18 07:07:41

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

LMJ243 · 发表于 2014-1-18 08:15:49

从未坐得如此前排！谢谢分享！老大嫂子新年快乐！

		自动登录	找回密码
密码			注册会员

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

评分

相关帖子

Z 序：原理与优化

plus 控件 - 设置背景图像、前景图像