TButton with transparent PNG image and glowing hover effect

1
votes

I'm using Delphi XE and trying to update an old Delphi codebase. The software was originally developed with Delphi 7 and used a hacked version of TPNGButton written by Jonathan Hosking in 2001. TPNGButton had a support for transparency and glowing hover effect. Unfortunately when the project was ported on Delphi XE, all the images were stretched to fill the area of the whole button.

I'm trying to create a similar kind of button with TButton but I'm hitting a wall. I created a new test project and added a TButton and a TImageList with PNG image. I added this image list to the Image property of the button and chose the correct ImageIndex. This resulted in a button with the correct image but the image is way too small (16x16 pixels).

I tried to fix the size issue by changing the size of the TImageList but after this I can't see the image at all even if I enter the previous values. Of course even the most current version of Delphi GUI designer lacks the support for undo so I have to remove the image list and add a new image list to restore the image to the button.

Is there a better way to get the kind of button I want or do I have to code it myself or try to fix the hacked TPNGButton implementation? Surely this can't be the best way for GUI development with Delphi in the year 2011?

2
delphiuser-interface
There must be 3rd party components out there that support this sort of button. I don't know what they are but a web search ought to yield something. – David Heffernan
I can't believe that I'd need a 3rd party component to get an image larger than 16x16. Although given my recent experiences with Delphi, that wouldn't really surprise me if that turned out to be the truth. – Ville Salonen
proger.i-forge.net/… – Z80

2 Answers

4
votes

The TAdvGlowButton is not free, but is exactly this kind of button.

The TMS Component pack could be worth paying, if you want a working ribbon.

See also the rkGlassButton, which is free.

0
votes

Delphi XE stretches the image when drawing to canvas. Stretching can be avoided by always drawing the full size image with the correct x-position. All pixels outside the canvas are then automatically clipped and the correct glyph appears. Change the case statement in the Paint method of TPngButton as follows: 

     Case EtatBtn of
       0: FPngImg.Draw(Canvas,Rect(0,0,4 * width, Height)); // Normal
       1: FPngImg.Draw(Canvas,Rect(-Width,0,3 * width, Height)); // Mouse Entered
       2: FPngImg.Draw(Canvas,Rect(-(Width * 2),0,2*width,Height)); // Pressed
       3: FPngImg.Draw(Canvas,Rect(-(Width * 3),0,width,Height)); // Disabled
     end; //case