Create Custom Window, with custom TitleBar

[Andrea_Venturelli]

Hi guys, I'm struggling a lot in creating a FramelessWindow which can be attached with a custom Titlebar (that is a custom widget derived from QWidget).

the top red-rectangle is my custom Titlebar Widget (called in the project as "WindowFrame") which has a cunstructor that accept 2 QString for setting the parameter to the Profile_banner and the QWidget* parent parameter as illustrated here:
.

this is a stand alone Qt project with is own ".pro" file.
I have another project directory where I have this UI:

My Plan was:

• INCLUDEPATH += "the path to my CustomTitleBar" to my TrackManager.pro file
• Create an instance of WindowFrame as a member
• In the constructor for TrackManager, retrive the verticalBoxLayout and add it at the top.
  

but when I run the program, give me an error saing:

My question is: What is the smartest and optimal approch to create a custom Window with Interchangable TitleBar ?

I use C++17 , Qt Creator Latest version, and MinGW64 for building.

[jsulm]

@Andrea_Venturelli said in Create Custom Window, with custom TitleBar:

INCLUDEPATH += "the path to my CustomTitleBar" to my TrackManager.pro file

This is not enough: you also need the cpp file. Without it you get the error you posted.

[Andrea_Venturelli]

sorry, I only include the directory where all the .cpp, .h and .ui is located.. what I need to do to my ".pro" file ?

[jsulm]

@Andrea_Venturelli Again: you need WindowFrame.cpp. You have to add it to SOURCES.
And please post error messages and code as text not pictures.

[Pl45m4]

@Andrea_Venturelli

Hi,

if you have multiple and different "title bar" widgets, which you want to show depending on your configuration or user, looking at the Document Viewer example may help.
This project uses different viewer widgets (loaded as Qt plugin library) for each context of the app

• https://doc.qt.io/qt-6/qtdoc-demos-documentviewer-example.html

Try this, when you have multiple title bar widgets, or you simply include the one class in your app like @jsulm said.

[Andrea_Venturelli]

guys I added the .cpp file to the "SOURCE" param of the ".pro" file and now the error message has changed to the following:

C:/Qt/Tools/mingw1120_64/bin/../lib/gcc/x86_64-w64-mingw32/11.2.0/../../../../x86_64-w64-mingw32/bin/ld.exe: debug/windowframe.o: in function `WindowFrame::on_maximize_tbnt_clicked()':
C:/Qt/Tools/mingw1120_64/bin/../lib/gcc/x86_64-w64-mingw32/11.2.0/../../../../x86_64-w64-mingw32/bin/ld.exe: debug/windowframe.o: in function `WindowFrame::on_minimize_tbtn_clicked()':
collect2.exe: error: ld returned 1 exit status
C:\Users\path\Qt_c++\TrackInspector\windowframe.cpp:50: error: undefined reference to `WindowFrame::showNormalClicked()'
:-1: error: C:\Users\path\Qt_c++\TrackInspector\build\Desktop_Qt_6_7_1_MinGW_64_bit-Debug/../../windowframe.cpp:54: undefined reference to `WindowFrame::maximizedClicked()'
C:\Users\path\Qt_c++\TrackInspector\windowframe.cpp:61: error: undefined reference to `WindowFrame::minimizedClicked()'
:-1: error: debug/windowframe.o:windowframe.cp:(.rdata$.refptr._ZTV11WindowFrame[.refptr._ZTV11WindowFrame]+0x0): undefined reference to `vtable for WindowFrame'
:-1: error: [Makefile.Debug:83: debug/TrackInspector.exe] Error 1

My .pro file look like this now:

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++17

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    trackmanager.cpp \
    windowframe.cpp

HEADERS += \
    ../TitleCustomBar/profilebanner.h \
    trackmanager.h
    windowframe.h

FORMS += \
    ../TitleCustomBar/profilebanner.ui \
    ../TitleCustomBar/windowframe.ui \
    trackmanager.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

RESOURCES += \
    resource.qrc

INCLUDEPATH += "C:\Users\path\Qt_c++\TitleCustomBar"

[JonB]

@Andrea_Venturelli said in Create Custom Window, with custom TitleBar:

:-1: error: debug/windowframe.o:windowframe.cp:(.rdata$.refptr._ZTV11WindowFrame[.refptr._ZTV11WindowFrame]+0x0): undefined reference to `vtable for WindowFrame'

• Clean everything out of build output directory and rebuild.
• Does your WindowFrame class have/need Q_OBJECT macro?

[Andrea_Venturelli]

@JonB I tryed deleting the Built folder and re-built but gave me the same error.

I was tring to share the code but the page gave me the error of "spam message"

[Andrea_Venturelli]

I set-up a gitHub account, here the code
GitHub-repository

[Andrea_Venturelli]

the code is now working, seems one .cpp was still missed. but now I have this new problem where I loose che color background of the WindowFrame.

I Tryed removing the "backgroung-color" from the stylesheet of the WindowFrame.ui and replace it with "transparent".
After that I Tryed addign the stylesheet directly to the component and also to the TrackManager.ui targeting the WindowFrame {}

this is the result:

#include "trackmanager.h"
#include "ui_trackmanager.h"

TrackManager::TrackManager(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::TrackManager)
{
    ui->setupUi(this);

    QString TEMP_USER{"genericmail@gmail.it"};
    QString TEMP_POWER{"Admin"};

    /*  Declaration status bar & title window  */
    m_statusbar = new QStatusBar();
    m_titlebar = new WindowFrame(TEMP_USER, TEMP_POWER, this);
    m_titlebar->setStyleSheet("QWidget { background-color: \"#9b0000\";}");
    connect(m_titlebar, &WindowFrame::maximizedClicked, this, &QWidget::showMaximized);
    connect(m_titlebar, &WindowFrame::minimizedClicked, this, &QWidget::showMinimized);

    QVBoxLayout* window_layout = qobject_cast<QVBoxLayout*>(this->layout());
    window_layout->insertWidget(0, m_titlebar);
    window_layout->insertWidget(2, m_statusbar);
}

QWidget
{
	background-color: "#7e7474";
}


#toolbar_wdg
{
	background-color: "#883d3d";
	border-radius: 12;
}


QToolButton
{
	background-color: white;
	border-radius: 8;
	border: 2 solid transparent;

	outline: 0;
}

QToolButton:checked
{
	background-color: rgb(239, 99, 102);
}

QToolButton:hover
{
	border-color:  rgb(56, 132, 255);
}

WindowFrame QWidget
{
	background-color: red;
}

[Andrea_Venturelli]

The problem I had at the beginning was solved by including ALL the custom widget I had created ( file.h, file.cpp, file.ui) inside the final project directory;

To do so, you need to edit your final project "file.pro" and add the folder's paths where your custom widget live like so

"
inside .pro file
INCLUDEPATH += " insert/path/toyour/customWidgets "
"
After that, you can select "add existing file" directly from the Projects panel
.

On the other hand, I still struggle understanding how to create a custom-reusable-widget, which i defined its own stylesheet, but after it become a child widget, it will lose all the top level styling and only the components style will be applied (es. QPushButton, QLabel ecc..) because Qt erase the top level QWidget stylesheet for optimization purpose, or at least this is what I understand from reading posts

[Pl45m4]

@Andrea_Venturelli said in Create Custom Window, with custom TitleBar:

On the other hand, I still struggle understanding how to create a custom-reusable-widget, which i defined its own stylesheet, but after it become a child widget, it will lose all the top level styling and only the components style will be applied (es. QPushButton, QLabel ecc..) because Qt erase the top level QWidget stylesheet for optimization purpose, or at least this is what I understand from reading posts

Normally the last set and more specific settings should apply.

See here:

• https://doc.qt.io/qt-6/stylesheet-syntax.html
  • https://doc.qt.io/qt-6/stylesheet-syntax.html#conflict-resolution
  • https://doc.qt.io/qt-6/stylesheet-syntax.html#cascading
  • https://doc.qt.io/qt-6/stylesheet-syntax.html#inheritance