当ListBox中需要两种不同样式的列表项时，我们可以让ListBox使用多设计面板来实现。

如下图所示:

第一个列表项，用于展示账号信息，

下面几个列表项，是功能菜单，

 

 

先准备一个ListBox,

ListBox.Properties.ItemHeight设置为48,表示默认列表项的高度为48,

双击ListBox,添加如下列表项，

Item.Caption        Item.Detail         Item.ItemType       Item.Height

Viva                讯客号:happy520    sitHeader          80

sitSpace           20

相册                                   sitDefault         -1

收藏                                   sitDefault         -1

钱包                                   sitDefault         -1

sitSpace           20

钱包                                   sitDefault         -1

sitSpace           20

设置                                   sitDefault         -1

效果如下:

给第一个列表项viva设置图标Item.Icon为

再给相册、收藏、钱包、表情、设置这5个菜单项设置如下图标

效果如下:

 

再拖一个ItemDesignerPanel到ListBox上面，命名为idpHeader,

设置ListBox.Properties.HeaderDesignerPanel为idpHeader,

表示当Item.ItemType为sitHeader时，此Item使用idpHeader的样式，

接下来再在idpHeader上放一个Image,取名为imgHead，用于显示Item.Icon,

放一个Label,取名为lblNickName,用于显示Item.Caption,

再放一个Label,取名为lblAccount,用于显示Item.Detail,

效果如下:

接下来设置idpHeader的绑定，

imgHead用来显示Item.Icon,

所以把idpHeader.Properties.ItemIconBindingControl设置为imgHead,

lblNickName用来显示Item.Caption,

所以把idpHeader.Properties.ItemCaptionBindingControl设置为lblNickName,

lblAccount用来显示Item.Detail,

所以把idpHeader.Properties.ItemDetailBindingControl设置为lblAccount,

再把idpHeader的背景色设置为白色，

设置idpHeader.SelfOwnMaterial.IsTransparent为False,

idpHeader.SelfOwnMaterial.BackColor.IsFill为True,

idpHeader.SelfOwnMaterial.BackColor.FillColor.Color设置为White,

 

效果如下:

 

接下去再拖一个ItemDesignerPanel，取名为idpMenu,用于设计菜单项的显示样式，

把ListBox.Properties.ItemDesignerPanel设置为idpMenu,

当Item.ItemType为sitDefault时，使用ListBox.Properties.ItemDesignerPanel为绘制，

在idpMenu上放一个Image,取名为imgMenuIcon,用于显示Item.Icon,

再放一个Label,取名为lblMenuCaption,用于显示Item.Caption,

效果如下:

设置idpMenu的绑定，

imgMenuIcon用来显示Item.Icon,

所以把idpMenu.Properties.ItemIconBindingControl设置为imgMenuIcon,

lblMenuCaption用来显示Item.Caption,

所以把idpHeader.Properties.ItemCaptionBindingControl设置为lblMenuCaption,

再把idpMenu的背景色设置为白色，

设置idpMenu.SelfOwnMaterial.IsTransparent为False,

idpMenu.SelfOwnMaterial.BackColor.IsFill为True,

idpMenu.SelfOwnMaterial.BackColor.FillColor.Color设置为White,

 

效果如下:

再设置ListBox的背景色为#FFEDEDED

设置ListBox.SelfOwnMaterial.IsTransparent为False,

ListBox.SelfOwnMaterial.BackColor.IsFill为True,

ListBox.SelfOwnMaterial.BackColor.FillColor.Color设置为# FFEDEDED,

还需要添加分隔线，

设置ListBox.SelfOwnMaterial.DrawItemDevideParam.IsFill为Ture,

效果如下: