LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Increase Space Between Items in ListBox .NET

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.

Item Spacing

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

ListBox Change Distance Between Items
Download Sample - ListBox Item Spacing

Margin and Padding

There are two ways to set the margin and padding for items:

  • Using ItemFormatStyle which will apply changes to all items
  • Using FormatStyle for specified item, which will apply changes only to this item

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.

ListBox Item Margin and Padding

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

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.