Post on 07-Aug-2020
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