How to resize images for toolbar buttons

[istoica]

I have tried almost everything, still, unable to resize the image before displaying it in a toolbar button, so far I have this code:

Code: Pascal  [Select][+][-]

1. function TMainForm.LoadIcon(IconName: string): boolean;
2. var IconImage: TImage;
3. var IconPath: string;
4. begin
5.   IconPath := Concat(ExtractFilePath(ParamStr(0)), AssetsBase, Concat(IconName, '.png'));
6.   IconImage := TImage.Create(self);
7.   try
8.     IconImage.Stretch := True;
9.     IconImage.Proportional := True;
10.     IconImage.Center := True;
11.     IconImage.Width := 32;
12.     IconImage.Height := 32;
13.     IconImage.Picture.LoadFromFile(IconPath);
14.     MainToolbarImageList.Add(IconImage.Picture.Bitmap, nil);
15.   finally
16.     IconImage.Free;
17.   end;
18.   LoadIcon := True;
19. end;
20.  

That I use like this:

Code: Pascal  [Select][+][-]

1. LoadIcon('git-branch'); ToolButton1.ImageIndex := 1;
2.  

But the image is not resized.
Also, when using the list itself to add images,  if I import with center selected, it only displays a black square.

What am I doing wrong ?

[sash]

1. Most basic way is to use TCanvas.StretchDraw.
2. For toolbar icons usually they prepare (at designtime) several Imagelists with different resolutions like 16x16, 24x24 and so on, and then pick (at runtime) a suitable one.

[istoica]

Thank you, went on this path.
Do you know if there is a way to still display the button caption ? But at the bottom ?
I do not want to stretch my question.

[wp]

Do you have Laz trunk or one of the v2.0 release candidates? The imagelist in these versions has been reworked and supports automatic scaling. So, when you Add an image it will be scaled automatically to the size given by ImageList.Width and .Height, and to the other sizes specified in the ImageList editor as "Add more resolutions".

Thid works for me on Laz trunk:

Code: Pascal  [Select][+][-]

1. procedure TForm1.Button1Click(Sender: TObject);
2. begin
3.   ToolButton1.ImageIndex := LoadIcon('git-branch.png');
4.   Toolbar1.Invalidate;
5. end;
6.  
7. function TForm1.LoadIcon(IconName: string): Integer;
8. var
9.   pic: TPicture;
10. begin
11.   Result := -1;
12.   pic := TPicture.Create;
13.   try
14.     pic.LoadFromFile(IconName);
15.     Result := ImageList1.Add(pic.Bitmap, nil);
16.   finally
17.     pic.Free;
18.   end;
19. end;

As you can see above, I would not recommend to load the image into a TImage component - this is a visual control and has too much overhead. Just load it into a TPicture, if you need automatic format detection, or into the corresponding bitmap type directly, a TPortableNetworkgraphic here.

[wp]

Do you know if there is a way to still display the button caption ? But at the bottom ?

You are talking of a toolbutton? There is a property ShowCaption which is true for the button by default, but false for the Toolbar. The Toolbar.ShowCaptions therefore is some kind of "master switch" to turn captions off. Set Toolbar.ShowCaptions to true to see the button captions. Unfortunately Autosizing of the Toolbar with captions does not work, set Toolbar.ButtonSize to something like 40 (for 16x16 images, use a correspondingly larger value for larger images), and Toolbar.AutoSize to true. This shows the caption below the icon. If you want the text at the right of the caption you must also set Toolbar.List to true.

[zoltanleo]

I have tried almost everything, still, unable to resize the image before displaying it in a toolbar button, so far I have this code:

Try this

Code: Pascal  [Select][+][-]

1. { TForm1 }
2.  
3. procedure TForm1.RadioGroup1Click(Sender: TObject);
4. var
5.   iw: Integer;
6. begin
7.   case RadioGroup1.ItemIndex of
8.     0: iw:= 16;
9.     1: iw:= 24;
10.     2: iw:= 32;
11.     3: iw:= 48;
12.   end;
13.  
14.   with ToolBar1 do
15.   begin
16.     ImagesWidth:= iw;
17.     Height:= ImagesWidth + 8;
18.     ButtonHeight:= ImagesWidth;
19.     ButtonWidth:= ButtonHeight + 1;
20.   end;
21. end;
22.  
23. procedure TForm1.FormCreate(Sender: TObject);
24. begin
25.   RadioGroup1.ItemIndex:= 0;
26.   RadioGroup1Click(Sender);
27. end;

[istoica]

Excellent, just what I needed, thank you so much!