How to create VS2013 like frameless window with dark style
I really like the window style of VS2013 and up (simple frameless window and flat design), so I decided to create a short example of how to make this possible. Also added my custom dark stylesheet style.
here you can find the sources: https://github.com/Jorgen-VikingGod/Qt-Frameless-Window-DarkStyle
Screenshot (mac enabled):
Screenshot (mac disabled):
Hi, thanks for sharing.
I don't know if you welcome feedback, but here are couple of issues that always come up with this particular technique and don't get handled correctly:
- I can move maximized window by dragging the title bar and it doesn't "demaximize". It should return to the "normal" size.
- The window can't be resized using borders. This ranges from major annoyance to a real usability issue - when I maximized the window and then moved it by dragging title bar the window still has the size of the whole screen, which means the resize area on the status bar went under the taskbar. Without ability to resize using borders I'm stuck or I have to precisely move the window back close to the top screen border to see the status bar again.
- The window lost the system shadow. Small issue, but important for subconscious depth perception. Starting with Windows 8 it also serves as a resize area. The window frame is 1px wide so the shadow serves as a border so you don't have to be that precise.
- The window frame doesn't differentiate between active and inactive state (I don't mean disabled, I mean when another window is active). It's a big usability issue.
- Windows applications should reserve the upper left corner for system menu. Usually there's an app icon there, but even when there's not (e.g. Google Chrome) that area should show system menu when clicked and close the app when double clicked. It's a platform guidelines breaking issue.
- Because of the frameless window hint Aero features stopped working:
- Aero snap - dragging a window to screen's border should trigger Aero snap.
- Pressing Win+arrows should move between borders of the screen and/or maximize/demaximize
- Window ignores system-wide OS shortcuts, for example Win+M, which minimizes all windows.
- Just to make it easier to use I'd separate the "solution" files from the "example" files into separate directories. Right now one needs to read all the code to know what can be removed and what needs to stay. The solution should be "plug and play" i.e. drop in your project , include or inherit and that's it. Now I'd need to modify your files to use it in my code.
Hi I just tried this out and it looks really cool on Windows 10.
Haven't got a clue how it works though. There must be some style sheets in here somewhere.
Clearly the frameless window approach suffer from various artifacts.
I was wondering what is the correct windows API way ( if any) for such windows?
(if you know it)
@mrjj Honestly I stopped believing there's a "correct" way to do this. There's definitely no way to do this using only Qt. You need to go platform specific to get even close. Don't know much about other platforms but on Windows this means you don't change the window type (i.e. the frameless hint). Instead you handle several non-client related window messages, starting with WM_NCPAINT and WM_NCHITTEST.
The first one lets you paint in the non-client area (the frame), but it means you can't directly use QPainter to do this. A nice implementation of the frameless window that I would like to see would be a QWidget/QDialog/QMainWindow derived class that exposed something like a virtual
nonClientPaintEvent(NonClientPaintEvent*)and in its argument provided a custom QPaintDevice that would use WinApi to actally draw. This would make it a lot nicer to work with, making it similar to the usual
paintEvent(QPaintEvent*)and allowing to use QPainter. The custom paint device could then be abstracted into platform-specific code, allowing to make it cross-platform by just providing different backends... that's my idea anyway. I think it would make for a nice api, but I never found enough time to actually implement it.
The second message is particularly nasty. It's suppose to be used to let OS know which area of the non-client the mouse is pressed on. Theoretically you could skip implementing it if you don't want to change the defaults, but someone in Microsoft thought that this message is also a good place to draw unstyled buttons and other weirdness when they detect you handled WM_NCPAINT. So you're pretty much forced to redo the border calculations manually :/ These tend to change from version to version of Windows, making it pretty ridiculous to handle correctly. The other problem with this message is that for whatever reason there are circumstances in which Windows won't send you this message and draws the ugly non-Aero border by itself. You need certain tricks to force it to remember about you.
On top of these come various DWM hacks that Microsoft keeps on adding. For example I previously mentioned the shadow that acts like a border. It does except when it doesn't ;) When you maximize a window or use Aero snap the borders are automagically shrinked so that your client area fills the screen and the borders don't bleed to neighboring monitors. This stops happening for you when you handle WM_NCPAINT. DWM driver seems to be doing some heuristics to make this work for some apps, there are probably some ways to help it make the right thing, but I see it notoriously breaking down in apps all the time.
Cherry on top is that there's practically no good documentation on the topic. To give an example here's a WM_NCPAINT MSDN page. It has a nice simple example. Except the example doesn't work. The device context you get can't be drawn to :) Turns out you need to pass some more flags to
GetDCExbut that's left out of the docs. That's unfortunately the state of the documentation across the board for the topic of custom frames.
Here's a starter doc for the topic: Custom Window frame using DWM, but note that it doesn't mention various quirks that occur in actual implementation.
So even 20 years later, it still boils down to WM_NCPAINT and WM_NCHITTEST events.
I had hoped they have added something better with the new versions of windows since many modern
apps seems to have the ability to place controls in caption area but otherwise function as expected in
terms of resize etc.
I like your design with custom QPaintDevice as it would make more easy but calculating the border resize manually have many
cases with multihead configurations and there are most likely more little details like Active/Non active hints (caption color)
Thank you for your input. Always a pleasure :)
Interesting read. It seems to be asked a lot on the internet.
@mrjj One technique for drawing tabs and whatnot on the titlebar is combination of what I described and what's in that article I linked to - extending the client area onto the frame to allow custom painting, but leaving couple pixels to let Windows handle the resizing etc. This comes with its own set of problems though ;)
I also wonder if all the link says still applies in windows 10.
The glass effect api its still present but have no effect.
Some of it seems in Qt already
So its fair to say its huge work to get a perfectly working version :)
@Chris-Kawa Wow, thx for the deep review and comments. As I said before it is the first initial example, of a simple way to style and decorate dialogs. To get all the features to have native feeling - I had to add OS specific code inside.
So I think I will create a dev branch to make a more windows native version with some points from your list.
The reason I started this was the dark style I created times ago based on fusion and applied stylesheets. It looks great on Systems with dark window styles - but on Windows7 it looks terrible. I have to use Windows for my day job, so I'm, using there VS2013/2015/2017... and I really like the style/theme and the frameless window.
So I started to make this little example to "look" like the Visual Studio IDE ;)
Maybe someone else is interested in improving my code by @Chris-Kawa s List. You are welcome to do it
You are not alone liking dark and frame less so many people would be happy
for a good solution to download. Even if its windows only.
I would love to see a youtube video showing how you go about styling a dialog.
I wonder if you would be up for that.
I mean start with an empty qt and show how you go about doing some simple styling, because I have no idea how it works, even though I have looked at your code.
@Asimov good idea - I'm really busy - but I try to make such a tutorial video next few weeks.
I currently using some "tricks" to do this. The important one, is to embed my "main" window into another one, which has some window flags to make it frameless. (like a splash screen).
After that I can add my buttons (minimize, maximize, close, ...) the title bar etc. to my upper window layout. And of course using stylesheets to give the outer window a nice look and feel.
All the "magic" with drag & drop on titlebar or minimize/maximize is also done in the outer window by overloading mouse events.
- maybe install eventFilter or connect signals from embed window, to get all the changes (if you change the size, make it maximize, etc...)
- also implement resize by all borders, not only the sizeGrid
- and improve all the stuff @Chris-Kawa mentioned before