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.

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.

This is not a new feature, but would be nice to mention that you can possibly have a different custom editing control for every cell…

C#

[csharp gutter=”false” toolbar=”false”]
private IBetterListViewEmbeddedControl ListViewRequestEmbeddedControl(object sender, BetterListViewRequestEmbeddedControlEventArgs eventArgs)
{
// show editing controls in the second column
if (eventArgs.SubItem.Index == 1)
{
// show my custom control on the first row
if (eventArgs.SubItem.Item.Index == 0)
{
return (new DocumentAccessConrol());
}

// show my custom control on the second row
if (eventArgs.SubItem.Item.Index == 1)
{
return (new BetterListViewComboBoxEmbeddedControl());
}

// show my custom control on the third row
if (eventArgs.SubItem.Item.Index == 2)
{
return (new BetterListViewTextBoxEmbeddedControl());
}
}

return null;
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Private Function ListViewRequestEmbeddedControl(ByVal sender As Object, ByVal eventArgs As BetterListViewRequestEmbeddedControlEventArgs) _
As IBetterListViewEmbeddedControl

‘ show editing controls in the second column
If eventArgs.SubItem.Index = 1 Then

‘ show my custom control on the first row
If eventArgs.SubItem.Item.Index = 0 Then
Return (New DocumentAccessConrol())
End If

‘ show my custom control on the second row
If eventArgs.SubItem.Item.Index = 1 Then
Return (New BetterListViewComboBoxEmbeddedControl())
End If

‘ show my custom control on the third row
If eventArgs.SubItem.Item.Index = 2 Then
Return (New BetterListViewTextBoxEmbeddedControl())
End If

End If

Return Nothing

End Function
[/vb]

And there is the result:

Custom Embedded Control on the First Line

TextBox Control on the Third Line

Items with custom height

Items with variable heights were possible in recent versions of Better ListView as well, but this adjustment was limited to heights which are multiples of text line height.

We have introduced a BetterListViewItem.CustomHeight property, which is 0 by default.

Every item has some minimum size (defined by the font and image) but it can get arbitrarily larger. The following formula explains how item height is measured in Better ListView:

height = max(minimum height, image height, text height, custom height)

Setting minimum height for all items is possible through layout properties and the latter is defined by the item itself.

Custom Spacing between Items

This property has been recently available in other views, but Details view was exception since its selections needed to be treated in different way: They overlap by 1 pixel so that the double border is avoided in neighboring selections:

1 px overlap of items

We have resolved this to get proper behavior with custom spacings and now the spacing can be set the same way as in any other view:

Simply set LayoutItemsCurrent.ElementOuterPadding to have custom horizontal and vertical padding between items.

You can set this specifically for Details view by refering to property LayoutItemsDetails or LayoutItemsDetailsColumns (Details view with columns).

We discovered that making group header behavior customizable would be useful not only for us, but for other developers who utilize Better ListView as well, so we implemented this feature officially in Better ListView 2.5.0.

There are two new properties: ShowDefaultGroupHeader and GroupHeaderBehavior.

Hiding the Default Group Header

The ShowDefaultGroupHeader is initially set to true. This means that the default group (the group containing items which do not have a specific group) have its header displayed:

Default group header is visible

When ShowDefaultGroupHeader is set to false, the “Default” group header on top can be hidden:

Default group header is hidden

Adjusting Group Header Behavior

The group headers have two kinds of behavior. They can be focused and can cause selection of items. Both of these functions can be invoked by keyboard and mouse.

The GroupHeaderBehavior property allows changing this behavior for keyboard and mouse separately.

By default, the property is set to BetterListViewGroupHeaderBehavior.All, so that all functions of the group header are turned on.

You may want to make group headers completely non-interactive. This can be done by setting the property to BetterListViewGroupHeaderBehavior.None.

Other values of the enum can be combined to create desired behavior.

Keyboard:

• Focus only
• Focus and select items in the group

Mouse:

• Focus
• Select items in the group
• Highligh when mouse cursor is over the group header

Use Case: Metadata Viewer

Here Better ListView is used for viewing image metadata tags:

Metadata View window

Only one tag can be selected at a time, so clicking on a group header has no effect on selection and need not to be highlighted.

One may still need, however, to allow focusing the group header with keyboard and mouse so that it is possible to collapse/expand the group with arrow keys. The desired behavior can be set this way:

C#

[csharp gutter=”false” toolbar=”false”]listView.GroupHeaderBehavior = (BetterListViewGroupHeaderBehavior.KeyboardFocus & BetterListViewGroupHeaderBehavior.MouseFocus);[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]listView.GroupHeaderBehavior = (BetterListViewGroupHeaderBehavior.KeyboardFocus And BetterListViewGroupHeaderBehavior.MouseFocus)[/vb]

Dynamic resizing of the focused item

We also introduced FocusedItemChanged event, so that you can detect when focus has moved from one element (item / sub-item / group) to another.

These features can be combined to display only the focused item with more details to save space code of the FocusedItemChanged event handler may look like this:

C#

[csharp gutter=”false” toolbar=”false”]
void ListViewFocusedItemChanged(object sender, BetterListViewFocusedItemChangedEventArgs eventArgs)
{
BetterListView listView = (BetterListView)sender;

listView.BeginUpdate();

if (eventArgs.FocusedItemOld != null)
{
// set single line of text for currenly unfocused item
eventArgs.FocusedItemOld.MaximumTextLines = 1;
}

if (eventArgs.FocusedItemNew != null)
{
// set three lines of text for currenly focused item
eventArgs.FocusedItemNew.MaximumTextLines = 3;
}

listView.EndUpdate();
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Sub ListViewFocusedItemChanged(sender As Object, eventArgs As BetterListViewFocusedItemChangedEventArgs)
Dim ListView As BetterListView = DirectCast(sender, BetterListView)

ListView.BeginUpdate()

If eventArgs.FocusedItemOld IsNot Nothing Then
‘ set single line of text for currenly unfocused item
eventArgs.FocusedItemOld.MaximumTextLines = 1
End If

If eventArgs.FocusedItemNew IsNot Nothing Then
‘ set three lines of text for currenly focused item
eventArgs.FocusedItemNew.MaximumTextLines = 3
End If

ListView.EndUpdate()
End Sub
[/vb]

Owner drawing in Better ListView 2.3.0 and higher allows you to draw elements (column headers, items, sub-items and groups) in any state you wish (hot, selected, focused and any combination of the three).

For example, we would like to highlight several items in one Better ListView depending on hovered item in other Better ListView:

Better ListView shows multiple hot items

Items can be also be drawn as if the control is focused, enabled or disabled. This feature can be applied when you wish to display items in highlighted state even if Better ListView is not focused:

Better ListView keeps selected items highlighted

We implemented the first sample (showing mulitple hot items) by inheriting from BetterListView, making a new class called HotListView. The implementation is very simple:

C#

[csharp gutter=”false” toolbar=”false”]
public class HotListView : BetterListView
{
public HashSet HotItems
{
get
{
return this.hotItems;
}
set
{
this.hotItems = value;

Refresh();
}
}

private HashSethotItems = new HashSet();

protected override void OnDrawItem(BetterListViewDrawItemEventArgs eventArgs)
{
if (this.hotItems.Contains(eventArgs.Item.Index))
{
eventArgs.ItemStateInfo = new BetterListViewItemStateInfo(
eventArgs.ItemStateInfo.ItemState | BetterListViewItemState.Hot,
eventArgs.ItemStateInfo.ExpandButtonState,
eventArgs.ItemStateInfo.CheckBoxState);
}

base.OnDrawItem(eventArgs);
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Public Class HotListView
Inherits BetterListView
Public Property HotItems() As HashSet(Of Integer)
Get
Return Me.m_hotItems
End Get
Set
Me.m_hotItems = value

Refresh()
End Set
End Property

Private m_hotItems As New HashSet(Of Integer)()

Protected Overrides Sub OnDrawItem(eventArgs As BetterListViewDrawItemEventArgs)
If Me.m_hotItems.Contains(eventArgs.Item.Index) Then
eventArgs.ItemStateInfo = New BetterListViewItemStateInfo(eventArgs.ItemStateInfo.ItemState Or BetterListViewItemState.Hot, eventArgs.ItemStateInfo.ExpandButtonState, eventArgs.ItemStateInfo.CheckBoxState)
End If

MyBase.OnDrawItem(eventArgs)
End Sub
End Class
[/vb]

The HotListView contains one property called HotItems. When drawing items (OnDrawItem method), it looks whether the item is in the HotItems set. If so, item drawing state is altered so that the item will be drawn as hot.

The modified ListView for second sample is even simpler. We call it HighlightListView:

C#

[csharp gutter=”false” toolbar=”false”]
public class HighlightListView : BetterListView
{
protected override void OnDrawItem(BetterListViewDrawItemEventArgs eventArgs)
{
if ((eventArgs.ItemStateInfo.ItemState & BetterListViewItemState.Selected) == BetterListViewItemState.Selected)
{
// if the item is selected, always draw control as if it is focused
eventArgs.DrawFocused = true;
}

base.OnDrawItem(eventArgs);
}
}
[/csharp]

Visual Basic

[vb gutter=”false” toolbar=”false”]
Public Class HighlightListView
Inherits BetterListView
Protected Overrides Sub OnDrawItem(eventArgs As BetterListViewDrawItemEventArgs)
If (eventArgs.ItemStateInfo.ItemState And BetterListViewItemState.Selected) = BetterListViewItemState.Selected Then
‘ if the item is selected, always draw control as if it is focused
eventArgs.DrawFocused = True
End If

MyBase.OnDrawItem(eventArgs)
End Sub
End Class
[/vb]

This modification only draws selected items as if the control is always focused.

UPDATE: From Better ListView 2.3.1, you can simply use HideSelectionMode property to keep selected items highlighted.