Hands-On LabHigh DPI with MFC - .NET

Lab version: 1.0.0

Last updated: 5/17/2023

High DPI with MFC - .NET

CONTENTS

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

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

EXERCISE 2: RUN THE APPLICATION AT THE 96 AND 144 DPI SETTINGS........................................6Task 1 - Run the Application at the 144 DPI Setting.............................................................................6

Task 2 - Disable DPI Awareness of the Application..............................................................................7

Task 3 - Run the Application with DPI Awareness Disabled in the 144 DPI Setting..............................8

Task 4 - Compare Demo with DPI Awareness Disabled in the 144 DPI Setting with the 96 DPI Setting.............................................................................................................................................................8

Task 5 - Change Back to DPI Awareness and Run the Application in the 144 DPI Setting....................9

Task 6 - Compare Demo with DPI Awareness Disabled at the 144 DPI setting with the 96 DPI setting...........................................................................................................................................................10

SUMMARY................................................................................................................................................ 10

High DPI with MFC - .NET

Overview

This tutorial is intended for MFC developers who want to make their MFC desktop application high DPI aware. A high DPI aware application can take full advantage of the DPI setting of the computer display without visual side-effects such as blurring, if the application is not high DPI aware.

Today only about half of users actually set their display to the maximum native resolution because they find the text too small at the maximum resolution. However, simply reducing the resolution has some negative side effects, including:

ClearType® renders best at native resolution

Users cannot see high definition content at full fidelity

High-resolution photos cannot be rendered in maximum fidelity

To increase the size of the text, users are encouraged to use the computer display’s native resolution and increase the DPI setting. However, developers need to make their applications DPI aware in order to fully take advantage of this and not introduce unpleasant visual artifacts, as you will observe later in this tutorial. With the release of Windows 7, there will be 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

The tutorial will involve real-time compiling of code and copying code from this document. In the event that a copying error (or any other problem) prevents the application from compiling, you can find fully completed samples in the tutorial package, along with the final source code for each exercise. These samples can be used to unblock compiling errors.

Objectives

In this lab, you will learn how to

Ensure that the computer is in high DPI mode

Enable or Disable the DPI-awareness property in MFC applications using Visual Studio 2010

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

System Requirements

You must have the following items to complete this lab:

High DPI with MFC - .NET

Microsoft Visual Studio® 2010 Beta 2 (or higher)

Windows 7

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.

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

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 screenshot:

High DPI with MFC - .NET

Figure 1Screenshot of Control Panel with Display Section

3. Click the Display heading. The dialog box shown in Figure 2 appears, with the Larger – 150% radio button selected (if not, select it). Please note that if you change the DPI setting, you will need to log off and then back on again for the change to take effect. Since the Normal – 100% setting is equal to 96 DPI, 150% is equal to 144 DPI.

Figure 2Screenshot of the DPI setting of the computer

Exercise 2: Run the Application at the 96 and 144 DPI Settings

High DPI with MFC - .NET

In this exercise, you will run the application at the 96 DPI setting and 144 DPI setting, and then compare the UI elements in each.

Task 1 - Run the Application at the 144 DPI Setting

1. In Visual Studio 2010, open the HighDPIApp.sln solution from Source\Begin\HighDPIApp folder.

2. On the Build menu, select Build Solution.

3. On the Debug menu, select Start Debugging.

The application appears, and its Ribbon Bar looks as shown in Figure 3.

Figure 3The demo running at 96 DPI

Task 2 - Disable DPI Awareness of the Application

1. Right click HighDPIApp project in the Solution Explorer window and select Properties to open the Property Page

2. Navigate to Input and Output by Clicking Configuration Properties->Manifest Tool->Input and Output in the Property Page of the project

3. Change the value of "Enable DPI Awareness" from “Yes” to “No”, as shown in Figure 4.

[Note: The default is “Yes”.]

High DPI with MFC - .NET

Figure 4Property Page of HighDPIApp Project

Task 3 - Run the Application with DPI Awareness Disabled in the 144 DPI Setting

1. Make sure your machine’s DPI is set to 144 (150%) – please refer to Exercise 1 for details.

2. In Visual Studio 2010, open the HighDPIApp.sln solution from Source\Begin\HighDPIApp folder .

3. Make Sure DPI Awareness is Disabled for this project - please refer to Task 2 for details. Or you can open the HighDPApp.sln solution from Source\End\HighDPIApp folder, where DPI awareness is disabled for you already.

4. On the Build menu, select Rebuild Solution.

5. On the Debug menu, select Start Debugging.

The application appears with DPI-awareness disabled. Its Ribbon Bar is shown in Figure 5. The Ribbon Bar appears to have grown horizontally.

High DPI with MFC - .NET

Figure 5The demo running at 144 DPI (with DPI awareness disabled)

Help:

Notice that you may need to clean the solution and then rebuild the solution in Visual Studio 2010 in order to see the update after you disable or enable the DPI awareness flag in the project properties.

Task 4 - Compare Demo with DPI Awareness Disabled in the 144 DPI Setting with the 96 DPI Setting

1. Compare Figure 3 and Figure 5

The obvious UI issue is that the text becomes blurry in the 144 DPI setting, which is what we want to avoid. The following table summarizes the appearance of the application’s UI at 144 DPI compared to 96 DPI.

UI Element Appearance at 144 DPI with DPI Awareness disabled

Size of the window frame Much larger

Size of the buttons Larger

Size of the text Larger

Blurriness Yes

Help:

Notice that the application is blurry. This is because the application is incompatible with the default scaling offered by DPI virtualization.

With DPI set to 144, the operating system automatically enables DPI virtualization. When your application relies solely on DPI virtualization to scale its UI elements (e.g. it is not DPI aware), it might produce visual artifacts due to potential incompatibility with the DPI scaling.

Task 5 - Change Back to DPI Awareness and Run the Application in the 144 DPI Setting

1. Make sure your machine’s DPI is set to 144 (150%) – please refer to Exercise 1 above for details.

2. In Visual Studio 2010, open the HighDPIApp.sln solution from Source\Begin\HighDPIApp folder.

High DPI with MFC - .NET

3. Make Sure DPI Awareness is Enabled for this project - please refer to Task 2 for details but change the value of "Enable DPI Awareness" from “No” to “Yes”.

4. On the Build menu, select Rebuild Solution.

5. On the Debug menu, select Start Debugging.

The DPI aware application appears, and the Ribbon Bar is shown in Figure 6. Notice how the entire Ribbon Bar still fits on the screen.

Figure 6The demo at 144 DPI (with DPI Awareness Enabled)

The following table summarizes the appearance of the application’s UI at 144 DPI.

UI element DPI-aware application on a computer set to 144 DPI

Size of the window frame Larger

Size of the buttons Larger

Size of the text Larger

Blurriness No

Help:

Notice that the application is NOT blurry. This is because the application has declared DPI awareness and thus Windows disabled DPI virtualization to avoid producing visual artifacts due to potential incompatibility with the DPI scaling. The font is larger and clear, as expected. MFC automatically scales the Ribbon controls when the application declares DPI awareness.

Task 6 - Compare Demo with DPI Awareness Disabled at the 144 DPI setting with the 96 DPI setting

1. Compare the non-DPI aware application with the DPI-aware application in Figure 7

High DPI with MFC - .NET

Figure 7Comparison of non-DPI aware application (top) and DPI-aware application (bottom)

Summary

You have successfully completed the high DPI MFC tutorial. You have learned how to enable DPI awareness in a MFC application and observed the differences in output when DPI awareness is and is not enabled. You have also seen a new feature of MFC in Visual Studio 2010, which added a DPI awareness manifest attribute to the project for your application. The feature is enabled by default, and helps you to write DPI aware applications. To make your application truly high DPI aware, you should create multiple resolution versions of your images, bitmaps, and icons.