Notes on High DPI development in Delphi

Table of contents

Foreword:

What is High DPI?

High DPI (High Resolution Display) refers to the characteristic of a display device with a high pixel density. It means that in the same display area, the display device can display more pixels, making images and texts more delicate and clear.

On traditional low-resolution display devices, the pixel density is relatively low, and images and text may appear blurry or pixelated. On high-DPI devices, more pixels are compressed into the same physical area, making images and text sharper and clearer.

The emergence of high-DPI display devices provides users with a better visual experience, especially in viewing high-definition content, viewing detailed images, and displaying complex graphics.

High DPI (High Resolution Display) generally refers to display devices with greater than 96 pixels per inch (PPI). In this case, devices with more than 96 PPI can be considered high-DPI devices.

However, as technology continues to evolve, many display devices now have pixel densities well above 96 PPI. For example, smartphones, tablets, and high-end monitors often have higher pixel densities, with some devices reaching 300 PPI or higher.

When developing applications, devices with 120 PPI or higher are typically defined as High DPI devices . This is because in this range of pixel densities, applications typically require additional processing and adjustments to ensure a good user experience on high-DPI devices.

For developers, care needs to be taken to support high DPI application design and development. This includes using appropriate icons, controls, and font sizes, and dealing with scaling and layout issues to ensure that your application presents a good user experience on high-DPI devices.

Delphi has supported High DPI IDE since version 11.0, and versions before this are not supported, what are the supported and unsupported effects, please see the following, this is at 4K (3840x2160) resolution, running 11.3 and 10.2 respectively .3 version interface.

It can be clearly seen from the above figure that Delphi has supported the improvement of High DPI IDE since version 11.0. Because it is a screenshot, the effect is not obvious. If it is actually viewed on the monitor, the effect is more obvious. The interface that does not support High DPI IDE is simply just can't stand it. So here comes the question, is it normal to use a program developed with Delphi 11 version that supports High DPI IDE on 2K or lower monitors? The answer is unfortunately, the UI performance is not completely consistent.

The IDE supports High DPI IDE. Of course, we feel very comfortable using the IDE when we are developing. Even the IDE, Imbarkakino is constantly improving. As of version 11.3, the IDE support for High DPI has basically been completed. Then the IDE supports High DPI, how to solve the inconsistent UI performance of the developed program?

1. The phenomenon of inconsistency

TImage control: developed on High DPI IDE, put a TImage on the interface, and then load a picture, do not set any parameters, the effect is as follows:

Setting Image1.AutoSize:=True effect

Setting Image1.AutoSize := False and Image1.Stretch := True effect:

It can be seen from the above that the effect is the same only when the Stretch property is set to True, but under the 2K monitor, the picture is obviously not clear and rough. In other words, the TImage control is a control that is not compatible with High DPI.

The TLabeledEdit control sometimes has the following effects:

TActivityIndicator control effect (incomplete display under 2K)

Whether there are other controls that are not perfectly compatible is not very clear. You will know after using it. Therefore, programs developed on High GPI must be tested at 2K resolution to see how they work, and vice versa.

2. Current solutions

For the TImage control, you can use the TVirtualImage control instead, which perfectly supports different resolutions;
TLabeledEdit control, please set LabeledEdit.EditLabel.ParentFont := False;
There seems to be no better solution for the TActivityIndicator control, which can only be judged by the PPI in the personality setting;

3. Key points

When developing the UI of a multi-resolution VCL program, remember not to use absolute values for the size of the controls. As long as you use absolute values, it will inevitably lead to inconsistent UI performance under different resolutions. Then sometimes it is really necessary to adjust the position of a certain control, how to operate the size, it is best to use the relative size, relative to the width, Height, Top, Left, etc. of the Form, do not directly write the value. These are of course not a problem if multi-resolution compatibility is not considered.