ItemDesignerPanel是设计列表项显示内容的控件,
先拖一个ListBox到窗体上,
再拖一个ItemDesignerPanel到ListBox上,
(示例2%20使用列表项设计面板).files/image002.jpg)
把ListBox.Properties.ItemDesignPanel属性设置为ItemDesignPanel,
表示使用ItemDesignPanel来绘制列表项的内容,
(示例2%20使用列表项设计面板).files/image004.jpg)
双击ListBox,在项目编辑器中添加三个列表项,
标题和图标分别为:
“Movies”, (示例2%20使用列表项设计面板).files/image006.gif)
“Music”, (示例2%20使用列表项设计面板).files/image008.gif)
“Documents”,
,
(示例2%20使用列表项设计面板).files/image012.jpg)
添加完之后,
ListBox会调整ItemDesignerPanel的高度为列表项的高度,
列表项的高度在属性ListBox.Properties.ItemHeight中设置,
如下图所示:
(示例2%20使用列表项设计面板).files/image014.jpg)
拖一个Label到ItemDesignPanel上去,
将它的Caption设置为”FolderName”,
HitTest设置为False,
(示例2%20使用列表项设计面板).files/image016.jpg)
这时会发现我们添加的三个列表项都显示相同的标题”FolderName”,
我们需要让每个列表项都显示自己的标题,
需要将ItemDesignerPanel的ItemCaptionBindingControl设置为这个Label,
表示将这个Label用于显示列表项的Caption,
(示例2%20使用列表项设计面板).files/image018.jpg)
效果如图所示:
(示例2%20使用列表项设计面板).files/image020.jpg)
然后再拖一个Image控件上去,
尺寸设置为40*40,
HitTest设置为False,
(示例2%20使用列表项设计面板).files/image022.jpg)
并让这个Image来显示列表项的图标,
需要将ItemDesignerPanel的ItemIconBindingControl设置为这个Image,
(示例2%20使用列表项设计面板).files/image024.jpg)
效果如图所示:
(示例2%20使用列表项设计面板).files/image026.jpg)
因为这个图标的尺寸是60*60,
比刚才拖上去Image控件尺寸(40*40)要大,
所以要把SelfOwnMaterial.DrawPictrueParam.IsStretch设置为True,
(示例2%20使用列表项设计面板).files/image028.jpg)
再把ListBox的背景色设置成白色,
步骤如下:
SelfOwnMaterial.IsTransparent设置为False,
SelfOwnMaterial.BackColor.IsFill设置为True,
SelfOwnMaterial.BackColor.FillColor设置为白色,
(示例2%20使用列表项设计面板).files/image030.jpg)
给每个列表项之间添加分隔线,
把SelfOwnMaterial.DrawItemDevideParam.IsFill设置为True就可以了,
(示例2%20使用列表项设计面板).files/image032.jpg)
再设置鼠标点击列表项的效果,
将ItemDesignerPanel.SelfOwnMaterial.IsTransparent设置为False,
展开ItemDesignerPanel.SelfOwnMaterial.BackColor.MouseDownEffect,
EffectTypes设置为drpetFillColorChange和drpetIsFillChange,
FillColor设置为LightGray,
IsFill设置为True,
表示在鼠标点击时改变列表项的背景颜色:
(示例2%20使用列表项设计面板).files/image034.jpg)