OrangeUI

当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,
效果如下: