BB 10 Full Custom ListView

I was just practiced with the listview in BB 10 and made a code which is about to achieve a customlistview and it is nice to do with the  QML . it is quite easy to understand and easy to write code. to achieve the desired we need to copy the code ghave to run the application. we can follow the following steps :)

1)  Make a project with the name HellpPractice.
copy the given below code to yours main.qml


import bb.cascades 1.0

Page {
    content: Container {
        // Create a ListView that uses an XML data model
        ListView {
            dataModel: XmlDataModel {
                source: "models/xmldata.xml"
            }

            // Use a ListItemComponent to determine which property in the
            // data model is displayed for each list item
            listItemComponents: [
                ListItemComponent {
                    type: "recipeitem"
                    Container {
                        horizontalAlignment: HorizontalAlignment.Center
                        layout: DockLayout {
                        }

                        // Item background image.
                        ImageView {
                            imageSource: "asset:///images/listbackground.png"
                            preferredWidth: 768
                            preferredHeight: 250
                        }
                        Container {
                            id: highlightContainer
                            background: Color.create("#75b5d3")
                            opacity: 0.0
                            preferredWidth: 760
                            preferredHeight: 252
                            horizontalAlignment: HorizontalAlignment.Center
                        }

                        // The Item content an image and a text
                        Container {
                            leftPadding: 3
                            horizontalAlignment: HorizontalAlignment.Fill
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                            ImageView {
                                preferredWidth: 250
                                preferredHeight: 250
                                verticalAlignment: VerticalAlignment.Top

                                // The image is bound to the data in models/recipemodel.xml image attribute.
                                imageSource: ListItemData.image
                            }
                            Label {
                                // The title is bound to the data in models/recipemodel.xml title attribute.
                                text: ListItemData.title
                                leftMargin: 30
                                verticalAlignment: VerticalAlignment.Center
                                textStyle.base: recipeItem.ListItem.view.itemTextStyle.style
                            } // Label
                        } // Container
                        function setHighlight(highlighted) {
                            if (highlighted) {
                                highlightContainer.opacity = 0.9;
                            } else {
                                highlightContainer.opacity = 0.0;
                            }
                        }

                        // Connect the onActivedChanged signal to the highlight function
                        ListItem.onActivationChanged: {
                            setHighlight(ListItem.active);
                        }

                        // Connect the onSelectedChanged signal to the highlight function
                        ListItem.onSelectionChanged: {
                            setHighlight(ListItem.selected);
                        }
                    } // Container
                }
            ]

            // When an item is selected, update the text in the TextField
            // to display the status of the new item
            onTriggered: {
                var selectedItem = dataModel.data(indexPath);
                textField.text = selectedItem.title;
            }
        }

        // Create a text field to display the status of the selected item
        TextField {
            id: textField
            text: ""
        }
    } // end of top-level Container
    // Highlight function for the highlight Container
}// end of Page

2) now make a xml document with name xmldata and in this xmldata.xml copy following lines

<root>

    <recipeitem title="Custom List"        image="../images/1.png"   />

    <recipeitem title="BlackBerry 10"              image="../images/2.png"         />

    <recipeitem title="Mobile App Development"          image="../images/3.png"       />

    <recipeitem title="Great achievers"              image="../images/4.png"        />

    <recipeitem title="Good work"              image="../images/1.png"  />

    <recipeitem title="Welcome guys"           image="../images/6.png"        />

    

</root>

3) make images folder inside the assets folder and put all these images inside that==>

4) Now it is time to see the output and you can see the output as desired on yours emulator. it should look like this

now you can see yours custom list and while you will click on a list element, there will be change on text values, which is according to yours index values