Skip to content

Optimize graphics and fonts for higher DPI monitors

Jump to bottom
António Lopes edited this page May 24, 2022 · 1 revision

Graphics optimization

Bitmap images do not scale up smoothly. As the size of the image grows, the quality will degrade.

Following the Microsoft guidelines, DPIAwareManager supports different versions of an image according to the scale of the monitor on which it will be displayed.

The value of the properties Picture, PictureVal, and Icon, can have counterparts for other scale percentages that may be used. The target percentage is indicated as a suffix in the name of the alternative property.

For instance, if there is an image targeted at the regular 96 DPI, 100% scale, and a higher-definition version targeted at 144 DPI, 150% scale, a control may hold the following properties

Picture = "regular.png"
Picture100 = "regular.png"
Picture150 = "high-quality.png"

When moving a form from a scale to another, the DPI manager chooses the best alternative available. Using the example, in monitors scaled at 100% or 125%, Picture100 will be used (meaning that its value will be copied to the Picture property). In monitors scaled at 150% or 200%, Picture150 will be used instead.

If an alternative exists for a given property, and there is no alternative property for the standard scale of 100%, the manager automatically creates one based on the original property. That is, the above list of properties is equivalent to

Picture = "regular.png"
Picture150 = "high-quality.png"

For _Screen and top-level forms, use icons with greater sizes: not only the 16 and 32 pixels that regular VFP applications expect but also 48 and 64 pixels sizes for displaying in High-DPI monitors and scales.

Fonts optimization

Scaling up the font size may eventually result in a less comfortable viewing experience. In large displays, the rendered glyphs may become too thin to read as they lose contrast with the background.

For the controls that host a FontName property, the DPIAwareManager class provides a mechanism to automatically switch to a different font when the scale of the display changes.

To enable the feature, the application must call the ManageFont method for every font and style that will be optimized for larger scales.

For example,

WITH dpim AS DPIAwareManager
   .ManageFont("Segoe UI,N", 150, "Segoe UI Semibold")
   .ManageFont("Segoe UI,B", 150, "Segoe UI Black")
   .ManageFont("Segoe UI", 150, "Segoe UI Semibold")
ENDWITH

sets Segoe UI Semibold as an alternative to Segoe UI when the display scales to at least 150%. In the case of bold font, the alternative is set to Segoe UI Black.

Alternative styles of a font can be N = Normal, B = Bold, I = Italic, and BI = Bold and Italic. Unstyled alternatives - like the third call of the example - are used when an application did not set a more specific style. In the example, that would be the case for Segoe UI in italic.

Clone this wiki locally