OrangeUI

ItemDesignerPanel是设计列表项显示内容的控件，
先拖一个ListBox到窗体上，
再拖一个ItemDesignerPanel到ListBox上，

把ListBox.Properties.ItemDesignPanel属性设置为ItemDesignPanel，
表示使用ItemDesignPanel来绘制列表项的内容，

双击ListBox,在项目编辑器中添加三个列表项,
标题和图标分别为:
“Movies”,
“Music”,
“Documents”, ,

添加完之后，
ListBox会调整ItemDesignerPanel的高度为列表项的高度，
列表项的高度在属性ListBox.Properties.ItemHeight中设置，
如下图所示:

拖一个Label到ItemDesignPanel上去，
将它的Caption设置为”FolderName”,
 

HitTest设置为False,

 

这时会发现我们添加的三个列表项都显示相同的标题”FolderName”,
我们需要让每个列表项都显示自己的标题，
需要将ItemDesignerPanel的ItemCaptionBindingControl设置为这个Label,
表示将这个Label用于显示列表项的Caption,

效果如图所示:

然后再拖一个Image控件上去，
尺寸设置为40*40，
HitTest设置为False,

并让这个Image来显示列表项的图标，
需要将ItemDesignerPanel的ItemIconBindingControl设置为这个Image,

效果如图所示:

因为这个图标的尺寸是60*60，
比刚才拖上去Image控件尺寸(40*40)要大，
所以要把SelfOwnMaterial.DrawPictrueParam.IsStretch设置为True，

再把ListBox的背景色设置成白色，
步骤如下:
SelfOwnMaterial.IsTransparent设置为False，
SelfOwnMaterial.BackColor.IsFill设置为True，
SelfOwnMaterial.BackColor.FillColor设置为白色，

给每个列表项之间添加分隔线，
把SelfOwnMaterial.DrawItemDevideParam.IsFill设置为True就可以了,

再设置鼠标点击列表项的效果，
将ItemDesignerPanel.SelfOwnMaterial.IsTransparent设置为False,
展开ItemDesignerPanel.SelfOwnMaterial.BackColor.MouseDownEffect，
EffectTypes设置为drpetFillColorChange和drpetIsFillChange，
FillColor设置为LightGray,
IsFill设置为True，
表示在鼠标点击时改变列表项的背景颜色:

再设置列表项选中的效果，
将ItemDesignerPanel.SelfOwnMaterial.IsTransparent设置为False,
展开ItemDesignerPanel.SelfOwnMaterial.BackColor.PushedEffect，
EffectTypes设置为drpetFillColorChange和drpetIsFillChange，
FillColor设置为LightGray,
IsFill设置为True，
表示在鼠标选中时改变列表项的背景颜色。