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
Highlighted
Developer
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Stylising a custom list item to appears as a standard list item

How can I create a Custom List Item so that it looks like a Standard List Item (with a title and description) but with colours of my choice?

Developer
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: Stylising a custom list item to appears as a standard list item

Anyone?

Developer
Posts: 16,984
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Stylising a custom list item to appears as a standard list item

that should not be difficult. the highlighting requires a bit of work, but otherwise it should be easy.
you can use a Container as the main element, then place the fields you want, for example two labels, as you want.

maybe you can share the QML you made and describe what matches your requirements and what does not?
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Retired
Posts: 252
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10
My Carrier: Bell

Re: Stylising a custom list item to appears as a standard list item

Hi macaronlover,

 

Try the following code in your main.qml: 

 

                ListItemComponent {
                    type: "item4"
                    CustomListItem {
                        dividerVisible: true
                        highlightAppearance: HighlightAppearance.Full                        
                        content: [
                            MyCustomListItemNoHighlighting {
                                title: ListItemData.text
                                description: ListItemData.description
                                status: ListItemData.status
                                imageSource: "images/" + ListItemData.image
                                contextActions: [
                                    ActionSet {
                                    }
                                ]
                            }
                        ] 
                    }
                }

 

And the following code for the MyCustomListItemNoHighlighting.qml:

 

import bb.cascades 1.0

Container {
    id: itemRoot
    property alias title: titleLabel.text
    property alias description: descriptionLabel.text
    property alias status: statusLabel.text
    property alias imageSource: iconImage.imageSource

    layout: DockLayout {
    }

    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        verticalAlignment: VerticalAlignment.Fill
        rightPadding: 20
        ImageView {
            id: iconImage
            verticalAlignment: VerticalAlignment.Center
            minHeight: 120
            minWidth: 120
            maxHeight: 120
            maxWidth: 120
        }
        Container {
            verticalAlignment: VerticalAlignment.Center
            leftPadding: 20
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                Label {
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                    id: titleLabel
                    textStyle.fontSize: FontSize.XLarge
                    bottomMargin: 0
                }
                Label {
                    id: statusLabel
                    verticalAlignment: VerticalAlignment.Bottom
                    textStyle.textAlign: TextAlign.Right
                    textStyle.fontSize: FontSize.XSmall
                    //textStyle.color: itemRoot.secondaryColor
                    bottomMargin: 0
                }
            }
            Label {
                id: descriptionLabel
                topMargin: 0
                bottomMargin: 0
                textStyle.fontSize: FontSize.Medium
                //textStyle.color: itemRoot.secondaryColor
            }
        }
    }
}

 

@SamarAbdelsayed

Did this answer your question? Please accept post as solution.
Please refrain from posting new questions in solved threads.
Found a bug? Report it using the Issue Tracker