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.

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.

Contrary to many custom controls, Better ListView adjusts itself to current theme even if the theme is changed in run-time. For example, when user of your application switches theme from Classic to Aero, or to some other custom theme with elements of different sizes, Better ListView re-measures itself for the new theme smoothly. Reloading the component or re-starting the application is not necessary.

One of the sweet bonuses of using Better ListView 2.0 instead of regular .NET ListView is the full Groups functionality in all themes and all versions of the operating system. For example, groups are not collapsible in standard ListView on Windows XP and even does not support images. In Better ListView, however, you are able to unleash full potential of groups everywhere.

The following images show Better ListView in different Windows themes: Classic, XP Luna and Aero:

Better ListView in Classic theme

Better ListView in XP Luna Theme

Better ListView in Aero Theme