[Solved] QtQuick MenuBar Animation

[Sam2304]

Hi All,

Newby to QTQuick, I'm trying to animate the MenuBar QML item in an ApplicationWindow, I can animate a basic rectangle as follows:

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

    Rectangle
    {
        id: rect;
        width: 100
        height: 80
        color: "red"

        Behavior on height
        {
            NumberAnimation
            {
                easing.amplitude: 1.45
                easing.period: 0.28
                easing.type: Easing.InOutElastic
                duration:1000
            }
        }
        MouseArea {
            anchors.fill: parent;
            onClicked:
            {
                 rect.height = 300;
            } 
        }
    }
}

The Issue arises when I attempt to animate the MenuItem of a MenuBar in the same way, I haven't been able to find any information on how to achieve this, I want to animate the appearance and disappearance of the menu. To start off with i tried animating opacity when the menu's visibility changes:

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

    menuBar: MenuBar {
        Menu {
            id: file_Menu;
            title: "File";
            MenuItem {
                id: menuItem_target
                text:"Sample &File Menu";
                shortcut: "Ctrl+F";

                Behavior on visible {
                    NumberAnimation {
                        target: menuItem_target
                        property: "opacity"
                        duration: 1000
                        easing.type: Easing.InOutQuad
                    } //NumberAnimation
                } //Behavior
            } //Menuitem
        } //Menu
    } //MenuBar
} //ApplicationWindow

However the above code doesn't appear to do anything, the Menu reacts as it does by default. Could someone point me in the right direction to get this working? I tried behavior on height but got the following message:

Cannot assign to non-existent property "height"

As I mentioned I have been reading around in the documentation and I haven't been able to find any material on animating this particular control...

Huge Thanks in advance,

[p3c0]

@Sam2304 I'm afraid that is even possible with current implementation of MenuItem component. Iterating over properties of MenuItem didn't show opacity and height properties and hence that particular error. You can check properties as

for (var prop in menuItem_target) {
        console.log(prop,"=",menuItem_target[prop])
}

[Sam2304]

@p3c0 Thanks for the heads up, that's a really useful little snippet!

Looks like the easiest way to do this then is to implement my own Menubar, using Rectangles with the relevant behaviours etc.
I'm curious as to how hard it will be to implement shortcuts/mnemonics etc myself, though that is for a separate topic.

I was afraid that might be the result...

Thanks for your help, you've saved me some hours of frustated experimentation!

Regards,

[p3c0]

@Sam2304
To implement shortcuts you can use Keys with the corresponding required handler. Then you will need modifiers to grab they Keys and modifiers like CTRL or ALT etc... Most important is Keys only works with Item based components and only when it has focus.

[Sam2304]

It looks like there might be an easier mechanism to do this kind of thing with in the future.

Rather than writing my own MenuBar from scratch, the Qt team have implemented styling support for most of their components. Whilst i haven't tried this yet (I'm stuck on a different part of my project at the moment), MenuBar Style should be perfect for what I was originally trying to acheive, by writing custom delegates, with the appropriate behaviours attached to their properties.