How to add a Timage to a TScrollBox in Firemonkey XE6?

Question

Firstly sorry if this has come up before but I am struggling to find anything on the matter.

I'm trying to add a number of TImage's to a scrollbox which is meant to hold the images and allow the user to scroll across them. This creation is done in run time.

The images are stored in an array of TImage.

Below is the code I have to create the images.

procedure TfrmMain.CreateSolutionImages(ImageCount: Integer);
var
I: Integer;
ImageScale: double;
begin
  if sbSolutionImages.ComponentCount > 0 then   //destroy the images already in the scrollbox
  sbSolutionImages.DestroyComponents;
  SetLength(SolutionImages,0);       //clear the array of images

  SetLength(SolutionImages,ImageCount);  //SolutionImages is an array of timage
  ImageScale:= ((sbSolutionImages.Width - 20)/Guillotine.StockWidth);
  for I := 0 to ImageCount - 1 do
  begin
    if not Assigned(SolutionImages[I]) then       //if not assigned then create and set the parent to the scrollbox
    begin
      SolutionImages[I]:= TImage.Create(sbSolutionImages);
      SolutionImages[I].Parent:= sbSolutionImages;

      SolutionImages[I].Width:= trunc(Guillotine.StockWidth * ImageScale);    //set image dimentions and positions
      SolutionImages[I].Height:= trunc(Guillotine.StockHeight * ImageScale);
      SolutionImages[I].Position.X:= 10;
      if I = 0 then
      begin
        SolutionImages[I].Position.Y:= 10;
      end
      else
      begin
        SolutionImages[I].Position.Y:= SolutionImages[I-1].Position.Y + SolutionImages[I-1].Height + 20;
      end;
    end;
    //forgot to include these lines
    SolutionImages[I].Bitmap.SetSize(Round(SolutionImages[I].Width),Round(SolutionImages[I].Height));
    SolutionImages[I].Bitmap.Clear(TAlphaColors.White);
  end;
end;

What is happening is that the scrollbox (sbSolutionImages) is reporting that it contains the images, i.e. componentcount increases, however it is not drawing the images and no scrollbars appear, which should logically happen as some of the images won't be in the viewable region.

Any help would be greatly appreciated.

Answer 1

Add a TLayout as a child of the TScrollBox. Set the Width and Height as appropriate (and set Position=(0,0)). Add your images as children on the TLayout.

The TScrollBox will then know the bounds of the TLayout and will set it's scroll bars based on this.