20th article: Using layered windows in Soui

Starting with Windows 2K, MS has introduced a window style of layered windows for UI development. Using a layered window, the main window of an application can be translucent or point-by-dot (that is, the transparency of each pixel can be different).

It can be said that because of the layered window, the UI of the application developed on Windows really dazzles.

The style of adding a layered window to the main window of the UI is very simple for a programmer with a little bit of UI development experience, and this article is about implementing Soui layered windows in a Soui windowing system.

Just as the windows of the system can already implement a nice UI, we still need UI development technology like Directui, and with the layered windows of the system, we will still need the layered window technology between Directui window.

What is the use of a layered window for a directui system?

The key difference between a layered window and a normal window is that a layered window is a relatively separate render layer that renders its child windows to this window, and when all of the layered windows are rendered, they are blended by different alpha blending techniques in the zorder order of the layered windows. While the general Directui system has only one render layer, all windows are rendered to this render layer sequentially in ZOrder order, and the concept of different render layers is missing.

A simple example: the business may want a functional panel to be translucent in its entirety, which may contain many sub-windows.

Without a layered window feature, implementing similar requirements in Directui is complex (such as specifying the translucency of each subwindow separately) and can lead to performance degradation, increased memory consumption, and so on.

If you have a layered window, it's easy to implement similar requirements: just specify a transparency for the feature panel. When rendering, the Sub-window of the function panel renders to the cache of the layered window in the normal rendering mode, and after all rendering is complete, the whole and the previous render layer are mixed to achieve the desired effect.

How to use layered windows in Soui:

The Soui uses XML to define the UI, and to define a layered window requires only a layeredwindow= "1" attribute.

XML definition:

      <windowPOS= "0,0,-0,-0"clipclient= "1"Skin= "Skin_bkgnd" >        <FlywndPOS= " -210,10,-0,-10"Posend= " -10,10,@210,-10"Alpha= "+" layeredwindow= "1" >          <TogglePOS= "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>          <windowPOS= "10,0,-0,-0"Colorbkgnd= "#ff0000">            <TreectrlPOS= "10,0,-10,-10"name= "Mytree2"ItemHeight= "+"Iconskin= "Skin_tree_icon"CheckBox= "1"Font= "Underline:1">              <Itemtext= "Organizational Structure"img= "0"selimg= "1"Expand= "0">                <Itemtext= "Marketing Department"img= "0"selimg= "1">                  <Itemtext= "South District"img= "2"/>                  <Itemtext= "North Second District"img= "2"/>                  <Itemtext= "West Third District"img= "2">                    <Itemtext= "First Squad"img= "0"selimg= "1"Expand= "0">                      <Itemtext= "Zhang three groups"img= "2"/>                      <Itemtext= "Li si Group"img= "2"/>                      <Itemtext= "Harry Group"img= "2"/>                    </Item>                  </Item>                </Item>              </Item>              <Itemtext= "Propaganda Department"img= "0"selimg= "1"Expand= "0">                <Itemtext= "South District"img= "2"/>                <Itemtext= "North Second District"img= "2"/>                <Itemtext= "West Third District"img= "2"/>              </Item>            </Treectrl>            <textPOS= "10,-100,-0,@100"Multilines= "1">Click the left grip to \nshow or hide the \npane</text>          </window>        </Flywnd>      </window>

Display effect:

20th article: Using layered windows in Soui