Thursday, December 20, 2012

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
                            } // 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: {

                        // Connect the onSelectedChanged signal to the highlight function
                        ListItem.onSelectionChanged: {
                    } // Container

            // When an item is selected, update the text in the TextField
            // to display the status of the new item
            onTriggered: {
                var selectedItem =;
                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


    <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"        />

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


  1. i have a list in which in middle i have a image and i am using xml data model. i am not able to do that
    please help me

    1. Please look this example carefully which wwill surely solve yours problem else i will send the code.

    2. This comment has been removed by the author.

  2. jitesh upadhyay,
    I have a listview with checkboxes in bb10 cascades, which gets populated from model come from cpp code. I am unable to get the size of the listview or model. How can i get the size of the model, since i need to iterate the listview to get the elements which are checked.. can you give me some examples which does this process.

  3. Hello friends,

    How can I copy ListView Item to the clipboard?

    - ContextMenu over Item. DONE.
    - Ontrigger in ListView. DONE
    - CLipboard Method. DONE.
    - Selecting text item value. IS FUCKING KILLING ME. HELP PLEASE

    I hope you can help me :)

  4. eToro is the #1 forex broker for beginning and full-time traders.