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: 1,006
Registered: ‎05-22-2009
My Device: Not Specified

How do i add the background image to container

Hi,

 

I want to know how do i add the assets image to the container background.Background of container supports paint,how do i add the image from assests folder to it?

 

Regards

Rakesh Shankar.P

Contributor
Posts: 42
Registered: ‎05-30-2012
My Device: Simulator
My Carrier: Developer

Re: How do i add the background image to container

You don't add it directly to the Container. You add an ImageView into the container which will hold your image. The Container should have DockLayout set, whereas the ImageView can be centered. You might want to assure that the Container and the ImageView are the same size by setting the preferredWidth and preferredHeight properties of both. Be sure that the ImageView is the first child of the container, so that everything else (the true contents of the container) are above the ImageView. Take a look at DockLayout, and the first sample application they offer on the Cascades website.

Developer
Posts: 112
Registered: ‎10-10-2010
My Device: Torch
My Carrier: Verizon

Re: How do i add the background image to container

You can set the background color of it...

 

Container {
               background: Color.create ("#262626")

                   }

 

But I don't think there's any way of setting an image type directly to the container properties. You would have to use ImageView inside the container.

 

// snippet of some of my sample code

 Container {
                     
                 background: Color.create ("#262626")

                 layout: StackLayout {
                 topPadding: 20
                 rightPadding: topPadding
                 leftPadding: rightPadding
                                     }
                 
       
                ImageView {
                imageSource: "asset:///images/header2.png"
                preferredWidth: 768
                preferredHeight: 250
                          }

                          }

 

 

 

If there is a way directly then I'm listening.

______________________________________________
Android dev jumping ship to BB. Cascade newbie. Any help would be great. Miss the Visual Basic days.

Updated my pin
Developer
Posts: 1,006
Registered: ‎05-22-2009
My Device: Not Specified

Re: How do i add the background image to container

Hi Guys,I finally added the background as you suggested,I will share the code with you,Can anyone tel me ,is there any short way ,other than this

	/***Page Declaration****/
	Page *initialPage  = new Page();

    /***Layout Properties Declaration ****/
	
	DockLayoutProperties* layoutProperties = DockLayoutProperties::create()
	        .horizontal(HorizontalAlignment::Fill)
	        .vertical(VerticalAlignment::Fill);

	 stacklayoutProperties = StackLayoutProperties::create()
	   	         .horizontal(HorizontalAlignment::Center);

	//***Dock Layout for Getting Background***/ 

	basecontainer = Container::create()
	    	    	         .preferredSize(1024, 600)
	    	    	        .scrollMode(ScrollMode::Horizontal)
	    	    	        .layout(new DockLayout());

	ImageView *background = new ImageView();
	Image backgroundAsset = Image(QUrl("asset:///images/background.png"));
	background->setImage(backgroundAsset);
	background->setLayoutProperties(layoutProperties);
	basecontainer->add(background);



	//**StackLayout which containes header with its Image View ***/
	
	Container *Rollcontainer = Container::create()
	    					 .scrollMode(ScrollMode::Horizontal)
	    	    	        .layout( new StackLayout());

	
	
	
	StackLayout* myLayout = StackLayout::create()
	                         .top(120);
	
	//**Another StackLayout which displays data contents of the page ***
    
	container = Container::create()
    					.scrollMode(ScrollMode::Horizontal)
    	    	        .layout(myLayout);


    container->setLayoutProperties(stacklayoutProperties);

    
    ImageView *object1 = new ImageView();
    Image imageAsset = Image(QUrl("asset:///images/Header1.png"));
    object1->setImage(imageAsset);
    
    //Image View added to the former stack Layout
    Rollcontainer->add(object1);


    Label *label = Label::create().text("Demo Application");

    //Data Elements Will be added to Later Container
    container->add(label);

    Rollcontainer->add(container);
    basecontainer->add(Rollcontainer);


    /*
    QString buttonText = "DemoButton";
    Button *button = new Button();
    button->setText(buttonText);
    container->add(button);
    QObject::connect(button, SIGNAL(clicked()), this, SLOT(HandleClick()));
	*/

    initialPage->setContent(basecontainer);
   // mRoot->push(initialPage);
    Application::setScene(initialPage);

 

Regards

Rakesh Shankar.P

Developer
Posts: 1,006
Registered: ‎05-22-2009
My Device: Not Specified

Re: How do i add the background image to container

Is there anyother thing that needs to be done properly can be suggested :smileyhappy:

Developer
Posts: 26
Registered: ‎07-22-2012
My Device: Z10
My Carrier: Telstra

Re: How do i add the background image to container

You can do it using ImagePaint with respective ImagePaintDefinition and attachedObjects property of Container.

 

Here is sample code how to do it:

 

Container {
    id: rootContainer
    background: back.imagePaint
    attachedObjects: [
        ImagePaintDefinition {
            id: back
            repeatPattern: RepeatPattern.XY
            imageSource: "asset:///container/tiled/core16x16"
        }
    ]

}

 

 

Check documentation here:

https://developer.blackberry.com/cascades/reference/bb__cascades__imagepaintdefinition.html

 

And source code on GitHub:

https://github.com/blackberry/Cascades-Samples/blob/master/cascadescookbookqml/assets/ImagePaint.qml

Developer
Posts: 350
Registered: ‎01-21-2011
My Device: Curve 8900 (Personal) / Bold 9650 (Work)
My Carrier: Regional

Re: How do i add the background image to container

Does anyone know of a way to just make the background image bleed, so to speak? I don't want it stretching to fill the container, or repeating, I just want the image in the container, and then to let other things overlap the image.
Developer
Posts: 107
Registered: ‎05-11-2011
My Device: BlackBerry Z10 LE
My Carrier: AirTel

Re: How do i add the background image to container

Hi,

 

For CPP

 

ImagePaint paint(Image(QUrl("asset:///Imagessplash_screen_portrait.png")));

Container * container = Container::create();
container->setBackground(paint);