Centered images in Better ListView

Better ListView 3.11 supports aligning images in sub-items and columns to center. Simply set AlignHorizontalImage property of an sub-item or column to BetterListViewImageAlignmentHorizontal.OverlayCenter.

The image will be centered inside available space regardless of text.

This is useful for sub-items and column headers consisting of image only.

Alternating Rows

Lists with alternating row colors are more readable. It is very simple to implement alternating rows in Better ListView.

Simply add DrawItemBackground event handler and fill background on odd/even items:

[csharp gutter=”false” toolbar=”false”]
private void ListViewOnDrawItemBackground(object sender, BetterListViewDrawItemBackgroundEventArgs eventArgs)
{
if ((eventArgs.Item.Index & 1) == 1)
{
eventArgs.Graphics.FillRectangle(Brushes.AliceBlue, eventArgs.ItemBounds.BoundsOuter);
}
}
[/csharp]

Better ListView custom scroll bar size

Better ListView 3.7.0 contains two new properties that allow you to set custom horizontal and vertical scroll bar sizes:

• HScrollBarWidth
• VScrollBarHeight

Of course, you can set these custom sizes in design-time as well as in run-time.

Larger scroll bars are practical on modern touch-enabled devices with high resolution screens. The default scroll bar size (17 pixels) may be too small and you may want to make it just large enough for your index finger.

This features works in both Better ListView and Better ListView Express.

I found the effect of fading borders impressive on my smartphone. This is actualy very easy to do as it requires a simple gradient brush.

You can obtain the same effect with Better ListView by overriding the DrawingRedrawCore method and do the drawing over the items:

C#

[csharp gutter=”false” toolbar=”false”]
public class FadedListView : BetterListView
{
///

private const int FadingSize = 64;

public CustomListView()
{
// this is required because we will draw outside item boundaries
OptimizedInvalidation = false;
}

protected override void DrawingRedrawCore(Graphics graphics)
{
base.DrawingRedrawCore(graphics);

// get boundaries of items (this excludes column headers and scroll bars)
Rectangle rectContent = BoundsContent;

// get size of the gradient
int fadingSize = Math.Min(
FadingSize,
rectContent.Height >> 1);

// get boundaries of the gradents
Rectangle rectFadingTop = new Rectangle(
rectContent.Left,
rectContent.Top,
rectContent.Width,
fadingSize);

Rectangle rectFadingBottom = new Rectangle(
rectContent.Left,
rectContent.Bottom – fadingSize,
rectContent.Width,
fadingSize);

// make boundaries larger to avoid rounding errors in gradient brushes
rectFadingTop.Inflate(1, 1);
rectFadingBottom.Inflate(1, 1);

Brush brushFadingTop = new LinearGradientBrush(rectFadingTop, BackColor, Color.Transparent, LinearGradientMode.Vertical);
Brush brushFadingBottom = new LinearGradientBrush(rectFadingBottom, Color.Transparent, SystemColors.Window, LinearGradientMode.Vertical);

// deflate the gradient boundaries back
rectFadingTop.Inflate(-1, -1);
rectFadingBottom.Inflate(-1, -1);

// draw the gradients
graphics.FillRectangle(brushFadingTop, rectFadingTop);
graphics.FillRectangle(brushFadingBottom, rectFadingBottom);

// cleanup
brushFadingTop.Dispose();
brushFadingBottom.Dispose();
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Public Class CustomListView
Inherits BetterListView
”’

Private Const FadingSize As Integer = 64

Public Sub New()
‘ this is required because we will draw outside item boundaries
OptimizedInvalidation = False
End Sub

Protected Overrides Sub DrawingRedrawCore(graphics As Graphics)
MyBase.DrawingRedrawCore(graphics)

‘ get boundaries of items (this excludes column headers and scroll bars)
Dim rectContent As Rectangle = BoundsContent

‘ get size of the gradient
Dim fadingSize__1 As Integer = Math.Min(FadingSize, rectContent.Height >> 1)

‘ get boundaries of the gradents
Dim rectFadingTop As New Rectangle(rectContent.Left, rectContent.Top, rectContent.Width, fadingSize__1)

Dim rectFadingBottom As New Rectangle(rectContent.Left, rectContent.Bottom – fadingSize__1, rectContent.Width, fadingSize__1)

‘ make boundaries larger to avoid rounding errors in gradient brushes
rectFadingTop.Inflate(1, 1)
rectFadingBottom.Inflate(1, 1)

Dim brushFadingTop As Brush = New LinearGradientBrush(rectFadingTop, BackColor, Color.Transparent, LinearGradientMode.Vertical)
Dim brushFadingBottom As Brush = New LinearGradientBrush(rectFadingBottom, Color.Transparent, SystemColors.Window, LinearGradientMode.Vertical)

‘ deflate the gradient boundaries back
rectFadingTop.Inflate(-1, -1)
rectFadingBottom.Inflate(-1, -1)

‘ draw the gradients
graphics.FillRectangle(brushFadingTop, rectFadingTop)
graphics.FillRectangle(brushFadingBottom, rectFadingBottom)

‘ cleanup
brushFadingTop.Dispose()
brushFadingBottom.Dispose()
End Sub
End Class
[/vb]

Hot Tracking

This post will show you how easy it is to make item hot tracking in Better ListView.

First, create a global variable in your Form or Control-derived class to hold a Font instance we will use for hot tracked items:

C#

[csharp gutter=”false” toolbar=”false”]
private Font fontHot = new Font(“Segoe UI”, 12.0f, FontStyle.Bold);
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Private fontHot As New Font(“Segoe UI”, 12F, FontStyle.Bold)
[/vb]

This is not necessary, but we will re-use the font and will not need to create and dispose Font instances during hot tracking.

Second, initialize a BetterListView instance:

C#

[csharp gutter=”false” toolbar=”false”]
var listView = new CustomListView();

// add some items in the list
listView.Items.AddRange(new string[] { “The Hobbit”, “The People’s Crisis”, “The Net” });

// set default font for the items
listView.FontItems = new Font(“Segoe UI”, 12.0f, FontStyle.Regular);

// add HitTestChanged event handler
listView.HitTestChanged += ListViewHitTestChanged;
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Dim listView = New CustomListView()

‘ add some items in the list
listView.Items.AddRange(New String() {“The Hobbit”, “The People’s Crisis”, “The Net”})

‘ set default font for the items
listView.FontItems = New Font(“Segoe UI”, 12F, FontStyle.Regular)

‘ add HitTestChanged event handler
listView.HitTestChanged += ListViewHitTestChanged
[/vb]

Finally, implement the HitTestChanged event handler:

C#

[csharp gutter=”false” toolbar=”false”]
private void ListViewHitTestChanged(object sender, BetterListViewHitTestChangedEventArgs eventArgs)
{
BetterListView listView = (sender as BetterListView);
BetterListViewItem itemCurrent = eventArgs.HitTestInfoCurrent.ItemDisplay;
BetterListViewItem itemNew = eventArgs.HitTestInfoNew.ItemDisplay;

if (!ReferenceEquals(itemCurrent, itemNew))
{
listView.BeginUpdate();

if (itemCurrent != null)
{
// reset colors and font to default
itemCurrent.BackColor = Color.Empty;
itemCurrent.ForeColor = Color.Empty;
itemCurrent.Font = null;
}

if (itemNew != null)
{
// set hot background color of an item newly hovered
itemNew.BackColor = Color.GreenYellow;
itemNew.ForeColor = Color.DarkRed;
itemNew.Font = this.fontHot;
}

listView.EndUpdate();
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Private Sub ListViewHitTestChanged(sender As Object, eventArgs As BetterListViewHitTestChangedEventArgs)
Dim listView As BetterListView = TryCast(sender, BetterListView)
Dim itemCurrent As BetterListViewItem = eventArgs.HitTestInfoCurrent.ItemDisplay
Dim itemNew As BetterListViewItem = eventArgs.HitTestInfoNew.ItemDisplay

If Not ReferenceEquals(itemCurrent, itemNew) Then
listView.BeginUpdate()

If itemCurrent IsNot Nothing Then
‘ reset colors and font to default
itemCurrent.BackColor = Color.Empty
itemCurrent.ForeColor = Color.Empty
itemCurrent.Font = Nothing
End If

If itemNew IsNot Nothing Then
‘ set hot background color of an item newly hovered
itemNew.BackColor = Color.GreenYellow
itemNew.ForeColor = Color.DarkRed
itemNew.Font = Me.fontHot
End If

listView.EndUpdate()
End If
End Sub
[/vb]

This method is called whenever an element over which mouse cursors hovers changes. For example, when one moves the mouse cursor between two item’s expand button element and text element or between two items. We detect just the latter case and set item properties accordingly.

Thats’ it!

Of course, you can change any of the properties during hot tracking or make use of rich Owner Drawing capabilities.

Better ListView with bound list

Say you have a simple Server type:

C#

[csharp gutter=”false” toolbar=”false”]
public class Server
{
public string ServerName
{
get;
set;
}

public int ServerStatus
{
get;
set;
}

public Server(string name, int status)
{
ServerName = name;
ServerStatus = status;
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Public Class Server

Public Property ServerName() As String
Get
Return m_ServerName
End Get
Set
m_ServerName = Value
End Set
End Property

Public Property ServerStatus() As Integer
Get
Return m_ServerStatus
End Get
Set
m_ServerStatus = Value
End Set
End Property

Private m_ServerName As String
Private m_ServerStatus As Integer

Public Sub New(name As String, status As Integer)
ServerName = name
ServerStatus = status
End Sub

End Class
[/vb]

This class contains two properties representing server name and its status. The server name is a textual property and one would like this mapped to item label as usual. However, the server status is a numerical value which have no meaning to the user even when converted to string. In fact, the numerical value can be 0 (offline), 1 (idle) or 2 (running). You may like to display color icons instead of plain strings or numbers. What if we would like to even highlight some items or change other properties during data binding? This is possible through Better ListView data binding customization.

First, let’s create a list of Server objects and bind this to a Better ListView. We would like to have columns auto-generated, so we set DataBindColumns to true:

C#

[csharp gutter=”false” toolbar=”false”]
Server[] servers = new[]
{
new Server(“Andromeda”, 2),
new Server(“Taurus”, 1),
new Server(“Himalia”, 2),
new Server(“Nanda”, 2),
new Server(“Elara”, 0),
new Server(“Perseus”, 2),
new Server(“Titan”, 1)
};

ImageList imageList = new ImageList();

imageList.ColorDepth = ColorDepth.Depth32Bit;
imageList.ImageSize = new Size(16, 16);
imageList.Images.AddStrip(Image.FromFile(“status.png”));

BetterListView listView = new CustomListView();

listView.DataBindColumns = true;
listView.DataSource = servers;
listView.ImageList = imageList;
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Dim servers As Server() = New () {New Server(“Andromeda”, 2), New Server(“Taurus”, 1), New Server(“Himalia”, 2), New Server(“Nanda”, 2), New Server(“Elara”, 0), New Server(“Perseus”, 2), _
New Server(“Titan”, 1)}

Dim imageList As New ImageList()

imageList.ColorDepth = ColorDepth.Depth32Bit
imageList.ImageSize = New Size(16, 16)
imageList.Images.AddStrip(Image.FromFile(“status.png”))

Dim listView As BetterListView = New CustomListView()

listView.DataBindColumns = True
listView.DataSource = servers
listView.ImageList = imageList
[/vb]

Let’s take a look on the result:

Better ListView with bound list

The columns were auto-generated and Server properties properly converted to item and sub-item labels. The generated column header labels are just names of the corresponding properties (ServerName, ServerStatus). You can make the names more convenient by providing DisplayNameAttribute on the respective properties:

C#

[csharp gutter=”false” toolbar=”false”]
…

[DisplayName(“Server Name”)]
public string ServerName
{
get;
set;
}

[DisplayName(“Status”)]
public int ServerStatus
{
get;
set;
}

…
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
…

_
Public Property ServerName() As String
Get
Return m_ServerName
End Get
Set
m_ServerName = Value
End Set
End Property

_
Public Property ServerStatus() As Integer
Get
Return m_ServerStatus
End Get
Set
m_ServerStatus = Value
End Set
End Property

…
[/vb]

Now the column names are more user friendly:

Better ListView with bound list

We will finally add state images (instead of the numbers) and highlight some items. To do that, we have to override DataCreateItem method in a class derived from BetterListView:

C#

[csharp gutter=”false” toolbar=”false”]
public class CustomListView : BetterListView
{
protected override BetterListViewItem DataCreateItem(
CurrencyManager currentDataManager,
BindingMemberInfo[] currentDisplayMembers,
int index)
{
// create item using the base implementation
BetterListViewItem item = base.DataCreateItem(
currentDataManager,
currentDisplayMembers,
index);

// get server status from the current Server object
int serverStatus = ((Server)currentDataManager.List[index]).ServerStatus;

if (serverStatus == 0)
{
// bold item when server status is 0
item.IsBold = true;
}

// get sub-item corresponding to server status
BetterListViewSubItem subItemStatus = item.SubItems[1];

subItemStatus.ImageIndex = serverStatus; // set image for the sub-item
subItemStatus.Text = “”; // clear sub-item text

return item;
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Public Class CustomListView
Inherits BetterListView

Protected Overrides Function DataCreateItem(currentDataManager As CurrencyManager, currentDisplayMembers As BindingMemberInfo(), index As Integer) As BetterListViewItem

‘ create item using the base implementation
Dim item As BetterListViewItem = MyBase.DataCreateItem(currentDataManager, currentDisplayMembers, index)

‘ get server status from the current Server object
Dim serverStatus As Integer = DirectCast(currentDataManager.List(index), Server).ServerStatus

If serverStatus = 0 Then
‘ bold item when server status is 0
item.IsBold = True
End If

‘ get sub-item corresponding to server status
Dim subItemStatus As BetterListViewSubItem = item.SubItems(1)

subItemStatus.ImageIndex = serverStatus
‘ set image for the sub-item
subItemStatus.Text = “”
‘ clear sub-item text
Return item

End Function

End Class
[/vb]

Now the control displays adjusted images and a highlighted item:

Better ListView with bound list

Note that you can customize data binding the other way as well by overriding the DataUpdateSubItemToSource method. This method is responsible for updating the bound data source when item/sub-item value have been modified.

Search Highlight Feature

To enable the highlight, simply add UpdateSearchHighlight option in the search settings:

C#

[csharp gutter=”false” toolbar=”false”]
listView.SearchSettings = new BetterListViewSearchSettings(
listView.SearchSettings.Mode,
listView.SearchSettings.Options | BetterListViewSearchOptions.UpdateSearchHighlight,
listView.SearchSettings.SubItemIndices);
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
ListView.SearchSettings = New BetterListViewSearchSettings(
listView.SearchSettings.Mode,
listView.SearchSettings.Options Or BetterListViewSearchOptions.UpdateSearchHighlight,
listView.SearchSettings.SubItemIndices)
[/vb]

Every item contains information about the match in the BetterListViewItem.SearchHighlight property. When BetterListViewItem.SearchHighlight.IsEmpty is true, the item was not matched by the search. Otherwise it contains information about the matched substring: its index and number of characters.

Highlight colors can be adjusted by three properties: ColorSearchHighlight, ColorSearchHighlightBorder and ColorSearchHighlightText:

Search Highlight Properties

The display can be adjusted even further with owner drawing:

Customized Search Highlight Feature

Here we have used ellipses drawn on item background by modifying OnDrawItem and OnDrawItemBackground methods of BetterListView:

C#

[csharp gutter=”false” toolbar=”false”]
using System.Drawing;
using System.Drawing.Drawing2D;

using BetterListView;

internal sealed class CustomListView : BetterListView
{
protected override void OnDrawItem(BetterListViewDrawItemEventArgs eventArgs)
{
// do not draw search highlight because we will draw our own
eventArgs.DrawSearchHighlight = false;

base.OnDrawItem(eventArgs);
}

protected override void OnDrawItemBackground(BetterListViewDrawItemBackgroundEventArgs eventArgs)
{
base.OnDrawItemBackground(eventArgs);

// draw custom search highlight on item background
BetterListViewSearchHighlight searchHighlight = eventArgs.Item.SearchHighlight;

if (searchHighlight.IsEmpty == false)
{
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality;

Rectangle rectHighlight = eventArgs.ItemBounds.SubItemBounds[searchHighlight.ColumnIndex].BoundsSearchHighlight;

Brush brushHighlight = new SolidBrush(Color.FromArgb(128, Color.MediumPurple));
Pen penHighlight = new Pen(Color.Purple, 1.0f);

eventArgs.Graphics.FillEllipse(brushHighlight, rectHighlight);
eventArgs.Graphics.DrawEllipse(penHighlight, rectHighlight);

brushHighlight.Dispose();
penHighlight.Dispose();
}
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Imports System.Drawing
Imports System.Drawing.Drawing2D

Imports BetterListView

Friend NotInheritable Class CustomListView
Inherits BetterListView
Protected Overrides Sub OnDrawItem(eventArgs As BetterListViewDrawItemEventArgs)
‘ do not draw search highlight because we will draw our own
eventArgs.DrawSearchHighlight = False

MyBase.OnDrawItem(eventArgs)
End Sub

Protected Overrides Sub OnDrawItemBackground(eventArgs As BetterListViewDrawItemBackgroundEventArgs)
MyBase.OnDrawItemBackground(eventArgs)

‘ draw custom search highlight on item background
Dim searchHighlight As BetterListViewSearchHighlight = eventArgs.Item.SearchHighlight

If searchHighlight.IsEmpty = False Then
eventArgs.Graphics.SmoothingMode = SmoothingMode.HighQuality

Dim rectHighlight As Rectangle = eventArgs.ItemBounds.SubItemBounds(searchHighlight.ColumnIndex).BoundsSearchHighlight

Dim brushHighlight As Brush = New SolidBrush(Color.FromArgb(128, Color.MediumPurple))
Dim penHighlight As New Pen(Color.Purple, 1F)

eventArgs.Graphics.FillEllipse(brushHighlight, rectHighlight)
eventArgs.Graphics.DrawEllipse(penHighlight, rectHighlight)

brushHighlight.Dispose()
penHighlight.Dispose()
End If
End Sub
End Class
[/vb]

Let’s suppose you want to display files with extensions in Better ListView, but allow user to rename just the file name, leaving the file extension intact after the editing.

The code for this is very simple. Just turn on label editing and handle two events: BeforeLabelEdit and AfterLabelEditCancel:

C#

[csharp gutter=”false” toolbar=”false”]
betterListView.LabelEdit = true;

betterListView.BeforeLabelEdit += BetterListViewBeforeLabelEdit;
betterListView.AfterLabelEditCancel += BetterListViewAfterLabelEditCancel;

…

void BetterListViewBeforeLabelEdit(object sender, BetterListViewLabelEditCancelEventArgs eventArgs)
{
string labelOriginal = eventArgs.Label;

// keep only file name in the modified label
string labelNew = Path.GetFileNameWithoutExtension(labelOriginal);

eventArgs.Label = labelNew;
}

void BetterListViewAfterLabelEditCancel(object sender, BetterListViewLabelEditCancelEventArgs eventArgs)
{
string labelOriginal = eventArgs.Label;

// add extension when editing is complete
string labelNew = String.Concat(
labelOriginal,
Path.GetExtension(eventArgs.SubItem.Text));

eventArgs.Label = labelNew;
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
BetterListView.LabelEdit = True

AddHandler Me.betterListView.BeforeLabelEdit, AddressOf BetterListViewBeforeLabelEdit
AddHandler Me.betterListView.AfterLabelEditCancel, AddressOf BetterListViewAfterLabelEditCancel

…

Private Sub BetterListViewBeforeLabelEdit(sender As Object, eventArgs As BetterListViewLabelEditCancelEventArgs)
Dim labelOriginal As String = eventArgs.Label

‘ keep only file name in the modified label
Dim labelNew As String = Path.GetFileNameWithoutExtension(labelOriginal)

eventArgs.Label = labelNew
End Sub

Private Sub BetterListViewAfterLabelEditCancel(sender As Object, eventArgs As BetterListViewLabelEditCancelEventArgs)
Dim labelOriginal As String = eventArgs.Label

‘ add extension when editing is complete
Dim labelNew As String = [String].Concat(labelOriginal, Path.GetExtension(eventArgs.SubItem.Text))

eventArgs.Label = labelNew
End Sub
[/vb]

Naturally, this feature can be used not only for file names, but whenever you would like to edit different view on the data then the displayed one.

Full version of Better ListView supports even custom embedded editing controls and you have complete control over the label editing process.

Customized item selection.

By default, Better ListView uses system theme for drawing selections.

To draw custom selection, you can use owner drawing capabilities of Better ListView:

C#

[csharp gutter=”false” toolbar=”false”]
class CustomListView : BetterListView
{
protected override void OnDrawItemBackground(BetterListViewDrawItemBackgroundEventArgs eventArgs)
{
base.OnDrawItemBackground(eventArgs);

if (eventArgs.Item.Selected)
{
Brush brushSelection = new SolidBrush(Color.FromArgb(128, Color.LightGreen));
eventArgs.Graphics.FillRectangle(brushSelection, eventArgs.ItemBounds.BoundsSelection);
brushSelection.Dispose();
}
}

protected override void OnDrawItem(BetterListViewDrawItemEventArgs eventArgs)
{
eventArgs.DrawSelection = false;

base.OnDrawItem(eventArgs);

if (eventArgs.Item.Selected)
{
eventArgs.Graphics.DrawRectangle(Pens.DarkGreen, eventArgs.ItemBounds.BoundsSelection);
}
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Class CustomListView
Inherits BetterListView
Protected Overrides Sub OnDrawItemBackground(eventArgs As BetterListViewDrawItemBackgroundEventArgs)
MyBase.OnDrawItemBackground(eventArgs)

If eventArgs.Item.Selected Then
Dim brushSelection As Brush = New SolidBrush(Color.FromArgb(128, Color.LightGreen))
eventArgs.Graphics.FillRectangle(brushSelection, eventArgs.ItemBounds.BoundsSelection)
brushSelection.Dispose()
End If
End Sub

Protected Overrides Sub OnDrawItem(eventArgs As BetterListViewDrawItemEventArgs)
eventArgs.DrawSelection = False

MyBase.OnDrawItem(eventArgs)

If eventArgs.Item.Selected Then
eventArgs.Graphics.DrawRectangle(Pens.DarkGreen, eventArgs.ItemBounds.BoundsSelection)
End If
End Sub
End Class
[/vb]

In the above code, we have created class CustomListView that inherits from BetterListView. We override OnDrawItemBackground and OnDrawItem methods to customize item background and item foreground drawing, respectively.

The OnDrawItemBackground method contains only check for whether the item is selected. If so, we draw selection background (filled rectangle in selection area).

The OnDrawItem method contains two things:

1. Turn off  default selection.
2. Draw custom selection border if the item is selected.

Drawbacks of drawing custom selections like this include using non-system theme, which can look ugly on various color schemes. By default, Better ListView always use the system theme, so the color consistency is ensured. You can, however, still use classes like SystemColors or SystemBrushes to ensure good look.

Another drawback is that you handle only two states of selection, i.e. selected and unselected state. This is sufficient for Classic Windows theme but there are several more states used on Windows Aero Theme, like “hot”, “focused and hot” or “hot and pressed”.

To allow these states, considerable coding need to be done.

In case you need this level of customization, please contact us for Custom Coding support.

Hiding Column Headers

To hide column headers, simply set HeaderStyle property to BetterListViewHeaderStyle.None. There are other possible styles for all column headers:

• None – column headers are hidden, but corresponding sub-items are still visible
• Nonclickable – column headers are visible, but not interactive
• Clickable – column headers interact with mouse (have hot and pressed state)
• Sortable – column headers are clickable and sort the corresponding column when clicked
• Unsortable – same as Sortable, but the column headers have unsorted state as well
• Hidden – column headers are hidden with corresponding sub-items

These styles can be set on individual column headers as well through BetterListViewColumnHeader.Style property. This property is of type BetterListViewColumnHeaderStyle, which has the same values as BetterListViewHeaderStyle, plus Default value, which means that column header style is inherited from the HeaderStyle property.

When a single column header have style None, that column header is not drawn (only its background is visible) and corresponding sub-items are visible.

When all column headers have style None,  the whole panel with column headers hides (as seen on the above animation) and the sub-items remain visible. This effect is the as when all column headers have style Default and HeaderStyle is set to None.