Advanced User Interface Controls and Components
Created: 27 August 2013
In general items don’t have any space between them. This may prevent you for making clear distinction among items. IntegralUI ListBox allows you to change the space between items using item spacing, margin and padding. All items can have equal amount of space among them or the space can be set for each item individually.
To increase the space between items we are going to use the ItemSpacing property which can have any value from 0 to 255. The value is represented in pixels and it is the same amount among all items.
this.listBox1.ItemSpacing = 10;
Me.listBox1.ItemSpacing = 10
In code above we are setting the space to 10 pixels. If the space has a value greater than 2, a separator line will appear to further divide the items. The color of this line is customizable from ColorStyle of ListBox control, using the ItemSeparatorColor property. The code below will change the color of separator line to blue.
this.listBox1.ColorStyle.ItemSeparatorColor = Color.Blue;
Me.listBox1.ColorStyle.ItemSeparatorColor = Color.Blue
Similar: Space Between Columns
There are two ways to set the margin and padding for items:
Both of these styles have the same Margin and Padding properties, the only difference is whether you want to have all items with the same spacing, or you want to set different values for each item separately.
To set the space for a specific item, at first you need to set the StyleFromParent property value to false. This will allow any changes to FormatStyle for that item to be applied, instead of values from its parent ItemFormatStyle.
Margin allows you to set the distance between item border and ListBox control border, and padding allows you set the space between item content and item border. Each side of the item has a separate value which can be distinct from values for other sides. For example the code below will set the distance between item border and control border to be 5 pixels from left and 10 pixels from top side, and the space between item and its content will be 7 pixels for all sides:
this.listBox1.ItemFormatStyle.Margin = new Padding(5, 10, 2, 2);
this.listBox1.ItemFormatStyle.Padding = new Padding(7);
Me.listBox1.ItemFormatStyle.Margin = New Padding(5, 10, 2, 2)
Me.listBox1.ItemFormatStyle.Padding = New Padding(7)
A sample project in C# and VB showing how to change distance between items is available for download from here: Change Space Between Items