I’m trying to find a grid which is especially designed to show images. It needs to have good performance too, and preferably with some sort of thumbnail cache. The images need to be loaded from files, and it would be good if images can be assigned dynamically too. It shouldn’t work on a list of col/row records like standard grids, but a single list of items, each item representing an image. There should be a property to define col width and row height for all cols and rows at once, not one at a time. The end goal is to list all images with user options to control how large to display the images. It will be used as a product display, so there needs to be some sort of custom drawing capability too, like an OnDrawItem event. This may display up to 50,000 images in this list, so TListView won’t work, as it’s very heavy for this.
It needs to work with Delphi 2010, XE2, and preferably 7 too.
Here’s 3 examples of how to display 8 images below. I don’t mean each image being a different size, but exactly the same size. No 2 columns can have different widths, and same with rows.
For the fun of it, I wrote an ImageGrid component for you.
It has only a vertical scroll bar; resizing the width of the control adjusts the column count and row count. The images are cached as resized bitmaps in an internal list, along with their file names.
Because loading and resampling these images may take some time, depending on image count, resolution and whether you want to use the Graphics32 library for better resample quality, the component delegates the loading process to a separate thread, which (re)runs on setting the column width or the row height, and on changing the file names or the folder path in which the component tries to find all images of types to be supplied in the
FileFormatsproperty.Features:
Properties and events:
ColCount: number of columns, readonlyCount: number of images, readonlyImages: list of all manually added images where the thumbs are internally created fromItems: list of all filename-thumbnail or image-thumbnail combinationsRowCount: number of rows, readonlyThumbs: list of all internally created thumbsAutoHideScrollBar: hides the scroll bar when all rows are visibleBorderStyle: shows or hides themed borderBorderWidth: margin of the component, outside of the scroll barCellAlignment: alignes thumbs at the left, center or right of the cellCellHeight: height of cellCellLayout: alignes thumbs at the top, middle or bottom of the cellCellSpacing: spacing between the cellsCellWidth: width of cellColor: background color of border and cell spacingColWidth: width of column (equals width of cell plus cell spacing)DefaultDrawing: draws all thumbs by defaultDesignPreview: shows thumbs in the designerDragScroll: supports scrolling the grid by draging the gridFileFormats: image file name extensions by which the file names are filteredFileNames: list holding all file namesFolder: the directory in which the component tries to find all images filesItemIndex: selected cell indexMarkerColor: color of temporarily thumb marker during loading processMarkerStyle: style of temporarily thumb marker during loading processOnClickCell: fires when a cell is clickedOnDrawCell: fires when a cell is drawnOnMeasureThumb: fires when the size of a thumb is to be calculatedOnProgress: fires when an image is resized to thumb formatOnUnresolved: fires when a thumb cannot be created, e.g. when file name is not foundRetainUnresolvedItems: keeps empty thumbs in the listRowHeight: the row height (equals cell height plus cell spacing)ParentBackground: draws the (themed) background of the parent in the border and between the cellsProportional: resizes images proportionallySorted: file names are sortedStretch: stretches small images up to the cell sizeVirtualMode: prevents of automatically creating the thumbsWheelScrollLines: number of rows to be scrolled with mouse wheelWith thanks to:
The code is too long to post here, but the OpenSource project is downloadable from the GitHub server here. This is the interface section: