Optimizing UI Design: Harnessing Frameless Windows in PySide 6 with Qt Designer for Compiled UI

[ZouaouiB]

can you explain to me how i can user the the frameless window to set a Customize title bar in my code, i'm kinda lost in the documentation
i'm using pyside 6 last version

`# main.py
import os
import sys
import tempfile

from PySide6 import QtWidgets, QtCore
from PySide6.QtWidgets import QMainWindow
from qframelesswindow import FramelessMainWindow

from UI.IFRS_user_interface import Ui_MainWindow

from front_end.shadow_effect import ShadowEffectProvider
from front_end.mouse_interaction import MouseInteraction
from front_end.intro_animation import IntroAnimation

Loading Code

Use this code to signal the splash screen removal.

if "NUITKA_ONEFILE_PARENT" in os.environ:
splash_filename = os.path.join(
tempfile.gettempdir(),
"onefile_%d_splash_feedback.tmp" % int(os.environ["NUITKA_ONEFILE_PARENT"]),
)

if os.path.exists(splash_filename):
    os.unlink(splash_filename)

print("Splash Screen has been removed")

Fix problem for High DPI and Scale above 100%

os.environ["QT_FONT_DPI"] = "96"

class MainWindow(QMainWindow):
def init(self):
super().init()

    # Initialize the UI
    self.ui = Ui_MainWindow()
    self.ui.setupUi(self)

    # Set the window flags to remove the default title bar
    self.setWindowFlags(
        QtCore.Qt.FramelessWindowHint
    )

    # Create a status bar
    self.status_bar = QtWidgets.QStatusBar()
    self.status_bar.setStyleSheet("QStatusBar { background-color: transparent; color: #bffb4f; border: none }")

    # Add the status bar to the dropShadowFrame layout
    self.ui.grips_frame.layout().addWidget(self.status_bar)

    # Create an instance of MouseInteraction and pass the parent window and ui
    self.mouse_interaction = MouseInteraction(self, self.ui)

    # Create an instance of MouseInteraction and pass the parent window and ui
    self.intro_animation = IntroAnimation(self, self.ui)


def showEvent(self, event):
    self.intro_animation.toggle_open_animation_frame(1006, 300)
    print("Show event intro animation")
    super().showEvent(event)

if name == "main":
# Create the QApplication instance
app = QtWidgets.QApplication([])

# Create the main window
parent_window = MainWindow()

# Set window attributes to allow for custom painting with transparency.
parent_window.setAttribute(QtCore.Qt.WA_TranslucentBackground)

# Create an instance of ShadowEffectProvider and pass the parent window and ui
parent_window.shadow_provider = ShadowEffectProvider(parent_window, parent_window.ui)

# Create an instance of MouseInteraction and pass the parent window and ui
mouse_interaction = MouseInteraction(parent_window, parent_window.ui)

# Create an instance of IntroAnimation and pass the parent window and ui
intro_animation = IntroAnimation(parent_window, parent_window.ui)

# Connect mouse event signals to MouseInteraction methods
parent_window.mousePressEvent = mouse_interaction.handle_mouse_press
parent_window.mouseMoveEvent = mouse_interaction.handle_mouse_move
parent_window.mouseReleaseEvent = mouse_interaction.handle_mouse_release
parent_window.mouseDoubleClickEvent = mouse_interaction.handle_mouse_double_click

# show the main window
parent_window.show()

# Start the event loop
sys.exit(app.exec())

`

`# -- coding: utf-8 --

################################################################################

Form generated from reading UI file 'IFRS_user_interface.ui'

Created by: Qt User Interface Compiler version 6.6.0

WARNING! All changes made in this file will be lost when recompiling UI file!

################################################################################

from PySide6.QtCore import (QCoreApplication, QDate, QDateTime, QLocale,
QMetaObject, QObject, QPoint, QRect,
QSize, QTime, QUrl, Qt)
from PySide6.QtGui import (QBrush, QColor, QConicalGradient, QCursor,
QFont, QFontDatabase, QGradient, QIcon,
QImage, QKeySequence, QLinearGradient, QPainter,
QPalette, QPixmap, QRadialGradient, QTransform)
from PySide6.QtWidgets import (QApplication, QFrame, QHBoxLayout, QLabel,
QMainWindow, QProgressBar, QPushButton, QSizePolicy,
QSpacerItem, QVBoxLayout, QWidget)
import ressources

class Ui_MainWindow(object):
def setupUi(self, MainWindow):
if not MainWindow.objectName():
MainWindow.setObjectName(u"MainWindow")
MainWindow.resize(977, 542)
sizePolicy = QSizePolicy(QSizePolicy.Preferred, QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(MainWindow.sizePolicy().hasHeightForWidth())
MainWindow.setSizePolicy(sizePolicy)`

[zhiyiYo]

You can't use frameless window in designer

[ZouaouiB]

Hello, appreciate your response! I'm looking to integrate the custom title bar developed in your code, not within the designer itself but in the main.py file, Can you assist me with this implementation?

class MainWindow(QMainWindow):
def init(self):
super().init()

# Initialize the UI
self.ui = Ui_MainWindow()
self.ui.setupUi(self)

[ZouaouiB]

@YouKnow-sys
I need you assistance please

[zhiyiYo]

Please check this demo: https://pyqt-frameless-window.readthedocs.io/en/latest/usage.html#work-with-qt-designer

[msalmonw]

Hello, appreciate your response! I'm looking to integrate the custom title bar developed in your code, not within the designer itself but in the main.py file, Can you assist me with this implementation?

class MainWindow(QMainWindow): def init(self): super().init()

# Initialize the UI
self.ui = Ui_MainWindow()
self.ui.setupUi(self)

1. Create your UI inside a QWidget parent, not a QMainWindow parent. Compile the UI to .py.
2. Create a new class that inherits from the FramelessWindow/AcrylicWindow class and the UI class.

from qframelesswindow import AcrylicWindow, TitleBar
from UI.DDCApp import Ui_DDCApp

class DDCApplication(Ui_DDCApp, AcrylicWindow):
    themeChangedSignal = QtCore.Signal(str)
    def __init__(self):
        super().__init__()
        self.setupUi(self)

3. Create a custom titlebar inherited from the TitleBar class of qframelesswindow. Like I did here.

class CustomTitleBar(TitleBar):
    """ Custom title bar """

    def __init__(self, parent):
        super().__init__(parent)
        self.maxBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(255, 255, 255, 255);
                qproperty-normalBackgroundColor: transparent;
                qproperty-hoverColor: white;
                qproperty-hoverBackgroundColor: rgb(0, 100, 182);
                qproperty-pressedColor: white;
                qproperty-pressedBackgroundColor: rgb(54, 57, 65);
            }
        """)
        self.minBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(255, 255, 255, 255);
                qproperty-normalBackgroundColor: transparent;
                qproperty-hoverColor: white;
                qproperty-hoverBackgroundColor: rgb(0, 100, 182);
                qproperty-pressedColor: white;
                qproperty-pressedBackgroundColor: rgb(54, 57, 65);
                height: 4px;
            }
        """)
        self.closeBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(255, 255, 255, 255);
                qproperty-normalBackgroundColor: transparent;
            }
        """)
    
    def dark(self):
        self.maxBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(255, 255, 255, 255);
                qproperty-normalBackgroundColor: transparent;
                qproperty-hoverColor: white;
                qproperty-hoverBackgroundColor: rgb(0, 100, 182);
                qproperty-pressedColor: white;
                qproperty-pressedBackgroundColor: rgb(54, 57, 65);
            }
        """)
        self.minBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(255, 255, 255, 255);
                qproperty-normalBackgroundColor: transparent;
                qproperty-hoverColor: white;
                qproperty-hoverBackgroundColor: rgb(0, 100, 182);
                qproperty-pressedColor: white;
                qproperty-pressedBackgroundColor: rgb(54, 57, 65);
                height: 4px;
            }
        """)
        self.closeBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(255, 255, 255, 255);
                qproperty-normalBackgroundColor: transparent;
            }
        """)

    
    def light(self):
        self.maxBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(0, 0, 0, 255);
                qproperty-normalBackgroundColor: transparent;
                qproperty-hoverColor: white;
                qproperty-hoverBackgroundColor: rgba(0, 0, 0, 128);
                qproperty-pressedColor: white;
                qproperty-pressedBackgroundColor: rgba(0, 0, 0, 128);
            }
        """)
        self.minBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(0, 0, 0, 255);
                qproperty-normalBackgroundColor: transparent;
                qproperty-hoverColor: white;
                qproperty-hoverBackgroundColor: rgba(0, 0, 0, 128);
                qproperty-pressedColor: white;
                qproperty-pressedBackgroundColor: rgba(0, 0, 0, 128);
                height: 4px;
            }
        """)
        self.closeBtn.setStyleSheet("""
            TitleBarButton {
                qproperty-normalColor: rgba(0, 0, 0, 255);
                qproperty-normalBackgroundColor: transparent;
            }
        """)

4. Assign the titlebar to your main application class. You can add more widgets to it as well like I did.

class DDCApplication(Ui_DDCApp, AcrylicWindow):
    themeChangedSignal = QtCore.Signal(str)
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.setTitleBar(CustomTitleBar(self))
        #self.windowEffect.setMicaEffect(self.winId(), isDarkMode=True, isAlt=False)
        

        self.title = QLabel(self.titleBar)
        self.title.setText('    DDC Desktop 2')

        self.connectionStatusLabel = QPushButton(self.titleBar)
        self.connectionStatusLabel.setText('  BLE not Connected')
        self.connectionStatusLabel.setIcon(QPixmap('UI/resources/redlight.png'))
        
        self.titleBar.layout().insertWidget(0, self.title, 0, QtCore.Qt.AlignLeft)
        self.titleBar.layout().insertWidget(1, self.connectionStatusLabel, 4, QtCore.Qt.AlignCenter)
        self.titleBar.layout().insertStretch(1, 1)

        self.titleBar.raise_()