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.

Better ListView Sub-item Check Boxes

Better ListView 3.10.0 allows displaying fully interactive check boxes and even radio buttons in sub-item cells.

This feature can be activated simply by setting CheckBoxAppearance property of a given sub-item to other value than Hide. Such sub-item will not display check box or radio instead of image and text.

Please note the first sub-item’s properties do not apply as they are overriden by item’s properties. These two are separate for the case of column reordering (keeping consistency of sub-item states).

Another new feature in Better ListView is that check boxes or radios can be displayed disabled. This can be achieved by setting CheckEnabled property to false on the respective item or sub-item.

Sub-item check boxes can be operated by both mouse and keyboard. Checking sub-item with keyboard can be done by navigating focus rectangle by arrow keys to the given sub-item and pressing spacebar.

Default list without grid lines below items

List with grid lines added

Setting grid lines in Better ListView is easy. Simply make sure you are using Details view (the default view). Then you can set GridLines property to one of the following values:

• None – grid lines are hidden
• Horizontal – only horizontal lines are displayed
• Vertical – only vertical lines are displayed
• Grid – both horizontal and vertical lines are displayed, forming a grid

None of these settings, however, cause drawing lines below the last visible item, which may be desirable. The reason for this is that Better ListView supports custom item height and there is uncertainity about the spacing between new grid lines (smallest?, largest?, average?) It is up to your choice.

To draw new grid lines, handle the DrawBackground event (or subclass BetterListView and override the OnDrawBackground method) with the following code:

[csharp gutter=”false” toolbar=”false”]
private void ListViewOnDrawBackground(object sender, BetterListViewDrawBackgroundEventArgs eventArgs)
{
BetterListView listView = (BetterListView)sender;

// get last visible item
var item = listView.BottomItem;

if (item == null)
{
return;
}

// measure row height
var bounds = listView.GetItemBounds(item);
int rowHeight = bounds.BoundsOuterExtended.Height;

// draw additional lines
Rectangle rectClient = listView.ClientRectangleInner;
Pen penGridLines = new Pen(listView.ColorGridLines, 1.0f);

int y = (bounds.BoundsOuterExtended.Bottom + rowHeight);

while (y < rectClient.Bottom) { eventArgs.Graphics.DrawLine( penGridLines, rectClient.Left, y, rectClient.Right - 1, y); y += rowHeight; } penGridLines.Dispose(); } [/csharp] What this code does is getting the last visible item using BottomItem property. It is important  to get this visible item instead of e.g. first item because GetItemBounds method returns non-null value on visible items only. The GetItemBounds method reveals item measurement which is used to determine item height and coordinate of its bottom. Finally, we draw new lines using current grid line color  (ColorGridLines property) until reaching the bottom of the view.

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]

Search Filtering with highlight

There are few ways of making searching in large list of items more convenient. For example, Better ListView provides Search Highlighting and Item Hiding features that can be used to improve searching. The above animation shows both of these features in action when searching for a word “pear” using keyboard.

The implementation is very simple and involves handling just two events: ItemSearch (raised whenever item is searched, e.g. using keyboard ) and KeyDown:

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

listView.Items.AddRange(new[] { “apple”, “pear”, “pineapple”, “orange”, “grapefruit”, “cherry”, “avocado” });

listView.ItemSearch += listView_ItemSearch;
listView.KeyDown += listView_KeyDown;
[/csharp]

The ItemSearch event handler finds matching items and sets their visibility accordingly. It also updates the highlighting:

[csharp gutter=”false” toolbar=”false”]
void listView_ItemSearch(object sender, BetterListViewItemSearchEventArgs eventArgs)
{
var listView = (BetterListView)sender;

listView.BeginUpdate();

// update item visibility according to search query string
foreach (var item in listView.Items)
{
bool match = item.Text.Contains(eventArgs.QueryString);

if (match)
{
item.Visible = true;

item.SearchHighlight = new BetterListViewSearchHighlight(
0,
item.Text.IndexOf(eventArgs.QueryString, StringComparison.Ordinal),
eventArgs.QueryString.Length);
}
else
{
item.Visible = false;
}
}

listView.EndUpdate();
}
[/csharp]

Finally, the KeyDown event handler resets the view when Escape key is pressed (all items are made visible and the highlight is removed):

[csharp gutter=”false” toolbar=”false”]
void listView_KeyDown(object sender, KeyEventArgs e)
{
var listView = (BetterListView)sender;

listView.BeginUpdate();

if (e.KeyCode == Keys.Escape)
{
// remove search highlight
//NOTE: we could use BetterListView.RemoveSearchHighlight() but this applies to visible items only and some items are hidden at the time
foreach (var item in listView.Items)
{
item.SearchHighlight = BetterListViewSearchHighlight.Empty;
}

// make all items visible
foreach (var item in listView.Items)
{
item.Visible = true;
}

// mark the key as handled
e.Handled = true;

// suppress KeyPress event to prevent ItemSearch from happening
e.SuppressKeyPress = true;
}

listView.EndUpdate();
}
[/csharp]

And that’s it!

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]