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.0ComboBox {
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.