ListBox通常是垂直排列显示列表项的,

当然,水平排列显示也是可以的,

接下来就给大家演示一下列表项水平排列显示的ListBox,

目标效果如下图所示:

 

先拖一个ListBox到窗体上,

双击ListBox,添加7个列表项,

设置列表项的Caption为“周一至“周日”,

设置列表项的Detail为对应的日期,

把第一个列表项的Selected设置True,

表示该列表项为选中状态,

添加完是这个样子的:

因为ListBox默认是垂直排列显示列表项的,

所以要把ListBox拉高一点,才能看到其他列表项:

要让ListBoxItem水平排列显示列表项,

需要设置ListBox.Properties.ItemLayoutTypeiltHorizontal

再设置ListBox.Properties.ItemWidth60,

设置ListBox.Properties.ItemHeight50,

还需要排列一下CaptionDetail的绘制位置,

Detail显示在Caption下面,并且两者都水平居中,

Caption的字体偏大,颜色为黑色,

Detail的字体偏小,颜色为灰色#FF878787

当选中的时候CaptionDetail的字体颜色均为#FF46D2DC

SelfOwnMaterial.DrawItemCaptionParam中设置列表顶标题的字体,

SelfOwnMaterial.DrawItemDetailParam中设置列表项Detil的字体,

先设置Caption的显示:

再设置当列表项选中时Caption的字体颜色:

再接下来设置Detail的显示:

再设置当列表项选中时Detail字体颜色:

现在效果如下:

还需要添加一个效果,

就是列表项选中的时候宽度变宽,并且底下有一条青色的线,

如下图:

先设置列表项选中的宽度,

ListBoxItemWidthCalcTypeisctSeparate,

ListBoxSelectedItemWidth120,

再设置DrawItemBackColorParam.FillColor#FF46D2DC,

PushedEffect.EffectTypesdrpetIsFillChange打勾,

PushedEffect.IsFill设置为True,

先看一下效果,

发现背景色充满整个了列表项,都看不见CaptionDetail:

因为这个DrawItemBackColorParam是设置列表项的背景颜色的,

要把它变细一点,

DrawItemBackColorParam.DrawRectSetting中设置,

高度设置为5个像素,位置在底部,

周五选中看看效果:

默认ListBox是垂直排列显示列表项的,可以上下拖动的,

水平排列显示ListBox需要可以左右拖动,

需要设置垂直滚动条类型为sbstNone,表示没有垂直滚动条,因此不允许上下拖动,

设置水平滚动条类型为sbstHide,表示隐藏水平滚动条,但允许左右拖动

[o1] 

 

 

 

 

 

 

 

 

 

 

 

 

 


 [o1]改成:需要设置垂直滚动条类型为sbstNone,表示没有垂直滚动条,因此不允许上下拖动,

设置水平滚动条类型为sbstHide,表示隐藏水平滚动条,但允许左右拖动