Native Development

[pipould]

Hello all,

I'm facing a problem with vertical alignement... Trying to play and imagine a way to port my apps to BB10, I wanted to create a setting page and center my components in the center of the screen. I created the necessary containers and stuff, it worked, but then, my background, was obviously only in the center of the screen too.

So I decided to add a top level container that would only hold the background. But then, my content is not centered anymore (in the child container). I do not get why and I'm sure i'm missing something.

Here is the structure:

Page {
    content:Container {
     
        layout: StackLayout {
        }
        background: Color.create("#555555")
        Container {
            layout: StackLayout {
            }
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Center // DOES NOT WORK
            
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                layout: DockLayout {
                }
                Label {
                    text: "Save location"
                    horizontalAlignment: HorizontalAlignment.Left
                    verticalAlignment: VerticalAlignment.Center
                    textStyle {
                        base: tsd1.style
                    }
                }
                ToggleButton {
                    horizontalAlignment: HorizontalAlignment.Right
                }
            }

Does anyone has an idea about this ? Is there a simple way to have centered content with a fullscreen background ? I already tried a lot of different way but none gave me the result I wanted (except setting a padding but that's not the way I wanted).

Thank you

[strobejb]

You might get more answers in the Cascades forum...

Your outer container does not have any height specified, so it shrinks to fit it's content. You need the verticalAlignment.Center property on that outer container instead.

The spaceQuota

[pipould]

Yes, but then how do have a full background ? if I set verticalAlignment.Center to the outer container, I get the same problem as I faced: the background won't be fullscreen (it will occupy only the center, where the components are).

PS. If Someone can move the thread to cascades forum, thx

[pipould]

This is what I have :

 This I what I want to have, but with centered compents:

[Zmey · Accepted solution]

Add an empty container with spaceQuota 1 to the bottom. It will take all the remaining space.

Container {
  layoutProperties: StackLayoutProperties {
    spaceQuota: 1
  }
}

If you want to center the controls, add another empty container before them.

Also try playing with preferredWidth: Infinity / preferredHeight: Infinity and different alignment modes (Fill or Center).

[pipould]

Nice ! It did the trick !

But that's quite a dirty solution... Nokia Qt Components seem a bit more effective for this kind of UI (much more components are available too)... I really wonder what is the "asset" of Cascades UI... (Knowing that Symbian Components ported to BB10 work well).

[strobejb]

I think you can just use spaceQuota on the outer container, and it will take all the available space.. i.e. no separate container required

[Zmey]

This should also work but most likey the content will be top-aligned.

When this issue is fixed it'll be easier to align controls inside of containers:

http://supportforums.blackberry.com/t5/Cascades-Development/Stack-layout-alignment-bug/m-p/2077005#M...