ListBox通常是垂直排列显示列表项的,
当然,水平排列显示也是可以的,
接下来就给大家演示一下列表项水平排列显示的ListBox,
目标效果如下图所示:
(示例8%20水平ListBox).files/image002.jpg)
先拖一个ListBox到窗体上,
双击ListBox,添加7个列表项,
设置列表项的Caption为“周一”至“周日”,
设置列表项的Detail为对应的日期,
把第一个列表项的Selected设置True,
表示该列表项为选中状态,
(示例8%20水平ListBox).files/image004.jpg)
添加完是这个样子的:
(示例8%20水平ListBox).files/image006.jpg)
因为ListBox默认是垂直排列显示列表项的,
所以要把ListBox拉高一点,才能看到其他列表项:
(示例8%20水平ListBox).files/image008.jpg)
要让ListBoxItem水平排列显示列表项,
需要设置ListBox.Properties.ItemLayoutType为iltHorizontal,
再设置ListBox.Properties.ItemWidth为60,
设置ListBox.Properties.ItemHeight为50,
(示例8%20水平ListBox).files/image010.jpg)
(示例8%20水平ListBox).files/image012.jpg)
还需要排列一下Caption和Detail的绘制位置,
让Detail显示在Caption下面,并且两者都水平居中,
Caption的字体偏大,颜色为黑色,
Detail的字体偏小,颜色为灰色#FF878787,
当选中的时候Caption和Detail的字体颜色均为#FF46D2DC
在SelfOwnMaterial.DrawItemCaptionParam中设置列表顶标题的字体,
在SelfOwnMaterial.DrawItemDetailParam中设置列表项Detil的字体,
先设置Caption的显示:
(示例8%20水平ListBox).files/image014.jpg)
再设置当列表项选中时Caption的字体颜色:
(示例8%20水平ListBox).files/image016.jpg)
再接下来设置Detail的显示:
(示例8%20水平ListBox).files/image018.jpg)
再设置当列表项选中时Detail字体颜色:
(示例8%20水平ListBox).files/image020.jpg)
现在效果如下:
(示例8%20水平ListBox).files/image022.jpg)
还需要添加一个效果,
就是列表项选中的时候宽度变宽,并且底下有一条青色的线,
如下图:
(示例8%20水平ListBox).files/image024.jpg)
先设置列表项选中的宽度,
将ListBox的ItemWidthCalcType为isctSeparate,
将ListBox的SelectedItemWidth为120,
(示例8%20水平ListBox).files/image026.jpg)
(示例8%20水平ListBox).files/image028.jpg)
再设置DrawItemBackColorParam.FillColor为#FF46D2DC,
PushedEffect.EffectTypes把drpetIsFillChange打勾,
PushedEffect.IsFill设置为True,
(示例8%20水平ListBox).files/image030.jpg)
先看一下效果,
发现背景色充满整个了列表项,都看不见Caption和Detail了:
(示例8%20水平ListBox).files/image032.jpg)
因为这个DrawItemBackColorParam是设置列表项的背景颜色的,
要把它变细一点,
在DrawItemBackColorParam.DrawRectSetting中设置,
高度设置为5个像素,位置在底部,
(示例8%20水平ListBox).files/image034.jpg)
(示例8%20水平ListBox).files/image036.jpg)
把”周五”选中看看效果:
(示例8%20水平ListBox).files/image038.jpg)
默认ListBox是垂直排列显示列表项的,可以上下拖动的,
水平排列显示ListBox需要可以左右拖动,
需要设置垂直滚动条类型为sbstNone,表示没有垂直滚动条,因此不允许上下拖动,
设置水平滚动条类型为sbstHide,表示隐藏水平滚动条,但允许左右拖动
![]()