Dynamic TImage's in dynamic TPanel's?

Question

OK, I'm trying to create some custom number of TPanel's at runtime on TScrollBox surface like you can see on following image.

To get this I'm using following code and that works fine.

var
  pan: array of TPanel;
  maxp, i, x, y: Integer;

...

maxp := 10;
SetLength(pan, maxp);

for i := 1 to maxp do begin
  // x is correct value; doesn't cause problem
  // y is correct value; doesn't cause problem
  pan[i-1] := TPanel.Create(form1);
  with pan[i-1] do begin
    Width := 100;
    Height := 150;
    Top := x * 151;
    Left := y * 101;
    Parent := ScrollBox1;
    end;
  end;

Now, I have problems to put TImage object in every TPanel with same index (img[0] -> pan[0], img[1] -> pan[1], etc). Look at the following image:

Using same logic, I've tried to create TImage's but w/ no success.

I'm using this code and cant figure out what's wrong. It looks so simple to me, but somehow it doesn't provide expected effect.

var
  pan: array of TPanel;
  img: array of TImage;
  maxp, i, x, y: Integer;

...

maxp := 10;
SetLength(pan, maxp);
SetLength(img, maxp);

for i := 1 to maxp do begin
  // x is correct value; doesn't cause problem
  // y is correct value; doesn't cause problem
  pan[i-1] := TPanel.Create(form1);
  with pan[i-1] do begin
    Width := 100;
    Height := 150;
    Top := x * 151;
    Left := y * 101;
    Parent := ScrollBox1;
    end;
  img[i-1] := TImage.Create(form1);
  with img[i-1] do begin
    Width := 98;
    Left := 1;
    Height := 148;
    Top := 1;
    // in original code next line had img[0]. which caused problem
    Picture.LoadFromFile('some_image_file');
    Parent := pan[i-1];
    end;
  end;

Somehow it places all TImage objects on same place in first TPanel (pan[0]). It's confusing for me because it says Parent := pan[i-1]; but for some reason it always puts TImage in pan[0]. I've tried using breakpoints to see what's going on after every for-loop cycle (added Application.ProcessMessages at the end) and it really creates 10 different images but puts them onto pan[0]. Of course, at the end it shows just last image loaded into pan[0].

My question is how to make one dynamic TImage per dynamic TPanel (with same array indices)?

SOLVED!

Answer 1

Ah, I found it... how blind I am really...

To get auto-complete in delphi, i've used img[0] in front of Picture.LoadFromFile(). Then, obviously I forgot to remove it from code, and since hour ago that 'prefix' stayed there making all images load into same img[0]. I was sure there's something wrong with Parent or Pos/Size properties and have been focused on this things not caring so much about this.

I actually had

  with img[i-1] do begin
    Width := 98;
    Left := 1;
    Height := 148;
    Top := 1;
    img[0].Picture.LoadFromFile('some_image_file');
    Parent := pan[i-1];
    end;

But somehow I've removed that img[0] part while posting this question, and haven't seen it as problem in my Delphi code. Obviously, when I was formatting this code, i removed some parts and that made answering my question here impossible :(

Really sorry for bothering you guys, that was my bad.

Answer 2

And word of advice - get rid of the with blocks. They may seem innocent and simple at first, but in the long run they only serve to write sloppy code that is hard to troubleshoot. Had you been using explicit variable references instead, this problem would never had occurred in the first place.

var
  Panels: array of TPanel;
  Panel: TPanel;
  Images: array of TImage;
  Image: TImage;
  maxp, i, x, y: Integer;

...

maxp := 10;
SetLength(Panels, maxp);
SetLength(Images, maxp);

for i := 1 to maxp do begin
  Panel := TPanel.Create(form1);
  Panels[i-1] := Panel;
  Panel.Parent := ScrollBox1;
  Panel.SetBounds(...);
  Image := TImage.Create(form1);
  Images[i-1] := Image;
  Image.Parent := Panel;
  Image.SetBounds(...);
  Image.Picture.LoadFromFile('some_image_file');
end;

Answer 3

You set Height twice and no Left, so it seems.

with pan[i-1] do begin
  Width := 100;
  Height := 150;
  Top := x * 151;
  Height := y * 101;
  Parent := ScrollBox1;
end;