How to create VS2013 like frameless window with dark style

Jorgen

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 qt frameless window with custom dark style - mac enabled
Screenshot (mac disabled):

Chris Kawa

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.

Asimov

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.

Thanks.

mrjj

@Chris-Kawa
Hi
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)

Chris Kawa

@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 GetDCEx but 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.

mrjj

@Chris-Kawa said in How to create VS2013 like frameless window with dark style:

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.

Chris Kawa

@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 ;)

mrjj

@Chris-Kawa
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
http://doc.qt.io/qt-5/qtwin.html#extendFrameIntoClientArea

So its fair to say its huge work to get a perfectly working version :)

Jorgen

@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

mrjj

@Jorgen
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.

Asimov

@Jorgen
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.

Jorgen

@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.

ToDOs:

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

Jorgen

Guys I had some spare time to update my Repo: https://github.com/Jorgen-VikingGod/Qt-Frameless-Window-DarkStyle

There is now a much more improved frameless window, separated into extra classes to make it easier to use in existing projects. Also add feature to handle active/inactive or focus/no focus.

I also added a kind of drop shadow around the window. If it is active the shadow/glow is blue (=highlight color from palette) else it is dark.

There is also now a ui file for the frameless window, so you can easy move the buttons, change the layout, style, etc...

Here is simple example of using the frameless window:

#include <QApplication>
#include "DarkStyle.h"
#include "framelesswindow.h"
#include "mainwindow.h"

int main(int argc, char *argv[])
{
  QApplication a(argc, argv);

  // style our application with custom dark style
  CDarkStyle::assign();

  // create frameless window (and set windowState or title)
  FramelessWindow framelessWindow;
  //framelessWindow.setWindowState(Qt::WindowMaximized);
  //framelessWindow.setWindowTitle("test title");

  // create our mainwindow
  MainWindow mainWindow;

  // add the mainwindow to our custom frameless window
  framelessWindow.setContent(&mainWindow);
  framelessWindow.show();

  return a.exec();
}

Chris Kawa

@Jorgen Note that FramelessWindow takes ownership of the content so the example is "order dependent" i.e. this

FramelessWindow framelessWindow;
MainWindow mainWindow;
framelessWindow.setContent(&mainWindow);

will work, but this

MainWindow mainWindow;
FramelessWindow framelessWindow;
framelessWindow.setContent(&mainWindow);

will crash at exit. A more Qtish way of doing it would be

FramelessWindow framelessWindow;
MainWindow* mainWindow = new MainWindow;
framelessWindow.setContent(mainWindow);

to let the parent/child mechanism clean up.
This way order of creation doesn't matter and it might be less error prone example.

Jorgen

@Chris-Kawa thanks again for great tips.
Repo is now up to date.

saeid0034

hi im new to qt and c++, i wand to use this this Qt-Frameless-Window-DarkStyle on multi ui file
but i dont know how
every time i try all my ui file showed in a window together...
anyone can help me

mrjj

Hi and welcome to the forums

Did you try to create a frameless for each ?

// 1
FramelessWindow * framelessWindow = new FramelessWindow;
MainWindow *mainWindow = new MainWindow;
framelessWindow->setContent(mainWindow);
// 2
FramelessWindow * framelessWindow2 = new FramelessWindow;
MainWindow *mainWindow2 = new MainWindow;
framelessWindow2->setContent(mainWindow2);

saeid0034

@mrjj said in How to create VS2013 like frameless window with dark style:

// 1
FramelessWindow * framelessWindow = new FramelessWindow;
MainWindow *mainWindow = new MainWindow;
framelessWindow->setContent(mainWindow);
// 2
FramelessWindow * framelessWindow2 = new FramelessWindow;
MainWindow *mainWindow2 = new MainWindow;
framelessWindow2->setContent(mainWindow2);

thanks for fast reply
this code doesn't work
this time no ui come up at all

my code first of all open a window
when i click a button in first windows, second window open (first window hide)

saeid0034

a.setStyle(new DarkStyle);

  // create frameless window (and set windowState or title)
  FramelessWindow framelessWindow;
  //framelessWindow.setWindowState(Qt::WindowMaximized);
  framelessWindow.setWindowTitle("SubRan Patcher");
  framelessWindow.setWindowIcon(QIcon(":/png/sr-removebg-preview.png"));

  // create our mainwindow instance
  MainWindow *mainwindow = new MainWindow;
  MainWindow2 *mainwindow2 = new MainWindow2;

  // add the mainwindow to our custom frameless window
  framelessWindow.setContent(mainwindow);
  framelessWindow.setContent(mainwindow2);
  framelessWindow.show();

  return a.exec();

when i use this code my program start like this

as you can see my two windows showed together in one window

mrjj

Hi
You still using same frameless for both
framelessWindow.setContent(mainwindow);
framelessWindow.setContent(mainwindow2);