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.

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.

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]

• Groups – to enable grouping items into collapsible areas with “group headers”
• Item Hierarchy – to allow for visually organizing items like in the tree

We are facing some non-trivial obstacles on the journey You might be interested in:

Tree Structure vs List Structure

In all tree/list hybrid controls we saw there is an underlying tree structure made of nodes (like in the TreeView control). These hybrid controls are basically a tree with ability to be displayed as list.

In Better ListView, however, the primary data structure is a list, which is flat. Item hierarchy is still possible and really simple to use, just by enabling the user to set level of any item. If the item has higher level than some item above it, Better ListView will display this as a “child” item, allowing user to even collapse parent item without affecting the data structure. Sorting is also possible through “range sort”, e.g. sort only selected items or items in a certain level of hierarchy.

Compared to tree-like structure, user can still bind an IList to Better ListView or serialize/traverse through the whole item “hierarchy” with a simple foreach block.

Keeping Native Look

.NET 2.0 supports visual styles through its VisualStyleElement and VisualStyleRenderer classes, but this support is limited to basic elements. When it comes to shiny new elements that can be seen in Windows Explorer (e.g. triangular expando buttons or styles group headers), one have to hack into Windows theme to obtain correct constants. We did this nasty work to bring user visual style that matches exactly what he sees in native controls:

Visual Style Elements for Groups

The picture shows all the elements used in “Groups” and “Item Hierarchy” features. As You can see, it is a LOT. Only group header alone has 15 (!) states that should be drawn each in its specific situation. And Better ListView will handle all of them automatically for you.

We’ve taken customized themes into consideration, as well as older themes like “Vista Basic” or “XP Luna” or “Classic”. In all cases, we test control display thoroughly to obtain consistent results (a solid reference for us is a good old Windows Explorer as it shows most up-to-date wonders of native ListView control in each version of Windows at one place).