Windows DPI Scaling and Icon Support
DataFlex provides support for dots per inch (DPI) scaling of icons used in Codejock Toolbars, Menus, and Context Menus.
DPI Scaling Factors
Windows applies different DPI scaling factors according to the pixel density of your display:
- 96 DPI = 100% scaling
- 120 DPI = 125% scaling
- 144 DPI = 150% scaling
- 192 DPI = 200% scaling
This means that when you run Windows on a monitor with 192 dots per inch, your application (including icons) should be scaled by 200%. It will occupy twice as many pixels, but the pixel density is twice as high, thus the physical size remains unchanged. Without DPI Scaling, your application would appear progressively smaller as your monitor's pixel density increases.
Scaling Factor and Icon Selection
Windows, along with the Codejock Commandbars, supports the ability to display either “small” icons or “large” icons inside toolbars and menus. The actual size of a small or a large icon depends on the Windows DPI scaling factor. When there is no DPI scaling (i.e., 100%), a small icon is 16x16 pixels, and a large icon is 32x32 pixels.
DPI Scaling works with icons by loading icons of the correct size to match the current scaling factor. The Codejock commandbars simplify the range of icon sizes so that only three sizes are necessary for each icon in your application.
The following table shows the mapping between each Windows DPI scaling factor and the icon size that will be selected for Codejock menus and toolbars.
| DPI Scale | Small Icon | Large Icon |
|---|---|---|
| 100% | 16x16 | 32x32 |
| 125% | 24x24 | 48x48 |
| 150% | same | same |
| 175% | 32x32 | 64x64 |
| 200% | same | same |
Note: The above pertains to toolbars and menu bars, which is where most of the images are used. Images used in other places, such as Codejock’s status bar and tabbed workspace tab buttons, may use other sized images, such as 20x20. In such cases, you should provide those images.
How to Support Icon Scaling in Toolbars and Menus
-
The first thing you need to do is to use icon files (not bitmaps) for each image in your toolbars and menus. Icon files support embedded icon images of various sizes, and the closest matching size will be automatically selected and applied to your toolbars and menus. Bitmaps (i.e., .bmp files) do not support this.
-
Each icon used by your toolbars and menus must now contain at least three different sizes, according to the icon size mapping table in the previous section. For example, if your command bars use small icons, then each icon file must contain 16x16, 24x24, and 32x32 pixel icon images.
-
You must set
[pbAutoResizeIcons](../VdfClassRef/Windows/cCJCommandBarSystem-Property-pbAutoResizeIcons.md)to True in your[cCJCommandbarSystem](../VdfClassRef/Windows/cCJCommandBarSystem.md)object.
The set of icons provided with the DataFlex Application Framework contains icons of each size required for DPI scaling. The icons are provided in two sets: a modern "flat" style using few colors and a "3D full color" style. The default set is the modern "flat" set of icons, which comprises the full set of icon images used by our class library and our sample applications. You can switch to the full color icons by copying them into your workspace’s Bitmaps folder. The "full color" icons are located in the “Bitmaps\DataFlex 2016 Bitmaps” subfolder from where you installed DataFlex.
Producing new icon artwork requires some special skills and is generally performed by a graphic artist. However, comprehensive sets of professionally designed icons can be obtained on the Internet at a relatively low cost.