How to create VS2013 like frameless window with dark style

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

mrjj

Hi
Sorry was not paying enough focus.

You cannot do
FramelessWindow framelessWindow2;

as it will run out of scope. That only works in main.cpp

you MUST new them as you do with MainWindow

saeid0034

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

Hi
Sorry was not paying enough focus.

You cannot do
FramelessWindow framelessWindow2;

as it will run out of scope. That only works in main.cpp

you MUST new them as you do with MainWindow

how can i add new FramelessWindow framelessWindow2 in main.cpp and then use it onvoid MainWindow::on_pushButton_clicked()in mainwindow.cpp?

mrjj

@saeid0034

Hi you dont need to add it there you can add anywhere but you must NEW it then

and not as local variable as then it runs out of scope.

So what i mean is just to do
FramelessWindow * framelessWindow2 = new FramelessWindow ;

and not just
FramelessWindow framelessWindow2; // this is a local variable and as soon as
on_pushButton_clicked ends , it will be deleted

so you have to new it

saeid0034

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

FramelessWindow * framelessWindow2 = new FramelessWindow ;

thanks
i do what you say
this time second window open when i click button
but old blank frameless window still open too

void MainWindow::on_pushButton_clicked()
{
    // ----- Hide old Window and show new window ----- //
     hide();
     FramelessWindow * framelessWindow2 = new FramelessWindow ;
     // style our application with custom dark style
     setStyle(new DarkStyle);
     //framelessWindow.setWindowState(Qt::WindowMaximized);
     framelessWindow2->setWindowTitle("test");
     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();
}