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
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
My Carrier: Vodafone
Accepted Solution

Listview header background and alignment

I want to show listview header in Horizontally centerd and give a background color to it? I tried but its not working

Rujuta Trivedi
Please use plain text.
Developer
javayoung
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

Re: Listview header background and alignment

[ Edited ]

You can refer with this article :

http://developer.blackberry.com/cascades/documentation/ui/lists/list_view.html

 

I found this solution works

ListItemComponent {
    type: "header"

    Container {
          background: Color.xxx  or Color.create("#xxxxxx")

           layout: StackLayout {
           }
           
           Label {
               text: something
               horizontalAlignment: HorizontalAlignment.Center
           }
    }
}

 

 

 




p(^_^)q
Good good study, day day up
Please use plain text.
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
My Carrier: Vodafone

Re: Listview header background and alignment

I have done the same thing.But the label is on left side and background is only upto label text,its not covering whole area

Rujuta Trivedi
Please use plain text.
Developer
javayoung
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

Re: Listview header background and alignment

I found that it works at my side. May you attach the listview implementation in your source code?




p(^_^)q
Good good study, day day up
Please use plain text.
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
My Carrier: Vodafone

Re: Listview header background and alignment

Here is the code:

 

 

 

NavigationPane{

    id:nav

Page {

    propertystringpagetitle:""

    Container {

    //CONTAINER FOR CUSTOM PAGETITLE

        Container{

            background:Color.DarkGray

            horizontalAlignment: HorizontalAlignment.Fill

            preferredHeight:100

            layout: StackLayout {

                                                         }

            LabelhorizontalAlignment: HorizontalAlignment.Center

        

                text:"Furniture"

                textStyle.fontSize: FontSize.PointValue

                textStyle.fontSizeValue: 12

                

                }

             

            }

          

 Container

     

                   ListView{

                        id: scoreList

                                       objectName: "scoreList"

                                       

                        dataModel: scoreModel

                         layout: StackListLayout {

                          headerMode: ListHeaderMode.Sticky

                           }

         

                          listItemComponents: [

                                            ListItemComponent {

                                                type: "item"

                                              

                                               StandardListItem {

                                                    imageSpaceReserved: false

                                                     title: ListItemData.option

                                                                     }

                                                                

                                                },

                                           

                                           ListItemComponent {

                                            type: "header"

       

                                                                

                                                                

                                                                Container {

                                                                          background: Color.Gray

                                                                

                                                                           layout: StackLayout {

                                                                           }

                                                                           

                                                                           Label {

                                                                               text: ListItemData

                                                                               horizontalAlignment: HorizontalAlignment.Center

                                                                           }

                                                                }}

                                            ]

                                             onTriggered: {

                                                                    // When an item is selected, we push the recipe Page in the chosenItem file attribute.

                                                                    var chosenItem = dataModel.data(indexPath);

                                                                     _mineapp.setPageTitle(chosenItem.option);

                                                                     _mineapp.setPageImg(chosenItem.optionimage);

                                                                    console.log(indexPath+"PATH:"+chosenItem.option)

                                                                    // Set the correct file source on the ComponentDefinition, create the Page, and set its title.

                                                                                           

                                                                    var page = picpage.createObject();                        

                                                                   // page.title = chosenItem.title;                        

                                                                   

                                                                    // Push the new Page.

                                                                   // picpage.open();

                                                                    nav.push(page);

                                                                }

                                        attachedObjects: [

                                                          // A GroupDataModel is used for presenting the SQL data. All set up is done here

                                                          // except for the actual population of the model, which is done in C++.

                                                         

                                                           ComponentDefinition {

                                                                                                                                   id: picpage

                                                                                                                                   source: "Pic.qml"

                                                                                                                               },

                                                          GroupDataModel {

                                                              id: scoreModel

                                                              objectName: "scoreModel"

                                                              grouping: ItemGrouping.ByFullValue

                                                              sortingKeys: ["heading","option"]

                                                              

                                  }]

                       }         

                          

    }

        

    }

}

}

Rujuta Trivedi
Please use plain text.
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
My Carrier: Vodafone

Re: Listview header background and alignment

Anyone who can help?

Rujuta Trivedi
Please use plain text.
Developer
shahumang8
Posts: 600
Registered: ‎08-09-2010
My Device: Not Specified

Re: Listview header background and alignment

Hi,

 

 Please given container size means width full as per screen width.I hope they conver all part with gray color.

 

Thanks,

Umang.

Please use plain text.
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
My Carrier: Vodafone

Re: Listview header background and alignment

it worked.Thanks

Rujuta Trivedi
Please use plain text.
Developer
javayoung
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

Re: Listview header background and alignment

I just found only add a divider after your label without setting up full width, it also works.

 

Divider {

}




p(^_^)q
Good good study, day day up
Please use plain text.
Developer
trivedirujuta
Posts: 528
Registered: ‎10-06-2009
My Device: 9800,BB Dev Alpha,z10 limited edition
My Carrier: Vodafone

Re: Listview header background and alignment

Yes,that too worked:smileyhappy: thanks

Rujuta Trivedi
Please use plain text.