Step-by-Step imitation QQ interface (V): Translucent forms and opaque controls

This article demonstrates how to implement an intermediate customer zone that imitates the QQ interface. QQ can adjust the transparency of the interface, but the transparency has become translucent even in the middle customer area. After all, the customer zone is the most important part of the software and must interact with users. Transparency affects operations. Therefore, the customer zone here does not learn QQ and is always opaque. To implement the opacity control, you can create only one pop-up window to cover the customer area of the main interface, and then set the linkage with the main interface, that is, always follow the main window to move and adjust the size. This method is not very good, but it is almost the only method. Why is it almost the only method? Another solution exists, but this method is too troublesome. Let's discuss this method here.

When implementing a semi-transparent form or opacity control, many people may have encountered this problem: Why does the subwindow and control on the window become transparent when the window is set to transparent? This is restricted by the system. To create a window, this window area is equivalent to a canvas. The system will draw the window title, customer area, controls, and so on, while the getdc and beginpaint parameters used for drawing windows and controls are only a part of the canvas related to you. The canvas is drawn in a limited area and eventually painted on the canvas, the last display window of the system is to display the canvas on the desktop. The transparency is also the canvas, so the sub-windows and controls on the canvas become transparent together. Creating another pop-up window is equivalent to creating another canvas, which is not limited by the transparency of the main window.

Now that you know the reason, let's discuss how to implement the opacity control without creating a pop-up window. There are two methods to implement transparent windows. One is to call setlayeredwindowattributes to set a uniform window transparency, which means that the entire window adopts the same transparency. qq2009 and the demo here use this method, this method cannot implement the opacity control without creating a pop-up window. To make the control opacity, different transparency must be used in the control area, and setlayeredwindowattributes cannot, you can only call another updatelayeredwindow function to specify different transparency windows in different regions. The API code is roughly as follows:

C/C ++ code

   HDC, hmemdc;
Rect RC;

Getwindowrect (hwnd, & rc );

Point ptsrc = {0, 0 };
Point ptwinpos = {RC. Left, RC. Top };
Size szwin = {RC. right-rc.left, RC. bottom-rc.top };
Blendfunction stblend ={ ac_src_over, 0,255, ac_src_alpha };

HDC = getwindowdc (m_hwnd );
Hmemdc = createcompatibledc (HDC );
SelectObject (hmemdc, hbmp); // hbmp for the entire window texture
Updatelayeredwindow (hwnd, HDC, & ptwinpos, & szwin, hmemdc, & ptsrc, 0, & stblend, ulw_alpha );

The most important part is SelectObject (hmemdc, hbmp); to achieve different transparency in different regions, all the hbmp image data of the selected device, in Windows, the pixel data of 32-bit color images is of the colorref type, 0x00bbggrr format. The key lies in the maximum byte 0x00. In updatelayeredwindow, this byte is used to set the transparency. 0x00 is completely transparent, 0xff is not transparent. This byte set has a special name called alpha channel. You can set the maximum byte data of each pixel of an hbmp image to achieve pixel-level transparency. We should be able to find a large number of examples of using PNG images to implement a translucent window on the Internet, because PNG images can contain Alpha channels, decoding PNG images will naturally have an alpha channel, that is, if this maximum byte is set, you do not need to use code to specify the transparency in pixels. The process of implementing such a translucent window is as follows: first, we need to use dual buffering to create a memory image of the same size as the window, and then draw each part of the window on the memory image, the title bar, the background is generally implemented using PNG images, so that you do not need to specify the transparency one by one. Finally, the memory image is drawn to the window. To implement an opaque control, we need to set the alpha channel value of the control area to 0xff. Unfortunately, almost all GDI operations, except transparentblt, which are the most commonly used bitblt, textout, fillrect and so on all ignore the alpha channel. After being drawn, the Alpha values of these regions are changed to 0, that is, they are completely transparent. Therefore, to implement the opacity control, we need to implement the self-painting of all controls so that the control is drawn to the memory image. After the conventional GDI operation, we need to set the Alpha value of these areas to 0xff. Is it big? This method is too troublesome, and it is not practical because it is too costly to implement an opaque control in a translucent window. The directui used in qq2009 should be able to easily achieve this effect, but it is not implemented. It is estimated that it is related to the execution efficiency, because this pixel-level transparent program takes a lot of time to draw, when the window size is adjusted, there may be latency, which is even more obvious on machines with slower speeds.

There are many ways to imitate QQ's customer zone. Here we use a relatively simple method. For better solutions, please leave a message for discussion. The first is the upper search bar, of course, the subclass edit control is used for self-painting, processing the wm_nccalcsize message to increase its non-customer area and draw an outer circle border. After entering the content in the editing box, a self-painted drop-down list will be displayed. This is actually the same as the interface color dialog box displayed after clicking the "change appearance" button, however, the dialog box is changed to the display format and then moved to the editing box. It will not be demonstrated, and the clear and execute buttons will appear on the right, which is also a texture, which is a non-typical editing box function, if you are interested, you can do it yourself.

Then there is the sidebar, which looks like the tab control function. In fact, it is simpler to use the toolbar. The addition of tbstyle_button | tbstyle_checkgroup is similar to that of the tab control. How to draw the previous article has already been discussed. Hide and expand are just hidden and displayed. The most important part of the friend list is the tab control. When the window size is adjusted, the width of the three labels is changed. To create the tab control, specify the tcs_fixedwidth window type, after being subclass, The tcm_setitemsize message is sent to the wm_size message to adjust the tag width. The label needs to be self-painted. Click the drop-down arrow above to bring up the menu. You need to judge in the wm_lbuttondown message. After subclass, you can do whatever you want, it's just a little bit of trouble: After clicking the tag, it's easy to switch the sliding effect of the subwindows in the list below. You can move the two windows side by side and then move them continuously. However, due to the refreshing relationship, there may be a shadow, if you want a better effect, you should set the sub-window and use double buffering to draw the sliding effect. This method is simpler.

The friend list, group list, and recent contact list are implemented using the ListBox control and do not require subclass. However, ListBox does not support the highlighted function of moving the cursor over the option, so it implements subclass, process the wm_mousemove message for determination. The friends list contains "my friends", "Strangers", "blacklists", and other categories. The height of these categories is different from that of user items, therefore, when creating a control, you must specify the lbs_ownerdrawvariable type. By default, The ListBox control calculates the control height and adjusts the size to fit the height of the list items. incomplete list options are not displayed in the customer area, this function is not required. Therefore, you need to specify the lbs_nointegralheight type. If the height is not adjusted automatically, specify lbs_hasstrings | lbs_rjy | ws_vscroll general type, then, the list options are automatically painted in the wm_drawitem message of the parent window. When adding the option, you must specify the height of the option. to distinguish between the classification option and the user information option, you can bind different data by sending the lb_setitemdata message, so that you can determine how to draw the data through the bound data. You can click the category option to collapse or expand the user list under this class. To hide the list, you can set the user list height to 0, the result shows that the height of the lb_setitemheight message can only be set to 1 ~ The value between 255 and can only be deleted when the user list is collapsed, and added when expanded. When the user list item is highlighted, buttons such as "send SMS" and "Send email" are displayed. Here, only the "send email" button is displayed, which is also implemented through the static text control, as mentioned in the previous article. The information prompt and right-click menu will not be demonstrated here. There are too many menu items, so you will be scared when you look at them :)

Now let's look at the program's:

It's almost finished, and the scroll bar and special menu are poor. I'll talk about it later.

Demo: http://download.csdn.net/source/2059841

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/ringphone/archive/2010/02/11/5306231.aspx