Hands-On Lab

High DPI –Native

Lab version: 1.0.0

Last updated: 12/3/2010

High DPI - Native

2

CONTENTS

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

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

EXERCISE 2: RUN THE APPLICATION AT THE 144 DPI SETTING ...................................................... 6 Task 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: MARK THE APPLICATION AS DPI-AWARE ................................................................... 9 Task 1 - Add the DPI-Aware Manifest Entry to the Application ......................................................... 9

Task 2 - Compare the UI Elements at the 144 DPI Setting to Those at the 96 DPI Setting ................ 10

EXERCISE 4: FIX THE BUTTON SIZE AND LAYOUT .......................................................................... 11 Task 1 - Scale the Button Size ......................................................................................................... 11

Task 2 - Scale the Button Layout .................................................................................................... 13

EXERCISE 5: FIX THE WINDOW SIZE AND CLIPPED TEXT .............................................................. 14 Task 1 - Scale the Window Properly ............................................................................................... 14

Task 2 - Replace TextOut with the default theme text API .............................................................. 14

SUMMARY ............................................................................................................................................ 15

High DPI - Native

3

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

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

Mark the application as DPI-aware

Scale the button size and layout

Scale the window size and use the default theme text API for text

High DPI - Native

4

System Requirements

You must have the following items to complete this lab:

Microsoft Visual Studio® 2008

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

High DPI - Native

5

High DPI - Native

6

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.

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.

High DPI - Native

7

Task 1 - Run the Application at the 144 DPI Setting

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

2. Set the HighDPINativeApp 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:

High DPI - Native

8

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 Larger

Size of the buttons Larger

Size of the text Larger

Clipped text on the buttons Yes

Clipped text in the window Yes

Blurry effect Yes

Help

Notice that the application is blurry, the text is clipped, and the sizes of the buttons and window frame

are increased. 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. Microsoft

introduced the concept of DPI virtualization Windows Vista®. It is also known as DPI scaling, which

means to scale the text and window size of the applications that are not DPI-aware.

When your application relies solely on DPI virtualization to scale its UI elements, it might produce

visual artifacts due to potential incompatibility with the DPI scaling. The preceding sample

demonstrated that. To fix the problem, you need to opt out of the DPI virtualization programmatically

by declaring your application as DPI-aware.

For applications you have already deployed, you can manually opt them out of the automatic DPI

virtualization. For more information about how to do this, see the Appendix: Manually Opting Out of

DPI Virtualization.

High DPI - Native

9

Exercise 3: Mark the Application as DPI-

Aware

In this exercise, you mark the application as DPI-aware to opt out of the DPI virtualization. To do so, first

add the DPI-aware manifest entry to the application. This manifest entry tells Windows that the

application is DPI-aware, so Windows disables DPI virtualization. Then run the application, compare the

UI at the 144 DPI setting to the UI at the 96 DPI setting, and finally jot down any UI issues.

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

Task 1 - Add the DPI-Aware Manifest Entry to the Application

1. On the Visual Studio Project menu, click HandsOnLab Properties.

2. In the HandsOnLab Property Pages dialog box, expand the Configuration Properties, expand the

Manifest Tool, and then click Input and Output.

3. In the right pane, in the Additional Manifest Files text box, type DeclareDPIAware.manifest, as

shown in the following screen shot, and then click OK.

High DPI - Native

10

Help

The project files for this module contain a file named DeclareDPIAware.manifest. The

following is the file content:

XML

<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0"

xmlns:asmv3="urn:schemas-microsoft-com:asm.v3" >

<asmv3:application>

<asmv3:windowsSettings

xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">

<dpiAware>true</dpiAware>

</asmv3:windowsSettings>

</asmv3:application>

</assembly>

4. Recompile the application and run the application. The application appears as shown in the

following screen shot:

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

The following table shows the UI elements of the application at the 144 DPI setting as compared to

those at the 96 DPI setting. Notice that adding the manifest entry to the application disables the DPI

virtualization, and thus fixes the blurry issue and keeps the size of the window and buttons the same as

those at the 96 DPI setting.

UI element Appearance at 144 DPI

Size of the window frame Same

High DPI - Native

11

Size of the buttons Samer

Size of the text Larger

Clipped text on the buttons Yes

Clipped text in the window Yes

Blurry effect Fixed

Exercise 4: Fix the Button Size and

Layout

In this exercise, you fix the button size and layout. To do so, scale the size of the buttons from raw pixels

to relative pixels to appropriately display the text size, and then scale the layout of the buttons from raw

pixels to relative pixels to fix the button layout.

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

Task 1 - Scale the Button Size

1. Open the HandsOnLab.cpp file. In the DemoApp::CreateChildWindows method, find the

section where button initialization is specified.

2. Add the following code (shown in bold) to scale the size of all three buttons:

C++

// Now set up the size of the buttons that we will create.

SIZE buttonSize = { 60, 26 };

g_metrics.ScaleSize(&buttonSize);

Help:

The g_metrics variable is an instance of the CDPI class, and the g_metrics.ScaleSize method

scales from raw pixels to relative pixels.

High DPI - Native

12

3. Save the file, recompile, and then run the application. The application appears as shown in the

following screen shot, with the appropriately scaled button size:

High DPI - Native

13

Task 2 - Scale the Button Layout

1. In the DemoApp::CreateChildWindows method, add the following code (shown in bold):

C++

// Button 1 position.

POINT ptButton1Pos = { 10, 55 };

g_metrics.ScalePoint(&ptButton1Pos);

// Button 2 position is 75 pixels to the right of Button 1.

POINT ptButton2Pos = { 85, 55 };

g_metrics.ScalePoint(&ptButton2Pos);

// Button 3 is 75 pixels to the right of button 2.

POINT ptButton3Pos = { 160, 55 };

g_metrics.ScalePoint(&ptButton3Pos);

Help

The g_metrics.ScalePoint method scales points from raw pixels to relative pixels.

2. Save the file, recompile, and then run the application. The application should look like the

following screen shot, with the appropriately scaled button size and layout:

High DPI - Native

14

Exercise 5: Fix the Window Size and

Clipped Text

In this exercise, you fix the window size and clipped text. To do so, scale the window size to the current

DPI setting, and then use the default theme text to fix the clipped text. To scale the window properly,

use the ScaleX and ScaleY functions of the CDPI class to convert raw pixels to relative pixels to scale the

window size to the current DPI setting.

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

Task 1 - Scale the Window Properly

1. In the DemoApp::Initialize function, find the call to the CreateWindow function, and then

ensure that the X and Y parameters that are passed in are scaled by using the respective

g_metrics.ScaleY and g_metrics.ScaleY methods, as shown in the following bold code.

C++

// Create window.

m_hwnd = CreateWindow(

TEXT("HighDPIDemoApp"),

TEXT("High DPI Demo App"),

WS_OVERLAPPEDWINDOW,

CW_USEDEFAULT,

CW_USEDEFAULT,

g_metrics.ScaleX(420),

g_metrics.ScaleY(200),

NULL,

NULL,

HINST_THISCOMPONENT,

this

);

Task 2 - Replace TextOut with the default theme text API

1. In the DemoApp::OnRender method, comment out the TextOut function call.

2. Uncomment the code for the theme text drawing. When you are done, the code should look

like this:

C++

High DPI - Native

15

// TextOut(ps.hdc, rcText.left, rcText.top, szText, lstrlen(szText));

// This is the recommended way of using the theme API to draw text.

// You will un-comment this during the exercise to see how to draw

// properly themed text.

OffsetRect(&rcText, g_metrics.ScaleX(8), g_metrics.ScaleY(8));

HTHEME hTheme = OpenThemeData(hWnd, VSCLASS_TEXTSTYLE);

if (hTheme)

{

DrawThemeText(hTheme, ps.hdc, TEXT_BODYTEXT,

0, szText, -1, DT_SINGLELINE, 0, &rcText);

CloseThemeData(hTheme);

}

else

{

// Visual styles are not enabled.

DrawText(ps.hdc, szText, -1, &rcText, DT_SINGLELINE);

}

3. Save the file, recompile, and then run the application. The application appears with all UI issues

resolved, as shown in the following screen shot.

Summary

High DPI - Native

16

In this module, you learned why it is important to make your application DPI-aware and you performed

the following exercises:

Marked your application as DPI-aware by using the manifest entry

Tested your application at the 144 DPI setting

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

Scaled the button size and layout, scaled the window size, and used the default theme text API

for text

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.