3.18 网格控件
<p>网格控件由CSkinGridView类来代表，继承于CSkinListView，支持CSkinListView的所有属性和方法。</p>
<h2>1 属性和相关方法：</h2>
<h4>1.1 设置单元格大小</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">CellSize=&quot;100,100&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetCellSize(const CSize&amp; size);</code></pre></li>
</ul>
<h4>1.2 设置单元格间距</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">MarginSize=&quot;10,10&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetMarginSize(const CSize&amp; size);</code></pre></li>
</ul>
<h4>1.3 设置列数</h4>
<ul>
<li>通过XML属性控制如下：
<pre><code class="language-xml">ColumnCount=&quot;5&quot;</code></pre></li>
<li>通过C++程序代码调用方法控制如下：
<pre><code class="language-c">void SetColumnCount(LONG nColumnCount);</code></pre></li>
</ul>
<h2>请看下面的示例</h2>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/3/18/1.png" alt="网格控件" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;445&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Icon=&quot;128&quot; Caption=&quot;IDS_CONTROL_SHOW18&quot; Animation=&quot;SizeChange&quot;&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;154&quot; AlignParentLeft=&quot;15&quot; AlignParentTop=&quot;45&quot; AlignParentBottom=&quot;60&quot; BkgColor=&quot;ID_COLOR_WHITE&quot; Border=&quot;ID_COLOR_LINE&quot;&gt;
&lt;SkinGridView Id=&quot;101&quot; AlignParentLeft=&quot;2&quot; AlignParentRight=&quot;2&quot; AlignParentTop=&quot;2&quot; AlignParentBottom=&quot;2&quot; CellSize=&quot;70,30&quot; ColumnCount=&quot;2&quot; VScrollBar=&quot;VScrollBar.xml&quot;&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;ListItem.xml&quot; ChildText1=&quot;Item1&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;ListItem.xml&quot; ChildText1=&quot;Item2&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;ListItem.xml&quot; ChildText1=&quot;Item3&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;ListItem.xml&quot; ChildText1=&quot;Item4&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;ListItem.xml&quot; ChildText1=&quot;Item5&quot;/&gt;
&lt;/SkinGridView&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;254&quot; AlignParentRight=&quot;15&quot; AlignParentTop=&quot;45&quot; AlignParentBottom=&quot;60&quot; BkgColor=&quot;ID_COLOR_WHITE&quot; Border=&quot;ID_COLOR_LINE&quot;&gt;
&lt;SkinGridView Id=&quot;102&quot; AlignParentLeft=&quot;2&quot; AlignParentRight=&quot;2&quot; AlignParentTop=&quot;2&quot; AlignParentBottom=&quot;2&quot; CellSize=&quot;60,60&quot; ColumnCount=&quot;4&quot; VScrollBar=&quot;VScrollBar.xml&quot;&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;UserListItem2.xml&quot; ChildImage1=&quot;Male.png&quot; ChildText2=&quot;姓名1&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;UserListItem2.xml&quot; ChildImage1=&quot;Female.png&quot; ChildText2=&quot;姓名2&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;UserListItem2.xml&quot; ChildImage1=&quot;Male.png&quot; ChildText2=&quot;姓名3&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;UserListItem2.xml&quot; ChildImage1=&quot;Female.png&quot; ChildText2=&quot;姓名4&quot;/&gt;
&lt;SkinListItem LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;30&quot; Image=&quot;ListItem.png&quot; Layout=&quot;UserListItem2.xml&quot; ChildImage1=&quot;Male.png&quot; ChildText2=&quot;姓名5&quot;/&gt;
&lt;/SkinGridView&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinButton Id=&quot;201&quot; LayoutWidth=&quot;150&quot; LayoutHeight=&quot;30&quot; ChildText1=&quot;添加节点&quot; Image=&quot;Button.png&quot; Layout=&quot;Button.xml&quot; AlignParentLeft=&quot;15&quot; AlignParentBottom=&quot;15&quot; PressDownOffset=&quot;1&quot;/&gt;
&lt;SkinButton Id=&quot;202&quot; LayoutWidth=&quot;250&quot; LayoutHeight=&quot;30&quot; ChildText1=&quot;添加节点&quot; Image=&quot;Button.png&quot; Layout=&quot;Button.xml&quot; AlignParentRight=&quot;15&quot; AlignParentBottom=&quot;15&quot; PressDownOffset=&quot;1&quot;/&gt;
&lt;/SkinDialog&gt;</code></pre>
<h4>h文件</h4>
<pre><code class="language-cpp">#pragma once
class CGridViewDialog : public CSkinDialog
{
public:
enum
{
IDC_GRIDVIEW1 = 101,
IDC_GRIDVIEW2 = 102,
IDC_BUTTON1 = 201,
IDC_BUTTON2 = 202,
};
public:
CGridViewDialog(const tstring&amp; strXml);
public:
virtual void OnInitDialog();
protected:
void OnBtnClickedAddItem1(UINT uNotifyCode, int nID, CSkinView* pView);
void OnBtnClickedAddItem2(UINT uNotifyCode, int nID, CSkinView* pView);
SKINUI_DECLARE_MESSAGE_MAP()
private:
CSkinGridView* m_pGridView1;
CSkinGridView* m_pGridView2;
};</code></pre>
<h4>cpp文件</h4>
<pre><code class="language-cpp">#include &quot;stdafx.h&quot;
#include &quot;GridViewDialog.h&quot;
SKINUI_BEGIN_MESSAGE_MAP(CGridViewDialog, CSkinDialog)
ON_SKINUI_COMMAND(IDC_BUTTON1, OnBtnClickedAddItem1)
ON_SKINUI_COMMAND(IDC_BUTTON2, OnBtnClickedAddItem2)
SKINUI_END_MESSAGE_MAP()
CGridViewDialog::CGridViewDialog(const tstring&amp; strXml)
: CSkinDialog(strXml)
, m_pGridView1(NULL)
, m_pGridView2(NULL)
{
}
void CGridViewDialog::OnInitDialog()
{
CSkinDialog::OnInitDialog();
m_pGridView1 = static_cast&lt;CSkinGridView*&gt;(GetChildById(IDC_GRIDVIEW1));
m_pGridView2 = static_cast&lt;CSkinGridView*&gt;(GetChildById(IDC_GRIDVIEW2));
}
static int nIndex1 = 6;
void CGridViewDialog::OnBtnClickedAddItem1(UINT uNotifyCode, int nID, CSkinView* pView)
{
if(m_pGridView1)
{
CSkinListItem* pListItem = new CSkinListItem(m_pGridView1);
if(pListItem)
{
pListItem-&gt;SetLayoutHeight(30);
pListItem-&gt;SetImage(_T(&quot;ListItem.png&quot;));
pListItem-&gt;SetLayout(_T(&quot;ListItem.xml&quot;));
pListItem-&gt;SetChildText(100001, _T(&quot;Item&quot;) + SkinUI::IntToString(nIndex1++));
}
m_pGridView1-&gt;ResetScrollInfo();
m_pGridView1-&gt;ScrollBottom();
m_pGridView1-&gt;RedrawView();
}
}
static int nIndex2 = 6;
static BOOL bMale = FALSE;
void CGridViewDialog::OnBtnClickedAddItem2(UINT uNotifyCode, int nID, CSkinView* pView)
{
if(m_pGridView2)
{
CSkinListItem* pListItem = new CSkinListItem(m_pGridView2);
if(pListItem)
{
pListItem-&gt;SetLayoutHeight(30);
pListItem-&gt;SetImage(_T(&quot;ListItem.png&quot;));
pListItem-&gt;SetLayout(_T(&quot;UserListItem2.xml&quot;));
pListItem-&gt;SetChildImage(100001, bMale ? _T(&quot;Male.png&quot;) : _T(&quot;Female.png&quot;));
pListItem-&gt;SetChildText(100002, _T(&quot;姓名&quot;) + SkinUI::IntToString(nIndex2++));
bMale = !bMale;
}
m_pGridView2-&gt;ResetScrollInfo();
m_pGridView2-&gt;ScrollBottom();
m_pGridView2-&gt;RedrawView();
}
}</code></pre>