// LATEST

Create a Frameless Desktop-Pet-Style Window in Qt

Three key settings for a frameless window

If your window class inherits from QWidget, two lines in the constructor are enough to build the frameless base:

setAttribute(Qt::WA_TranslucentBackground);
setWindowFlags(Qt::SubWindow | Qt::FramelessWindowHint |
               Qt::WindowStaysOnTopHint);

What each parameter does:

  • WA_TranslucentBackground: allows a transparent window background, so PNG transparency does not turn black
  • FramelessWindowHint: removes the system title bar and border
  • WindowStaysOnTopHint: keeps the window always on top

Together, these flags turn your window into a "floating transparent image."

Cross-platform window shape handling

If you want truly "click-through" transparent areas (mouse clicks pass through to the window below), there are two options:

Windows option

this->clearMask();  // do not clip the window shape

Do not actively clip the window shape, so semi-transparent edges are not hard-cut into jagged edges.

Linux option (X11)

#ifdef Q_OS_LINUX
Display *display = XOpenDisplay(nullptr);
if (display) {
    Window window_id = static_cast<Window>(this->winId());

    // build input region from the image alpha channel
    QRegion region(QBitmap::fromImage(image.createAlphaMask()));

    // convert to X11 rectangles and apply
    XRectangle *xrects = new XRectangle[region.rectCount()];
    // ... fill rectangle data ...

    XShapeCombineRectangles(display, window_id, ShapeInput, 0, 0,
                           xrects, count, ShapeSet, YXBanded);

    delete[] xrects;
    XCloseDisplay(display);
}
#endif

This solution uses the X11 Shape extension to clip the input region at the system level, which is more thorough than handling it in Qt.

No comments yet

Share your thoughts and keep the conversation clear and kind.