From Friday, April 19th (11:00 PM CDT) through Saturday, April 20th (2:00 PM CDT), 2024, ni.com will undergo system upgrades that may result in temporary service interruption.

We appreciate your patience as we improve our online experience.



基于XControl与子面板技术制作Win8开始菜单控件



主要软件: LabVIEW Development Systems>>LabVIEW Professional Development System
主要软件版本: 2013
主要软件修正版本: N/A
次要软件: LabVIEW Development Systems>>LabVIEW Professional Development System

问题:
        微软推出的操作系统Win8中引入了全新的开始菜单,超大图标及动态磁贴的概念令人耳目一新。动态磁贴本身可以给应用程序提供一个预览,让用户在不用打开应用程序的前提下能及时地了解应用程序的运行结果,一个开始菜单中不同的应用磁贴能在很短的时间内为用户提供丰富的信息,提升用户操作效率的同时还极大地提升了用户体验。Win8新的开始菜单运行机制本质类似于进程并行驱动的UI独立更新,介于LabVIEW是天生并行的,那么,LabVIEW中能实现这样的控件吗?


解答:
        既然LabVIEW天性喜欢并行,那么实现类似Win8开始菜单正是LabVIEW擅长做的事情,只要结合XControl及子面板技术即可。单个子面板可以担当某个应用程序动态磁贴的容器,通过XControl将多个子面板磁贴封装即可制作出一个菜单控件。
       1、单个动态磁贴Metro Button XControl的创建:
       外观定义:在外观vi前面板中放入一个子面板控件及背景高亮图片控件,保证子面板控件较背景高亮图片控件略小,并将子面板控件叠放在背景高亮图片控件上面,这样,当子面板装载显示内容后背景高亮图片会以框选的方式突出当前动态磁贴。

       数据类型:布尔量
       交互逻辑:以按钮的形式供用户点击交互,此外,当用户把鼠标移到图标上方时会高亮突出。
       调用方法
      1)插入动态磁贴vi前面板。当子面板不装载显示内容时整个XControl处于不可见状态,只有当子面板成功装载显示内容后整个空间才可见。

     2)移除动态磁贴vi前面板。此时,整个控件又恢复为不可见状态。

      3)设置高亮背景色

        2.动态磁贴阵列Metro Menu XControl的创建:
        外观定义:在外观vi中按三行六列整齐的放置18个刚刚制作好的Metro Button,组成候选动态磁贴阵列。已经装载内容的磁贴处于可见状态,未装载内容的隐藏起来。

        数据类型:字符串(用于每次返回用户点击的应用磁贴ID)
        交互逻辑:由于LabVIEW在运行过程中是不支持动态创建控件的,故而无法像win8那样新安装一个应用程序就为应用程序动态创建一个磁贴图标。这里给大家提供的思路是每次最多只让用户看到显示界面内的3*4=12个子面板图标,其余的被隐藏部分图标按需要实时改变自己的位置及显示内容,这个过程类似于滚动显示,12个可见图标相当于开了个窗口,当用户尝试拖动图标内容看其他应用程序时其实是在改变该窗口的位置,为了保证整个显示过程在边界切换时的平滑过渡,在12个显示图标的两侧额外各加一列图标做缓冲。如此,即在理论上实现了使用有限个Metro Button显示无限个应用程序动态图标的功能。

         具体代码实现分为以下几个部分:
         1)捕捉鼠标按下事件。记录下此时的鼠标位置并更新相关状态。

         2)捕捉鼠标移动事件。如果用户在按下鼠标左键的同时还移动鼠标,表示用户想托拽Metro Menu内的显示内容。

在移动显示内容(即18个Metro Button组成的动态图标显示阵列)时有两个思路,一种是设置每个Metro Button的位置属性节点,逐个移动图标,但这种方法执行效率太低,特别是当用户频繁移动动态图标时会出现显示内容跟不上用户移动速度。推荐使用的方法是更改显示面板的原点(Origin),在需要整体移动前面板上的控件的场合中,该方法被认为效率最高。

        3)捕捉鼠标移出面板及鼠标释放事件。如果用户在移动鼠标的过程中鼠标释放或者干脆鼠标移出XControl面板,那表示用户已完成本次托拽,此时检查一下显示内容的位置是否合适,如果不合适(譬如已超过左边界),那么将显示内容弹回到正常位置。

 

使用距离二分法实现面板弹回的代码如下:

 

        4)捕捉鼠标滚轮事件。从LabVIEW 2013开始,事件结构开始支持对鼠标滚轮的捕捉,为此,移动显示内容也可以通过滚动鼠标滚轮实现。

        5)捕捉用户单击Metro Button事件。筛选出用户点击的应用磁贴名称ID并作为返回值输出。

        调用方法:
        1)初始化控件。主要用于对控件的状态数据及Metro Button XControl阵列进行重置。

        2)注册新应用磁贴。将新应用的名称及vi引用等信息加入状态数据并根据当前窗口位置更新Metro Menu。每次新注册的应用都会默认出现在Metro Menu的最后一个可用的位置上。

        3)移除特定应用磁贴。移除时情况比较特殊,当移除的应用位于最后的位置时直接移除即可;但当移除的应用位于所有磁贴的集合中部,那么除了将该磁贴移除以外,还要更改后续磁贴内容出现的位置,统一前移,补全移除特定磁贴产生的空缺。

        4)搜索特定应用磁贴。可以根据用户输入调用节点的应用名称关键词将满足匹配条件的应用磁贴单独在Metro Menu XControl面板中显示出来。实现搜索的代码及执行效果如下图所示:

        3.总结
        本文介绍了通过XControl封装子面板技术制作类似Win8开始菜单控件的方法,经测试,作为一个独立的UI模块,该控件可以成功应用在相关项目中,且具有执行效率高,UI表现力强的优点。当前该控件还只支持固定分辨率,且磁贴大小不可更改,这可以作为后续改进的重点。目前已经应用该控件的应用程序截图如下:



相关链接:
http://zone.ni.com/reference/en-XX/help/371361L-01/lvhowto/creating_labview_xcontrols/


附件:
_Win8 Menu XControl.zip




报告日期: 09/22/2014
最近更新: 09/25/2014
文档编号: 6PLL8PYA