BB10: Cascades: Padding and Alignment

January 25th at 12:00am

Figuring out how to assign Padding to Cascades controls took a little while. While each control accepts a topPadding / bottomPadding / leftPadding / rightPadding attribute, it doesn't seem to actually do anything.

The way padding works is inconsistent with Alignment where I can just set the alignment on the control and be done with it. Examples after the jump.

Padding

In my experiments I found that applying padding directly to a QML Cascades control doesn't actually do anything. I had to apply the padding to a container and place my control in a container for the padding values to work correctly:

Container {
    topPadding: 100
    Label {
        text: "I have 100px topPadding due to the Container"
    }
}

Many people will initially try this approach that does not work:

Label {
    text: "I should have 100px top padding (but I don't!)"
    topPadding: 100
}

Alignment

Aligning a Cascades control is trivial. Unlike the padding, I can assign alignment directly to a control and have it 'stick':

Button {
    text: "Right Aligned Btn"
    horizontalAlignment: HorizontalAlignment.Right
}