| From: http://www.cnblogs.com/wangkewei/archive/2009/03/08/1406354.html I have read a lot of articles about user interface design recently and summarized them as follows: 1. Two typographical messages: wm_size and wm_settingchange. We need to process typographical operations in these two messages.
(1) If the window size changes, the window will receive the wm_size notification. The low text of the lparam parameter of the wm_size message specifies the new width of the client region, and the high text specifies the new height of the client region. The application should identify window size changes and update the window layout accordingly. In addition, the layout of any sub-Windows included in the package should be re-determined. (2) What is the difference between wm_size and wm_settingchange? If the application does not have a full screen window, it cannot receive the wm_size notification. Instead, it should listen to the wm_settingchange message when the wparam parameter is set to settingchange_reset. (3) if the application has a top-level window, or the window is created using the shhandlewmsettingchange, shinitdialog, and shfullscreen methods, it will receive both the wm_size and wm_settingchange messages. However, if the application creates a subwindow, The subwindow cannot receive the wm_size message, even if the subwindow is a full screen window. Note: If the upper, left, and right coordinates of a window are above or outside the working area boundary, the window is considered as a full screen window. The work area is the entire screen area under the title bar. The sample code is as follows:
Switch (umessage ){
Case wm_size:
// Recalculate the layout of all subwindows; Reset
// List the size of the view and edit box, click the OK button,
// The position of static text and other controls.
Break;
Case wm_settingchange:
If (settingchange_reset = wparam ){
// The Screen direction is changed. In this case
// Execute the processing that wm_size cannot be executed,
// If you re-adjust the size of the full-screen sub-window
// Movewindow is called in the top-level window.
// If you do not need to process the wm_settingchange message, you can
// Ignore it.
}
Break;
} 2. How can we use these two message la s? For example, you can use relayoutdialog to help reset and reposition the child controls in the dialog box. For example, assume that the dialog box has two dialog templates, one for horizontal and the other for vertical. If the controls in these two templates are the same and have the same control ID, you can use the following code as the wm_size handler:
Case wm_size:
Relayoutdialog (g_hinst, hdlg, inwidemode ()? Makeintresource
(Idd_tools_options_javaswide): makeintresource (idd_tools_options_1 ));
Note: Controls defined as idc_static have the same control ID. Therefore, if multiple idc_static controls exist, you should rename them to idc_static_1 and idc_static_2.
If the static control is also changed in the new layout, relayoutdialog updates the text and bitmap of the static control at the same time. 3. There are several related samples in the Windows Mobile 6.0 SDK.
The landscapeaware section in the crossword example shows you how to enable your application to support landscape and landscape screens.
(1) first, replace the original 320*320 image with a 240*320 background image. In this way, you only need a single background image to maintain a consistent style when switching between portrait and landscape screens. In onpaint, modify the drawing function:
Bitblt (HDC, 0, 0,320,320, hmemdc, 0, 0, srccopy ); (2) define a function to judge the current landscape and landscape:
Bool inwidemode ()
{
Int Height = getsystemmetrics (sm_cyscreen );
Return (height <320 )? True: false;
}
You can also use the functions in deviceresolutionaware. h. (3). Use judgment to load resources, for example:
Rect & R = inwidemode ()? Rwidemode: rtallmode; (4) Adjust the position and size of the Space affected by the horizontal and vertical screen switching in wm_size, for example:
Movewindow (heditbox, 8, 4, nwidth-70, 20, true );
Movewindow (henterbutton, nwidth-57, 4, 50, 20, true );
In the wm_size dialog box, adapt the screen mode, for example:
Dra: relayoutdialog (g_hinst, hdlg, inwidemode ()?
Makeintresource (idd_tools_options_javaswide ):
Makeintresource (idd_tools_options_1 )); The hidpiaware section in the crossword example demonstrates how to adapt to a high-resolution screen and supports the portrait screen function of the previous example.
It is very easy to see the code of numbers directly in the Code:
Movewindow (heditbox, 8, 4, nwidth-70, 20, true );
Changed:
Movewindow (heditbox, scalex (8), scaley (4), nwidth-scalex (70), scaley (20), true );
The scalex prototype defined in the deviceresolutionaware. h header file:
Inline int scalex (INT argx, int nlogpixelsx = logpixelsx ())
{
Return hidpimuldiv (argx, nlogpixelsx, hidpi );
} The uilayout example describes the screenlib tool class provided by Microsoft for interface layout.For example:
// Optimize the height based on screen Conditions
Cscreenlib: optimizeheight (m_hwnd, idc_edit_message );
// Optimize the width based on screen Conditions
Cscreenlib: optimizewidth (m_hwnd, 3, // Number of affected controls idc_static_sendto, // Control ID idc_combo_sendto, idc_edit_message );
In wm_size message processing, adjust the control size to adapt to horizontal and vertical screen. In wm_settingchang message processing, add the control size adjustment when the SIP changes. 4. Summary of the interface layout in Windows Mobile local code development. Screenlib and deviceresolutionaware. h are two solutions in the interface layout.
Screenlib provides a set of help functions to align elements on the screen. For example, you can use the dockcontrol function to dock a given control to an edge of the screen or all four edges to fill the client area. The optimizewidth and optimizeheight functions align a widget (or multiple controls-for the optimizewidth function) with the monitor and adjust its size, leaving a small margin between the left and right, or between the top and bottom. Other functions provided can be used to align controls and adjust a group of controls to the same size. Among these functions, screenlib may be the most useful when a large number of forms-based applications are used.
Deviceresolutionaware. H makes up for the shortcomings of screenlib and provides more than 20 functions and macros that help build more complex adaptive applications. For example:
Getdisplaymode: determines whether the display is currently configured as vertical, horizontal, or square.
Relayoutdialog: Modify the layout of the dialog box to match the specified dialog box resource.
Stretchicon/stretchbitmap: stretch the icon or bitmap to the specified size.
Imagelist_loadimage: creates an image list based on the specified bitmap, and automatically scales the image to adapt to the differences between the bitmap and the screen DPI value. 5. font and font size in the program.
You should be able to select the default font size from the control panel. Avoid setting the font size of controls such as listview, Treeview, ListBox, and RichEdit. You can use shgetuimetrics to obtain the default value selected by the user to set the font size in your application.
In addition, when your application is started or the user changes the font size (Listening for sh_uimetric_change message notifications), you should check the default font size.
Controls such as radiobutton, label, Textbox, and checkbox should have a fixed font size and should not change with the default font settings.
Original "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
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
Sh_uimetric_change notification.
Use static font sizes for dialog controls. controls such as radiobutton, label, Textbox, and checkbox showould have a fixed size that does not change
The device default text size setting. 6. reasonably design the software keys.
The left soft key should be a simple command key (such as "OK"), and a menu should not be displayed. If the right soft key is a menu, the options in the menu should be the most commonly used and arranged from top to bottom in the common order. The first item is highlighted by default. Avoid the appearance of sub-menus.
Original "create compatible user interfaces:
The left soft key must be a single command, not a menu. it shoshould be the default or most frequent choice. for example, if a dialog box appears, the left soft key might be the Command done, which wocould 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 shoshould 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. UI color. Note that the color is consistent with the system color, so you should query the color of the current system when using text such as GDI.
Original "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 varous UI elements so that the application will look consistent with the operating system and remain usable with all themes. 8. program icons.
We include program icons at different resolutions in the resource, and check when the program is running to determine loading.
Appropriate icons and inappropriate icons: Appropriate icons for Windows Mobile 6 Professional/Windows Mobile 6 classic resolutions:
Screen dimensions |
DPI |
Orientation |
Small Icon size |
Large Icon size |
240x320 |
96 |
PL |
16x16 |
32x32 |
480x640 (VGA) |
192 |
PL |
32x32 |
64x64 |
240x240 |
96 |
S |
16x16 |
32x32 |
480x480 (VGA) |
192 |
S |
32x32 |
64x64 |
320x320 |
128 |
S |
21x21 |
43X43 |
9. Avoid using bitmap.
The same bitmap may have the following problems on devices with different resolutions: The following design is better:Some potential problems should also be considered.10. For more information, see. Microsoft Developer Center documentation: Develops DPI-aware applications.
Microsoft Developer Center documentation: Create compatible user interfaces.
Windows Mobile 6 documentation> shell, GWES, and user interface> shell OS design development> screen rotation for Windows Mobile powered devices> developing screen orientation aware applications
Introducing screenlib (a video with explanations is provided, using MFC)
SDK example: samples/pocketpc/CPP/Win32/crossword
Samples/common/CPP/Win32/uilayout |
