Windows Mobile UI development

First of all, I would like to thank the moderators of the "embedded platform security" forum for their invitation (which seems to be not an invitation, poor expression, whatever,
It was not long before I got familiar with win mobile development. I rushed to sort out some of the UI's entry-level stuff (the content is not systematic and comprehensive), hoping to help my friends who just got involved in mobile development.
Note: Due to its limitations, this article does not involve. net.
OK. You are welcome to the eggs and flowers.

This document assumes that you have understood the differences between smart phone and Pocket PC. Unless otherwise specified, it is on the Pocket PC.
Status quo: the popularity of the iPhone leads the current trend in smartphone systems and app interfaces. Ms has released Windows Mobile 6.5, but in the near future, PPC that hosts mobile 6.2 and below systems will remain mainstream. The particularity of the handheld device determines the importance of the app interface performance on it. In many cases, even the code of Project 70% is related to the interface.
I. Drawing basics of GDI (the basics must be mastered)
1.1 device environment DC
Device context (DC) is a tool used by windows to manage access to display and print devices.
1) What is DC?
A dc is a structure that defines a collection of graphic objects and their related attributes, as well as some graphics modes that affect the output effect.
These graphic objects include a draw line pen, a fill and painting brush, a bitmap used to copy to the screen, and a palette that defines a set of colors, A region used for operations such as cropping.
For example, the textout and DC attributes are used to determine the color of the text, the background color of the text, and the font when the text is displayed.
How to Understand DC:
DC is used for drawing output. The output devices include screens and printers. in WM, screen output is always related to a specific form. It is actually the data structure stored inside the GDI. Some values in the DC define the details of the work of the GDI drawing function.
2) Get the device DC
An application never directly accesses (ACCESS) DC. The common method for obtaining DC is as follows:
HDC getdc (hwnd );
HDC getwindowdc (hwnd );
HDC getdcex (hwnd, hrgn hrgnclip, DWORD flags );

Value description
Dcx_window return the device context environment corresponding to the window rectangle rather than the client rectangle

Dcx_cache returns the device context from the cache instead of from the owndc or classdc window. Overwrite cs_owndc and cs_classdc.

Dcx_parentclip (*) uses the visible area of the parent window. The ws_cipchildren and cs_parentdc styles of the parent window are ignored, and the origin of the device context environment is located in the upper left corner of the window identified by hwnd.

Dcx_clipsiblings removes the visible area of all child windows identified by the hwnd parameter.

Dcx_clipchildren exclude the visible area of all subwindows on the window identified by the hwnd parameter.

Dcx_noresetattrs (*) when the device context environment is released, the default feature is not reset for the device context environment.

Dcx_excludergn removes the cut area specified by hrgnclip from the visible area of the returned device context.

Dcx_excludeupdate (*) Exclusion window update area.

Dcx_intersectrgn The Clipping Region identified by hrgnclip is intersected with the visible region of the returned device context.

Dcx_intersectupdate returns a region that includes des the window's update Region

Dcx_validate (*) when specified with dcx_intersectupdate, the device context environment is fully valid. This function is used with dcx_intersectupdate and dcx_validate in the same way as the beginpaint function ..

1.2 valid and invalid zones
In Windows, a "Drawing Information Structure" is saved for each window. This structure contains the coordinates of the smallest rectangle that enclose invalid areas and other information. This rectangle is called an "invalid rectangle 」, or "invalid region 」. When re-painting the window (the message wm_paint is received), you only need to re-paint the "invalid region.
The form receives the wm_paint message,
Beginpaint gets the DC of the invalid region and calculates the invalid region,
Invalid repainting area,
The endpaint function marks an invalid region as a valid region.
Windows does not place multiple wm_paint messages in the message queue. Wm_paint only updates information in the invalid region. After the wm_paint message is processed, the entire program interface becomes a valid region. If no operation is performed on the program, no invalid region is generated. Event that causes the wm_paint message:
When the user moves the window, the previously overwritten window is displayed;
Adjust the window size
When scrolldc and other functions are used to scroll the window
The User Module sends the wm_paint message (messages are generally sent after invaladatarect)
Wm_paint
Case wm_paint:
{
HDC;
Paintstruct pS;
Rect;
HDC = beginpaint (hwnd, & PS );
Getclientrect (hwnd, & rect );
Drawtext (HDC, g_szmessage,-1, & rect, dt_singleline | dt_center | dt_vcenter );
Endpaint (hwnd, & PS );
}
Break;

Mark a valid region as an invalid Region
Bool invalidaterect (hwnd, const rect * lprect, bool berase );
Invalidaterect only adds the re-painting area and takes effect the next time wm_paint. Re-paint the invalid area immediately:
Invalidaterect (...);
The hwnd form sends the wm_paint message,
Lprect: Specifies the region to be refreshed. areas outside this region are not repainted. This prevents a local change and causes the entire customer region to be repainted, leading to flickering.
The "true" parameter of bool berase indicates that wm_erasebkgnd is sent to the form before the invalid area is repainted. This will overwrite the selected area with the background color and then re-paint it, (You can change the background color by setting the brush ).

Mark an invalid region as a valid Region
You can call the validaterect function to make any rectangular area in the display area valid. If this call has the effect of making the entire invalid region valid, any wm_paint message in the current queue will be deleted.
Windows does not place multiple wm_paint messages in the message queue.

1.3 bitmap
BMP (Bitmap-file) is a Windows Image File Format. All image processing software running in Windows supports the BMP format. In Windows, Image Rendering is based on BMP. The BMP image file format before Windows 3.0 is related to the display device. Therefore, the BMP image file format is called the device-Dependent Bitmap File Format. BMP image files after Windows 3.0 are not related to display devices. Therefore, this BMP image file format is called device-independent Bitmap (DIB) format (Note: After Windows 3.0 is used, the DDB bitmap still exists in the system. functions such as bitblt () are based on the DDB bitmap, but if you want to save the image to a disk file in BMP format, microsoft strongly recommends that you store images in Dib format) to enable Windows to display stored images on any type of display device. The default file extension of a BMP bitmap file is BMP or BMP (sometimes it uses. DiB or. RLE as the extension ).

File structure:
A bitmap file is composed of four parts: Bitmap-file header, bitmap-Information header, and color table) and the byte array that defines the bitmap. It has the following format.
Name and symbol of the structure of the bitmap file
Bitmap-File Header (Bitmap-file header) bitmapfileheader bmfh
Bitmap header (Information header) bitmapinfoheader bmih
Color Table rgbquad acolors []
Byte abitmapbits in the image data array []

Ii. Commonly Used drawing skills
2.1 double buffer rendering technology:
Limited by the hardware performance of mobile phones, developers often need to solve the problem of screen flickering, which can be solved by dual-buffer rendering.
The so-called dual buffer is to first draw all the content on a memory DC; then copy it to the screen DC at a time for final display.
Memory DC is a virtual memory device context. It is used for plotting and other operations and is not displayed on the screen. After the memory DC is drawn, it is copied to the screen, in this way, the screen will not flash due to the operation.
Steps:
HDC memdc = createcompatibledc (HDC); // create an internal DC consistent with the Target DC
Hbitmap hbmp;
Hbmp = createcompatiblebitmap (HDC, rect. Width (), rect. Height ());
SelectObject (memdc, BMP); // create a screen DC bitmap and select the memory DC
Drawmemdc (memdc); // drawing in memory DC
Bitblt (HDC, rect. Right, rect. Bottom, memdc, srccopy); // draw to the DC Screen
Deleteobject (memdc); // destroy resources and release memory DC

2. 2. semi-transparent image mixing:
Principle: operate the pixel dot matrix. Assume that one image is a and the other transparent image is B. Then, through B, the image C looks like a hybrid image of B and, set the transparency of Image B to alpha (the value 0-is completely transparent, and the value 0 is completely opaque). The Alpha mixing formula is as follows:
R (c) = (1-alpha) * R (B) + Alpha * R ()
G (c) = (1-alpha) * g (B) + Alpha * g ()
B (c) = (1-alpha) * B (B) + Alpha * B ()

Step: 1: Get the source image size 2: Get the original pixel Dot Matrix 3: mix the RGB components of each pixel
For (INT I = 0; I <length; I ++)
{
For (int t = 0; t <width; t ++)
{
Pix_array [I * width + T] = getpixel (HDC, I, T );
}
}
For (INT I = 0; I <length * width; I ++)
{
Newpix_array [I]. byred = pix_array [I]. byred * Alpha + 255 * (1-alpha );

Newpix_array [I]. bygreen = pix_array [I]. bygreen * Alpha + 255 * (1-alpha );

Newpix_array [I]. byblue = pix_array [I]. byblue * Alpha + 255 * (1-alpha );
}
Or call the API: alphablend.

2.3 transparent background color
Call API: transparentblt
Bool transparentblt (
HDC hdcdest, // Target DC handle
Int nxorigindest, // the upper left X axis of the Target DC
Int nyorigindest, // the upper left Y axis of the Target DC
Int nwidthdest, // width of the rectangle when drawing
Int hheightdest, // height of the rectangle when drawing
HDC hdcsrc, // source DC handle
Int nxoriginsrc, // the upper left X axis of the source DC
Int nyoriginsrc, // the upper left Y axis of the source DC
Int nwidthsrc, // The width of the source rectangle
Int nheightsrc, // height of the source rectangle
Uint crtransparent // The RGB value of the color to be transparent
);

Iii. ppc ui FAQs
3.1 Gesture Recognition
Principle: capture the user's touch point event, collect the touch point motion track, and analyze and judge the track points collected after the touch point leaves.
Basic implementation: capture and process system response messages
Click Event: wm_lbuttondown
Move event: wm_mousemove
Event: wm_lbuttonup

Common tips:
Control focus: Because the screen of the handheld device is limited and the control distribution is relatively intensive, there is a certain requirement on the accuracy of user operations. When the user pulls down the scroll bar or moves other widgets, it is very likely that the touch or finger will leave the control range during the movement process, thus interrupting the movement operation, which is not as expected by the user.
Therefore, it is necessary to focus on the Control. Even in the above situation, the control can still receive the wm_mousemove event.
To solve this problem, call the API: setfocus (hwnd );

3.2 interface self-adaptation
Because the Pocket PC supports both portrait and landscape modes, when switching between portrait and landscape screens, if you do not adjust the coordinates of the control of the program, the interface will be chaotic.
Basic implementation: capture the system's message switching between the horizontal and vertical screens, determine the mode to switch to, and process the message in onsize.
Common Methods:
In addition, due to the complexity of PPC screen sizes, you also need to pay attention to the adaptability of different screen sizes. I will not go into details here.

1): Adjust the control coordinates
Capture the wm_size message, obtain the current screen mode in the response function, and adjust the control coordinates based on the screen size to make the entire interface adaptive.

2): Prepare two sets of different UI Resources
Prepare a set of UI resources for the horizontal and vertical screens. Obtain the current screen mode in the wm_size message processing function and call the corresponding UI resources in different modes to achieve self-adaptation of the interface.

3.3 screen Input Panel (SIP)
During application development on the Pocket PC, not all interfaces require the SIP Input Panel. Therefore, you often need to display and hide the SIP Input Panel.
The following is an intuitive comparison of the two:

There are many ways to hide sip in Windows Mobile. The following describes several methods:
1) shsippreference (m_hwnd, sip_down );
2) sipinfo Si;
Memset (& Si, sizeof (SI ));
Shsipinfo (spi_getsipinfo, 0, & Si, 0 );
Si. fdwflags & = ~ Sipf_on;
Shsipinfo (spi_setsipinfo, 0, & Si, 0 );
3) shfullscreen (hdlg, shfs_showtaskbar, shfs_hidesipbutton );
4) sipshowim (sipf_down );
5) obtain the SIP window handle named menu_worker to hide or display it:
Cwnd * pwndsip = findwindow (_ T ("menu_worker"), 0 );
If (pwndsip)
{
Pwndsip-> showwindow (sw_hide); // sw_show
}

6) In addition, you can use Imm to control the SIP.

3.4 menubar Customization
Menubar at the bottom of mobile plays a key role in interaction with users in applications. menubar is often customized according to different needs. This section describes how to change menubar resources.
Basic operations:
1. shmenubarinfo struct
Typedef struct tagshmenubarinfo {
DWORD cbsize; // shmenubarinfo struct size
Hwnd hwndparent; // commondbar parent window handle
DWORD dwflags; // menubar type identifier
Uint ntoolbarid; // toolbar ID
Hinstance hinstres; // instance handle for resource control
Int nbmpid; // The BMP image resource ID of the button background.
Int cbmpimages; // Number of BMP image resources
Hwnd hwndmb; // [output parameter] controls the window handle of menubar.
Colorref clrbk; // menubar background color parameter, including SIP ()
} Shmenubarinfo, * pshmenubarinfo;

2. menubar type
You can create different types of menubar by setting dwflags.
Shcmbf_colorbk: Set the background color of the menu bar
Shcmbf_emptybar create an empty menu bar
Shcmbf_hidden: Create a hidden menu bar.
Shcmbf_hidesipbutton: Create a menu bar without sip
Shcmbf_hmenu: customizes the menu bar through resources instead of using the toolbar

3. Create menubar

Shmenubarinfo MBI;
Memset (& MBI, 0, sizeof (shmenubarinfo ));
MBI. cbsize = sizeof (shmenubarinfo );
MBI. hwndparent = hwnd; // window handle
MBI. ntoolbarid = idr_menu; // menu resource number
MBI. hinstres = g_hinst; // instance handle
Shcreatemenubar (& MBI)
G_hwndmenubar = MBI. hwndmb;

After the menubar instance is created, modify the resource file to specify
Idr_menu shmenubar discardable
Begin
Idr_menu, // ID
2, // number
I _imagenone, idm_ OK/* command ID */,
Tbstate_enabled,
Tbstyle_button | tbstyle_autosize/* button or pop-up menu */,
Ids_ OK/* character */,
0, nomenu,
I _imagenone, idm_help, tbstate_enabled, tbstyle_dropdown | tbstyle_autosize,
Ids_help, 0, 0,
End
Idr_menu shmenubar discardable
Begin
Idr_menu,
1,
I _imagenone, idm_ OK, tbstate_enabled,
Tbstyle_button | tbstyle_autosize,
Ids_ OK, 0, nomenu,
End
With the above operations, developers can customize personalized menubar for their own programs.

4. Custom Controls
This is a very important issue for mobile development and a headache for developers. There are many problems that can be said but it seems unrealistic to say that they are all done. Generally speaking, it can be divided into control self-Painting and "pseudo control ".

Fortunately, most of the controls are the same as those of the desktop system. When we encounter problems with the implementation of self-Painting and pseudo-controls related to controls, we can find a lot on the relevant data network, so we will not expand them here. (Unlike the desktop system, ComboBox does not support self-painting on mobile)
If you feel that the description is not specific enough, you can look at the following link, is some of the author's UI: http://hi.baidu.com/%C0%B6%C9% AB %D3%...5a044df04.html
The "button Go" indicates that the button control is self-painted.
In addition, ComboBox and table controls for displaying data are pseudo controls implemented using static controls.