How to change default highlight color of ListView in QML?

honeyhong

Hey, I want to change the default highlight color when item in ListView is selected.
The default color is blue. I want to change it to red. I googled, and i found QPalette.
http://doc.qt.nokia.com/4.7-snapshot/qpalette.html

QPalette::Highlight - A color to indicate a selected item or the current item. By default, the highlight color is Qt::darkBlue.
QPalette::HighlightedText - A text color that contrasts with Highlight. By default, the highlighted text color is Qt::white.

But i have no idea how to implement it. I found a few examples but I have no idea how to do it.
@ QPalette p(palette());
p.setColor(QPalette::Background, Qt::red);
w->setAutoFillBackground(true);
w->setPalette(p);@

All I have is the default main.cpp

@#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include "QPalette"

Q_DECL_EXPORT int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));

QmlApplicationViewer viewer;
viewer.setMainQmlFile&#40;QLatin1String("qml/Canon/main.qml"&#41;&#41;;
viewer.showExpanded();
return app->exec(&#41;;

}@

Im just a beginner, and I'm hoping some one can help me with it.

tommyj23

to implement it:
in main.cpp:

@#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include <QPalette>
Q_DECL_EXPORT int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));

QmlApplicationViewer viewer;
QPalette p;
p.setColor(QPalette::Window, Qt::red);
viewer.setAutoFillBackground(true);
viewer.setPalette(p);
viewer.setMainQmlFile&#40;QLatin1String("qml/untitled44/main.qml"&#41;);
viewer.showExpanded();

return app->exec&#40;&#41;;

}
@

but it no changes the Highlight color only the blackground. for the Highlight change window and put Highlight, but it not works for me

mbrasser

Can you post the QML you are using for your ListView with highlight?

honeyhong

[quote author="tommyj23" date="1343995921"]to implement it:
in main.cpp:

@#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include <QPalette>
Q_DECL_EXPORT int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));

QmlApplicationViewer viewer;
QPalette p;
p.setColor(QPalette::Window, Qt::red);
viewer.setAutoFillBackground(true);
viewer.setPalette(p);
viewer.setMainQmlFile&#40;QLatin1String("qml/untitled44/main.qml"&#41;&#41;;
viewer.showExpanded(&#41;;

return app->exec&#40;&#41;;

}
@

but it no changes the Highlight color only the blackground. for the Highlight change window and put Highlight, but it not works for me[/quote]

Hey thank you for your reply. Now i know how to implement it. :)
However, I tried the codes, but there is no changes with the background. When i change the Window to Highlight, it don't work either.

honeyhong

[quote author="mbrasser" date="1344221445"]Can you post the QML you are using for your ListView with highlight?[/quote]

Here are my codes for the ListView
@ ListView {
id: list1
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: parent.bottom
rightMargin:8
leftMargin:5
topMargin: header.height + headBar.height + (window.height > 640 ? 270 : 210)
}
clip: true
// highlight: Rectangle {width: parent.width; color: "DarkRed"}
model: products1
delegate: listDelegate1
}@

without the highlight set manually, the default color is blue. i have a lot of listView and i would like to change it all to red when selected, as the theme is red.

mbrasser

[quote author="honeyhong" date="1344223382"]
without the highlight set manually, the default color is blue. i have a lot of listView and i would like to change it all to red when selected, as the theme is red.[/quote]

Is this blue color perhaps coming from listDelegate1? (I don't think ListView should have any highlight component by default)

honeyhong

Is it? well i definitely didnt set anything.

@ ListView {
id: list1
anchors {
left: parent.left
right: parent.right
top: parent.top
bottom: parent.bottom
rightMargin:8
leftMargin:5
topMargin: header.height + headBar.height + (window.height > 640 ? 270 : 210)
}
clip: true
// highlight: Rectangle {width: parent.width; color: "DarkRed"}
model: products1
delegate: listDelegate1
}

Component {
    id: listDelegate1

    Products1Item{
        icon_p1_item: icon1;
        category_p1_item: category1

        onClicked:
        {
             Util.log("Clicked on " + products2 + " product1")
             Util.log("Selected feed item" + products2);
             pageStack.push(Qt.resolvedUrl("Products2.qml"),{itemUrl2:products2, itemTitle2:category1})
        }
    }
}@

mbrasser

Does the implementation of Products1Item set a color when pressed, or similar? One way to test where it is coming from would be to replace listDelegate1 with a simple Text item, and see if you still get any default highlight color showing.

honeyhong

Hey mbrasser, really? I didn't know that. However, I tested like you said, replaced listDelegate1 with simple Text, yeah there is blue color showing. In my Products1Item, I did not set any color when pressed, only the settings for the text to show out.
In all my ListView, when selected, there are blue color highlight, even though I did not set any highlight.
What about Back button? The back button also have default blue color when selected.

@//Products1Item
ListItem {
id: container
property string icon_p1_item: "no ICON"
property string category_p1_item: "no CATEGORY"

signal clicked

width: parent.width
height: Math.max(54, Math.max((icon.itemTextHeight),(category.itemTextHeight)))
clip: true

Image {
id: icon
property int itemTextHeight: height + anchors.topMargin + anchors.bottomMargin
source: container.icon_p1_item
width: window.width > 360 ? 160 : 140
height: window.height > 640 ? 120 : 100
}

Text {
id: category
property int itemTextHeight: height + anchors.topMargin + anchors.bottomMargin
anchors
{
left:icon.right;
verticalCenter:parent.verticalCenter;
leftMargin:10
}
font {
family: "Helvetica"
bold: false
}
font.pixelSize: window.height > 640 ? 30 : 23;
color: "white"
text: container.category_p1_item
wrapMode: Text.WordWrap
}
}@

mbrasser

Here's a very simple ListView example -- this one should not show any blue highlights:
@
ListView {
width: 400; height: 400
model: 10
delegate: Text { text: "item " + index }
}
@

The blue highlight is most likely coming from the ListItem. See for example the documentation here: http://doc.qt.nokia.com/qt-components-symbian/qml-listitem.html#listitem-states

I'm not very familiar with Qt Components, but they may provide some method of styling/theming that would allow you to change the default highlight color.

honeyhong

You are right mbrasser. It came from the ListItem. Thank you for correcting me. :)
Any idea how to change it to red when pressed without tampering with the library? I will google from here and see what I can get. :)

lahianim

if I understanding your question right, you want to change the selected item background.
in that case why not using the highlight property in the ListView as follow
@
Component {
id: my_highlight
Rectangle {
width: 180; height: 40
color: "red";
}
}

ListView {
id: list1
width: 180; height: 200
model: ContactModel {}
delegate: Text { text: name }

 highlight: my_highlight
 highlightFollowsCurrentItem: false
 focus: true

}
@

or if you use stylesheet in your application try adding

QListView::item:selected
{
background-color: rgb(222,239,242);
}

honeyhong

[quote author="lahianim" date="1344512535"]if I understanding your question right, you want to change the selected item background.
in that case why not using the highlight property in the ListView as follow
@
Component {
id: my_highlight
Rectangle {
width: 180; height: 40
color: "red";
}
}

ListView {
id: list1
width: 180; height: 200
model: ContactModel {}
delegate: Text { text: name }

 highlight: my_highlight
 highlightFollowsCurrentItem: false
 focus: true

}
@

or if you use stylesheet in your application try adding

QListView::item:selected
{
background-color: rgb(222,239,242);
}

[/quote]

Thank you for your reply. Yeah that is what I want. Because I have a lot of listView in my app. So wondering if there is any method that I could use to change all of it at once. I do not use style sheet, however I can give it a try. :)

lahianim

i think the better way to do it is to "inherits" the ListView and set the highlight to be as you wish and from now on use your class instead of the QML ListView.
somethink like:

MyListView.qml
@

property int mItemWidth : 0
property int mItemHeight : 0

ListView{
id: my_listView
highlight: my_highlight
}

Component {
id: my_highlight
Rectangle {
width: mItemWidth;
height: mItemHeight;
color: "red";
}
}

@

and now when you want to use a ListView include the MyListView.qml file
and use the MyListView
@
MyListView{
id: my_ListView
width: 180
height: 200
mItemWidth: 180
mItemHeight: 40
model: my_model
delegate: my_delegate
}
@
and that all