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
New Contributor
Matt_Jia
Posts: 7
Registered: ‎01-23-2013
My Carrier: Developer
Accepted Solution

How can i change the background color of a Button in .qml

    Hello, everyone! I have a problem now.

 

    When i define a Button componnet in QML,  it has a default white background color. While i want to change the background color, for example red.

   Container {
        layout: StackLayout {}
        background: backgroundPaint.imagePaint
	    attachedObjects: [
	        ImagePaintDefinition {
	            id: backgroundPaint
	            imageSource: "asset:///images/background.png"
	        }
	    ]
        Button{
            text: "button"    
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
    }

 

 

   I read the reference which write that A clickable button with a fixed height and The visual appearance of the button is predefined and cannot be changed and so on...look herehttp://developer.blackberry.com/cascades/reference/bb__cascades__button.html

 

    I had tried this way to change the application's theme. But i failed! More details see here http://developer.blackberry.com/cascades/reference/bb__cascades__themesupport.html

 

    How can i achieve this? Please give me some help. Thank you in advanced. Please forgive my poor english:smileyvery-happy:

No claim to God...
Please use plain text.
Developer
Zmey
Posts: 1,495
Registered: ‎12-18-2012

Re: How can i change the background color of a Button in .qml

Hi,

 

Button style is predefined I think. Dark theme can be enabled in bar-descriptor.xml but it is applied to the application globally and affects all other controls as well.

 

You can use a container with background image instead of a button. Sample code:

http://supportforums.blackberry.com/t5/Cascades-Development/Button-with-a-Background-Image/m-p/21489...


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
New Contributor
Matt_Jia
Posts: 7
Registered: ‎01-23-2013
My Carrier: Developer

Re: How can i change the background color of a Button in .qml

    Thank you very much. I tried it and it worked well. Maybe someone will need it. The following is my code:

import bb.cascades 1.0

Page {
    Container {
        layout: StackLayout {}
        
        Button {
            id: defaultButton
            text: "default button"
            preferredWidth: 300
        }
        
        Container {
            id: customButton
            background: Color.Gray
            preferredHeight: 70
            preferredWidth: 300
            layout: StackLayout {
            }
            
            //add two empty Label to occupy top and bottom space 
            //to center the button Label
            Label {
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
            }
            Label {
                id: button
                text: "custom button"
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
            }
            Label {
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
            }
            onTouch: {
                if (event.isDown() || event.isMove()) {
                    // Focused, change the background
                    customButton.background = Color.Blue;
                } else {
                    customButton.background = Color.Gray;
                }
            }
        }
    }
}

 :Shifty:

 

No claim to God...
Please use plain text.