OrangeUI

ListBox通常是垂直排列显示列表项的，
当然，水平排列显示也是可以的，
接下来就给大家演示一下列表项水平排列显示的ListBox,
目标效果如下图所示:

先拖一个ListBox到窗体上，
双击ListBox，添加7个列表项,
设置列表项的Caption为“周一”至“周日”,
设置列表项的Detail为对应的日期,
把第一个列表项的Selected设置True,
表示该列表项为选中状态,

添加完是这个样子的:

因为ListBox默认是垂直排列显示列表项的，
所以要把ListBox拉高一点，才能看到其他列表项:

要让ListBoxItem水平排列显示列表项，
需要设置ListBox.Properties.ItemLayoutType为iltHorizontal，
再设置ListBox.Properties.ItemWidth为60,
设置ListBox.Properties.ItemHeight为50,


还需要排列一下Caption和Detail的绘制位置，
让Detail显示在Caption下面，并且两者都水平居中，
Caption的字体偏大，颜色为黑色，
Detail的字体偏小，颜色为灰色#FF878787，
当选中的时候Caption和Detail的字体颜色均为#FF46D2DC
在SelfOwnMaterial.DrawItemCaptionParam中设置列表顶标题的字体，
在SelfOwnMaterial.DrawItemDetailParam中设置列表项Detil的字体，
先设置Caption的显示:

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

再接下来设置Detail的显示:

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

现在效果如下:

还需要添加一个效果，
就是列表项选中的时候宽度变宽，并且底下有一条青色的线，
如下图:

先设置列表项选中的宽度,
将ListBox的ItemWidthCalcType为isctSeparate,
将ListBox的SelectedItemWidth为120,


再设置DrawItemBackColorParam.FillColor为#FF46D2DC,
PushedEffect.EffectTypes把drpetIsFillChange打勾，
PushedEffect.IsFill设置为True,

先看一下效果，
发现背景色充满整个了列表项,都看不见Caption和Detail了:

因为这个DrawItemBackColorParam是设置列表项的背景颜色的，
要把它变细一点，
在DrawItemBackColorParam.DrawRectSetting中设置，
高度设置为5个像素，位置在底部，


把”周五”选中看看效果:

默认ListBox是垂直排列显示列表项的，可以上下拖动的，
水平排列显示ListBox需要可以左右拖动，
需要设置垂直滚动条类型为sbstNone，表示没有垂直滚动条，因此不允许上下拖动，


 
 
 
 
 
 
 
 
 
 
 
 
 
[o1]改成:需要设置垂直滚动条类型为sbstNone，表示没有垂直滚动条，因此不允许上下拖动，
设置水平滚动条类型为sbstHide，表示隐藏水平滚动条，但允许左右拖动