Hi,

I was looking at various GUI toolkits to draw inspiration for a Toolbar widget for fpGUI. Up until now I have simply used a Bevel and Buttons (though fpGUI's buttons have more functionality that LCL's TButton). This works well, but I thought I would created a dedicated widget for the task.

The following criteria was given to me:

* easily add buttons
* easily add images
* set toolbar style. Controlling the visual aspect for text only, images only, text below images, text to the side, adhere to desktop environment preferences.

While looking at LCL's Toolbar and ToolButton functionality, and trying the simple ideas listed above, I can across some flaws or bugs in LCL. I'm using the Lazarus 1.0.4 release.

What works:
- Adding buttons are easy
- Adding images are easy

Problems:
- I used a set of 24x24 PNG images, but the images get clipped in the ImageList Property Editor. Right and Bottom of images are clipped in the image preview area. It looks like the ImageList is hardcoded to 16x16 images only! Why the 16px size limit?
- Image are also clipped on the toolbar buttons. The default toolbar button size appear to be too small for the images used.
- I then resized the heigh of the toolbar - toolbuttons don't resize? So what does the AutoSize property do?
- I then set AutoSize = True of each toolbutton, but the buttons don't change size at all???
- Why does the Toolbar have a Caption property??
- Where do I set the toolbar style? I only found Toolbar.ShowCaptions, but nowhere do I see, text only, image only, text below image, text to right of image, adhere to desktop preference (Gnome & KDE at least).

See attached screenshot showing the clipping and resize issues.

I thought I would raise these issues in the mailing list first, before I report them all as bugs in Mantis.

Regards,
- Graeme -

Graeme Geldenhuys wrote

See attached screenshot showing the clipping and resize issues.

More notes?

* image size: It seems the ImageList doesn't auto-detect the size of the images I added, and I added them all at once using multi-select.

* image size: I took a chance and set the ImageList.Width & .Height properties. At first glance I thought that was just the width and height of the TImageList component (eg: like found in TLabel or TButton), but apparently that controls the image sizes. Better property names would probably have been ImageWidth and ImageHeight.

* Looking at the screenshot I sent, Toolbar.Transparent = False, yet the Toolbar seems transparent, because the the TForm.Color = clMoneyGreen. You see the green color in the designer the Toolbar.Transparent property makes no difference.

Regards,
- Graeme -

Graeme Geldenhuys wrote

- I used a set of 24x24 PNG images, but the images get clipped in the ImageList Property Editor. Right and Bottom of images are clipped in the image preview area. It looks like the ImageList is hardcoded to 16x16 images only! Why the 16px size limit?

Afaik TImageList have width and height properties. Set them to 24 and it will be ok.

zeljko

This is a consequence of the below. You must first set the width and height, then the individual images will be cropped to that width and height.

These names are dictated by Delphi compatibility.

* Looking at the screenshot I sent, Toolbar.Transparent = False, yet the Toolbar seems transparent, because the the TForm.Color = clMoneyGreen. You see the green color in the designer and at runtime. Changing the Toolbar.Transparent property makes no difference.

Maybe GTK/Qt doesn't support that ?

Michael.

Correct.

Michael.

> TButton), but apparently that controls the image sizes. Better > property names would probably have been ImageWidth and ImageHeight. These names are dictated by Delphi compatibility.

Surely the "Delphi import wizard" could resolve that easily.

The Transparent property is not listed in the "Restricted" tab in the Object Inspector.

Regards,
- Graeme -

zeljko wrote

Afaik TImageList have width and height properties. Set them to 24 and it will be ok.

Thanks. And the unfortunate consequence of that is that your ImageList is then cleared! Rather annoying, if you images where all from various locations on your hard drive, and existing components relied on exact image order (image index number).

Regards,
- Graeme -

Yes, I've forgot to say that you must know image sizes before importing into the image list :) That's bit annoying, also "stretched" property would be nice to have in TImageList, so if image is bigger than w & h it could be stretched to fit into.

zeljko

Afair TToolbar is derived from TCustomControl and it does not have native handle of eg. QToolbar under Qt, so it seem that LCL is doing all drawing stuff. How it works on windows or carbon ?

zeljko

I'm using LCL-GTK2 under Linux. I see there is a ParentColor property too, and that seems to take preference. That is what caused the initial toolbar color to change. But even if I set ParentColor = False, the Transparent property still has no effect.

Regards,
- Graeme -

Maybe original image locations could be stored as well, so a "reload" or "refresh" could be done. Thus saving a lot of time, and all existing components relying on the a image index number will continue to work.

Example use case:
Image having a ImageList in a DataModule (a logical thing to do), and your 100+ form applications relies on those 50+ images in the ImageList. You accidentally change the Width or Height. Now your whole application lost the image index values, if you don't re-add those 50+ images in the exact order they were before.

Definitely not a well thought out design - or at least lots of scope for improvement. ;-)

Regards,
- Graeme -

zeljko wrote

That's bit annoying, also "stretched" property would be nice to have in TImageList, so if image is bigger than w & h it could be stretched to fit into.

It also seems that if you do a "Save form to XML", and the form contains a ImageList, you have 100% garbage in the XML file. That's if it doesn't bomb out on you with a "invalid character #0" error.

Does Lazarus actually use the "Save form to XML" anywhere? Does it have a "Load form from XML" option too?

Regards,
- Graeme -

OK, so I set the Width and Height of ImageList, and re-added all my 24x24 images.

I then set the Toolbar.Images to point to my ImageList. My existing toolbar buttons did not adjust to the size of the now known 24x24 images in the imagelist. Also the ToolbarButton.AutoSize property still does nothing.

Plus, if ToolbarButton.AutoSize = False, and I try and change the ToolbarButton.Height property manually to say 26 (to fit my 24px images), it just jumps back to 22 as soon as I hit Enter!! So I still can't adjust the size of by toolbar buttons. :-( Can it really be this hard?

Regards,
- Graeme -

Graeme, could you try this?
begin
   ToolBar1.ButtonHeight := 36;
   ToolBar1.ButtonWidth  := 36;
   ToolBar1.AutoSize     := True;
end;
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lazarus.freepascal.org/pipermail/lazarus/attachments/20121205/eb0d12d8/attachment.html>

Ah, I see the problem now. I was trying to set the ToolButton.Height & .Width property using the Object Inspector. Apparently that is not possible. You are supposed to set the Toolbar.ButtonHeight & .ButtonWidth, then the buttons change sizes.

So why does the TToolButton class have publish properties .Height and .Width in Object Inspector when you can't do anything with them. In that case, remove those properties from the Object Inspector, or clearly show them as read-only!

Another not-so-intuitive design.

MSEgui is infinitely more complicated to use in general, yet I figured out how to setup a toolbar faster in MSEide & MSEgui, than I did in Lazarus with LCL. No offence meant to the Martin (MSEgui developer), but that should say something to the LCL developers.

Anyway, thanks William for getting me onto the right track.

Regards,
- Graeme -

Weird, ToolBar.Height should make the toolbar bigger, without change button height (if autosize is false)...

2012/12/5 Graeme Geldenhuys

William Oliveira Ferreira wrote

Weird, ToolBar.Height should make the toolbar bigger, without change button height (if autosize is false)...

which autosize? the one for the toolbar or the one for the buttons?

Sorry, I was talking about TToolbar's.AutoSize....

2012/12/5 waldo kitty

BTW, Graeme: If you search for toolbar inspirations, in MSEgui there is ttoolbar for equally sized buttons without captions, tmainmenuwidget for buttons with captions and tdockpanel in tdockpanel.dragdock.options od_nofit and banded mode in order to to place runtime sizeable and moveable widgets of arbitrary class. Please note that tdockpanel adjusts child widget positions and sizes at runtime only. Also not very intuitive but a necessary flaw. ;-) Press Shift while clicking on the sizing grips in order to move the widgets at runtime.

Martin