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.
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