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
hemant_sain
Posts: 179
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

Please use plain text.
Developer
BBSJdev
Posts: 6,090
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
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. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
Benecore
Posts: 540
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 :Tt2:

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



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
Please use plain text.