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
fredoust
Posts: 75
Registered: ‎09-12-2012
My Device: Looking for a BB10 testing device
Accepted Solution

How to change the style of segmentedControl text

Hi all,

Is there a way to change the syle of the text in a segmented control ?

The control work perfectly but texts are so big and I can't change the fontSize of them.

 

Anyone already do this ?

 

Thanks

---------
Mobile developer freelance - QtQuick - Cascades - WP7 - Android
My works : http://fdelgado.fr
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: How to change the style of segmentedControl text

Since we can't style most of the standard Cascades controls, you can't do this without re-implementing the whole Control, at least for now.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
fredoust
Posts: 75
Registered: ‎09-12-2012
My Device: Looking for a BB10 testing device

Re: How to change the style of segmentedControl text

Yes it what I done, but it's so bad if we have to re-implement just for the style.

---------
Mobile developer freelance - QtQuick - Cascades - WP7 - Android
My works : http://fdelgado.fr
Developer
Kaz32
Posts: 237
Registered: ‎11-24-2012
My Device: Blackberry 10 Dev Alpha

Re: How to change the style of segmentedControl text

Hi,I'm using container to wrap a segmentedControl and set background of container to dark color.

 

But text on segmentedControl is in black, how to change it to white?

(Or can I change the UI style to dark only for this segmentedControl?)

 

 

Thanks

Contributor
adrz1
Posts: 11
Registered: ‎10-15-2012
My Device: BB10 Alpha Dev B

Re: How to change the style of segmentedControl text

I have same problem, (1 year later) and i have found you can overlap segmented control using som Label ui components.

 

Container {
                layout: DockLayout { }
                horizontalAlignment: HorizontalAlignment.Center
                SegmentedControl {
                    id: menuSegmented
                    selectedIndex: 1
                    Option {
                        //text: qsTr("POPULAR") + Retranslate.onLocaleOrLanguageChanged
                        value: "most_viewed"
                    }
                    Option {
                        //text: qsTr("TOP RANKED") + Retranslate.onLocaleOrLanguageChanged
                        value: "most_voted"
                    }
                    Option {
                        //text: qsTr("NEW") + Retranslate.onLocaleOrLanguageChanged
                        value: "new"
                    }
                    Option {
                        //text: qsTr("ALL") + Retranslate.onLocaleOrLanguageChanged
                        value: "all"
                    }
                }
                Container {
                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }
                    focusPolicy: FocusPolicy.None
                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Center
                    leftPadding: 25
                    rightPadding: 25
                    overlapTouchPolicy: OverlapTouchPolicy.Allow
                    Label {
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 1
                        }
                        text: qsTr("POPULAR") + Retranslate.onLocaleOrLanguageChanged
                        verticalAlignment: VerticalAlignment.Center
                        horizontalAlignment: HorizontalAlignment.Center
                        textStyle.fontFamily: "SlatePro Condensed"
                        textStyle.textAlign: TextAlign.Center
                        textStyle.color: Color.create("#5e5e5e")
                        textStyle.fontSize: FontSize.PointValue
                        textStyle.fontSizeValue: 5
                        overlapTouchPolicy: OverlapTouchPolicy.Allow
                    }
                    Label {
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 1
                        }
                        text: qsTr("TOP RANKED") + Retranslate.onLocaleOrLanguageChanged
                        verticalAlignment: VerticalAlignment.Center
                        horizontalAlignment: HorizontalAlignment.Center
                        textStyle.fontFamily: "HelveticaNeue-CondensedBold"
                        textStyle.textAlign: TextAlign.Center
                        textStyle.color: Color.create("#5e5e5e")
                        textStyle.fontSize: FontSize.PointValue
                        textStyle.fontSizeValue: 5
                        overlapTouchPolicy: OverlapTouchPolicy.Allow
                    }
                    Label {
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 1
                        }
                        text: qsTr("NEW") + Retranslate.onLocaleOrLanguageChanged
                        verticalAlignment: VerticalAlignment.Center
                        horizontalAlignment: HorizontalAlignment.Center
                        textStyle.fontFamily: "HelveticaNeue-CondensedBold"
                        textStyle.textAlign: TextAlign.Center
                        textStyle.color: Color.create("#5e5e5e")
                        textStyle.fontSize: FontSize.PointValue
                        textStyle.fontSizeValue: 5
                        overlapTouchPolicy: OverlapTouchPolicy.Allow
                    }
                    Label {
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 1
                        }
                        text: qsTr("ALL") + Retranslate.onLocaleOrLanguageChanged
                        verticalAlignment: VerticalAlignment.Center
                        horizontalAlignment: HorizontalAlignment.Center
                        textStyle.fontFamily: "HelveticaNeue-CondensedBold"
                        textStyle.textAlign: TextAlign.Center
                        textStyle.color: Color.create("#5e5e5e")
                        textStyle.fontSize: FontSize.PointValue
                        textStyle.fontSizeValue: 5
                        overlapTouchPolicy: OverlapTouchPolicy.Allow
                    }
                }
            }