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: 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

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.
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 



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)


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