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.

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]

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.