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);
```

秒客网

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

9.1 列表Item

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

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

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

9.1.4设置延迟加载

9.2 列表

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

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

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

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

9.3 树控件

9.3.1插入子树节点

9.3.2插入叶子节点

9.3.3展开树节点

9.3.4移除树节点

9.3.5删除树节点

9.3.6删除所有树节点

9.4 网格控件

9.4.1设置单元格大小

9.4.1设置单元格间距

9.4.1设置列数

9.5 IE浏览器控件

9.5.1设置URL

9.6 Cef浏览器控件

9.6.1设置URL

相关文章

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

9.1 列表Item

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

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

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

9.1.4设置延迟加载

9.2 列表

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

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

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

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

9.3 树控件

9.3.1插入子树节点

9.3.2插入叶子节点

9.3.3展开树节点

9.3.4移除树节点

9.3.5删除树节点

9.3.6删除所有树节点

9.4 网格控件

9.4.1设置单元格大小

9.4.1设置单元格间距

9.4.1设置列数

9.5 IE浏览器控件

9.5.1设置URL

9.6 Cef浏览器控件

9.6.1设置URL

相关文章

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