SkinUI入门教程（九） 第六组UI组件：列表、树、网格和浏览器

• 官方网站：http://www.skinui.cn
• 下载地址：http://pan.baidu.com/s/1slKsMGt

9.1 列表Item

列表Item由CSkinListItem类代表，继承于CSkinRelativeLayout，支持CSkinRelativeLayout的所有属性和方法。插入列表的节点必须是CSkinListItem或其子类。

下面是CSkinListItem类特有的XML属性和相关方法：

9.1.1设置鼠标按下时是否允许移动窗口

• 通过XML属性控制如下：

  AllowMoveWindow="true"

• 通过C++程序代码调用方法控制如下：

  void SetAllowMoveWindow(BOOL bAllow);

9.1.2设置鼠标移上去时的颜色

• 通过XML属性控制如下：

  ColorMouseOver="true"

• 通过C++程序代码调用方法控制如下：

  void SetColorMouseOver(const tstring& strBkgColor);

9.1.3设置列表鼠标按下时的颜色

• 通过XML属性控制如下：

  ColorChecked="true"

• 通过C++程序代码调用方法控制如下：

  void SetColorChecked(const tstring& strBkgColor);

9.1.4设置延迟加载

• 通过XML属性控制如下：

  LazyLoad="true"

• 通过C++程序代码调用方法控制如下：

  void SetLazyLoad(BOOL bLazyLoad);

9.2 列表

列表由CSkinListView类代表，继承于CSkinScrollView，支持CSkinScrollView的所有属性和方法。

列表

布局文件如下：

<SkinDialog DefaultWidth="500" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW11" Animation="SizeChange">    <SkinRelativeLayout AlignParentLeft="15" AlignParentRight="15" AlignParentTop="35" AlignParentBottom="15" BkgColor="ID_COLOR_WHITE" Border="ID_COLOR_LINE">        <SkinListView AlignParentLeft="1" AlignParentRight="1" AlignParentTop="1" AlignParentBottom="1" VScrollBar="VScrollBar.xml">            <SkinListItem LayoutWidth="FillParent" LayoutHeight="30" Image="ListItem.png">                <SkinRelativeLayout LayoutWidth="FillParent" LayoutHeight="FillParent">                    <SkinTextView AlignParentLeft="15" AlignParentRight="15" AlignParentVerticalCenter="0" Text="IDS_CONTROL_SHOW_TEXT12"/>                </SkinRelativeLayout>            </SkinListItem>            <SkinListItem LayoutWidth="FillParent" LayoutHeight="30" Image="ListItem.png">                <SkinRelativeLayout LayoutWidth="FillParent" LayoutHeight="FillParent">                    <SkinTextView AlignParentLeft="15" AlignParentRight="15" AlignParentVerticalCenter="0" Text="IDS_CONTROL_SHOW_TEXT12"/>                </SkinRelativeLayout>            </SkinListItem>        </SkinListView>    </SkinRelativeLayout></SkinDialog>

列表控件的节点可以直接在配置文件指定，如上xml文件所示。
也可以由代码生成后再加入列表，如下所示：

CSkinListItem* pListItem = new CSkinListItem(pSkinListView);if(pListItem){    pListItem->SetImage(_T("ListItem.png"));    pListItem->SetLayout(_T("ListItem.xml"));    pListItem->SetLayoutHeight(30);}

下面是CSkinListView类特有的XML属性和相关方法：

9.2.1设置列表是否允许通过接口【GetChildById】获取子组件

• 通过XML属性控制如下：

  AllowGetChild="true"

• 通过C++程序代码调用方法控制如下：

  void SetAllowGetChild(BOOL bAllow);

9.2.2设置列表是否允许选中Item

• 通过XML属性控制如下：

  AllowCheckItem="true"

• 通过C++程序代码调用方法控制如下：

  void SetAllowCheckItem(BOOL bAllow);

9.2.3设置列表为空时的提示图片

• 通过XML属性控制如下：

  EmptyImage="true"

• 通过C++程序代码调用方法控制如下：

  void SetEmptyImage(const tstring& strEmptyImage);

9.2.4设置列表是否允许选中Item

• 通过XML属性控制如下：

  EmptyTips="true"

• 通过C++程序代码调用方法控制如下：

  void SetEmptyTips(const tstring& strEmptyTips);

9.3 树控件

树控件由CSkinTreeView类来代表，继承于CSkinListView，支持CSkinListView的所有属性和方法。

树控件

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW12" Animation="SizeChange">    <SkinRelativeLayout AlignParentLeft="15" AlignParentRight="15" AlignParentTop="35" AlignParentBottom="15" BkgColor="ID_COLOR_WHITE" Border="ID_COLOR_LINE">        <SkinTreeView Id="101" AlignParentLeft="1" AlignParentRight="1" AlignParentTop="1" AlignParentBottom="1" VScrollBar="VScrollBar.xml">        </SkinTreeView>    </SkinRelativeLayout></SkinDialog>

树控件的节点必须由代码插入，代码如下：

void CTreeDialog::OnInitDialog(){    CSkinDialog::OnInitDialog();    CSkinTreeView* pTreeView = static_cast<CSkinTreeView*>(GetChildById(IDC_TREEVIEW));    if(pTreeView)    {        for(int64 i = 0; i < 10; ++i)        {            CSkinTreeItem* pRootItem = new CSkinTreeItem(pTreeView);            if(pRootItem)            {                pRootItem->SetLazyLoad(TRUE);                pRootItem->SetLayoutHeight(30);                pRootItem->SetLayout(_T("TreeItem.xml"));                pRootItem->SetImage(_T("ListItem.png"));                pTreeView->InsertItem(NULL, pRootItem);                for(int64 j = 0; j < 10; ++j)                {                    CSkinTreeItem* pTreeItem = new CSkinTreeItem(pTreeView);                    if(pTreeItem)                    {                        pTreeItem->SetLazyLoad(TRUE);                        pTreeItem->SetLayoutHeight(30);                        pTreeItem->SetLayout(_T("TreeItem.xml"));                        pTreeItem->SetImage(_T("ListItem.png"));                        pTreeView->InsertItem(pRootItem, pTreeItem);                        for(int64 k = 0; k < 10; ++k)                        {                            CSkinListItem* pListItem = new CSkinListItem(pTreeView);                            if(pListItem)                            {                                pListItem->SetLazyLoad(TRUE);                                pListItem->SetLayoutHeight(30);                                pListItem->SetLayout(_T("ListItem.xml"));                                pListItem->SetImage(_T("ListItem.png"));                                pTreeView->InsertItem(pTreeItem, pListItem);                            }                        }                    }                }            }        }        pTreeView->ResetSortedItem();    }}

下面是CSkinTreeView类特有的方法：

9.3.1插入子树节点

• 通过C++程序代码调用方法控制如下：

  void InsertItem(CSkinTreeItem* pParentItem, CSkinTreeItem* pItem);

9.3.2插入叶子节点

• 通过C++程序代码调用方法控制如下：

  void InsertItem(CSkinTreeItem* pParentItem, CSkinListItem* pItem);

9.3.3展开树节点

• 通过C++程序代码调用方法控制如下：

  void ExpandItem(CSkinTreeItem* pItem, BOOL bExpand);

9.3.4移除树节点

• 通过C++程序代码调用方法控制如下：

  void RemoveItem(CSkinTreeItem* pParentItem, CSkinListItem* pItem);

9.3.5删除树节点

• 通过C++程序代码调用方法控制如下：

  void DeleteItem(CSkinTreeItem* pParentItem, CSkinListItem* pItem);

9.3.6删除所有树节点

• 通过C++程序代码调用方法控制如下：

  void DeleteAllItem();

9.4 网格控件

网格控件由CSkinGridView类来代表，继承于CSkinListView，支持CSkinListView的所有属性和方法。

网格控件

网格控件跟列表控件非常相似，节点可以直接在配置文件指定，如上xml文件所示。
也可以直接由代码插入网格控件，如下所示：

CSkinListItem* pListItem = new CSkinListItem(pSkinGridView);if(pListItem){    pListItem->SetImage(_T("ListItem.png"));    pListItem->SetLayout(_T("ListItem.xml"));    pListItem->SetLayoutHeight(30);}

下面是CSkinListView类特有的XML属性和相关方法：

9.4.1设置单元格大小

• 通过XML属性控制如下：

  CellSize="100,100"

• 通过C++程序代码调用方法控制如下：

  void SetCellSize(const CSize& size);

9.4.1设置单元格间距

• 通过XML属性控制如下：

  MarginSize="10,10"

• 通过C++程序代码调用方法控制如下：

  void SetMarginSize(const CSize& size);

9.4.1设置列数

• 通过XML属性控制如下：

  ColumnCount="5"

• 通过C++程序代码调用方法控制如下：

  void SetColumnCount(LONG nColumnCount);

9.5 IE浏览器控件

IE浏览器控件由CSkinWebView类来代表，继承于CSkinWndView，支持CSkinWndView的所有属性和方法。

IE浏览器控件

布局文件如下：

<SkinDialog DefaultWidth="800" DefaultHeight="600" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW18" Animation="SizeChange">    <SkinWebView AlignParentLeft="0" AlignParentRight="0" AlignParentTop="32" AlignParentBottom="0" URL="www.baidu.com"/></SkinDialog>

下面是CSkinWebView类特有的XML属性和相关方法：

9.5.1设置URL

• 通过XML属性控制如下：

  URL="www.baidu.com"

• 通过C++程序代码调用方法控制如下：

  void LoadURL(const tstring& strURL);

9.6 Cef浏览器控件

网格控件由CSkinCefView类来代表，继承于CSkinView，支持CSkinView的所有属性和方法。

Cef浏览器控件

布局文件如下：

<SkinDialog DefaultWidth="800" DefaultHeight="600" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW19" Animation="SizeChange">    <SkinCefView AlignParentLeft="0" AlignParentRight="0" AlignParentTop="32" AlignParentBottom="0" URL="www.baidu.com"/></SkinDialog>

下面是CSkinView类特有的XML属性和相关方法：

9.6.1设置URL

• 通过XML属性控制如下：

  URL="www.baidu.com"

• 通过C++程序代码调用方法控制如下：

  void LoadURL(const tstring& strURL);