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.

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.

We have released a whole new WinForms component called Better Thumbnail Browser. This control is useful for anyone developing photo management software or any kind of image database:

Better Thumbnail Browser Overview

The control is capable of loading image thumbnails on background and does all the dirty job of threading and synchronization for you.

My motivation to make such component as lead developer at ComponentOwl.com was to have something that can smoothly integrate in my photo management software.

Since we already have Better ListView component, which is quite mature (three major releases over two years of development), I decided to build upon it and finally make control for image thumbnails that is both extensible and powerful and have native look and feel.

Better Thumbnail Browser inherits most of its functionality from Better ListView (multi column sorting, custom paddings and spacings, multi-line text and groups to name a few). It adds image loading logic on top of it, which can handle various scenarios:

• Load images from a folder, database or custom source automatically
• Load thumbnails with arbitrary sizes on background while progressively displaying them
• Handle zooming thumbnails on the fly
• Loading thumbnail items in multiple passes (e.g. load meta-data, then low quality image, then high quality image)
• Loading thumbnails in custom order
• Loading visible thumbnails first, then all other (and do this even though the user is scrolling the view)
• Manage updating individual thumbnails or their count on the fly
• Support showing loading progress

The component is fully customizable and by default inherits native Windows theme. We tested it on Windows 8 with success:

Better Thumbnail Browser with Windows 8 Theme

Better Thumbnail Browser contains default implementation for loading thumbnail images from disk. If you want to gather all images from a given folder (say “c:\images”), display them in Better Thumbnail Browser and load them on background, the code is particularly simple:

thumbnailBrowser.Path = "c:\\images";

And that’s it!

Better Thumbnail Browser will be our third component which is used in end-user consumer-level software package. This ensures future development, improvements and support.

Right-aligned Images

The alignment can be set separately on every sub-item (using AlignImageHorizontal and AlignImageVertical properties).

Moreover, the right-aligned images can be used in column headers and groups:

Group image alignment

The alignment of images is similar to that of text. Every image has its frame, which can be possibly larger than the image itself. In such case, the image needs to be further aligned within the frame. This has been done automatically by centering the image within frame, but now you have full control over the alignment.

When set to true, the Better ListView does not respond to keyboard and mouse input. There are, however, some exceptions that make the Read-only mode different to the Disabled mode (when Enabled property is set to false).

When in Read-only mode, content of the Better ListView can be still scrolled (the scroll bars are enabled) and groups/items can be expanded/collapsed.

The difference between Disabled and Read-only can be seen on the following images:

Normal state

Disabled state

Read-only state

As you can see, the Better ListView is displayed normally in Read-only mode, but the group header does not have a hot state (because cannot be focused). Items also cannot be focused or selected, but the expand buttons are still interactive.

The scroll bars would also be enabled and can be used, which is different from Disabled mode where everything is grayed and cannot be used.

Items with multi-line text

Column headers and even groups can contain multi-line text:

Multi-line text in groups

So the text can be split on multiple lines not only by wrapping the text, but also by user defined newline characters.

This feature comes out of the box.

The only setting associated with multi-line items is the MaximumTextLines property of the corresponding layout (e.g. BetterListView.LayoutItemsLargeIcon). This property specifies how many lines the text can have and this applies to both wrapped text and text with newline characters. So if you expect you text to have 5 to 20 lines, set the MaximumTextLines property to 20 and you know the items will not get too high while still displaying all the lines.

Multi-line text is supported on column headers, items, sub-items and groups.

Download the latest Better ListView

Some users noticed a performance drop when working with large number of items (say 10 000+). Our top priority for version 2.1 is the overall optimization of Better ListView. Several optimizations have already been made in the recent updates (column resizing and thumbnail images), but we have to go further. You can expect Better ListView to be much snappier in the upcoming 2.1 update. The optimizations will cover these areas:

• Faster collection operations (adding, removing, sorting) of large number of items
• Faster expand/collapse of groups and items
• Faster column resizing with multi-line items

We will also take a look on smoother Visual Studio integration, so you can see Better ListView ready in toolbox just after installation (we have to deal with Visual Studio Packages, which is quite an esoteric topic). If Better ListView doesn’t currently appear in your Visual Studio toolbox automatically, you can just right-click the toolbox window, and use “Choose Items” to add the DLL file yourself.

Some background info for the more curious of you: Version 1.5 of Better ListView was very fast. It was so fast because every item in the list had precisely the same size. Some operations, like hit testing, was done in constant time and no extra measurement of individual items was necessary. The new major 2.0 version of Better ListView supports items with variable sizes, and irregular layout consisting of grouped items. However, we observed that even in complex settings, there are just few “types” of items – for example, there are only three possible item sizes when using multi-line items with up to three lines of text. Our optimizations will thus be focused on taking advantage of this to reduce most expensive operations back to constant time complexity.

photo by Michael Roper

Item hierarchy with multi-line items in groups

Summary of what’s new:

We have added four new major features:

• Groups – items can be organized in collapsible groups
• Item Hierarchy – items can be organized in a tree structure, can be also collapsed just like the nodes in a TreeView
• Multi-Line Items – item texts can break in several lines and each item can have different size
• Data Binding – complex data binding is fully supported, any List, DataTable, DataView, array or any other IList-type object can be bound to Better ListView as a data source

Many existing features of Better ListView has been enhanced in favor of these. For example:

• Item reordering can be done with hierarchical items as well; user can even create child items
• It is possible to move items between different groups

Some of the minor features added are:

• Layouts can be adjustable – item sizes and spacings, even internal spacings
• Added new label editing controls (calendar and drop down box)
• Better ListView content (columns, items and groups) can be saved to file (XML or binary)
• Multi-line items support added
• See full changelog for details

We have also fixed many issues and improved performance of Thumbnails view and operations with collections.

About then new version

The new version 2.00 brings new major features, the most important one being item hierarchy support. This allows you to create tree-list structures in the list view, without having to sacrifice any of the list view functionality (columns, sorting, grouping, Drag and Drop reordering, etc).

Highly customizable item grouping capabilities were added. Individual group headers can have customized look and behavior. The group headers can be collapsible, support images, custom context menus, are focusable, and more.

Version 2.0 also improves the thumbnail view. The control handles larger images smoothly, even while resizing.

List items, group headers and column header can newly have custom padding specified for all of their elements, which makes it easy to do owner drawing of custom elements, such as overlay icons in the thumbnail view. Every part of the control can be newly replaced by custom drawing, not just overdrawn.

Version 2.0 newly allows you to save/load the list view contents with 1 just line of code, either in XML or binary format, to either file or string. Data-binding with custom column-mapping is supported as well.

Multi-line listview items are also newly supported. List items with very long text can take place of two (r more) regular items, so the text whole text is readable.

Thumbnails in groups

DataTable bound to Better ListView

Other news – new comics for developers!

We’ve also started publishing new webcomics for developers on our website, drawn by the Better ListView lead developer, Libor Tinka.