Creating High DPI Ribbons for WinForms .NET 5

ComponentOne 2020v3 release focuses on bringing the most in-demand ComponentOne controls to the .NET 5 framework and adds new exciting features to WinForms Edition.

One such feature is high DPI support in C1Ribbon thanks to C1Icon.

C1Ribbon: Support for High DPI

The new C1Ribbon control uses the set of C1Icon objects to define icons, which should be shown in individual Ribbon elements in different element states or different element sizes. For example, you can specify a small symbolic icon for 16x16 element size, a bigger png image for 32x32 element size, and optional vector icons to use in HighDPI modes, which might require big images of different sizes.

C1Icon is a series of classes that allow specifying monochromatic icons that can be tinted and resized. These icons are thought to be used internally in the controls and allow customers to specify different icons through the API of the controls. The possible sources are Fonts, Vectors (Path or SVG), and Images.

With the latest release, support for high-resolution DPI monitors is now a built-in part of C1Ribbon for WinForms. With high DPI support, it is now possible to develop WinForms applications that can be viewed on high DPI devices without loss of quality, using C1Ribbon.

This means that when the application runs on a system where the scaling settings are different than 100%, it will be scaled properly.

With High DPI	Without High DPI

 

However, before we proceed further into details of how to enable scaling, let’s see in brief what DPI is and why it is important.

DPI & Display Scale Factor

Dots Per Inch (DPI), which technically means printer dots per inch, is a measure of spatial printing. In particular, it is the number of individual dots that can be placed in a line within the span of 1 inch.

Most legacy desktop UI frameworks have built-in assumptions that the display DPI will not change during the lifetime of the process. Still, this assumption no longer holds true, as display DPIs now commonly change several times in scenarios like multiple-monitor setups where each display has a different scale factor, connecting via Remote Desktop from a high DPI laptop/tablet to a low-DPI device, etc.

In such scenarios, if DPI scaling is not done, the applications appear blurry and/or incorrectly-sized.

Enabling Scaling

To enable scaling, all you have to do is declare your application as DPI-aware, and C1Ribbon will scale its UI elements in accordance with the current DPI settings automatically.

Depending on the targeted .NET framework, there is more than one way to enable/disable the scaling.

If the target framework is .NET v4.7/higher and you are running it on Windows operating systems starting with the Windows 10 Creators Update, you have to add an app.manifest file and/or an app.config file with several lines of code. They are discussed in detail here: MSDN.

However, if the target framework is .NET Core 3.0/higher, then app.manifest and app.config files are not needed. Beginning .NET Core 3.0, Microsoft introduced a new way to set a high DPI mode for Windows Forms. A static method called Application.SetHighDpiMode(HighDpiMode), where HighDpiMode is an enumeration and has the following values: DpiUnaware, SystemAware, PerMonitor, PerMonitorV2, and DpiUnawareGdiScaled.

DPI Awareness Mode

The DPI Awareness Mode specifies the way an application is displayed when shown on a high-resolution screen.

DPI Awareness: Enabled	DPI Awareness: Disabled

 

The following tables share the various values available for ‘HighDpiMode’ enumeration.

Conclusion

As display technologies have evolved, starting from not needing DPI scaling to scaling becoming more and more critical, thousands of applications were written using WinForms, WinForms as technology has grown. Therefore, now WinForms has a good High DPI support and, with C1Ribbon, you can create the latest Microsoft Office 2019 style applications seamlessly.