nim_duilib(14)之xml配置半透明窗体控件不透明
before starting
note
截至目前，我只能用xml写一些简单的布局和设置控件属性，循序渐进吧。
正在学习nim_duilib的xml的一些属性。
xml配置半透明
GTAV中就有很多控件不透明而背景半透明的案例。刚进游戏的加载界面、任务找人界面......
shadowattached属性
<Attribute name="shadowattached" default="true" type="BOOL" comment="窗口是否附加阴影效果,如(true)"/>
它是一个窗口的属性，需要背景半透明，则需要设置shadowattached为false。其值及意义如下：
| value | 作用 |
|---|---|
| true | 默认值，给窗口加上阴影背景 |
| false | 则不会给窗口额外增加背景 |
| 当设置为false时，此时窗体的背景为全透明。 |
颜色
一个例子
<TextColor name="bk_ground_color_trans_50" value="#8FBA6500" />
这样的例子，可以在global.xml中发现有很多。其中，name是为了方便引用该颜色；value是该项的颜色值。
Note，这里的颜色是16进制格式。
其中，value由以下几个部分组成：Alpha通道值、Red、Green、Blue.
| name | value |
|---|---|
| Alpha | 8F |
| Red | BA |
| Green | 65 |
| Blue | 00 |
| 其中，alpha表示透明度，范围0~255， 255为不透明，0为全透明。 |
一个配置窗口半透明的例子
从上面可以知道，shadowattached设置为false，窗口此时为全透明，额，那么要实现半透明，就需要一个半透明的controls于当前窗口大小全匹配，这样就可以实现效果了，当然，理论上可以设置窗口的背景为一张半透明的背景图（此方法没有尝试过）。
Window标签
Window标签的代码如下
<Window size="900,600" caption="0,0,0,35" shadowattached="false" >
size
size指定了窗口（宽X高）为900x600
caption
- caption，一个例子，caption="x1,y1,x2,y2"， 其中， 各个字段的意义如下
x1 距离左边界的距离；rcCaption.left
y1 距离上边界的距离; rcCaption.top
x2 距离右边界的距离；rcCaption.right
y2 距离上边界的距离； rcCaption.bottom
shadowattached
shadowattached设置为false，此时窗口时全透明的。
半透明标签
我用一个垂直布局控件VBox.贴合窗口，使其和窗口大小一致，这样，通过设置VBox的透明度实现半透明效果。
VBox 源码
<VBox bkcolor="bk_ground_color_trans_50" height="stretch" width="stretch">
其中，bk_ground_color_trans_50来自上文的颜色中的例子，我把它定义在global.xml中。这里同时设定宽度和高度为拉伸，这样就能和窗口一样大了。
一个效果
可以看见，已经达到了我们想要的结果，控件不透明，窗口背景半透明。 效果差了点。
一个简单配置界面半透明的代码
样式
其中，blue为一个按钮
源码
上面的例子贴xml的代码，太长了，下面这个简单点。
<?xml version="1.0" encoding="UTF-8"?>
<Window size="500,500" shadowattached="false" roundcorner="10,10" >
<VBox bkcolor="bk_ground_color_trans_50">
<Control />
<VBox width="stretch" height="stretch">
<Control />
<HBox halign="center" width="auto" halign="center">
<Button class="btn_global_blue_80x30" text="blue"/>
</HBox>
<Control />
</VBox>
<Control />
</VBox>
</Window>
bk_ground_color_trans_50在上文中已经出现了。
