DSkinLite界面库 Demo系列（二）：游戏大厅类软件

‍

游戏大厅类软件是UIEASY开发团队制作的又一个软件demo，此次发布只是一个雏形，我们还将继续完善此Demo，使其各项功能特性更加贴近实际软件。游戏大厅Demo主要演示DSkinLite界面库对Tree control, list control, radio buttons等控件各项特性的完全支持，同时也展示了DSkinLite界面库对控件透明等特性的支持。

下载示例（安装后 主界面 ->Demos –> Game Demo ）

> DSkinLite界面库对Tree control 的支持

游戏大厅Demo主要演示DSkinLite界面库对Tree control的支持。 DSkinLite界面库从3.0开始加入了对List box, list control, tree control控件的item绘制支持，即可以通过在XML中配置Item的样式及相关API函数来绘制Item内容。如下图游戏列表：

在DSkinlite中，items内容的绘制，以一个item为单位来定义其风格。这种设计比较符合Win32 tree control本身的机制，我们知道如果需要自绘tree control，须设置tree control的OWN_DRAW属性，然后在DrawItem等消息中绘制绘制的item，即以一个Item为单位绘制。从这种机制得到启发，DSkinlite对tree control内容的绘制也以item为单位，首先在xml中定义item的风格样式，用户可以定义一个或者多个item样式，也可以通过改变一个样式中的元素属性来组合不同的item样式。
    生成多种Item样式的方式一，在xml 的tree control定义中，直接定义多个item样式。如下面代码所示：

‍<treectrlinfo bDrawOver="true" itemheight="24" levelpos="0">
<drawitem id="default" >   
    <image id="collapseicon" picfile="#tree2.collapse" left="14"
           top="0" width="16" height="16" state="non"/>
    <image id="expandicon"   picfile="#tree2.expand" left="14"
           top="0" width="16" height="16" state="non"/>       
    <text content="#default" left="57" top="2" state="normal"
               textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57" top="2" state="over"
              textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57" top="2" state="checked"
             textcolor="RGB(0,0,0)" font="#default_bold" />
    <image id="treeitemicon"   picfile="#tree2.alltask" left="32"
                 top="0" width="24" height="24" state="all"/>
</drawitem>
<drawitem id="Parent" >
    <image id="collapseicon" picfile="#tree2.collapse" left="14"
           top="0" width="16" height="16" state="non"/>
    <image id="expandicon"   picfile="#tree2.expand" left="14"
           top="0" width="16" height="16" state="non"/>       
    <text content="#default" left="57" top="2" state="normal"
               textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57" top="2" state="over"
              textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57" top="2" state="checked"
             textcolor="RGB(0,0,0)" font="#default_bold" />
    <image picfile="#tree2.search" left="136" top="3" state="normal"
           rectinfile="0,0,15,15" width="15" height="15" />       
    <image picfile="#tree2.search" left="136" top="3" state="over"
           rectinfile="16,0,15,15" width="15" height="15"/>
    <image picfile="#tree2.search" left="136" top="3" state="checked"
           rectinfile="32,0,15,15" width="15" height="15" />
    <image id="treeitemicon"   picfile="#tree2.alltask" left="32"
            top="0" width="24" height="24" state="all"/>
</drawitem>
</treectrlinfo>

上面的XML代码，我们定义了两个item 风格，一个id为“default”，另一个id为“Parent”。在treectrlinfo，必须有一个id为“default”item风格，此为item的默认风格。DSkinLite默认使用id为“default”的风格来绘制item，开发人员可以通过函数dsSetItemStyle来设置item的风格。

‍tvInsert.item.pszText = _T("Downloaded");
HTREEITEM hDownloaded = pCtrl->InsertItem(&tvInsert);
dsSetItemStyle( pCtrl->GetSafeHwnd(),
                (i   1: tvInsert.item.pszText = _T("Downloaded");nt)hDownloaded,
                0,
                _T("Parent"),
               FALSE);

‍生成多种Item样式的方式二，通过修改item风格定义中的元素的属性来组合出不同的item风格。常用的函数有：

BOOL __stdcall dsSetDrawItemVisibleEx2( HWND hwnd,
                                         int nItem,
                                         int nSubItem,
                                         int nMinIndex,
                                         int nMaxIndex,
                                        BOOL bVisible ,
                                         BOOL bRedrawItem );

BOOL __stdcall dsSetDrawItemVisibleEx( HWND hwnd,
                                        int nItem,
                                        int nSubItem,
                                        LPCTSTR strID,
                                        BOOL bVisible,
                                        BOOL bRedrawItem);

BOOL __stdcall dsSetDrawItemValueEx( HWND hwnd,
                                        int nItem,
                                        int nSubItem,
                                        LPCTSTR strID,
                                        LPCTSTR strValue,
                                        BOOL bRedrawItem);

‍

这三个函数主要用来控制item中元素是否显示，及设置某个元素的值。例如：

此为游戏大厅示例中游戏列表 tree control的item定义，我们可以看到虽然不同的item风格不一样，但是我们没有定义多个不同的item风格。而是通过对某些元素的显示和隐藏来配置不同风格的item定义。例如index 100-117 定义了不同游戏的图标，在程序中我们根据程序的逻辑来配置item的此图标。

‍ <treectrlinfo bDrawOver="true" itemheight="24" levelpos="0">
<drawitem id="default" >   
      <image id="collapseicon" picfile="#tree2.collapse" left="14"
            top="0" width="16" height="16" state="non"/>
     <image id="expandicon"   picfile="#tree2.expand" left="14"
             top="0" width="16" height="16" state="non"/>       
     <text content="#default" left="57" top="2" state="normal"
                 textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57" top="2" state="over"
               textcolor="RGB(0,0,0)" font="#default"/>
     <text content="#default" left="57" top="2" state="checked"
              textcolor="RGB(0,0,0)" font="#default_bold" />
    <image id="treeitemicon"   picfile="#tree2.alltask" left="32"
                  top="0" width="24" height="24" state="all"/>
</drawitem>
<drawitem id="Parent" >
<image id="collapseicon" picfile="#tree2.collapse" left="14"
        top="0" width="16" height="16" state="non"/>
<image id="expandicon"   picfile="#tree2.expand" left="14"
        top="0" width="16" height="16" state="non"/>
<text content="#default" left="57" top="2" state="normal"
            textcolor="RGB(0,0,0)" font="#default"/>
<text content="#default" left="57" top="2" state="over"
           textcolor="RGB(0,0,0)" font="#default"/>
<text content="#default" left="57" top="2" state="checked"
          textcolor="RGB(0,0,0)" font="#default_bold" />
<image picfile="#tree2.search" left="136" top="3" state="normal"
        rectinfile="0,0,15,15" width="15" height="15" />
<image picfile="#tree2.search" left="136" top="3" state="over"
       rectinfile="16,0,15,15" width="15" height="15"/>
<image picfile="#tree2.search" left="136" top="3" state="checked"
        rectinfile="32,0,15,15" width="15" height="15" />
<image id="treeitemicon"   picfile="#tree2.alltask" left="32"
         top="0" width="24" height="24" state="all"/>
</drawitem>
</treectrlinfo>


<drawitem id="default" >   
<image id="collapseicon" picfile="#tree.expand.icon"
        rectinfile="0,0,14,15" left="12" top="3" width="14"
         height="15" state="non"/>
<image id="expandicon"   picfile="#tree.expand.icon"
        rectinfile="14,0,14,15" left="12" top="3" width="14"
        height="15" state="non"/>       
<text content="#default" left="54" top="0" state="normal"
    textcolor="RGB(0,0,0)" bsingleline="true" />
<text content="#default" left="54" top="0" state="over"
     textcolor="RGB(0,0,0)" bsingleline="true" />
<text content="#default" left="54" top="0" state="checked"
   textcolor="RGB(198,97,11)" bsingleline="true" />


to specify which to be show and which to be hide-->
<image index="100" visible="false" picfile="#tree.gametype.icon"
       rectinfile="0,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="101" visible="false" picfile="#tree.gametype.icon"
         rectinfile="18,0,18,18" left="32" top="1" width="18"
        height="18" state="all"/>       
<image index="102" visible="false" picfile="#tree.gametype.icon"
         rectinfile="36,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="103" visible="false" picfile="#tree.gametype.icon"
         rectinfile="54,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="104" visible="false" picfile="#tree.gametype.icon"
         rectinfile="72,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="105" visible="false" picfile="#tree.gametype.icon"
         rectinfile="90,0,18,18" left="32" top="1" width="18"
        height="18" state="all"/>       
<image index="106" visible="false" picfile="#tree.gametype.icon"
         rectinfile="108,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="107" visible="false" picfile="#tree.gametype.icon"
         rectinfile="126,0,18,18" left="32" top="1" width="18"
        height="18" state="all"/>       
<image index="108" visible="false" picfile="#tree.gametype.icon"
         rectinfile="144,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="109" visible="false" picfile="#tree.gametype.icon"
         rectinfile="162,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="110" visible="false" picfile="#tree.gametype.icon"
         rectinfile="180,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="111" visible="false" picfile="#tree.gametype.icon"
         rectinfile="198,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="112" visible="false" picfile="#tree.gametype.icon"
         rectinfile="216,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="113" visible="false" picfile="#tree.gametype.icon"
         rectinfile="234,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="114" visible="false" picfile="#tree.gametype.icon"
         rectinfile="252,0,18,18" left="32" top="1" width="18"
         height="18" state="all"/>       
<image index="115" visible="false" picfile="#tree.gametype.icon"
        rectinfile="270,0,18,18" left="32" top="1" width="18"
        height="18" state="all"/>       
<image index="116" visible="false" picfile="#tree.gametype.icon"
        rectinfile="288,0,18,18" left="32" top="1" width="18"
        height="18" state="all"/>       
<image index="117" visible="false" picfile="#tree.gametype.icon"
        rectinfile="306,0,18,18" left="32" top="1" width="18"
       height="18" state="all"/>       

<image index="120" visible="false" left="32" top="1" width="18"
        picfile="#tree.unknown" height="18" state="all"/>       
<image index="121" visible="false" left="32" top="1" width="18"
        picfile="#tree.unknown.dis" height="18" state="all"/>

<image index="200" visible="false" picfile="#tree.icon"
        left="32" top="1" width="18" height="18" state="all" />

<!--Event Item -->
<eventitem id="EnterQuickly" visible="false" left="168" top="4"
           event="LButtonDown" cursor="#handcur"
           state="all" sendparent="true">
    <text id="textdefault" content="EnterQuickly" left="0"
          horzalign="left" top="0" state="all"
          textcolor="RGB(128,128,128)"
          font="#default_link"/>
</eventitem>   

<eventitem id="DownloadNow" visible="false" left="168" top="4"
           event="LButtonDown" cursor="#handcur"
           state="all" sendparent="true">
    <text id="textdefault" content="DownloadNow" left="0"
    horzalign="left" top="0" state="all"
    textcolor="RGB(128,128,128)" font="#default_link"/>
</eventitem>               
</drawitem>

‍> 使用DSkinLite界面库构建功能强大的TabBar

   游戏大厅Demo需要一个类似TabCtrl的控件来显示当前打开的游戏。显然使用传统的Tab control 有很多地方难以实现，比如不同tab item的风格可能不同，不同的tab item长度可能不同，右端需要一个关闭按钮等。基于这些因素的考虑，我们建议使用一组Radio butons来实现，这样更加灵活。但同时我们也发现，不能只是简单的将一组radio buttons放置到一起，还需要处理增加button，关闭button等。在此Demo中，CButtonGroup类为管理一组Radio Buttons的容器，可以通过此类来添加，删除button及其他管理。其中右上角的关闭按钮为radio button的子控件。

转载自：http://blog.csdn.net/haixia8613/archive/2009/10/08/4867056.aspx