Step-by-step implementation of QQ-like interfaces by VC (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. Then, you can set the linkage with the main interface, that is, always move and adjust the size of the main window. 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. The transparent window can be implemented in two ways. One is to call setlayeredwindowattributes to set a uniform window transparency, that is, the entire window uses the same transparency, qq2009 and the demo program here use this method. This method cannot implement the opacity control without creating a pop-up window, because you want the control to be opaque, you must adopt different transparency in the control area. setlayered?wattributes cannot do this. You can only call another function updatelayeredwindow to implement different transparency windows that can specify 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 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 highest-bitwise data of each pixel in 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 translucent windows on the Internet, because PNG images can be decoded with Alpha channels.
The alpha channel, that is, setting the maximum byte, does not need to use code to specify the transparency one by one pixel. The implementation of such a translucent window is like this process: first, we need to use double easing 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.
The Alpha value is changed to 0, that is, 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 automatically painted, 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 external view" 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, which needs to be determined in the wm_lbuttondown message.
Break it down. You can do whatever you want after subclass. It's just a 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, because of the refresh relationship, there may be a duplicate effect. If you want a better effect, you should take the sub-window and then use the double buffer to draw the sliding effect. This is a little simpler. You don't need this method.

The friend list, group list, and recent contact list are implemented using the ListBox control, which does not require subclass. However, ListBox does not support the highlighted function of moving the cursor over the options, therefore, sub-classes are implemented to process the wm_mousemove message for judgment. The friends list contains "my friends", "Strangers", and "blacklists". The height of these classification options 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_notify | ws_vscroll is of the regular type, and then the list options are automatically painted in the wm_drawitem message in 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. Highlighted user list items
There will be "send SMS", "Send email" and other buttons, here only demonstrates the "send email" button, also achieved through 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.

Post: http://www.icache.me/vc-step-by-step-copy-qqface-5.html