High DPI with MFC - .NET
Hands-On Lab
High DPI with MFC - .NET
Lab version: 1.0.0
Last updated: 12/3/2010
Contents
Overview 3
Exercise 1: Ensure That the Computer Is in High DPI Mode 4
Task 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 6
Task 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
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:
· 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:
Figure 1
Screenshot 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 2
Screenshot of the DPI setting of the computer
Exercise 2: Run the Application at the 96 and 144 DPI Settings
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 3
The 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”.]
Figure 4
Property 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.
Figure 5
The 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 disabledSize 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.
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 6
The 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 DPISize 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
Figure 7
Comparison 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.