Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)?

enter image description here

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

like image 751
Qwertie Avatar asked Apr 05 '11 20:04

Qwertie


People also ask

What are the icons in the title bar?

The Title Bar displays the Productivity Icon, Software Title, Software Version, and the name of the Project that is currently open. In addition, the Title Bar has the three buttons familiar to Windows ® users: Minimize, Maximize, and Close.

What is the panel of tabs below the title bar?

The Ribbon is a user interface element which was introduced by Microsoft in Microsoft Office 2007. It is located below the Quick Access Toolbar and the Title Bar. It comprises seven tabs; Home, Insert, Page layout, References, Mailing, Review and View.

How do I hide a vertical tab?

Put your cursor in Edge's address bar, type edge://flags, and press Enter. On the following screen, search for the flag named Vertical tabs hide title bar. When the flag appears, click the dropdown menu next to it and select Enabled. Click Restart at the bottom to relaunch the browser.


2 Answers

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

like image 119
Mark Ransom Avatar answered Sep 22 '22 04:09

Mark Ransom


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! :-)

like image 21
Mårten Wikström Avatar answered Sep 24 '22 04:09

Mårten Wikström