How to make QtQuick transparent Toolbar

Question

How to make the built-in Quick ToolBar transparent so that only buttons are visible?

Answer 1

Since QtQuick.Controls.Styles 1.3 and Qt 5.2 you can use ToolBarStyle, i.e. you can write something like this (obviously with whatever padding you prefer):

toolBar:ToolBar {

    style: ToolBarStyle {
        padding {
            left: 0
            right: 0
            top: 0
            bottom: 0
        }
        background: Rectangle {
            color: "transparent"
        }
    }

    RowLayout {
        anchors.fill: parent
        ToolButton {
            text: "Button 1"
        }
        ToolButton {
            text: "Button 2"
            style: ButtonStyle {
                background: Rectangle {

                    border.width: control.activeFocus ? 4 : 1
                    border.color: "#888"
                    radius: 4
                    gradient: Gradient {
                        GradientStop { position: 0 ; color: control.pressed ? "#eee" : "#fff" }
                        GradientStop { position: 1 ; color: control.pressed ? "#fff" : "#aaa" }
                    }
                }

                label: Text {
                    anchors.fill: parent
                    minimumPixelSize : 8
                    fontSizeMode: Text.HorizontalFit
                    font.pixelSize: 15
                    text: "open"
                    color: "red"
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
        ToolButton {
            text: "Button 3"
        }
        Item { Layout.fillWidth: true }
        CheckBox {
            text: "Enabled"
            checked: true
            Layout.alignment: Qt.AlignRight
        }
    }
}