How to round the corners of a frameless QWidget, when also applying acrylic effects?

[grainyblob]

Hello everyone! I like to make a dock in Qt for Windows. I have the general idea of how to do it, and I would first like to focus on making the window look pretty. Now I would like to provide the user with an option to change the corner radius of the dock, and also allow for Acrylic or Mica (introduced in W11.) Basically, I want to achieve custom border radii on a frameless window with acrylic.

Now, I attempted some stuff:

1. Set stylesheet with border radius property.

// inside the constructor
setStyleSheet("border-radius: 32px;");

2. Add a custom mask

Dock::Dock(QWidget *parent):QWidget(parent)
{
    // after other methods are called.
    roundZeCorners();
}

void Dock::roundZeCorners(int radius) {
    QPainterPath path;
    path.addRoundedRect(rect(), radius, radius);
    setMask(QRegion(path.toFillPolygon().toPolygon()));
}

void Dock::paintEvent(QPaintEvent *event) {
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    
    QPainterPath path;
    path.addRoundedRect(rect(), border_radius, border_radius);
    
    painter.setClipPath(path);
    painter.fillPath(path, Qt::transparent);
}

These are the only two solutions I came across to make custom window as described, but neither work. The stylesheet was obvious, because I read that qwidget not support styling border radius, and besides, it is top level window.

Here is how I apply my window effects:

#ifdef Q_OS_WIN
void Dock::applyWindowEffect(uint tint_color) 
{
    const HINSTANCE hModule = LoadLibraryA("user32.dll");
    if (hModule) {
        struct ACCENTPOLICY
        {
            int nAccentState;
            int nFlags;
            DWORD nColor;
            int nAnimationId;
        };
        struct WINCOMPATTRDATA
        {
            int nAttribute;
            PVOID pData;
            ULONG ulDataSize;
        };

        typedef BOOL(WINAPI* pSetWindowCompositionAttribute)(HWND, WINCOMPATTRDATA*);
        const auto SetWindowCompositionAttribute = (pSetWindowCompositionAttribute)GetProcAddress(hModule, "SetWindowCompositionAttribute");

        if (SetWindowCompositionAttribute)
        {
            ACCENTPOLICY policy = { 4, 0, tint_color, 0 }; // 4 = ACCENT_ENABLE_ACRYLICBLURBEHIND
            WINCOMPATTRDATA data = { 19, &policy, sizeof(ACCENTPOLICY) }; // 19 = WCA_ACCENT_POLICY
            SetWindowCompositionAttribute((HWND)winId(), &data);
        }
        FreeLibrary(hModule);
    }
}
#endif

How would I add the rounded corners? Sorry if this is a stupid post.

[Axel Spoerl]

@grainyblob
Why does addRoundedRect not work? What's the desired and actual outcome?
Have you tried to draw it directly with QPainter::drawRoundedRect()?
Maybe also set an explicit brush, just for testing.

[Vitalii777]

Please try to call 'setMask' to round borders in 'resizeEvent' and 'changeEvent -> QEvent::WindowStateChange event' too.

[grainyblob]

@Axel-Spoerl
The desired outcome was to make a acrylic window with a custom border radius. (See attached image). Once I add a roundedRect to the path I set a mask from the path. Now in a normal QWidget, it will round the corners, but my guess is that because of the DWM code I'm using, it's overriding the composition and displaying a rect.

---

see above for desired result ↑

Once again, sorry if my explaination of my issue is bad, I really struggle to explain things most of the time.

Edit: I forgot to ask, what do you mean by "explicit brush"?

[jsulm]

@grainyblob said in How to round the corners of a frameless QWidget, when also applying acrylic effects?:

I forgot to ask, what do you mean by "explicit brush"?

Your own QBrush instance which you pass to the painter. https://doc.qt.io/qt-6/qbrush.html

[grainyblob]

@Vitalii777
have tried to call setMask() in all events, none of them caused any change.

[grainyblob]

@jsulm

Yes in that case, it works. The corners of the window are rounded as expected. It is only with my applyWindowEffects() method which fails to round corners in this method.

Alternatively, since it might be a DWM level issue, I'm considering trying to replicate what I do with masking but with native DWM API.

[UmarAli]

You can use my logic of making rounded corners QWidget:
#include "RoundedBox.h"
#include <QPainter>
#include <QPainterPath>
#include <QBitmap>
#include <QFontMetrics>

RoundedBox::RoundedBox(const QString &txt, QWidget *parent)
: QWidget(nullptr), isDarkMode(false), text(txt), useAsToolTip(false)
{
setWindowFlags(Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
setAttribute(Qt::WA_TranslucentBackground);
setAsToolTip(false);
}

void RoundedBox::enableDarkMode(bool value)
{
isDarkMode = value;
}

void RoundedBox::setAsToolTip(bool value) {
useAsToolTip = value;
if (useAsToolTip) {
setWindowFlag(Qt::ToolTip);
updateSizeForText();
} else {
setWindowFlag(Qt::Popup);
}
update();
}

void RoundedBox::updateSizeForText() {
resize(sizeHint());
}

QSize RoundedBox::sizeHint() const {
QFont font;
font.setPointSize(9);
font.setFamily("Segoe UI");

QFontMetrics fm(font);
int MAX_W = 400;
QSize s = fm.boundingRect(0, 0, MAX_W, 0, Qt::TextWordWrap, text).size();
return QSize(s.width() + 24, s.height() + 12);

}

void RoundedBox::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);

// Rounded mask
QBitmap bitmap(width(), height());
bitmap.fill(Qt::color0);
QPainter maskPainter(&bitmap);
maskPainter.setRenderHints(QPainter::Antialiasing);
QPainterPath maskPath;
maskPath.addRoundedRect(rect(), 6, 6);
maskPainter.fillPath(maskPath, Qt::color1);
setMask(bitmap);

// Colors
QColor BG = isDarkMode ? QColor("#2D2D2D") : QColor("#FFFFFF");
QColor BR = isDarkMode ? QColor("#4D4D4D") : QColor("#BDBDBD");

QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing);
painter.setBrush(BG);
QPen pen(BR);
pen.setWidth(1);
painter.setPen(pen);

QPainterPath path;
path.addRoundedRect(rect().adjusted(1.5, 1.5, -1.5, -1.5), 6, 6);
painter.drawPath(path);

// Text
if (useAsToolTip) {
    QFont font;
    font.setPointSize(9);
    font.setFamily("Segoe UI");
    painter.setFont(font);
    painter.setPen(isDarkMode ? QColor("#F0F0F0") : QColor("#000000"));
    QRect text_area(12, 0, width() - 24, height());
    painter.drawText(text_area, Qt::AlignCenter | Qt::TextWordWrap, text);
}

}