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

Hierarchical items in two groups

We are currently working hard on finishing Better ListView version 2.0 which will add new features: Support for groups, tree-like item structure (tree nodes are collapsible, as expected), and multi-line items.

We expect to release this upgrade in about a month. It will be a free upgrade for current and new users.

Groups

Groups in Better ListView have comparable capabilities as other Better ListView elements (column headers, items, sub-items). For example, you can adjust the foreground/background colors, font, image – and owner drawing is possible as well.

You can even include images into group headers (as you can see in the preview above), which is not possible in .NET ListView.

Groups are collapsible by default and the expand button can be switched off on each group individually.

Here are groups combined with Tile view (the second group is collapsed):

Groups with Tile view

The previous figure displays vertically oriented groups, but Better ListView also support horizontally oriented groups in the List mode:

Groups with List view

We put special effort to mimic the group display and behavior of Windows Explorer. The group headers can display all of the 15 group header states available in Windows visual style and their display is governed by the same logic as in the ListView counterpart.

The group headers always look perfect and native, right out of the box. You don’t need to tweak anything.

Item Hierarchy

This works in the similar way as in the standard TreeView control. Each item (or node) has property called ChildItems which can be filled with new BetterListViewItem instances. SubItems collection can still be used in either items and child-items (child items are treated in the very same way as their parents).

Item hierarchy can be combined with Groups feature as seen in the first preview.

Multi-Line Items

Multi-line items

A simple setting of item layout (MaximumTextLines property) allows breaking item text into several lines (up to the specified value). When the text is longer than MaximumTextLines, then the default trimming method is used (one from the TextTrimming enumeration: None, TrimCharacter, TrimWord, EllipsisCharacter, EllipsisWord, EllipsisPath).

Multi-line text can be used in every view and also in column headers.

Another New Features

There are also bunch of new minor features including:

Adjustable paddings – Every element part (e.g. item check box, group image…) contains customizable spaces at each side, so the user can easily create space where he needs and customize items/column headers/group headers to the finest detail.

Focusing sub-items – Items, group headers and even sub-items can be keyfocused. User can now invoke label editing or scroll to any “cell” in the Details-with-columns view solely with keyboard.

IEnumerable implementations –  BetterListView, BetterListViewGroup and BetterListViewItem implements IEnumerable interface for iterating through the whole item hierarchy, so using recursion to traverse child items is not necessary.

• 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).