Search website

How to create/modify UI to work in high DPI display

Posted on July 1, 2016 | By Mohd Imran

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.

Observe the text "9 point Segoe UI". This is at 100% for resolution 1920x1080

Observe the text “9 point Segoe UI”. This is at 100% for resolution 1920×1080

This is at 150% of the same resolution. The 9 point Seqoe UI text can be seen as bigger now

This is at 150% of the same resolution. The 9 point Seqoe UI text can be seen as bigger now

At 200%. The text is at its largest in the same resolution

At 200%. The text is at its largest in the same resolution

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.

Change the form's AutoScaleMode to DPI

Change the form’s AutoScaleMode to DPI

Hard-coded values for positions

If you have any of the following values hard-coded:

  1. Size
  2. Height
  3. Width
  4. 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.

Code Snippet
  1. private int CalcNewX(int x)
  2. {
  3.     return BCE.Data.Convert.ToInt32(Math.Round((AutoScaleDimensions.Width * x / 96)));
  4. }
  6. private int CalcNewY(int y)
  7. {
  8.     return BCE.Data.Convert.ToInt32(Math.Round((AutoScaleDimensions.Height * y / 96)));
  9. }

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.

The label displays properly at normal DPI display

The label displays properly at normal DPI display

Increasing the DPI display percentage caused the label to be truncated in this UI

Increasing the DPI display percentage caused the label to be truncated in this UI

Posted in Guide