Often times when we talk about monitors we discuss resolution (e.g.1920x1080) and diagonal dimensions (e.g. 27” or 68.58 cm), but we can use these numbers to calculate the DPI (see More on DPI and PPI below) with the good ol’ Pythagorean theorem. As the screen gets larger, the DPI gets lower, unless you also increase the resolution.
DPI = (sqrt(sqr(width)+sqr(height))/diagonal
Originally Windows monitors assumed monitors were 96 DPI (even though they were usually 72 PPI in reality.) Windows XP added GDI+ allowing resolution-independent text scaling, and Windows Vista added support for High-DPI displays, so more physical pixels could be used to display sharper text and more detailed images. If an app doesn’t indicate it supports High-DPI then it is treated as 96-DPI. Windows 7 expanded on this giving Windows the ability to query the actually pixel density from the monitor. With Windows 10 independent DPI scaling per monitor was added.
When you have a High DPI (>96 DPI) monitor, Windows applies a scale factor so that instead of your content getting really small and hard to read, instead it makes the fonts sharper and the images more detailed.
What does all this mean for you as a developer? 10.3 Rio has new features to help with your High-DPI development with VCL on Windows
Marco Cantu did a write-up on the new Per Monitor v2 support, which is support for a new feature in Windows 10 that allows your app to get the correct DPI support for each screen. The DPI Awareness option is in the project Manifest. New VCL projects default to Per Monitor v2, but you will want to update your existing projects.
The VCL automatically handles most of the resizing for you, but there is a new function in the VCL.Classes unit called GetSystemMetricsForWindow that takes advantage of the new GetSystemMetricsForDPI API (with fallback to the old GetSystemMetrics). It will give you metrics, resolution, and DPI for each window of your app, with understanding based on the monitor it currently appears on.
The TControl (and descendants) also has a GetSystemMetrics method which calls the correct function behind the scenes. This makes it easy to migrate your existing code as calls to GetSystemMetrics will automatically get the updated information. As if that wasn’t enough, the TControl also has a CurrentPPI property.
The new High DPI Image List for Windows is an amazing piece of component magic. It introduces two new components: the TImageCollection and TVirtualImageList. David Millington has a write-up on using these components. They make it really easy for your application to automatically take advantage of higher resolution graphic assets on High-DPI displays. This goes beyond the image list functionality built into Windows to make sure your VCL apps look amazing.
Combine those with the great new VCL Styles available in GetIt, and you have everything you need to make your Windows VCL apps look amazing on any monitor under Windows 10. And these are just some of the new or updated features in 10.3 Rio.
If you have 10.3 Rio, then be sure you are taking advantage of them to make all your applications look their best. If not, then you are missing out.
Download the trial or upgrade today!
DPI is a measure of the density of individual dots that make up an image. These dots may be in print, or other medium, but for now let’s talk about pixels, or the individual elements on the screen that produce images. So DPI is dots per inch, or the count of how many pixels there are within an inch (or 2.54 cm for metric folks, so 254 DPI = 100 DPCM, and 100 DPI = 39.37 DPCM, but we’ll just use DPI).
Since there is technically a difference between a dot of ink on a page, and a pixel on the screen, the correct term for a monitor is Pixels Per Inch (PPI) but DPI is frequently used interchangeably for both. On most monitors there are also sub-pixels, which are the individual color elements (Red, Green, Blue, and maybe White) that make up a single pixel of colors. By varying the intensity of the individual primary colors (sub-pixels) you get a huge variety of colors on the screen.
I met problem with TeeChart. When display resolution is 3840x2160 and zoom 200% TCustomTeePanel.SaveToMetafileEnh doesn't work. It makes picture with big canvas but the image takes just small part of it.
Any chance of getting a a ImageList for SVG Graphics, which renders themself in the resolution needed as a build in Component? In our worklfow, we are currently rendering our SVG Icons to png in various resolutions and switching them as needed. Quite complicated. Having a more modern approach would be awesome.
I added a vote on the TTreeview issue. Thanks!
Ah, yeah, it is a little smaller. You are correct. Still usable.
According to your screenshots of 200%, the min/max/close buttons of the window title bar with the Flat UI and Black Pearl styles are smaller than in Microsoft's own (the default "Windows" style in VCL). The check / radio mark in those styles are smaller than in Microsoft's own. In the default UI of Windows, if the size of check / radio mark is 16px * 16px in 100%, the size will become about 32px * 32px in 200%, otherwise those marks will become too small to see. Someone else has submitted this problem. According to the roadmap, it will be solved in 10.4.
.. it should read 10.3 Rio...
on monitor with higher DPI's Collapse/Expand does not work and the item offset is way to large.
Please see also: https://quality.embarcadero.com/browse/RSP-24440
Nice article - but even in 10.2 Rio there are still some basic problems with High-DPI scaling. For example the standard TTreeView component does not scale correctly. Maybe you could add a TreeView with images to your example on Form 3?
Which Style are you using, and did you set the application manifest to PerMonitorV2? I just tested this with the Flat UI and Black Pearl styles and it looks great. The Application icon looks too small at 200%, but that is because I just used the default. If you are encountering something that looks wrong, make sure you submit a bug at quality.embarcadero.com with details on how to reproduce it though, so it can be fixed.
But... VCL styles work not very well on High DPI. If you set scale of Win10 to 200% or 250% and run an app with VCL style enabled, you will find the text of title bar is too large, buttons of it are too small, checkbox is too small, ......