CustomWindow in Qt (create your own QWindow)

Brief introduction

I’ve seen several questions in the Qt Forum about how to customize or create our CustomWindow predefined window title buttons or the styles of it. First of all is necessary to explain that this is not a trivial issue since the OS API defines these controls and styles.

In the case of Windows, the title bar is created by Windows Manager so it is impossible to modify it. If we want a personalized title bar or modify the styles of the border of the window or whatever, it is necessary to remove it and then, create our custom QWidget with our own title bar. Before we start to write our own custom QWindow we need to understand that is not an easy task. Our QWidget must fulfill the following requirements:

• Catch some mouse events: press, release, move… In order to know where to move or how to resize the window.
• Implement the top-right buttons behavior: close, minimize, maximize, restore…
• Manage the include of the central widget that will has the main functionality.
• We could want to add a top-left menu and the title of the window. It is necessary to implement too.
• The good things that provide us a custom title bar is the possibility to add new buttons with extended functionality, customize the top-left menu with our own options and definitely, to have our application window style unified.

The best way to learn Qt goes trough code, code & code. In this case, create our custom window title and all the functionality it involves is a good way to learn the Qt window management.

My custom QWindow

I’ve crafted my own CustomWindow with a customized title bar. It has a minimalist aspect and you can modify it as much as you want. If you just want it raw, take it as it is!

The class has a method to set the central widget (that it also sets the title of the window) and another to set the menu of the top-left button. One important question is whether we want to connect the signals of the top-left menu with slots or other signals of our CentralWidget.

A connect links two objects by their memory addresses, so is not important where we define the connect but it is which objects we want to link. In conclusion, we can connect the signals of the actions of our menu with the slots of our central widget outside the CustomWindow and then set the menu and the central widget to it without problems.

The code is composed only by the class CustomWindow and you can find a link to the code at the end of the post. Following I explain briefly how to use it (although I’ve commented the code).

Step by step

1. Create an instance of our CentralWidget (named i.e. centralWidget).
2. Create a QMenu with QActions or get one created (named i.e. titlebarMenu).
3. We create an instance of the class CustomWindow.
4. Connect the signals of the QMenu to the slots of the CentralWidget (or to other places).
5. We use CustomWindow::setCentralWidget(centralWidget, “Our applications”); to set the central widget
6. We use CustomWindow::setTitlebarMenu(titlebarMenu, “path/to/menu/img.png”); to set the menu and an icon to it. The menu icon is optional.
7. We use CustomWindow::setTitlebarMode(CustomWindow::TitleMode); with the option of TitleMode that we want. The title mode defines which buttons and behavior we want to have in the window. It allows us to create dialogs, windows or other window types without any effort.
8. IMPORTANT: If we have a close button or a close action in our centralWidget, it is necessary to connect it to the CustomWindow instance to close it. There are two ways to do it:
   1. Connecting the signal of the centralWidget to CustomWindow::close().
   2. Emit a signal MyWidget::cancelled() from our centralWidget since it is already connected inside CustomWindow to close() slot.
9. Call CustomWindow::show(); and enjoy!

Note: If we skip the 8th step, when we click the close/cancel button, only the central widget will closed.

You can find the CustomWindow code in my GitHub repository.