窗口控件透明效果的实现--DSkinLite界面库使用技巧

DSkinLite 界面库使用技巧(二): 窗口控件透明效果

界面设计中，很多效果需要借助透明效果来实现。不幸的是，Windows 标准控件基本不支持透明效果。因此我们需要自己来实现透明效果。一般来说所谓控件透明，在技术实现方面，需要在子窗口绘制背景之前，先将父窗口相应区域的图像绘制在子窗口的DC上。CodeProject也有很多这方面的示例，但是这些示例都是不完整的，没有用一种统一的方案来彻底解决子窗口透明的问题。例如：如果父窗口的背景变化了，窗口大小改变了，需要透明的子窗口也需要重新绘制。而且需要控制时机，控制效率，不然会出现闪烁等问题。

原文地址 http://www.uieasy.cn/blog/?p=119

   DSkinLite界面库在设计时就充分考虑到控件透明等特效。因此使用DSkinLite界面库可以高效，简洁地实现控件透明效果，可以对几乎所有控件包括子对话框实现透明效果。

• DSkinLite界面库支持的透明控件类型

         Static
      Button( push button, check button, radio button)
      Progress control
      Slider control
      Animation
      ToolBar
      Child dialog
      Edit control

• 在XML中设置控件透明

  DSkinLite界面库中添加控件透明效果很简单，只需要在控件的XML描述中添加transparent 属性即可。即设置“property”属性btransparent=“true”即可。
  
  Edit 控件：
  

  <window name="edit" type="edit">
  
    <property bkcolor="#system_bg" btransparentbk="true" />
  
    <editinfo buseimagebk="true"/>
  
    <rect  bordercolor="#system.border" fillcolor="RGB(255,255,255)"
  
     borderwidth="2" style="hole" />
  
  </window>
  

  Button控件：

  <window name="HintButton" type="button">
  
     <property btransparentbk="true"  width="40" height="40"/>
  
     <buttoninfo subtype="push" />
  
     <image state = "normal"  picfile="#hint_button_nor"/>
  
     <image state = "over"    picfile="#hint_button_over"/>
  
     <image state = "down"    picfile="#hint_button_over"/>
  
     <image state = "disable"    picfile="#hint_button_nor"/>
  
  </window>
  

     子窗口（Child dialog）:

  <window name="transparent_childdialog" type="dialog">
  
     <property  tooltips="#default" btransparentbk="true" />
  
     <text state="all" font="#default_bold" left="5" top="5"
  
           width="300" height="23" textcolor="RGB(0,0,0)" />
  
     <rect state="all" index="1" bordercolor="#system.border"
  
       borderwidth="2" fillcolor="RGB(255,255,255)" style="hole" />
  
  </window>
  

  下图为透明控件效果： 

  

  DSkinLite界面开发团队将继续向更多的控件中添加透明属性，如List Box, ListCtrl, TreeCtrl等。