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: 180
Registered: ‎12-09-2011
My Device: 9360, BB10
My Carrier: Aircel
Accepted Solution

Draw a rectangle outside the image in Grid List.

Hi All,

 

I am creating a list with Grid layout and some time i have to show 3 coloum and sometime 4. And in listItemComponent i am adding only one ImageView, so grid list automatically adjust the height and width of the image according to coloum count.

Now i want to show one rectangel or some focus when user select any image. SO how can i do this.

 

Please provide any suggestion.

 

Thanks in Advance

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Draw a rectangle outside the image in Grid List.

You would set the background to a nine-slice image normally and then turn it on and off on selection.

Alternatively you can have a Container in your ListItem that contains your Listview padded on all sides then set the background of that.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: Draw a rectangle outside the image in Grid List.

[ Edited ]

1. You can use CustomListItem which has highlightAppearance property, but is only for 10.2 and above 

https://developer.blackberry.com/native/reference/cascades/bb__cascades__customlistitem.html

 

2. Or you can write Highlight container to your listItemComponent, like this (is not Frame but Full highlight):

 

Container {
            id: highlight
            layout: DockLayout {}
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            opacity: 0.0
            background: Your own color
            
            animations: [
                FadeTransition {
                    id: selectedAnim
                    fromOpacity: 0.0
                    toOpacity: 1.0
                    duration: 200
                },
                FadeTransition {
                    id: unselectedAnim
                    fromOpacity: 1.0
                    toOpacity: 0.0
                    duration: 200
                }
            ]
        }

and then

ListItem.onSelectionChanged: {
        if (selected)
        	selectedAnim.play();
        else 
        	unselectedAnim.play();
    }

 

3. Or you can play with some graphic editor and make your own graphic which will show if item is selected.

There are many options

 

4. Or you can scale the selected item for differentiate (sorry my English)

scaleX: ListItem.selected ? 0.5 : 1
scaleY: scaleX

 

Hope it helps 



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog