How to create/modify UI to work in high DPI display
Posted on July 1, 2016 | By Mohd Imran
Contents
Introduction
In the following post, we will discuss how to create or modify the UI to work in a high DPI display. But before we start with the steps on how to do so, we should discuss what is high DPI display and why should we care about it.
Impact of high DPI
With the introduction of high resolution monitors, more and more users are switching the way they display the text and other items. This is because at high resolution, the normal font size use by the OS appears to be smaller on those monitors. As such, users would change the display to show those text to be bigger so that they could read the text more clearly.
As such, a UI design that work with a normal DPI might not display properly in a higher DPI setting because of the change and as a result, we have to take the following steps to properly create the UI that would work in both low DPI setting and high DPI setting.
Steps
Form setup
The first step to making the UI to properly work in a high DPI display is to make sure to change the AutoScaleMode property to DPI instead of leaving it to the default value which is Font.
Hard-coded values for positions
If you have any of the following values hard-coded:
- Size
- Height
- Width
- Location
it is required that you use the following method to calculate the x and y axis values as the original hard-coded value may cause conflict in the high DPI display environment.
- private int CalcNewX(int x)
- {
- return BCE.Data.Convert.ToInt32(Math.Round((AutoScaleDimensions.Width * x / 96)));
- }
- private int CalcNewY(int y)
- {
- return BCE.Data.Convert.ToInt32(Math.Round((AutoScaleDimensions.Height * y / 96)));
- }
Use LabelControl
Usually using a normal System.Windows.Forms.Label control to display text is enough in a normal DPI situation. However, this is sometimes not true for displaying those texts in a high DPI display environment. This is caused by the Label component’s AutoSize property being set to false, as sometimes you would wish to specify a specific width for the control. As such it is advised that to use the DevExpress LabelControl component to display text in the UI as it has been tested to properly display the text in whatever DPI display environment used.