Question

I was looking for a custom image grid and found a similar question that had a really sweet component in an answer.

I downloaded the code and after some fiddling, I managed to get it to compile in DXE2. It looks really cool, but I can’t get either scrollbar to show up. I also can’t figure out how to dynamically control the images displayed. Or how to update the grid based on keyboard events.

Also, to get it to compile I had to remove the GR32 references; the library I downloaded had too many incompatibilities with DXE2 for me to resolve.

Any help would be greatly appreciated. This really looks like a killer component.

Update from Bill:

Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question.

If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better. Any idea on what is going on?

Answer 1

… but I can’t get either scrollbar to show up.

Well, there is no horizontal scrollbar. There is the property ColWidth that controls how much images are drawn in one row, depending on the control’s width. You might update ColWidth in an OnResize event handler due to anchor settings, for example.

The vertical scroll bar appears automatically when not all images (incl. spacing) fit in the clientrect. The images are drawn on a TPaintBox and that paint box’ size is updated as soon as the image count changes:

procedure TImageGrid.RearrangeImages;
begin
  ...
    FPainter.Height := Max(ClientHeight,
      FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing);

The component inherites from TScrollingWinControl, so the scroll bar should modify accordingly. If not, then Bill has a workaround found as commented:

VertScrollBar.Range := FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing;

I understand this obviously also works, but I really wonder why the scroll bar’s range should be modified manually. Here in D7 I have no problem with a hidden vertical scroll bar.

… I also can’t figure out how to dynamically control the images displayed. …

The most easy way to fill the component is by assigning the Folder property to a path with images. Only the images with the file formats in the FileFormats property will be loaded. To specify the images manually (e.g. to combine multiple folders), use the FileNames property. When the Folder property is set, then the FileNames property is updated accordingly, but those file names are not stored in the DFM. When you change the file names (e.g. you delete one from the folder), then the Folder property is cleared and the component uses the FileNames property instead.

… Or how to update the grid based on keyboard events. …

The only keystrokes currently implemented are Up, Down, PageUp, PageDown, Home and End which all scroll the control. What more key actions do you wish? It’s a viewer.

Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question. … If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better.

While loading the images, a temporary rect is drawn with size ColWidth * RowHeight. All images are stretchdrawn within that size, so adjust your ratio of these properties to make the spacing equal everywhere. Note that you can also influence appearance with the ImageHorzAlign and ImageVertAlign properties.

Update:

The component you refer to is recently completely rewritten, and some of the answers above are outdated.

It now has a Propertional property that defaults to True, but when set False, it will stretch up the thumbs to whatever cell size you have set, independent from the original image sizes. Small images could remain narow though, unless you set the new Stretch property to True.

It now distinguishes between RowHeight and CellHeight, and ColWidth and CellWidth. The difference between both is CellSpacing.

The component does not descend from TScrollingWinControl anymore, but from TCustomControl and only the vertical scroll bar is added.