Cascades Development

[minmax]

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

[javayoung]

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.

[igosoft]

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.

[minmax]

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

[minmax]

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"
        }
    }
}

[igosoft]

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

[igosoft]

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

 

[minmax]

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
So main problem now it's incorrect size/position of selection area.

[igosoft]

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

[javayoung]

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