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

Posts: 84
Registered: ‎04-22-2013
My Device: BB 10 Dev
My Carrier: Simulator

how can i change the item onFirstVisibleItemChanged

Hi all,

I have a list view and when it is at the index of firstVisibleItem, i wanted to make that index's promoPic size bigger and change to another image. 

Currently my code is doing the index 2 to be the firstVisibleItem when the page loads, so index 0,1,3,4,5 should remain the default promoPic size while index 2 width and height change to 300 and 200 respectively (as i continue scroll, index 3 will become the firstVisibleItem, promoPic width and height changed to 300 and 200 while index 2 change to default size)

Is that possible to access and change the property in onFirstVisibleItemChanged?

Any examples or tutorials are welcomedSmiley Happy

Thanks in advance.




    <promotions image="asset:///images/Promotions/1.png" 		sel="asset:///images/Promotions/deposits.png"/>
   	<promotions image="asset:///images/Promotions/2.png" 		sel="asset:///images/Promotions/cards.png"/>
    <promotions image="asset:///images/Promotions/3.png"		sel="asset:///images/Promotions/deposits.png"/>
    <promotions image="asset:///images/Promotions/4.png" 		sel="asset:///images/Promotions/cards.png"/>
    <promotions image="asset:///images/Promotions/5.png" 		sel="asset:///images/Promotions/deposits.png"/>
    <promotions image="asset:///images/Promotions/6.png" 		sel="asset:///images/Promotions/cards.png"/>




            Container {
                preferredHeight: 200.0
                ListView {
                    id: promotionsList

                    dataModel: XmlDataModel {
                        id: promotDataModel
                        source: "promotions.xml"

                    listItemComponents: [
                        ListItemComponent {
                            type: "promotions"
                                Container {
                                id: promos
                                preferredHeight: 200.0
                                preferredWidth: 150.0
                                topPadding: 30.0
                                leftPadding: 20.0
                                ImageView {
                                    id: promoPic
                                    imageSource: ListItemData.image
                                    preferredHeight: 150.0
                                    preferredWidth: 100.0

                    snapMode: SnapMode.LeadingEdge
                    flickMode: FlickMode.SingleItem
                    bufferedScrollingEnabled: true

                    layout: StackListLayout {
                        orientation: LayoutOrientation.LeftToRight


                    attachedObjects: [
                        // This handler is tracking the scroll state of the ListView.
                        ListScrollStateHandler {
                            id: scrollStateHandler
                            onFirstVisibleItemChanged: {
                                promoInd = promotDataModel.data(firstVisibleItem);
                                console.debug("onFirstVisibleItemChanged" + firstVisibleItem);
                                console.debug("................" + promoInd.image);
} } ] leftPadding: 300.0 rightPadding: 250.0 scrollIndicatorMode: ScrollIndicatorMode.None animations: [ FadeTransition { id: promoAnimation duration: 200 target: promotionsList toOpacity: 1.0 fromOpacity: 0.0 onEnded: { promotionsList.scrollToItem([2]); } } ] onCreationCompleted: { promoAnimation.play(); } } }



Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: how can i change the item onFirstVisibleItemChanged

Scrolling changes that property, when the first visible item changes. Any type of scrolling should alter it if and when the item appearing in the top visible portion of the list changes.

You can change that programmatically with the various scroll*() functions such as scrollToItem().

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Posts: 84
Registered: ‎04-22-2013
My Device: BB 10 Dev
My Carrier: Simulator

Re: how can i change the item onFirstVisibleItemChanged

but when i scroll I would like to have only the firstVisibleItem index change its property, other index property should remain the same. for example like below image, so as i scroll when card 4 move to center position it should become bigger. 

as i know scrollToItem() can only move to specific index.

can i have some example on this?

Any help would be much appreciated.