Automatic Layout¶

One of the shortcomings of original ListView is the lack of flexibility in sizing items according to their content (icons and text). You can choose from different views that offers different content size. Item size in the Tile view can be adjusted, but not icon or text inside the tile. One You also choose between SmallIcon and LargeIcon views, but what if you need some non-standard icon size (e.g. 96 by 48 pixels)?

We addressed this problem with automatic layout. This means that Better ListView simply adjusts itself to best fit column header, item and sub-item content. You can also turn this feature off, partly or completely, to use your own sizing of element content.

Better ListView always adjusts images and text so that it fits bests into available space:

As you can see, images get resized proportionally into available space.

Basic Layout Settings¶

Use the BetterListView.LayoutOptions property to set basic layout behavior. For example:

betterListView1.LayoutOptions = (BetterListViewLayoutOptions.AutoSizeColumnHeaderImage | AutoSizeItemText);

will ensure that column header size is adjusted according to size of the largest image and so does items for text. In other words, column header images and item texts use automatic layout, while the other parts use manual layout.

Advanced Layout Settings¶

When layout for a part is manual, size of that part has to be set manually. This sample code shows setting up a layout for Details view:

BetterListViewLayoutItems layoutItems = BetterListViewLayoutItems.FromView(BetterListViewView.Details);

layoutItems.SizeImage = new Size(48, 48);
layoutItems.SizeImageMinimum = new Size(22, 18);
layoutItems.SizeImageMaximum = new Size(96, 64);

layoutItems.SizeText = new Size(100, 100);
layoutItems.SizeTextMinimum = new Size(88, 128);
layoutItems.SizeTextMaximum = new Size(256, 160);

this.betterListView.LayoutItems = layoutItems;

There are three values for image size and for text size. What is the difference?

The SizeImage value is used when the layout is manual for item image size.

The SizeImageMinimum and SizeImageMaximum are used when the layout is automatic for item image size. Automatic layout chooses the best image size, but never goes under the minimum and maximum dimensions specified.

The same logic applies for text size.

We can also set simpler layout for column headers:

Size sizeImage = new Size(64, 64);
int heightText = 40;

betterListView.LayoutColumnHeaders = new BetterListViewLayoutColumnHeaders(sizeImage, heightText);

Sample Application¶

You can play with the layout settings in BetterListViewAutoLayoutSample application:

Here you can change view, basic settings of the layout (check boxes in the lower right part of the form) and advanced settings (middle right part of the form).

The images displayed are downsampled. You can make them larger or even display in original size by simply setting greater maximum image size allowed (or just the image size for manual layout).