MDI Window buttons, Icon, Title, Border, Style?



  • does anybody know how to style the red circled parts in the following image in css?
    http://imgur.com/HWWE6SD

    I want it to fit with the rest of the style which uses a border image.

    I know you can hide the titlebar but then comes the problem with creating a custom one.
    also I'm not sure if hiding the title bar hides the borders or not but I would like them to be gone as well

    EDIT: ok so I stole some code from a post about this on another forum and converted it to a Widget
    however it crashes when I try to drag my window.

    this is my code..
    header file..

    #ifndef QTITLEBAR_H
    #define QTITLEBAR_H
    
    #include <QWidget>
    #include <QBoxLayout>
    #include <QPushButton>
    #include <QLabel>
    #include <QMouseEvent>
    
    namespace Ui
    {
        class QTitleBar;
    }
    
    class QTitleBar : public QWidget
    {
        Q_OBJECT
    
        public:
            explicit QTitleBar(QWidget *parent = 0);
            ~QTitleBar();
    
        private:
            Ui::QTitleBar *ui;
            QPoint cursor;
            QWidget *parent;
    
        protected:
            void mousePressEvent( QMouseEvent *event );
            void mouseMoveEvent( QMouseEvent *event );
    };
    
    #endif // QTITLEBAR_H
    

    source file..

    #include "qtitlebar.h"
    #include "ui_qtitlebar.h"
    
    QTitleBar::QTitleBar(QWidget *parent) :QWidget(parent), ui(new Ui::QTitleBar)
    {
        ui->setupUi(this);
        parent = parent;
    
        QLabel *label = new QLabel( parent->windowTitle() );
        QPushButton *buttonClose = new QPushButton( "x" );
    
        QHBoxLayout *layout = new QHBoxLayout( this );
            layout->addWidget( label, 1 );
            layout->addWidget( buttonClose );
    
        connect(buttonClose, SIGNAL(clicked()), parent, SLOT(close()));
    }
    
    QTitleBar::~QTitleBar()
    {
        delete ui;
    }
    
    void QTitleBar::mousePressEvent( QMouseEvent *event )
    {
        if( event->button() == Qt::LeftButton )
            cursor = event->globalPos() - geometry().topLeft();
    }
    
    void QTitleBar::mouseMoveEvent( QMouseEvent *event )
    {
        if( event->buttons() & Qt::LeftButton )
            parent->move( event->globalPos() - cursor );
    }
    

    basicly I made a Widget and form for it and promoted a QWidget to it inside the actual screeneditor form.
    so just to clarify I have a qtitlebar.ui and then my actual screenwindow.ui with a QWidget in it promoted to the qtitlebar class.

    EDIT2: I was wondering something because I was googling around and saw that people where saying the main window title bar is not customizable by qss.
    however does the QMdiSubWindow use the os because it looks like it in my project but here in the docs: http://doc.qt.io/qt-4.8/qmdisubwindow.html#SubWindowOption-enum it uses a different style.

    is the QMdiSubWindow's title bar and border considered to be part the os? or is it part of qt?

    I would really like to know because if there is anything I can do to get it to look like the rest of my window it would make my day.



  • @Shadowblitz16 So if you found some code and it crashes, show us the stack trace on the crash and we can help.

    Main window title bar can not be customized with css, that is correct.

    I believe (and I'm not 100% sure here) that the mdi sub windows do use the OS window decorations.

    You can always subclass the mdi window and do your own drawing. Or your project really seems to scream for using QML. Based on what I've seen you post lately on the forums you are doing a lot of custom drawing and that is what QML makes super easy. Definitely something to look into as you can customize the looks of anything with just a few lines of QML script.



  • the crash was because I was doing "parent = parent;" instead of "this->parent = parent;"

    what should I subclass it as?
    and if QML is what you say it is then I will take a look into it.

    EDIT: I don't have a QML project option when I go to new project and QtQuick is missing alot of basic stuff like the menubar.
    I think I would rather stick with c++.


  • Lifetime Qt Champion

    Hi,

    Why are you keeping a copy of parent ?



  • Hi SGaist I was keeping a copy of parent so I can reference it in my move event however my code has changed since then trying to get this to work

    the main issue is the style of the mdi subwindow I don't like that it is in the native win7 style
    I would really like it to fit with the rest of my style .



  • @Shadowblitz16 said in MDI Window buttons, Icon, Title, Border, Style?:

    the crash was because I was doing "parent = parent;" instead of "this->parent = parent;"

    what should I subclass it as?
    and if QML is what you say it is then I will take a look into it.

    EDIT: I don't have a QML project option when I go to new project and QtQuick is missing alot of basic stuff like the menubar.
    I think I would rather stick with c++.

    You don't need to use QML for everything. It integrates really well with the C++ side. It would take a bit of learning though.

    But if you prefer the C++ widgets definitely use those. I haven't used QML in a real project yet so I'm still a C++ widgets only developer technically. ;) They work great.

    In your case though, you will need to subclass and do your own drawing then. It's not super hard but it is definitely more work than using QML for sure. You can create your own custom widget or you may be able to use the mdi widget and just subclass. I've never tried it on an mdi window to be sure. I tend to steer clear of MDIs for most stuff. You don't really see a lot of things that use true MDI any more. Most modern stuff tends to be more view oriented and not as much multiple windows in a container.



  • Thankyou ambershark.
    if you mean subclassing as in inheriting directly from QMdiSubWindow I have tried that.
    it seems that it breaks and puts my widgets in the topleft corner of the titlebar as I explained in my other topics.

    I also am not sure how to directly override the titlebar as I don't know how to view the source of QMdiSubWindow.
    if you know how I can view the code this would help a bunch. thanks

    EDIT: ok so I'm going to try to take the route of creating a custom titlebar widget that inherits from QWidget
    however I need to know if there is a way of docking it above the menubar like a titlebar actually is.
    does anybody know?



  • @Shadowblitz16 You can position a widget wherever you want, including above a menu bar. You may need to write your own code to "dock" it but it's definitely possible.

    As for Qt source, you can download a source distribution and extract that. Or, install the source as part of the installer (you can change and add that feature with your current install using MaintenanceTool.exe). Or finally, you can grab Qt directly from git.



  • thankyou ambershark.
    I have googled in search for a way to dock it above the menubar however I haven't found anything.
    if you have code or a link that I can learn from please post it.

    for the qt source, I have looked it up but cannot access most of the files.
    they seem to be locked from the public.



  • @Shadowblitz16 said in MDI Window buttons, Icon, Title, Border, Style?:

    for the qt source, I have looked it up but cannot access most of the files.
    they seem to be locked from the public.

    That's weird. I'm sure they are locked for commits but it's an open source library so it's available. Again you can just run the maintenance tool and install the source, as in this screen shot:

    ss.png

    and of course you can just download it.. here are the official links for you:

    http://download.qt.io/official_releases/qt/5.8/5.8.0/single/qt-everywhere-opensource-src-5.8.0.zip
    (windows)

    http://download.qt.io/official_releases/qt/5.8/5.8.0/single/qt-everywhere-opensource-src-5.8.0.tar.gz
    (linux, osx)

    Oh and I don't really have any example code. I haven't worked on an MDI in a long time. Certainly nothing fancy like custom titlebars. ;)


Log in to reply