How to customize ComboBox from QtQuick.Controls



  • Hello all!

    I read "ComboBoxStyle":http://qt-project.org/doc/qt-5.1/qtquickcontrolsstyles/qml-qtquick-controls-styles1-comboboxstyle.html this link about ComboBoxStyle, but I don't understand how to customize arrow on ComboBox and items in drop down menu.

    How to do this?



  • Customizing the arrow is a matter of overriding the background delegate and draw your own arrow where it is desired.

    Customizing the menu popup is unfortunately not supported in the current version.Though if you look inside the sources you can actually find some undocumented (that might change in a future version) delegates for that.



  • Thank you for answer!

    Do you know nice qml ComboBox implemetation where I can redefine items in drop down menu also?



  • [quote author="Jens" date="1380816168"]
    Though if you look inside the sources you can actually find some undocumented (that might change in a future version) delegates for that. [/quote]

    This comment got me thinking. After some digging through the source code, could find a way to style the menu indeed.

    Here's a complete example to Style the ComboBox with a custom background and label for the actual item and a custom look for the popup:

    @
    import QtQuick 2.1
    import QtQuick.Controls 1.0
    import QtQuick.Controls.Styles 1.0
    import QtQuick.Controls.Private 1.0

    ComboBox {
    FontLoader { id: customFont; source:"qrc:/resources/fonts/OpenSans-Regular.ttf"}

    style: ComboBoxStyle {
    background: Rectangle {
    implicitWidth: 200
    implicitHeight: 25
    color: "#FFFFFF"
    border.width: 1
    border.color: !control.enabled ? "#DADAD9" : control.activeFocus ? "#3C3C3B" : "#9D9C9C"
    antialiasing: true
    Rectangle {
    id: glyph
    width: 10
    height: 10
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    anchors.rightMargin: 10
    color: !control.enabled ? "#DADAD9" : control.hovered ? "#1D5086" : "#5791CD"
    states: State {
    name: "inverted"
    when: __popup.__popupVisible
    PropertyChanges { target: glyph; rotation: 180 }
    }

        transitions: Transition {
          RotationAnimation { duration: 50; direction: RotationAnimation.Clockwise }
        }
    
        Image {
          id: imageItem
          source: "qrc:/resources/icons/combobox_arrow_glyph.svg"
          anchors.fill: parent
        }
      }
    }
    label: Label {      
      verticalAlignment: Qt.AlignVCenter
      anchors.left: parent.left
      anchors.leftMargin: 5
      text: control.currentText
      color: !control.enabled ? "#DADAD9" : "#6F6E6E"
      anchors.fill: parent
      font.pixelSize: 12
      font.family: customFont.name
    }
    
    property Component __dropDownStyle: Style {
      property Component frame: Rectangle {
        width: (parent ? parent.contentWidth : 0)
        height: (parent ? parent.contentHeight : 0)
      }
      property Component menuItem: Rectangle {
        property string textRef: text
        color: "#9D9C9C"
        implicitWidth: textItem.contentWidth
        implicitHeight: textItem.contentHeight + 10
        Rectangle {
          anchors.fill: parent
          color: selected ? "#B2B2B1" : "#FFFFFF"
          anchors.margins: 1
          anchors.topMargin: 0
          Label {
            id: textItem
            text: textRef
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 10
            color: selected ? "#FFFFFF" : "#6F6E6E"
            font.pixelSize: 12
            font.family: customFont.name
          }
        }
      }
    }
    

    }
    }
    @

    You can remove the "arrow-svg" and "customFont" to try it :)



  • @Viv the code is not working any more.

    Any one have any suggestion regarding customizing the drop down menu?



  • New version (available also "here":http://stackoverflow.com/a/27217209/2538363). Works fine on Qt 5.3/5.4. However it seems not to work for Mac OS. Here follows the code:

    @ComboBox {
    id: box
    currentIndex: 2
    activeFocusOnPress: true
    style: ComboBoxStyle {
    id: comboBox
    background: Rectangle {
    id: rectCategory
    radius: 5
    border.width: 2
    color: "#fff"
    }
    label: Text {
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pointSize: 15
    font.family: "Courier"
    font.capitalization: Font.SmallCaps
    color: "black"
    text: control.currentText
    }

        // drop-down customization here
        property Component __dropDownStyle: MenuStyle {
            __maxPopupHeight: 600
            __menuItemType: "comboboxitem"
    
            frame: Rectangle {              // background
                color: "#fff"
                border.width: 2
                radius: 5
            }
    
            itemDelegate.label:             // an item text
                Text {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 15
                font.family: "Courier"
                font.capitalization: Font.SmallCaps
                color: styleData.selected ? "white" : "black"
                text: styleData.text
            }
    
            itemDelegate.background: Rectangle {  // selection of an item
                radius: 2
                color: styleData.selected ? "darkGray" : "transparent"
            }
    
            __scrollerStyle: ScrollViewStyle { }
        }
    
        property Component __popupStyle: Style {
            property int __maxPopupHeight: 400
            property int submenuOverlap: 0
    
            property Component frame: Rectangle {
                width: (parent ? parent.contentWidth : 0)
                height: (parent ? parent.contentHeight : 0) + 2
                border.color: "black"
                property real maxHeight: 500
                property int margin: 1
            }
    
            property Component menuItemPanel: Text {
                text: "NOT IMPLEMENTED"
                color: "red"
                font {
                    pixelSize: 14
                    bold: true
                }
            }
    
            property Component __scrollerStyle: null
        }
    }
    
    model: ListModel {
        id: cbItems
        ListElement { text: "Banana" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }
    width: 200
    

    }@



  • New version (available also "here":http://stackoverflow.com/a/27217209/2538363). Works fine on Qt 5.3/5.4. However it seems not to work for Mac OS. Here follows the code:

    @ComboBox {
    id: box
    currentIndex: 2
    activeFocusOnPress: true
    style: ComboBoxStyle {
    id: comboBox
    background: Rectangle {
    id: rectCategory
    radius: 5
    border.width: 2
    color: "#fff"
    }
    label: Text {
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pointSize: 15
    font.family: "Courier"
    font.capitalization: Font.SmallCaps
    color: "black"
    text: control.currentText
    }

        // drop-down customization here
        property Component __dropDownStyle: MenuStyle {
            __maxPopupHeight: 600
            __menuItemType: "comboboxitem"
    
            frame: Rectangle {              // background
                color: "#fff"
                border.width: 2
                radius: 5
            }
    
            itemDelegate.label:             // an item text
                Text {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 15
                font.family: "Courier"
                font.capitalization: Font.SmallCaps
                color: styleData.selected ? "white" : "black"
                text: styleData.text
            }
    
            itemDelegate.background: Rectangle {  // selection of an item
                radius: 2
                color: styleData.selected ? "darkGray" : "transparent"
            }
    
            __scrollerStyle: ScrollViewStyle { }
        }
    
        property Component __popupStyle: Style {
            property int __maxPopupHeight: 400
            property int submenuOverlap: 0
    
            property Component frame: Rectangle {
                width: (parent ? parent.contentWidth : 0)
                height: (parent ? parent.contentHeight : 0) + 2
                border.color: "black"
                property real maxHeight: 500
                property int margin: 1
            }
    
            property Component menuItemPanel: Text {
                text: "NOT IMPLEMENTED"
                color: "red"
                font {
                    pixelSize: 14
                    bold: true
                }
            }
    
            property Component __scrollerStyle: null
        }
    }
    
    model: ListModel {
        id: cbItems
        ListElement { text: "Banana" }
        ListElement { text: "Apple" }
        ListElement { text: "Coconut" }
    }
    width: 200
    

    }@



  • @BaCaRoZzo Can you please suggest the method for making this code workable for MAC.?



  • I am also interested to know if there has been anything for Mac OSX so far.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.