how to support high dpi

“High dpi” means, that the monitor of the computer a program is running displays more than the usual 96 pixel per inch. This causes the user interface to become really small, if it was not adapted to High Dpi. Or windows is asked to scale the program, which causes ugly blurry symbols and text.

To avoid this you can set the ‘Scaled’ property of the form to true. In this case all elements and the font height will be adapted to match the resolution. But what happens to the icons in your toolbar?

They are usually scaled and become blurry – unless you use an image list which can embed multiple images to choose from. Only the more current Delphi editions offer such a tool. Unfortunately this causes a big overhead – the image source files for the larger resolutions can be really big and if they are embedded in the DFM source of the form – ugh.

WPImageList – the solution

The solution is the WPImageList component included with WPTools 9.1. First – images can be loaded from the resource, as a compressed PNG. Second – only one image is used for multiple icons because the WPImageList expects the image to be arranged in rows and columns of symbols.

SVG – vector based icons

And now WPImageList is even better. It includes a SVG rendering engine which creates the icon bitmap source just im time as they are needed. So it is not necessary to embed multiple versions for different resolutions, just loading one (compressed) SVG source from the resource is enough to support even very high resolutions, such as 8K.