How to auto-hide ApplicatioWindow menuBar?

Question

I'd like to have an ApplicationWindow have an auto-hiding menuBar, which shows up when mouse cursor is positioned on the uppermost part of the window. Is this possible in QML?

PS: I'm using Qt 5.3.

Thanks in advance.

Answer 1

You can exploit internal properties, i.e. properties starting with "__". Since they are internal, functionality could break in future releases even if IMO it is unlikely in this case.

By using internal properties you can exploit __contentItem, the graphical container of the MenuBar and animate its properties to achieve the desired result. Here is a possible approach; it works with Qt 5.3/ Qt 5.4/ Qt 5.5 (the ones I could test it on):

ApplicationWindow {
    id: app
    visible: true
    width: 400
    height: 300

    property real hideValue: 0
    Behavior on hideValue {
        NumberAnimation {duration: 200}
    }

    menuBar:  MenuBar {
        id: menu
        //__contentItem.scale: value                        // (1)
        //__contentItem.opacity: hideValue                  // (2)
        __contentItem.transform: Scale {yScale: hideValue}  // (3)

        Menu {
            id: m1
            title: "File"
            MenuItem { text: "Open..."
                onTriggered: {
                   hideValue = 0                            // hide the bar
                }
            }
            MenuItem { text: "Close"
                onTriggered: {
                   hideValue = 0                            // hide the bar
                }
            }
        }
    }


    Button{
        id: b1
        anchors.centerIn: parent
        text: "CLICK ME!"
        width: 100
        height: 100
    }

    MouseArea {
        id: ma1
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: menu.__contentItem.implicitHeight
        hoverEnabled: true

        onEntered: {
            hideValue = 1                            // show the bar
        }
    }

    MouseArea {
        id: ma2
        anchors.fill: parent
        hoverEnabled: true
        z: -1

        onEntered: {
            m1.__dismissMenu()
            hideValue = 0                            // hide the bar
        }
    }
}

Summarizing the code:

• Two MouseArea are defined: ma1 which covers the MenuBar and ma2 which fills the ApplicationWindow. The latter has a z negative to be positioned under any other element of the window, inclusing ma1: this way it cannot interfere with events related to any element added (such as the example button b1).
• ma1 sets a property called hideValue to 1 whereas ma2 brings it back to 0. The property is used over a visual property of __contentItem (see (1), (2) and (3) in the code) to hide/show the MenuBar. A simple Behaviour over the hideValue property ensures that the transition is smooth.
• Internal function __dismissMenu() is used to ensure that an opened Menu is closed when the MenuBar loses focus.
• When a MenuItem is triggered the hideValue property is directly reset to ensure correct hiding.

Answer 2

I managed to get some results with this code:

ApplicationWindow {
    id: app

    MenuBar {
        id: menu
        Menu {
            title: "Menu 1"
            MenuItem {
                text: "item 1"
            }
            MenuItem {
                action: "item 2"
            }
        }
    }

    MouseArea {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: 20
        hoverEnabled: true

        onEntered: {
            if (app.menuBar === menu)
                app.menuBar = null;
            else
                app.menuBar = menu;
        }
    }
}

The change however is abruptly and QML debugging report errors when trying to access null.__contentItem when the bar is hidden. And, of course, there's an absolute size in the code which could cause problems.