Tabs in title bar: what's the secret?

问题

Chrome and Firefox 4, among other applications, now put some of their user interface in the title bar. In Windows, the OS normally controls the entire title bar. An application can create a custom title bar by removing the OS title bar and drawing a "fake" title bar instead (like WinAmp), but only the OS knows how to draw the non-customized elements of the title bar (e.g. Close/Minimize/Maximize), which vary by OS version.

By what mechanism do apps like Chrome and Firefox "share" the title bar with the OS (put custom elements in the title bar while keeping the original OS visual theme)?

In Chrome, the tabs encroach upon the title bar so that there is not enough space for title text.

回答1:

Microsoft has a very detailed explanation in the article Custom Window Frame Using DWM.

回答2:

The title bar and the window border belongs to the non-client area (NC) of the window. If you're writing a message pump based application you can provide your own logic and appearance of this area using the WM_NCPAINT and WM_NCHITTEST window messages (just like Jon wrote).

While this area has been quite moderately used in previous Windows versions, Microsoft has recently (at least since Vista) started to make the non-client area more attractive and feature rich.

In modern applications it is quite common to completely ignore the non-client area and instead create a window that does not have a strict window border and thus consists of ONLY a client area. With this method the window must provide it's own implementation for drawing the window title and window buttons (minimize, maximize/resore and close). Combining this technique with window transparency makes it possible and quite easy to create exciting user interfaces.

If you are using WPF you'll find the WindowChrome class very useful for this purpose. This class is part of the .NET 4 framework and available as a separate library for .NET 3.5.

Edit

Obviously someone does not like this answer. Just to be clear: I'm not saying that this is how Chrome or any other application is doing it. I am saying that how I've described it is a feasible solution which myself and the company I work for has used in several projects and I know for a fact that several other applications use the same approach. It might not be the best, but it is certainly a way to go about it! :-)

回答3:

I'm too lazy to go looking at chrome and firefox's source to find out exactly what they did, but it most likely includes custom handling for WM_NCPAINT and WM_NCHITTEST. They can allow the OS to do the basic titlebar painting, then stick their own bits on top. The alternative is to do all the painting themselves, including calls to the DWM api to handle all the fancy bits. Either way, it's an ugly thing to try and do, and if you don't do it just right, it'll look and feel terrible.