How to customize ComboBox from QtQuick.Controls

Milovidov

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?

Jens

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.

Milovidov

Thank you for answer!

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

Nosf

[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 :)

Muhammad

@Viv the code is not working any more.

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

deleted529

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

}@

deleted529

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

}@

yog1310

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

siamak.rahimi.motem

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