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
minmax
Posts: 46
Registered: ‎09-25-2012
My Device: Dev Alpha, Z10
My Carrier: MTS
Accepted Solution

change size of SegmentedControl it possible?

Hi everyone!

I have a problem if I add SegmentdControl to a Container with LayoutOrientation.LeftToRight with any control I have broken UI. For example:

import bb.cascades 1.0

Container {
    layout: StackLayout { orientation: LayoutOrientation.LeftToRight }
    SegmentedControl {
        verticalAlignment: VerticalAlignment.Center 
        options: [
            Option { text: qsTr("One"); }
           ,Option { text: qsTr("Two"); }
           ,Option { text: qsTr("Three");  }
           ,Option { text: qsTr("Four"); }
        ]
    }

    Button {
        verticalAlignment: VerticalAlignment.Center
    }
}

 

I think it's a bug.

but maybe somebody can help me to make workaround?

 

Thanks,

Maksim

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: change size of SegmentedControl it possible?

I have tried with some ways to chagne the size of segmentcontrol, but all are not available. You have to let the segmentcontrol to occupy the whole width of the screen.




p(^_^)q
Good good study, day day up
Please use plain text.
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon
My Carrier: Play

Re: change size of SegmentedControl it possible?

try to set spaceQuota in StackLayoutProperties for SC 

 

layoutProperties: StackLayoutProperties {
     spaceQuota: 1
}

 

https://developer.blackberry.com/cascades/reference/bb__cascades__stacklayoutproperties.html

 

 

You can also set maxWidth and minWidth to width of root Container using LayoutUpdateHandler.

 

Please use plain text.
Developer
minmax
Posts: 46
Registered: ‎09-25-2012
My Device: Dev Alpha, Z10
My Carrier: MTS

Re: change size of SegmentedControl it possible?

Thanks, but it not helped. I played with spaceQuota, but an any value is make UI is broken (select area is not correct see image above)
It so sad :smileysad:
Please use plain text.
Developer
minmax
Posts: 46
Registered: ‎09-25-2012
My Device: Dev Alpha, Z10
My Carrier: MTS

Re: change size of SegmentedControl it possible?

Also I tried set min/max Width but it ignored so I set preferedWidth and then I can see:

 

Container {
    SegmentedControl {
        preferredWidth: 500
        Option {
            text: "one"
        }
        Option {
            selected: true
            text: "two"
        }
        Option {
            text: "three"
        }
        Option {
            text: "four"
        }
    }
}

 

Please use plain text.
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon
My Carrier: Play

Re: change size of SegmentedControl it possible?

Hi again.

 

Can you please tell me why you want Segmented Control and Button in the same line ? Please explain what do you want to achieve.

 

You set  orientation: LayoutOrientation.LeftToRight so it means that controls are layouted from Left to Right. Change it to orientation: LayoutOrientation.TopToBottom then Button will be under SegmentedControl

 

 

 

 

Please use plain text.
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon
My Carrier: Play

Re: change size of SegmentedControl it possible?

Container {
    layout: StackLayout {
        orientation: LayoutOrientation.LeftToRight
    }
    SegmentedControl {
        verticalAlignment: VerticalAlignment.Center
       
          layoutProperties: StackLayoutProperties {
                    spaceQuota: 9
                }
        options: [
            Option {
                text: qsTr("One")
            },
            Option {
                text: qsTr("Two")
            },
            Option {
                text: qsTr("Three")
            },
            Option {
                text: qsTr("Four")
            }
        ]
    }
    Button {
        verticalAlignment: VerticalAlignment.Center
        layoutProperties: StackLayoutProperties {
            spaceQuota: 1
        }
    }
}

 Untitled-1.png

Please use plain text.
Developer
minmax
Posts: 46
Registered: ‎09-25-2012
My Device: Dev Alpha, Z10
My Carrier: MTS

Re: change size of SegmentedControl it possible?

igosoft thank you for quick reply!
No, LeftToRight it's correct. Our UI Disigner want to add a button here.
I tryed your code, and at first time this looks good, but if you change selected option then you can see incorrect position of selection area. Looks like the selection area size and/or positions is hardcoded :smileyhappy:
So main problem now it's incorrect size/position of selection area.

 

Please use plain text.
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon
My Carrier: Play

Re: change size of SegmentedControl it possible?

Please ask UI designer to change UX/UI of this screen. :smileyhappy:

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: change size of SegmentedControl it possible?

Yes, I also met this kind of issue. I have to change the segmentcontrol into imagetogglebutton finally because the UI design can not be changed too much. You can have a try with ImageToggleButton




p(^_^)q
Good good study, day day up
Please use plain text.