第二十篇：在SOUI中使用分層窗口

從Windows 2K開始，MS為UI開發引入了分層窗口這一窗口風格。使用分層窗口，應用程序的主窗口可以是半透明，也可以是逐點半透明（即每一個像素點的透明度可以不同）。

可以說，正是因為有了分層窗口，在Windows上開發的應用程序的UI才真正炫起來。

在UI的主窗口上加一個分層窗口的風格對於一個稍有點UI開發經驗的程序員來說是非常簡單的，本篇要說的是在SOUI的窗口系統中實現SOUI的分層窗口。

正如使用系統的窗口已經可以實現很漂亮的UI，我們還是會需要DirectUI這樣的UI開發技術；有了系統的分層窗口，我們還是會需要在DirectUI Window之間的分層窗口技術。

一個DirectUI系統的分層窗口有什么用呢？

分層窗口和一般窗口的關鍵區別在在於：一個分層窗口是一個相對獨立的渲染層，它能將它的子窗口渲染到這個窗口上，當所有分層窗口都渲染完成后，再按照分層窗口的zorder順序通過不同的alpha混合技術進行混合；而一般的DirectUI系統只有一個渲染層，所有窗口按照zorder順序依次渲染到這個渲染層上，缺少了不同渲染層的概念。

一個簡單的例子：業務可能希望一個功能面板能夠整體半透明，該功能面版可能包含很多子窗口。

如果沒有分層窗口特性，在DirectUI中實現類似的需求很很復雜（如分別指定每一個子窗口的半透明）而且可能導致性能下降、內存消耗的提高等問題。

如果有了分層窗口，實現類似的需求就非常簡單了：只需要為該功能面板指定一個透明度就行了。在渲染的時候，功能面板的子窗口會以正常的渲染方式渲染到分層窗口的緩存上，全部渲染完成后，再整體和上一個渲染層混合，從而得到期望的效果。

在SOUI里如何使用分層窗口：

SOUI采用XML定義UI，要定義分層窗口只需要一個layeredWindow="1"的屬性即可。

XML定義：

      <window pos="0,0,-0,-0" clipClient="1" skin="skin_bkgnd" >
        <flywnd pos="-210,10,-0,-10" posEnd="-10,10,@210,-10" alpha="100" layeredWindow="1">
          <toggle pos="0,|-15,@10,@30" skin="_skin.sys.tree.toggle" name="switch" cursor="hand" tip="click me to show the animator that show or hide the pane"></toggle>
          <window pos="10,0,-0,-0" colorBkgnd="#ff0000">
            <treectrl pos="10,0,-10,-10"  name="mytree2" itemHeight="30" iconSkin="skin_tree_icon" checkBox="1" font="underline:1">
              <item text="組織機構" img="0" selImg="1"  expand="0">
                <item text="市場部" img="0" selImg="1">
                  <item text="南一區" img="2"/>
                  <item text="北二區" img="2"/>
                  <item text="西三區" img="2">
                    <item text="第一分隊" img="0" selImg="1" expand="0">
                      <item text="張三組" img="2"/>
                      <item text="李四組" img="2"/>
                      <item text="王五組" img="2"/>
                    </item>
                  </item>
                </item>
              </item>
              <item text="宣傳部" img="0" selImg="1" expand="0">
                <item text="南一區" img="2"/>
                <item text="北二區" img="2"/>
                <item text="西三區" img="2"/>
              </item>
            </treectrl>

            <text pos="10,-100,-0,@100" multilines="1">click the left grip to \nshow or hide the \npane</text>
          </window>
        </flywnd>
      </window>

顯示效果：