怎樣在Windows Mobile上設計壹個美觀的用戶界面程序(Win32)

最近看了不少的有關用戶界面設計方面的文章，總結壹下。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 會同時更新靜態控件的文本和位圖。 ?0?23.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));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 是界面布局中的兩個方案。?0?2?0?2?0?2?0?2 ScreenLib 提供了壹組幫助函數，用於對齊屏幕上的元素。例如，您可以使用 DockControl 函數將給定控件停靠到屏幕某個邊緣或所有四個邊緣來填充客戶端區域。OptimizeWidth 和 OptimizeHeight 函數將某個控件（或多個控件 — 對於 OptimizeWidth 函數）與顯示器對齊並調整其大小，左右或上下分別留出壹小塊邊距。提供的其他函數可用於對齊控件和將壹組控件調整為相同大小。在這些函數中，當大量使用基於窗體的應用程序時，ScreenLib 可能最有用。DeviceResolutionAware.h 彌補了 ScreenLib 的不足，並提供了有助於構建更復雜的自適應應用程序的 20 多個函數和宏。比如：?0?2?0?2?0?2?0?2 GetDisplayMode：確定顯示當前被配置為縱向、橫向還是方形。?0?2?0?2?0?2?0?2?0?2?0?2?0?2?0?2 RelayoutDialog：修改對話框的布局以符合指定的對話框資源。?0?2?0?2?0?2?0?2?0?2?0?2?0?2?0?2 StretchIcon/StretchBitmap：將圖標或位圖拉伸到指定的大小。?0?2?0?2?0?2?0?2?0?2?0?2?0?2?0?2 ImageList_LoadImage：根據指定的位圖創建圖像列表，自動縮放圖像以適應位圖和屏幕 DPI值方面的差異。 ?0?25.程序中的字體和字體大小應該讓用戶可以從控制面板中選擇默認的字體大小。所以避免將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 SHGetUIMetricsfunction, and then set the fonts in the application to that size, creating aconsistent experience. Check the default text size when the application starts and when the user changes the default size. The application can detectwhen the user changes the default font setting by listening for theSH_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 withthe device default text size setting. ?0?26.合理設計軟鍵左軟鍵應該是簡單的命令健(比如“確定”)，不應該彈出個菜單。如果右軟鍵是個菜單，菜單裏的選項應該是最常用的，從上到下按常用順序排列，第壹項默認高亮顯示。避免再出現子菜單。“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. ?0?27.界面顏色註意與系統的顏色保持統壹，所以當妳使用諸如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. ?0?28.程序的圖標我們在資源中包含不同分辨率下的程序圖標，並且在程序運行時候檢測以決定加載。