How to create images for WPImageList

<< Click to Display Table of Contents >>

Navigation:  Programming > WPImageList >

How to create images for WPImageList

To create bitmaps to be used with the TWPOImageList we recommend to use Affinity Designer (“Serif” and “Affinity” are both registered trademarks of Serif Europe Ltd)

 

We included a sample project to create contains 8*3 Icons (see folder IconProject)

 

In Affinity Designer  it is possible to create "symbols" which can be reused in the design. A change of the symbol will change all copies.

 

affinity_1

 

In the export personality we only export the "Icon" part- note that only that "slice" got a check.

 

Here we can specify multiple sizes to be exported at once.

Specify the width "w" of the required width of all icons in a row, i.e. for 32*32 pixel icons specify 8*32=256w

The name template should contain n the iconwidth, i.e. 32, at the end. This tells the WPImageList how to handle the bitmap.

 

affinity_export

 

 

Once you click on Export, multiple PNG files with correct names will be created. Since the file names include the size of the images, WPImageList is able to set the width and height property automatically when you load the file(s).

 

The PNG files can be loaded in one step after a double click on the WPImageList.

 

When you use Delphi XE or later you can now also use SVG Images.

 

This has the advantage that you do not need multiple image files for multiple resources.

 

To do so you just have to export in SVG mode and load the data into the ImageList using LoadSVGFromStream. You need to provide the count of columns and rows of your design but the rest will be done by the internal SVG interpreter.If you need more features, i.e. persistency of loaded SVG data, you can use our product WPSVGPro.

 

I hope this shows, how easy it is to use the WPImageList.

 

In contrast to regular ImageLists you do not have to worry about the order of the icons on each update or for each resolution. It will never change whenever you update the images and is the same for all resolutions.

 

 

Hint: You can use the create PNG files also with the TImageList of newer Delphi versions. Here you need to set the property ColorDepth to ccd32bit.

 

 

Create icons for a dark theme

 

clip0027

 

Add an adjustment "curve" layer to the project. Create an inversion curve which converts black to white. Click on the option for the curve (lower right corner) and choose only black as source layer range.

 

affinity_curve7

 

To create normal icons disable this adjustment, for icons on black background activate it.