Owl's Blog on .NET development

Component Owl codes Better ListView control all night so you don't have to.

Displaying Thumbnails with Borders and Shadows

We’ve just released Better ListView version 1.50 with some new features – thumbnails view, image borders support (inc. shadows), and more.

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

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

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

Thumbnail with Extra Icons

Download Better ListView

You can download Better ListView and play with it yourself.

Leave a Reply