概述
只有約 55 ％的用戶實際設置的顯示器的最大分辨率 . 大多數用戶使用低分 辨率，因為在高分辨率下看到的文字比較小 . 但是 , 減少了一些分辨率帶來的負面影響 , 包括 :
• ClearType 不提供正確的非本地的分辨率
• 用戶 無法在精確的內容下看到高分辨率的內容
• 高分辨率的照片，在這些情況下 不能提供的最高保證度
為了提高文字的大小 , 鼓勵用戶增加 DPI 設置要顯示在他們 的高逼真度的優勢 , 而不是降低分辨率 , 會受到負面影響 . 但是 , 雖然這解決了與高保 真流失的問題 , 應用程序在沒有 DPI 感知的情況下經常有一些不合適的效果 , 您以後會遇 到此模塊 .
隨著 Windows 7 的發行 , 將更大程度的采用高 DPI ，理由如下 :
• 更多的 OEM 廠商預計將開始銷售高 DPI 設置配置的筆記本電腦
• Windows 7 的清潔功能的設備安裝已預先配置為高 DPI
• 用戶界面的控制面板的高 DPI 是容易找到
添加高 DPI 的支持對您的應用程序比以往 更重要 . 下面的練習需要一個基本的 Win32 應用程序，並且告訴你如何使 DPI 感知 .
目標
在本次實驗中 , 您將學習如何 :
• 確保計算機處於高 DPI 模式
• 比較在 144 DPI 和 96 DPI 下設置的用戶界面元素
• 標記為應用程序 DPI- 感知
• 縮放按鈕大小及布局
• 縮放窗口大小，使用默認的主題文字文本的 API
系統要求
您需要擁有以下程序才能完成實驗 :
• Microsoft Visual Studio 2008
• Windows 7
練習 #1: 確保計算機是在高 DPI 模式
在練 習中 , 確保您計算機運行 windows 7 是設置在 144 的高 DPI 模式 . 為了避免注銷和登陸 進程 , 在練習當中您不能對 DPI 進行任何的更改設置 .
Task 1: 檢查計算機是否設 置 144 DPI
1. 打開開始菜單在 , 單擊控制面板
2. 在控制面板的右上角的檢 索文字框裡 , 輸入顯示 , 和一個搜索列結果展現出來 , 如下面屏幕快照 :
3. 單擊顯示 , 您將會看到一個對話框如下圖 , 較大的 – 150% 單選按鈕 ( 如果不是 , 請選擇它 ).
這表明，該單元的計算機被設置為 144 DPI, 因為 150% 正常的 DPI (96 DPI) 相當於 144 DPI.
練習 #2: 運行在應用程序 設置 144DPI
在本次練習中 , 運行在 144 DPI 設置應用程序，然後比較 UI 元素的 96 DPI 設置的 .
任務 1: 運行在應用程序設置 144DPI
1. 在 Visual Studio 2008 中 , 打開解決方案 HighDPIApp.sln.
2. 把 HighDPINativeApp 設置為啟動項 .
3. 在生成菜單中 , 單擊 生成解決方案 .
4. 在調試菜單中 , 單擊 開始調 試 .
顯示應用程序 , 如下圖 :
任務 2: 比較在 144DPI 的 UI 設置的 96 DPI 設置
下面截圖顯示了在設置 96 DPI 後如何運行應用程序界面
1. 現在從 144 DPI 設置比較此用戶界面的 UI ：
下表總結了 144DPI 應用程序 界面設置的外管比較，在 96 DPI 設置 .
UI 元素 在144 DPI 外觀 窗體大小 較大 按鈕大小 較大 文本大小 較大 按鈕上缺少的文本 是 窗口 上缺少的文本 是 模糊效果 是
幫助
請注意 , 應用程序模糊 , 文本被截斷按鈕大小和 窗體的增強 和按鈕與窗口的增加 . 這是因為應用程序是默認的不縮放由 DPI 提供的虛擬化 .
DPI 設置為 114, 操作系統自動啟動 DPI 虛擬化 , 微軟推出了 Windows Vista 虛 擬化 DPI 的概念 . 它被稱為 DPI 擴展 , 這意味著文字的比例和應用程序的窗口大小不是 DPI 感知 .
當您的應用程序依賴在 DPI 虛擬化縮放該 UI 元素 , 它會產生因與 DPI 縮放不兼容的 視覺效果 . 在前面的示例表明。要解決該問題，您需要退出，聲明您作為 DPI 感知的應用 程序 .
您已部署的應用程序 , 可以手動選擇退出自動 DPI 虛擬化 . 如需要更多執 行此操作的信息 , 參閱附錄 : 手動選擇退出 DPI 虛擬化 .
練習 #3: 應用程序標記 DPI- 感知
在本練習中 , 應用程序標記 DPI 感知選擇 DPI 進行虛擬化處理 . 為此 , 首先添加 DPI- 感知進入應用 . 這個清單項告訴 Windows 應用程序 DPI 感知 , 因此 Windows 禁用 DPI 虛擬化 . 運行應用程序 , 比較 144DPI 設置的 UI 元素再對比 96DPI 的設置 , 最後記錄 UI 問題 .
在此練習中 , 將繼續使用之前的項目文件 .
任務 1: 在應用程序添加 DPI- 感知清單項
1. 在 Visual Studio 項目菜單 , 單擊 HandsOnLab 屬性 .
2. 在 HandsOnLab 屬性頁對話框 , 展開配置屬性 , 展開清單工 具 , 然後 單擊 Input and Output.
3. 在右窗格 , 在附加清單文件文本框 , 類型 DeclareDPIAware.manifest, 如下圖 , 單擊 OK.
幫助
此模塊包含一個 名為 DeclareDPIAware.Manifest 的項目文件 . 以下是文件內容 :
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. 重新編譯並運行應用程序 . 應用程序如下圖顯示 :
任務 2: 比較在 144DPI 和 96DPI 設置的用戶界面
下表顯示了在應用程序 的用戶界面比較 144DPI 設置的 UI 元素再對比 96DPI 的設置。請注意，清單項添加到應用 程序禁用 DPI 虛擬化，從而修正了模糊的問題，保持窗口和按鈕，截至 96 DPI 設置相同大 小 .
UI 元素 144 DPI 外觀 窗 體大小 相同 按鈕大小 相同 文本大小 較大 按鈕上缺少 的文本 是 窗口上缺少的文本 是 模糊效果 不變
練習 #4: 修復按鈕的大小和布局
在本練習中 , 您修復按鈕大小和布局 . 為此 , 比例從 原始像素按鈕的大小，適當地相對像素顯示文字大小 , 然後比例從原始像素按鈕的布局相對 固定像素的按鈕布局 .
對於此練習，繼續使用以前的項目文件 .
任務 1: 按 鈕大小比例
1. 打開 the HandsOnLab.cpp 文件 . 在 DemoApp::CreateChildWindows 方法 , 找到其中部分指定按鈕初始化 .
2. 添加下述代碼（以粗體顯示）按比例設置 三個按鈕的大小 :
C++
// Now set up the size of the buttons that we will create.
SIZE buttonSize = { 60, 26 };
g_metrics.ScaleSize(&buttonSize);
幫助
該 g_metrics 變量是 CDPI 類的一個實例 , 並從原始像素 g_metrics.ScaleSize 方法擴展到 相對像素 .
3. 保存文件 , 重新編譯 , 並運行應用程序 . 應用程序在下面的截圖中 可以看到 , 適當比例的按鈕大小 :
任務 2: 縮放按鈕布局
1. 在 DemoApp::CreateChildWindows 方法 , 添加下面代碼 ( 以粗體顯示 ):
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);
幫助
該 g_metrics.ScalePoint 方法 , 該 g_metrics.ScalePoint 方法尺度的像素點的相對像素 .
保存文件 , 重新編譯 , 並運行應用程序 . 應用程序在下面的截圖中可以看到 , 適當比例的按鈕大小和布局 :
練習 #5: 修復窗口大小和文本截斷
在本次學習中 , 您修復窗口的大小和截 斷的文字 . 為此 , 窗口大小比例到當前 DPI 設置，然後使用默認主題的文本修復被截斷的 文字 . 窗口比例適當 , scaleX 和使用的 CDPI 類 ScaleY 函數轉換的像素，像素的相對比 例的窗口大小到當前 DPI 設置 .
在此練習中 , 將繼續使用之前的項目文件 .
任務 1: 窗口屬性比例
1. 在 DemoApp::Initialize 函數 , 找到叫 CreateWindow 函數 , 然後確保 X 和 Y 傳遞的參數是通過使用規模分別 g_metrics.ScaleY 和 g_metrics.ScaleY 方法，如下面的代碼所示粗體 .
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
);
任務 2: 替換 TextOut 與默認主題文本的 API
1. 在 DemoApp::OnRender 方法 , 注釋掉 TextOut 函數調用 .
2. 取消注釋代碼的主題 文本圖樣 . 當您完成，代碼應如下所示：
C++
// 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. 保存文件 , 重新編譯 , 並運行應用程序 , 應用程序界面出現的所有解決的問題 , 如下圖 .
總結
在 本單元中 , 您了解了為什麼您應用程序的 DPI- 感知很重要，並完成了如下練習
• 您的應用程序標記為 DPI 感知使用清單項
• 測試在 144 DPI 設置應用
• 比較 144DPI 設置的 UI 元素再對比 96DPI 的設置
• 縮放按鈕的大小和布局，縮放窗口大小，以及用於文本文字的默認主題的 API
為了使您的應用程序真正的高保真 DPI- 感知 , 您應該創建圖像，多分辨率版本 位圖，圖標和工具欄按鈕 . 然後將有合理的比例在不同的顯示分辨率下，而不必在模糊，或 縮放相關模糊了小位圖圖像 . 有了這些高保真的優點 , 可以選擇適當的位圖上最接近當前 DPI 設置，然後在縮放，以適應精確設置 .
