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.

Our great inspiration for designing Better ListView is nothing less than the mighty Windows Explorer. This file manager uses obviously much more powerful control that the regular .NET list-view alone is.

It supports some extra views, line Contents and Extra Large Icons. It is also possible to adjust image size by rolling a mouse wheel while holding Control key.

Better ListView has the capability of displaying item icons with arbitrary sizes, but we also extended it with one extra view: Thumbnails:

Thumbnails Sample

This view aligns items in the center while keeping constant spacing between items. Thumbnails also keep just single line of text for compactness. On the other hand, LargeIcon view varies horizontal space between items to fill client area evenly and breaks long text into several lines.

The constant spacing is inspired by various photo managers, where image thumbnails are better viewed side-by-side (and the view looks also more organized).

Image thumbnails also look better with some kind border or frame. We added this new feature in Better ListView 1.5 and it works in all views. There are several pre-defined types of borders, but user can draw his own:

• None – simply no border at all
• Single – single line border
• SingleOffset – single line with a spacing between image and the border
• SymmetricShadow – smooth shadow around image
• DropShadow – smooth shadow on the right bottom part of the image

Thumbnails use DropShadow by default, but it can be adjusted for every view separately. One can also adjust thickness of the border/shadow and define custom spacing around image.

Take a look at one possible setting:

Image Borders

This is SingleOffset border of width 3 pixels. Notice that also column header images can have its borders (these are SymmetricShadow).

When the border is defined and image size should be kept the same, some spacing have to be added around image. You can adjust this spacing to draw you own borders or any additional graphics (such as overlay icons). Here is an example –

Thumbnail with Extra Icons

Download Better ListView

You can download Better ListView and play with it yourself.