How to create VS2013 like frameless window with dark style

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

saeid0034

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

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

what can i do about this?
i use 2 frameless in my test too but the output is second window doesn't show (only a empty frameless window show)

also i use this code in mainwindow.cpp to show new window and hide old one

void MainWindow::on_pushButton_clicked()
{
    // ----- Hide old Window and show new window ----- //
     hide();
     mainwindow2 = new MainWindow2(this);
}

mrjj

@saeid0034
so you did try with
FramelessWindow framelessWindow;
FramelessWindow framelessWindow2;

and it wont show ?

also the on_pushButton_clicked will just make a new one and NOT USE frameless as you dont add that ot it like you do in main.

saeid0034

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

@saeid0034
so you did try with
FramelessWindow framelessWindow;
FramelessWindow framelessWindow2;

and it wont show ?

also the on_pushButton_clicked will just make a new one and NOT USE frameless as you dont add that ot it like you do in main.

what can i do?
you mean i need somthing like this in my mainwindow.cpp?

void MainWindow::on_pushButton_clicked()
{
    // ----- Hide old Window and show new window ----- //
     hide();

     // style our application with custom dark style
     setStyle(new DarkStyle);

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

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

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

     //mainwindow2 = new MainWindow2(this);
}

sorry for asking lots of question (and sorry about mistake in framelessWindow2.setWindowTitle in above code)

mrjj

Hi
seems ok.
Yes you need to to the same each time you create a Window you want to be frame less

one thing.

setStyle(new DarkStyle);

that sets on the current MainWindow and i thnik you need that on the new one

// create our mainwindow instance
MainWindow2 *mainwindow2 = new MainWindow2;
mainwindow2 -> setStyle(new DarkStyle);

sorry for asking lots of question
That is quite allright :)

saeid0034

This post is deleted!

saeid0034

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

Hi
seems ok.
Yes you need to to the same each time you create a Window you want to be frame less

one thing.

setStyle(new DarkStyle);

that sets on the current MainWindow and i thnik you need that on the new one

// create our mainwindow instance
MainWindow2 *mainwindow2 = new MainWindow2;
mainwindow2 -> setStyle(new DarkStyle);

sorry for asking lots of question
That is quite allright :)

i tested it with following code

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

         // create our mainwindow instance
         MainWindow2 *mainwindow2 = new MainWindow2;
         mainwindow2 -> setStyle(new DarkStyle);

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

         //mainwindow2 = new MainWindow2(this);

but again it show me only a blank frameless window of my second ui file

one other point is as you can see WindowTitle is test (i use this title in my frist windown in main.cpp) its not use new WindowTitle i set in above code