GroupBox styling

[vitala]

Is it possible to style a GroupBox? I'm mainly interested in changing the font size of the title but it doesn't seem possible since it's a hardcoded Text element.
Just checking before filing a bug report.

[andreyc]

Yes you can style a QGroupBox using interface designer or by calling
@
groupBox->setStyleSheet(QStringLiteral("QGroupBox{border:2px solid gray;border-radius:5px;margin-top: 1ex;} QGroupBox::title{subcontrol-origin: margin;subcontrol-position:top center;padding:0 3px;}"));
@

I've found the style in the example somewhere in internet.

[vitala]

Hey thanks for answering but I'm talking about GroupBox from Qt Quick Controls...

[andreyc]

Right. I need to look on forum title before answering :-)

Take a look "here...":http://qt-project.org/wiki/QmlStyling#bfb558a53c8289aef248af782e7c5616

Approach 1 should do the trick.

[vitala]

I read that before but unfortunately it doesn't work with GroupBoxes. With CheckBoxes for example you can use the "style" property to define a custom component for the label but a GroupBox doesn't have such a property. You just have a "title" property (for the header) which asks for a string, so it doesn't seem like you can customise it. So for now I fake it by not setting a title in the GroupBox and putting a custom Text element on the top of it but it kind of defeats the purpose of having a title property in the GroupBox component. I'm just asking here if I'm missing something obvious.

[sfabry]

Hello, I did not found any GroupBoxStyle component but I create it myself.
The GroupBox component has the "style" property you can assign even if not documented.

So it is a bit of a hack but it works. The only thing I did not manage to style is the checkbox of the group box when it is checkable.

Example code of GroupBoxStyle.qml (random colors :p)
@
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Controls.Private 1.0

// TODO: manage checkable group boxes
Style {
property Component panel: Rectangle {
anchors.fill: parent
anchors.leftMargin: -5
anchors.rightMargin: -5
anchors.bottomMargin: -2
anchors.topMargin: -titleRect.height / 2 - 5

    border.color: "red"
    border.width: 2
    radius: 5
    gradient: Gradient {
        GradientStop { position: 0; color: "blue" }
        GradientStop { position: 1; color: "green" }
    }

    Rectangle {
        id: titleRect
        anchors.fill: titleText
        anchors.leftMargin: -5
        anchors.rightMargin: -5
        anchors.bottomMargin: -1
        anchors.topMargin: -1

        border.color: control.activeFocus ? "darkgreen" : "lightgreen"
        border.width: 1
        radius: 5
        gradient: Gradient {
            GradientStop { position: 0; color: "blue" }
            GradientStop { position: 1; color: "green" }
        }

    }

    Text {
        id: titleText
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.top
        anchors.bottomMargin: -titleRect.height / 2.0
        text: control.title
        color: control.enabled ? "white" : "grey"
        renderType: Text.NativeRendering
        font.italic: !control.enabled
        font.weight: Font.Bold
        font.pointSize: 10
    }

}

}
@

[vitala]

Thanks, that's interesting. I tried to adapt your code to my needs but I was going crazy with the anchors and margins so I think I'm going to settle with my first workaround (putting a custom Text on the top of it) since it works for me already.
I also found out that a suggestion about this issue has already been posted on the "Qt bugtracker":https://bugreports.qt-project.org/browse/QTBUG-33243 so wait and see!

[andreyc]

sfabry thank you for the example.
vitala you can add Style into you GroupBox without adding new style file.

Here is what I've made from sfabry's example.

• main.qml
  @
  import QtQuick 2.1
  import QtQuick.Controls 1.0
  import QtQuick.Controls.Private 1.0

ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480

GroupBox {
    anchors.centerIn: parent
    style: Style {
        property Component panel: Rectangle {
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.top
                text: control.title
                color: control.enabled ? "red" : "gray"
                renderType: Text.NativeRendering
                font.italic: !control.enabled
                font.weight: Font.Bold
                font.pointSize: 18
            }
        }
    }
    title: qsTr("The Title in Red")
    enabled: true

    Column {
        spacing: 2
        CheckBox {
            text: qsTr("Update system")
        }
        CheckBox {
            text: qsTr("Update applications")
        }
        CheckBox {
            text: qsTr("Update documentation")
        }
    }
}

}
@