Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
testinz
Posts: 176
Registered: ‎09-03-2012
My Device: Blackberry 10
Accepted Solution

Border for listview item

Just wondering how do you add border for ListView items?

 

Also, is it possible to change the background for listview item on select?

 

Please use plain text.
BlackBerry Development Advisor (Retired)
erahnenfuehrer
Posts: 85
Registered: ‎05-25-2012
My Device: Limited Edition Z10
My Carrier: Bell

Re: Border for listview item

The the following code sample demonstrates adding a container that will simulate a border, and highlighting the background container of the currently selected list item.

 

    content: Container {
        layout: DockLayout {
        }
        ListView {
            property variant nIndex
            id: listView
            objectName: "listView"
            horizontalAlignment: HorizontalAlignment.Center
            dataModel: MyListModel {
                id: myListModel
            }
            listItemComponents: [
                ListItemComponent {
                    Container {
                        layout: DockLayout {
                        }
                        preferredWidth: 768
                        preferredHeight: 70
                        background: Color.create("#000000")
                        Container {
                            layout: DockLayout {
                            }
                            preferredWidth: 768
                            preferredHeight: 60
                            background: Color.create("#ffffff")
                            id: highlightContainer
                            Label {
                                text: ListItemData.text
                            }
                        }
                        ListItem.onSelectionChanged: {
                            if (selected) {
                                highlightContainer.background = Color.create("#75b5d3");
                            } else {
                                highlightContainer.background = Color.create("#ffffff");
                            }
                        }
                    }
                }
            ]
            onTriggered: {
                listView.select(indexPath, true);
                listView.select(nIndex, false);
                nIndex = indexPath;
            }
        }
    }

 The QmlListViewAttached object is what provides the ListItem property:

 

https://developer.blackberry.com/cascades/reference/bb__cascades__QmlListViewAttached.html

Please use plain text.
Developer
testinz
Posts: 176
Registered: ‎09-03-2012
My Device: Blackberry 10

Re: Border for listview item

That works. Thank you!

Please use plain text.