How to automatically hide the ApplicatioWindowBar menu?

Question

I want ApplicationWindow have a menuBar auto-hide that appears when the mouse cursor is at the top of the window. Is this possible in QML?

PS: I am using Qt 5.3.

Thanks in advance.

Answer 1

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

Using internal properties, you can use __contentItem , the __contentItem graphic container 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 can test it for):

 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 code:

• Two MouseArea : ma1 , which covers the MenuBar and ma2 , which fills the ApplicationWindow . The latter has a negative z , which should be located under any other window element, including ma1 : thus, it cannot interfere with events associated with any added element (for example, the example button b1 ).
• ma1 sets the ma1 property to 1 , while ma2 returns it to 0 . The property is used for the __contentItem visual property (see (1) , (2) and (3) in the code) to hide / show the MenuBar . The simple Behaviour by hideValue property ensures that the transition is smooth.
• The __dismissMenu() internal function is used to ensure that a closed Menu closed when the MenuBar loses focus.
• When MenuItem triggered, MenuItem hideValue property is directly reset to ensure proper 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; } } } 

However, the change occurs abruptly and QML debugs report errors when trying to access null.__contentItem when the panel is hidden. And of course, the code has an absolute size that can cause problems.