Hands-On LabHigh DPI – .NET

Lab version: 1.0.0

Last updated: 5/24/2023

High DPI - .NET

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: ENSURE THAT THE COMPUTER IS IN HIGH DPI MODE.................................................4Task 1 - Check that the module computer is set to the 144 DPI setting..............................................4

EXERCISE 2: RUN THE APPLICATION AT THE 144 DPI SETTING........................................................6Task 1 - Run the Application at the 144 DPI Setting.............................................................................7

Task 2 - Compare the UI at the 144 DPI Setting to the 96 DPI Setting.................................................7

EXERCISE 3: MODIFY THE FORM'S AUTOMATIC SCALING MODE.....................................................9Task 1 - Modify the AutoScaleMode to Font Scaling...........................................................................9

Task 2 - Modify the AutoScaleMode to DPI Scaling...........................................................................10

SUMMARY................................................................................................................................................ 12

2

High DPI - .NET

Overview

Only about 55% of users actually set their display to the maximum resolution. Most users who use lower resolution do so because they find the text too small at the maximum resolution. However, simply reducing the resolution has some negative side effects, including:

ClearType® does not render correctly at non-native resolution

Users cannot see high definition content at full fidelity

High-resolution photos cannot be rendered in maximum fidelity in these scenarios

To increase the size of the text, users are encouraged to increase the DPI setting to take advantage of their display at high fidelity, rather than reduce the resolution and suffer the negative side effects. However, while this solves the problem with loss of fidelity, applications that are not DPI-aware often have some unpleasant visual artifacts, as you will experience later in this module.

With the release of Windows 7, there is a greater level of adoption of high DPI for the following reasons:

More OEMs are expected to start shipping laptops with high DPI settings preconfigured

Clean installations of Windows 7 have capable devices preconfigured to high DPI

The Control Panel UI for high DPI is easier to find

Adding high DPI support to your application is more important than ever. The following exercises take a basic Win32 application and show you how to make it DPI-aware.

Objectives

In this lab, you will learn how to:

Ensure that the computer is in high DPI mode

Compare UI elements at the 144 DPI setting and the 96 DPI setting

Modify the form's automatic scaling mode

System Requirements

You must have the following items to complete this lab:

Microsoft Visual Studio® 2008

Windows 7

3

High DPI - .NET

Exercise 1: Ensure That the Computer Is in High DPI Mode

In this exercise, you ensure that the computer running Windows 7 is in high DPI mode at the 144 DPI setting. To avoid the log off and log on processes, you do not make any changes to the DPI setting in this exercise.

Task 1 - Check that the module computer is set to the 144 DPI setting

1. On the Start menu, click Control Panel.

2. In the Search text box at the upper-right corner of Control Panel, type display, and a list of results appears, as shown in the following screen shot:

4

High DPI - .NET

3. Click the Display heading, and you should see a dialog box that looks like the following screen shot, with the Larger – 150% radio button selected (if not, select it). This indicates that the module computer is set to the 144 DPI setting, because 150% of the normal DPI (96 DPI) is equal to 144 DPI.

5

High DPI - .NET

Exercise 2: Run the Application at the 144 DPI Setting

In this exercise, you run the application at the 144 DPI setting, and then compare the UI elements to those at the 96 DPI setting. Initially, the application's form's AutoScaleMode property is configured to None, so no scaling will be done.

6

High DPI - .NET

Task 1 - Run the Application at the 144 DPI Setting

1. In Visual Studio 2008, open the HighDPIApp.sln solution.

2. Set the HighDPIManagedApp to be the startup project.

3. On the Build menu, click Build Solution.

4. On the Debug menu, click Start Debugging. The application appears, as shown in the following screen shot:

Task 2 - Compare the UI at the 144 DPI Setting to the 96 DPI Setting

The following screen shot shows how the UI of the application looks when running at the 96 DPI setting.

1. Now compare this UI to the UI from the 144 DPI setting:

The following table summarizes the appearances of the application UI at the 144 DPI setting as compared to at the 96 DPI setting.

UI element Appearance at 144 DPI

Size of the window frame Same

7

High DPI - .NET

Size of the buttons Same

Size of image box Same

Size of the text Larger

Clipped text on the buttons Yes

Clipped text in the window Yes

Aspect ratio preserved Yes

Help

Notice that the text is clipped, and the sizes of the buttons, image box, and window frame remain small. This is caused by the form's AutoScaleMode property, which is set to None. This setting means no automatic scaling will be done on the form and its controls so they remain in their original size.

In order to scale the sizes of all UI elements of the application, you must to modify the AutoScaleMode property of the application's form to different values as demonstrated in the following exercise.

8

High DPI - .NET

Exercise 3: Modify the Form's Automatic Scaling Mode

In this exercise, you modify the AutoScaleMode property of the application's form and observe its effect on the different UI element displayed by the application.

For this exercise, continue using the project file from the previous exercise.

Task 1 - Modify the AutoScaleMode to Font Scaling

1. Open the DemoApp.cs(C#) or DemoApp.vb(Visual Basic) designer and make sure the form is selected.

2. In the Properties window, locate the AutoScaleMode property and modify its value to Font.

Save the file, recompile, and then run the application. The application appears as shown in the following screen shot, with the UI elements scaled according to font size:

UI element Appearance at 144 DPI

Size of the window frame Larger

Size of the buttons Larger

Size of image box Larger

9

High DPI - .NET

Size of the text Larger

Clipped text on the buttons No

Clipped text in the window No

Aspect ratio preserved No

Help

Notice that the text is no longer clipped in any of the UI elements, and the sizes of the buttons, image box, and window frame are increased. However, if you observe the aspect ratio of these enlarged UI elements, you'll notice (mainly around the image box) that the aspect ratio has changed. This means that if the image were stretched to fit the whole image box, it would be squished.

When you set the form to use font scaling, everything is scaled by the enlarged size of the fonts caused by the increased DPI setting, without considering possible changes of the aspect ratio. That's why this scaling is recommended for controls containing text (or forms containing such controls).

Task 2 - Modify the AutoScaleMode to DPI Scaling

1. Return to the DemoApp.cs (C#) or DemoApp.vb (Visual Basic) designer and make sure the form is selected.

2. In the Properties window, locate the AutoScaleMode property and modify its value to DPI.

3. Save the file, recompile, and then run the application. The application appears as shown in the following screen shot, with the UI elements scaled according to DPI settings.

10

High DPI - .NET

UI element Appearance at 144 DPI

Size of the window frame Larger

Size of the buttons Larger

Size of image box Larger

Size of the text Larger

Clipped text on the buttons Yes, but less

Clipped text in the window Yes, but less

Aspect ratio preserved Yes

Help

Notice that the text is clipped (although less that before), and the sizes of the buttons, image box, and window frame are increased while preserving their aspect ratio.

When you set the form to use DPI scaling, everything is scaled by the higher DPI value, which is currently the same horizontally and vertically. This ensures preservation of aspect ratio and avoids image squishing. That's why this scaling is recommended for controls displaying charts or other graphics, so that they always occupy a certain percentage of the screen.

11

High DPI - .NET

Summary

In this module, you learned why it is important to configure auto-scaling of your application according to its contents and you performed the following exercises:

Tested your application at the 144 DPI setting

Compared the UI elements at the 144 DPI setting to those at the 96 DPI setting

Used auto-scaling by modifying the AutoScaleMode property of your application's form to make it compatible with high DPI settings

The AutoScaleMode property specifies the current automatic scaling mode of the control:

Scaling by Font is useful if you want to have a control or form stretch or shrink according to the size of the fonts in the operating system, and should be used when the absolute size of the control or form does not matter

Scaling by DPI is useful when you want to size a control or form relative to the screen. For example, you may want to use DPI scaling on a control displaying a chart or other graphic so that it always occupies a certain percentage of the screen

To make your application truly high-fidelity DPI-aware, you should create multiple resolution versions of your images, bitmaps, icons, and toolbar buttons. Then you will have appropriately scaled images for different display resolutions without having the blurriness or pixilation associated with scaling small bitmaps. With those high-fidelity assets, you can select the appropriate bitmap based on the closest match to the current DPI setting and then scale to fit the precise setting.

12