怎樣在Windows Mobile上設計一個美觀的使用者介面程式(Win32)

 

轉自：http://www.cnblogs.com/wangkewei/archive/2009/03/08/1406354.html 最近看了不少的有關使用者介面設計方面的文章，總結了如下： 1.與排版有關的兩個訊息：WM_SIZE和WM_SETTINGCHANGE訊息。我們需要在這兩個訊息裡處理排版有關的操作。 (1).如果視窗大小改變，視窗將收到 WM_SIZE 通知。WM_SIZE 訊息的 lParam 參數的低位字指定了用戶端地區的新寬度，高位字指定了用戶端地區的新高度。應用程式應識別視窗大小的改變，並相應地更新視窗布局。此外，也應重新確定所包 含任何子視窗的布局。 (2).WM_SIZE和WM_SETTINGCHANGE有什麼區別呢？如果應用程式沒有全屏視窗，它收不到 WM_SIZE 通知。相反，它應在 wParam 參數設定為SETTINGCHANGE_RESET時監聽 WM_SETTINGCHANGE訊息。 (3).如果應用程式有頂層視窗，或使用 SHHandleWMSettingChange、SHInitDialog 和 SHFullScreen 方法建立了視窗，它會同時收到 WM_SIZE 和 WM_SETTINGCHANGE 訊息。但是，如果應用程式建立了子視窗，子視窗收不到 WM_SIZE 訊息，即使子視窗是全屏視窗。 備忘：如果視窗的上、左、右座標在工作區域邊界之上或之外，該視窗被認為是全屏視窗。工作區域是標題列下的整個螢幕地區。 程式碼範例如下： switch (uMessage)     {               case WM_SIZE:                   // 重新計算所有子視窗的布局；重新設定                  // 列出視圖和編輯框的大小，重新確定按鈕、                  // 靜態文字和其他控制項的位置。                   break;              case WM_SETTINGCHANGE:                        if (SETTINGCHANGE_RESET == wParam) {                                 // 螢幕方向改變。此時                                // 執行 WM_SIZE 不能執行的處理，                 // 如重新調整全屏子視窗的大小，對                 // 頂層視窗調用 MoveWindow 等等。                 // 如果不需要處理 WM_SETTINGCHANGE 訊息，可以                 // 忽略它。                       }                  break;       } 2.那我們怎樣使用這兩個訊息排版呢？       比如可以使用RelayoutDialog，它可協助重新設定、重新置放對話方塊中的子控制項。例如，假設對話方塊有兩個對話模板，一個用於橫向，一個用於豎向。如果這兩個模板中的控制項相同，且有相同的控制項 ID，則可使用下列代碼作為WM_SIZE處理常式：       case WM_SIZE:            RelayoutDialog(g_hInst, hDlg, InWideMode() ? MAKEINTRESOURCE                 (IDD_TOOLS_OPTIONS_1_WIDE) : MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_1));       注意： 定義為 IDC_STATIC 的控制項具有相同的控制項 ID，所以如果有多個 IDC_STATIC控制項，應當把它們重新命名為 IDC_STATIC_1、IDC_STATIC_2等。       如果靜態控制項在新布局中也發生了變換，RelayoutDialog 會同時更新靜態控制項的文本和位元影像。 3.Windows Mobile 6.0 SDK中有幾個相關的Samples，在這裡介紹下。 Crossword例子中的LandscapeAware部分向你示範了怎樣讓你的應用程式支援橫豎屏。 (1).首先用320*320大小的背景圖片替換掉原來的240*320的圖片，這樣橫豎屏切換時，只需一張背景圖片即可保持統一的風格。OnPaint中繪圖函數修改為：       BitBlt(hDC, 0, 0, 320, 320, hMemDC, 0, 0, SRCCOPY); (2).定義一個判斷當前橫豎屏的函數： BOOL InWideMode() {       int height = GetSystemMetrics(SM_CYSCREEN);       return (height < 320) ? TRUE : FALSE; } 也可以使用DeviceResolutionAware.h中的函數。 (3).使用判斷載入資源，比如：       RECT& r = InWideMode() ? rWideMode : rTallMode; (4).在WM_SIZE中調整受到橫豎屏切換影響的空間的位置和大小，比如：       MoveWindow(hEditBox, 8, 4, nWidth - 70, 20, TRUE);       MoveWindow(hEnterButton, nWidth - 57, 4, 50, 20, TRUE); 在對話方塊的WM_SIZE中處理螢幕模式的適應，如：       DRA::RelayoutDialog(g_hInst, hDlg,InWideMode() ?            MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_1_WIDE) :            MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_1)); Crossword例子中的HidpiAware部分示範怎樣適應高解析度的螢幕，並且支援上個例子的橫豎屏功能。 很簡單，將代碼中直接出現數位代碼： MoveWindow(hEditBox, 8, 4, nWidth - 70, 20, TRUE); 改成： MoveWindow(hEditBox, SCALEX(8), SCALEY(4), nWidth - SCALEX(70), SCALEY(20), TRUE); 在DeviceResolutionAware.h標頭檔中定義的SCALEX原型： inline int SCALEX(int argX, int nLogPixelsX = LogPixelsX()) {       return HIDPIMulDiv(argX, nLogPixelsX, HIDPI); } UILayout例子介紹了微軟提供的用於介面布局的ScreenLib工具類。比如： //根據螢幕情況最佳化高度 CScreenLib::OptimizeHeight(m_hWnd, IDC_EDIT_MESSAGE); //根據螢幕情況最佳化寬度 CScreenLib::OptimizeWidth(m_hWnd,    3,   //受影響的控制項個數    IDC_STATIC_SENDTO, //控制項ID    IDC_COMBO_SENDTO,    IDC_EDIT_MESSAGE); 在WM_SIZE訊息處理中調整控制項的大小以適應橫豎屏，在WM_SETTINGCHANG訊息處理中添加當SIP變化時對控制項大小的調整。 4.關於Windows Mobile本地代碼開發中介面布局的總結。       ScreenLib 和 DeviceResolutionAware.h 是介面布局中的兩個方案。       ScreenLib 提供了一組協助函數，用於對齊螢幕上的元素。例如，您可以使用 DockControl 函數將給定控制項停靠到螢幕某個邊緣或所有四個邊緣來填充用戶端地區。OptimizeWidth 和 OptimizeHeight 函數將某個控制項（或多個控制項 — 對於 OptimizeWidth 函數）與顯示器對齊並調整其大小，左右或上下分別留出一小塊邊距。提供的其他函數可用於對齊控制項和將一組控制項調整為相同大小。在這些函數中，當大量使用基 於表單的應用程式時，ScreenLib 可能最有用。 DeviceResolutionAware.h 彌補了 ScreenLib 的不足，並提供了有助於構建更複雜的自適應應用程式的 20 多個函數和宏。比如：       GetDisplayMode：確定顯示當前被配置為縱向、橫向還是方形。           RelayoutDialog：修改對話方塊的布局以符合指定的對話方塊資源。           StretchIcon/StretchBitmap：將表徵圖或位元影像展開到指定的大小。           ImageList_LoadImage：根據指定的位元影像建立映像列表，自動縮放映像以適應位元影像和螢幕 DPI值方面的差異。 5.程式中的字型和字型大小。             應該讓使用者可以從控制台中選擇預設的字型大小。所以避免將ListView, TreeView, ListBox, RichEdit等控制項的字型大小設定死了。你可以使用SHGetUIMetrics獲得使用者選擇的預設值來設定你應用程式中的字型大小。       另外當你的應用程式啟動時或使用者改變字型大小(偵聽SH_UIMETRIC_CHANGE訊息通知)的設定時，你應該檢查預設字型大小。       而RadioButton, Label, TextBox, and CheckBox等控制項應該有固定大小的字型，不應該隨著預設字型設定的變化而變化。 “Create Compatible User Interfaces”原文： Avoid hard-coding font sizes for controls such as ListView, TreeView, ListBox, and RichEdit. The user can select a default text size by using the Screen command in Control Panel. Query for the user-selected default text size using the SHGetUIMetrics function, and then set the fonts in the application to that size, creating a consistent experience. Check the default text size when the application starts and when the user changes the default size. The application can detect when the user changes the default font setting by listening for the SH_UIMETRIC_CHANGE notification. Use static font sizes for dialog controls. Controls such as RadioButton, Label, TextBox, and CheckBox should have a fixed size that does not change with the device default text size setting. 6.合理設計軟鍵。             左軟鍵應該是簡單的命令健(比如“確定”)，不應該彈出個菜單。如果右軟鍵是個菜單，菜單裡的選項應該是最常用的，從上到下按常用順序排列，第一項預設高亮顯示。避免再出現子功能表。 “Create Compatible User Interfaces”原文： The left soft key must be a single command, not a menu. It should be the default or most frequent choice. For example, if a dialog box appears, the left soft key might be the command Done, which would close the dialog box and return the user to the application. If the right soft key is a menu, the top command in the menu should be the most frequently used command. By default, when the right soft key menu appears, the top command is highlighted. On the right soft key, avoid using submenus that are more than two levels deep. 7.介面顏色。       注意與系統的顏色保持統一，所以當你使用諸如GDI繪製文字時應該查詢當前系統的顏色。 “Create Compatible User Interfaces”原文： All Windows Forms controls automatically adapt to the current theme. However, if you use GDI to draw text manually, query the system for the colors associated with various UI elements so that the application will look consistent with the operating system and remain usable with all themes. 8.程式的表徵圖。 我們在資源中包含不同解析度下的程式表徵圖，並且在程式運行時候檢測以決定載入。 合適的表徵圖和不合適的表徵圖： Windows Mobile 6 Professional/Windows Mobile 6 Classic各解析度對應的合適表徵圖： Screen Dimensions DPI Orientation Small Icon Size Large Icon Size 240 x 320 96 PL 16 x 16 32 x 32 480 x 640 (VGA) 192 PL 32 x 32 64 x 64 240 x 240 96 S 16 x 16 32 x 32 480 x 480 (VGA) 192 S 32 x 32 64 x 64 320 x 320 128 S 21 x 21 43 x 43 9.避免使用位元影像。 同一張位元影像在不同解析度的裝置上會出現如下問題： 而以下設計比較好： 另外還應該考慮一些潛在的問題。 10.更多參考。 微軟開發人員中心文檔：開發能夠識別 DPI 的應用程式。 微軟開發人員中心文檔：Create Compatible User Interfaces。 Windows Mobile 6 Documentation > Shell, GWES, and User Interface > Shell > Shell OS Design Development > Screen Rotation for Windows Mobile Powered Devices > Developing Screen Orientation Aware Applications Introducing Screenlib(附帶一個講解的視頻，使用的是MFC) SDK例子：Samples/PocketPC/CPP/win32/Crossword                 Samples/Common/CPP/Win32/UILayout