Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to create VS2013 like frameless window with dark style
Forum Updated to NodeBB v4.3 + New Features

How to create VS2013 like frameless window with dark style

Scheduled Pinned Locked Moved Unsolved General and Desktop
45 Posts 5 Posters 18.2k Views 5 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    Jorgen
    wrote on last edited by
    #13

    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();
    }
    
    1 Reply Last reply
    1
    • Chris KawaC Offline
      Chris KawaC Offline
      Chris Kawa
      Lifetime Qt Champion
      wrote on last edited by
      #14

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

      J 1 Reply Last reply
      1
      • Chris KawaC 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.

        J Offline
        J Offline
        Jorgen
        wrote on last edited by
        #15

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

        1 Reply Last reply
        1
        • S Offline
          S Offline
          saeid0034
          wrote on last edited by
          #16

          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

          mrjjM 1 Reply Last reply
          0
          • S 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

            mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on last edited by
            #17

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

            S 1 Reply Last reply
            1
            • mrjjM 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);

              S Offline
              S Offline
              saeid0034
              wrote on last edited by saeid0034
              #18

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

              1 Reply Last reply
              0
              • S Offline
                S Offline
                saeid0034
                wrote on last edited by
                #19
                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
                1d86c029-0a04-4c18-8e3c-a15df0f36f60-image.png

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

                1 Reply Last reply
                0
                • mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on last edited by mrjj
                  #20

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

                  S 1 Reply Last reply
                  2
                  • mrjjM mrjj

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

                    S Offline
                    S Offline
                    saeid0034
                    wrote on last edited by saeid0034
                    #21

                    @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);
                    }
                    
                    mrjjM 1 Reply Last reply
                    0
                    • S 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);
                      }
                      
                      mrjjM Offline
                      mrjjM Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on last edited by mrjj
                      #22

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

                      S 1 Reply Last reply
                      1
                      • mrjjM 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.

                        S Offline
                        S Offline
                        saeid0034
                        wrote on last edited by saeid0034
                        #23

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

                        mrjjM S 2 Replies Last reply
                        0
                        • S 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)

                          mrjjM Offline
                          mrjjM Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on last edited by
                          #24

                          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 :)
                          S 1 Reply Last reply
                          1
                          • S 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)

                            S Offline
                            S Offline
                            saeid0034
                            wrote on last edited by
                            #25
                            This post is deleted!
                            1 Reply Last reply
                            0
                            • mrjjM 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 :)
                              S Offline
                              S Offline
                              saeid0034
                              wrote on last edited by saeid0034
                              #26

                              @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

                              bdc7674c-a57e-441e-869c-56bbf4dd7ac8-image.png

                              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

                              1 Reply Last reply
                              0
                              • mrjjM Offline
                                mrjjM Offline
                                mrjj
                                Lifetime Qt Champion
                                wrote on last edited by
                                #27

                                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

                                S 1 Reply Last reply
                                1
                                • mrjjM 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

                                  S Offline
                                  S Offline
                                  saeid0034
                                  wrote on last edited by
                                  #28

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

                                  mrjjM 1 Reply Last reply
                                  0
                                  • S 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?

                                    mrjjM Offline
                                    mrjjM Offline
                                    mrjj
                                    Lifetime Qt Champion
                                    wrote on last edited by
                                    #29

                                    @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

                                    1 Reply Last reply
                                    1
                                    • S Offline
                                      S Offline
                                      saeid0034
                                      wrote on last edited by saeid0034
                                      #30

                                      @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

                                      af260e6b-83bc-4dd7-bac3-99f04c4fba50-image.png

                                      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();
                                      }
                                      
                                      mrjjM 1 Reply Last reply
                                      0
                                      • S 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

                                        af260e6b-83bc-4dd7-bac3-99f04c4fba50-image.png

                                        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();
                                        }
                                        
                                        mrjjM Offline
                                        mrjjM Offline
                                        mrjj
                                        Lifetime Qt Champion
                                        wrote on last edited by
                                        #31

                                        @saeid0034
                                        The other empty one, is that from you create 2 in main.cpp or
                                        do you only create one there?

                                        S 1 Reply Last reply
                                        1
                                        • mrjjM mrjj

                                          @saeid0034
                                          The other empty one, is that from you create 2 in main.cpp or
                                          do you only create one there?

                                          S Offline
                                          S Offline
                                          saeid0034
                                          wrote on last edited by
                                          #32

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

                                          @saeid0034
                                          The other empty one, is that from you create 2 in main.cpp or
                                          do you only create one there?

                                          i only create one
                                          i send the code im used

                                          mrjjM 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved