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
Posts: 75
Registered: ‎09-12-2012
My Device: Looking for a BB10 testing device
My Carrier: Developper
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
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

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

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
Posts: 237
Registered: ‎11-24-2012
My Device: Blackberry 10 Dev Alpha
My Carrier: Telkomsel

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

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

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

 

New Developer
Posts: 4
Registered: ‎08-31-2015
My Device: Developer
My Carrier: Developer

Re: How to change the style of segmentedControl text

The above solution is very good and easy to use!
But I've created a custom segmented control in order to be able to customize it even more.
So if someone is interested here it is:

- Just create a QML file with this content:

import bb.cascades 1.4

Container {
    property int selectedIndex: 0;
    property alias textTab1: label1.text;
    property alias textTab2: label2.text;
    property alias textTab3: label3.text;
    
    topPadding: ui.du(0.6)
    bottomPadding: ui.du(0.6)
    background: Color.create("#E6E6E6")
    horizontalAlignment: HorizontalAlignment.Fill
    verticalAlignment: VerticalAlignment.Top
    layout: GridLayout {
        columnCount: 3
    }
    
    Container {
        id: tab1
        background: Color.White
        
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Center
        
        layout: DockLayout {
        }
        
        Label {
            id: label1
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: ""
            textStyle.fontSize: FontSize.Small
            textStyle.color: Color.Blue
        }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: ""
            opacity: 0.01
            onClicked: {
                if(selectedIndex != 0)
                {
                    selectedIndex = 0;
                    
                    //Tabs layout logic
                    tab1.background = Color.White;
                    label1.textStyle.color = Color.Blue;
                    tab2.background = Color.create("#E6E6E6");
                    tab3.background = Color.create("#E6E6E6");
                    label2.textStyle.color = Color.Black;
                    label3.textStyle.color = Color.Black;
                    
                    //SPECIFIC LOGIC HERE
                }
            }//END ONCLICKED
        }//END BUTTON
    }//END TAB1 CONTAINER
    
    Container {
        id: tab2
        background: Color.create("#E6E6E6")
        
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Center
        
        layout: DockLayout {
        }
        
        Label {
            id: label2
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: ""
            textStyle.fontSize: FontSize.Small
            textStyle.color: Color.Black
        }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: ""
            opacity: 0.01
            onClicked: {
                if(selectedIndex != 1)
                {
                    selectedIndex = 1;
                    
                    tab2.background = Color.White;
                    label2.textStyle.color = Color.Blue;
                    tab1.background = Color.create("#E6E6E6");
                    tab3.background = Color.create("#E6E6E6");
                    label1.textStyle.color = Color.Black;
                    label3.textStyle.color = Color.Black;
                    
                    //SPECIFIC LOGIC HERE
                }
            }//END ONCLICKED
        }//END BUTTON
    }//END TAB2 CONTAINER
    
    Container {
        id: tab3
        background: Color.create("#E6E6E6")
        
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Center
        
        layout: DockLayout {
        }
        
        Label {
            id: label3
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: ""
            textStyle.fontSize: FontSize.Small
            textStyle.color: Color.Black
        }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: ""
            opacity: 0.01
            onClicked: {
                if(selectedIndex != 2)
                {
                    selectedIndex = 2;
                    
                    tab3.background = Color.White;
                    label3.textStyle.color = Color.Blue;
                    tab1.background = Color.create("#E6E6E6");
                    tab2.background = Color.create("#E6E6E6");
                    label1.textStyle.color = Color.Black;
                    label2.textStyle.color = Color.Black;
                    
                    //SPECIFIC LOGIC HERE
                }
            }//END ONCLICKED
        }//END BUTTON
        
    }//END TAB3 CONTAINER
}//END OUTTER CONTAINER

I put 3 tabs, but you can add more if you have to.

To use it in your page look the example below:

import bb.cascades 1.4

Page {

    Container {

        CustomSegmentedControl {
            textTab1: "TAB 1"
            textTab2: "TAB 2"
            textTab3: "TAB 3"
        }

    }//END CONTAINER

}//END PAGE


Again, the above solution is very good and works. I just made this one because I wanted to have more control over what I could do with it.

Hope this helps someone.

Developer
Posts: 38
Registered: ‎11-24-2015
My Device: z10
My Carrier: airtel

Re: How to change the style of segmentedControl text

[ Edited ]

thanks nice work