I'm trying to apply custom style to the "Menu":http://qt-project.org/doc/qt-5/qml-qtquick-controls-menu.html object, with the new "MenuStyle ":https://qt-project.org/doc/qt-5/qml-qtquick-controls-styles-menustyle.htmlobject. The "checkmarkIndicator" shows up (although, the indentation and layout seems incorrect and cannot be modified). But the "submenuIndicator" component doesn't even show up properly; only the top part becomes visible and the rest gets cut off. If I make the font pixels of the Label really large and the make each MenuItem's row height really high, only then the entire "submenuIndicator" Image set comes to view (anchored to the bottom of the row). This was with Qt 5.3 MSVC 2012 OpenGl 32bit, on Windows 7 (haven't had the chance to test it extensively on Linux/Mac yet).

I'm pasting the code from my test app here, for reference. Any help would be appreciated. Thanks.

@import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.2
import QtQml 2.2 // for Instantiator

Rectangle {
width: 600
height: 600

Rectangle {
    id: clickableRect
    focus: true

    color: "red"
    width: 300
    height: 300
    anchors.centerIn: parent

    ExclusiveGroup {
        id: myGroup
    }

    Menu {
        id: myMenu

        style: MenuStyle {
            id: myMenuStyle

            frame: Rectangle {
                border.color: "#E7E6E8"
            }

            itemDelegate.background: Rectangle {

                border.color: "#E7E6E8"
                anchors.leftMargin: 15

                color: {
                    if ( styleData.selected) return "lightblue";
                    else return "white";
                }
            }

            itemDelegate.label: Label {

                color: {
                    if (!styleData.selected) return "grey";
                    else return "white";
                }
                text: styleData.text
                font.pixelSize: 25 // If this value is really high (e.g. 70), then the row height of each MenuItem increase AND ONLY THEN, does submenu indicator image show up

                //anchors.leftMargin: 10 // doesn't do anything
            }

            itemDelegate.checkmarkIndicator: Rectangle {
                //CANNOT specify the alignment or layout for this component. But at least it shows up entirely
                color: "blue"
                anchors.rightMargin: 15

                Image {
                    fillMode: Image.Tile
                    source: {
                        if (styleData.checked) {
                            return "menu_selected_checkmark.png";
                        } else {
                            return "";
                        }
                    } // source
                }
            }

            itemDelegate.submenuIndicator: Image {
                // This image doesn't even show up properly. Only the top half of the image shows up. But if the row height of each menu item is increased (by having a LARGE font pixel size), only then it shows properly
                source: "menu_submenu_arrow_icon.png"
                fillMode: Image.Tile
            }

        }

        MenuItem {
            checkable: true
            exclusiveGroup: myGroup
            text: "Item 0"
        }
        MenuItem {
            checkable: true
            exclusiveGroup: myGroup
            text: "Item 0"
        }
        Menu {
            title: "Submenu"
            MenuItem {
                checkable: true
                exclusiveGroup: myGroup
                text: "Sub menu Item 0"
            }

            MenuItem {
                text: "Sub menu Item 1"
                checkable: true
                exclusiveGroup: myGroup
            }
        } // Sub Menu item

    } // Menu

} // Rectangle

MouseArea {
    anchors.fill: parent
    onClicked: {
        //myFocusScope.focus = false;
        clickableRect.focus = false;
        myMenu.popup();
    }
}

}@