LIDOR SYSTEMS

Advanced User Interface Controls and Components

Increase Space Between Columns in ListView

Created: 14 August 2013

In most standard views columns are shown near each other without any space between them. IntegralUI ListView allows you to easily increase space between columns. This can be useful in cases where we need to create a separation between different data in columns.

ListView Change Distance Between Columns
Download Sample - ListView Column Spacing

Space Between Columns

To increase space between columns we will use ColumnSpacing property which can accept any value from 0 to 255. For example if we set this value to 10, the distance between columns in ListView will be exactly 10 pixels.

this.listView1.ColumnSpacing = 10;

Me.listView1.ColumnSpacing = 10

How to Fill the Remaining Space

Although we can change the space between columns and adjust their width, usually there will remain some space unpopulated by columns at the right end of ListView layout. To fill this space we need to calculate how much the content width of ListView is, and subtract that value from total width of all columns plus the space between them. We also need to make sure that we take into our calculations only visible columns. The result will be something like this:

int numVisibleColumns = 0;

int colSpace = 0;

 

// Loop thorugh all visible columns and calculate the total width of columns

foreach (LidorSystems.IntegralUI.Lists.ListViewColumn column in this.listView1.Columns)

{

if (column.Visible)

{

colSpace += column.Width;

numVisibleColumns++;

}

}

 

// If there are more than one visible column add the spacoing between columns to total width

if (numVisibleColumns > 0)

colSpace += this.listView1.ColumnSpacing * (numVisibleColumns - 1);

 

// Calclulate the remaining space in ListView content layout

int remSpace = this.listView1.ContentPanel.Width - colSpace - 1;

 

// To make a column will the available space

// Add the remaining space to specified column

this.listView1.Columns[colIndex].Width += remSpace;

Dim numVisibleColumns As Integer = 0

Dim colSpace As Integer = 0

 

' Loop thorugh all visible columns and calculate the total width of columns

For Each column As LidorSystems.IntegralUI.Lists.ListViewColumn In Me.listView1.Columns

If column.Visible Then

colSpace += column.Width

numVisibleColumns += 1

End If

Next

 

' If there are more than one visible column add the spacoing between columns to total width

If numVisibleColumns > 0 Then

colSpace += Me.listView1.ColumnSpacing * (numVisibleColumns - 1)

End If

 

' Calclulate the remaining space in ListView content layout

Dim remSpace As Integer = Me.listView1.ContentPanel.Width - colSpace - 1

 

' To make a column will the available space

' Add the remaining space to specified column

Me.listView1.Columns(colIndex).Width += remSpace

Related: AutoSize Column Width

A sample project in C# and VB showing how to change distance between columns is available for download from here: Change Space Between Columns

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.