PngComponents

This version: 1.0 RC2

What is PngComponents?

PngComponents is a set of components that allows you to include in your application real PNG files. PNG files on their own do not generate an enourmous advantage, but their support for an alpha-channel does indeed have quite a charm to it. The PngComponents library supports alpha-channels to their full extend, using a modified version of the excellent pngdelphi library.

Examples of PNG images with alpha-channels.
Note that these don't work correctly in Internet Explorer (all versions up to 6).

PngComponents' main and most important component is the PngImageList. This is a descendant of the normal TImageList, with in addition full support for PNGs with an alpha-channel. This will enable you to keep using most components that take advantage of imagelists, while actually feeding them icons with alphablending capabilities. Two other very nice components are the PngSpeedButton and the PngBitBtn. These two buttons do not have a Glyph anymore, but in stead, they accept a PNG file to be assigned directly to the button, without the need for an imagelist (just like the normal SpeedButton and BitBtn). And since the PNG glyphs are drawn in realtime, there's no more hassling with WM_DISPLAYCHANGE when the user changes the clBtnFace color in his display settings...

Two other components included in the library are the PngImageCollection, which is simply a collection of PNG images. Nothing more, nothing less. The last one is the PngCheckListBox. This one accepts PNG glyphs for the check states. Beside that, it's a completely normal CheckListBox.

I've also added a "fix" for Alex Desinov's awesome addon for Jordan Russell's Toolbar2000, called TBX. This fix is a replacement for the OfficeXP theme. Just replace TBXOfficeXPTheme in your uses clause with PngTBXOfficeXPTheme and that's it! Beautiful alphablended icons become possible in the OfficeXP theme as well.

Why should I use PngComponents?

The PngComponents library offers a major leap forward in creating nice GUI's in designtime. Not only does it speed up the implementation of alphablended icons in your application, it eases the way you can use them throughout your software. No longer do you need to put them in a resource file manually and then manually drawing them on a temporary bitmap and assigning that to somewhere. Adding beautiful alphablended icons to your interface is but a few clicks away.

Usage

Common

The PngBitBtn and PngSpeedButton both have two extra properties, PngImage and PngOptions. PngImage substitutes the Glyph property with a PNG image, so only PNG files can be loaded into it. PngOptions determines what a disabled glyph looks like. You can choose from a combination of having it blended and having it grayscaled.

The PngImageList and PngImageCollection share the same editor. This editor can be used to load PNG files into the respective component. When editing a PngImageList, the editor will only allow PNG files that have the correct dimensions. When editing a PngImageCollection, any PNG can be added. Note that in either case, it doesn't matter if you mix color depths or other properties.

Note: the beta versions of PngComponents required that you use a PngImageCollection and assign it to the PngImageList.PngImages property. That is no longer the case, i.o.w. the components have been separated completely.

The editor

As said before, the PngImageList and PngImageCollection share an editor that allows to modify the contents of the respective component:

• The Add button will ask for a PNG image. After that, you may set its name and background color. Note that you can select multiple files and add them all at once.
• The Delete button deletes the currently selected image(s), after having asked for confirmation.
• The Replace button only works when a single image is selected. It will ask for a PNG file and will replace the actual image.
• The Clear button empties the list, after having asked for confirmation.
• The Up button moves the currently selected images one position up, if possible.
• The Down button moves the currently selected images one position down, if possible.
• You can also drag images in the listbox. They'll be moved as you drag them, in realtime.
• Remember that you can select multiple images, for your convenience.

The editor will show up when you doubleclick the PngImageList or PngImageCollection component. You may also select Edit images... from its context menu, or doubleclick the PngImageList.PngImages or PngImageCollection.Items property.

The ImageList

The ImageList has some features and issues you should probably know about:

• The images you add to the list are internally pumped into the "real" imagelist, so that native "API" windows controls, like listviews and treeviews, can take advantage of it. Even though PngImageList tries to make the best out of it, Windows 2000 and earlier simply do not support an alpha channel in an icon and may therefor display it incorrectly. This also applies on Windows XP and later, if you forget to add a manifest to your application. Note that themes support is not required for this to work, just a manifest is enough (themes may even be unavailable).
• The editor will not crop or resize images that do not conform the dimensions of the imagelist. Unfortunately, this is extremely hard when working with PNG images, due to limitations in the pngdelphi library.
• Components that do not natively support the PngImageList will not draw disabled images correctly. Those components usually have their own algorithm to generate disabled images, which will not work with the modern-style flashy colorful alpha-blended PNG images. You may want to include another imagelist with the same images, but with the EnabledImages property set to False.

The OfficeXP fix

A small introduction: Jordan Russell's Toolbar2000 is a set of components for creating Office 2000-style toolbars and such. Alex Desinov's TBX is an add-on package that adds even more functionality as well as theming. This allows for themes like "OfficeXP", "Office2003" and more.

The OfficeXP theme comes standard with TBX and it's the one getting in major trouble when using in combination with PngComponents. The alpha-blended area's look ugly, images may show dark borders, and other kinds of artefacts may show up.

The fix I've included is as simple as it is effective; it's a unit called PngTBXOfficeXPTheme. If you replace TBXOfficeXPTheme in your uses clauses with PngTBXOfficeXPTheme, you should be all set! You will not have the fancy looks in designtime, but in runtime your application will look better than ever.

Warning! If you still need TBXOfficeXPTheme included in your uses clause, then make sure PngTBXOfficeXPTheme gets initialized after TBXOfficeXPTheme, or it will not work as expected.

Miscellaneous

Feedback

I love to get feedback! You can either go to the newsgroup or send me an e-mail if you have a specific question.

Legal

See the License.txt file included in the archive. If the file is not there, the ZIP file is not a genuine PngComponents download!

This page is best viewed with Opera or Firefox. This page is also optmized for printing.