• Article

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.
  4. 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.

  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.
  6. 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)

Note:
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
  2. 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
Note:
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.

  6. 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)

  7. 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
Note:
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)

< previous | next >

Contents