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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


Reply
Highlighted
New Contributor
Posts: 7
Registered: ‎01-23-2013
My Device: Simulator
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 englishSmiley Very Happy

No claim to God...
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

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
New Contributor
Posts: 7
Registered: ‎01-23-2013
My Device: Simulator
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;
                }
            }
        }
    }
}

 

 

No claim to God...