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: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE
Accepted Solution

vertical aligning title custom title bar

I'm trying to align my title to the vertical center of my title bar but it won't budge. Anyone know what's worng?

Screen Shot 2014-01-24 at 16.57.03.png

Developer
Posts: 293
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: vertical aligning title custom title bar

by default a Container uses StackLayout (vertically iirc).... so can't vertically align within that. Try changing the container to:

 

layout: DockLayout{}

Developer
Posts: 134
Registered: ‎02-24-2013
My Device: BlackBerry Z10 LE
My Carrier: Telcel

Re: vertical aligning title custom title bar

Hi macaronlover

 

 

You need take on count yout parent control, on this case your container, just add:

 

verticalAlignment: VerticalAlignment.Center  in your container

 

Regards!

Developer
Posts: 101
Registered: ‎01-06-2014
My Device: Q10
My Carrier: EE

Re: vertical aligning title custom title bar

I've done that but nothing happens. Did I put it in the Wrong place?

 

Screen Shot 2014-01-24 at 23.10.39.png

Developer
Posts: 134
Registered: ‎02-24-2013
My Device: BlackBerry Z10 LE
My Carrier: Telcel

Re: vertical aligning title custom title bar

[ Edited ]

It's true, I was trying and it doesnot work, but I found a way using topPadding inside the container:

 

import bb.cascades 1.2

Page {
    titleBar: TitleBar {
        appearance: TitleBarAppearance.Plain
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                topPadding: 10
                background: Color.create("#FF66CCCC")
                verticalAlignment: VerticalAlignment.Center
             
            Label {
                text: "Title"
                    horizontalAlignment: HorizontalAlignment.Center
                    verticalAlignment: VerticalAlignment.Center
                    textStyle.color: Color.create("#FF000099")
                    textStyle.fontSize: FontSize.XLarge
                }
            }
        }
    }
  Container {    
    }
}

 Cheers!

Highlighted
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: vertical aligning title custom title bar

[ Edited ]

Upd: @strobejb's suggestion to use DockLayout works and seems to be the easiest way.

 

import bb.cascades 1.0

Page {
    titleBar: TitleBar {
        appearance: TitleBarAppearance.Plain
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: DockLayout {}
                background: Color.create("#FF66CCCC")
                
                Label {
                    text: "Title"
                    horizontalAlignment: HorizontalAlignment.Center
                    verticalAlignment: VerticalAlignment.Center
                    textStyle.color: Color.create("#FF000099")
                    textStyle.fontSize: FontSize.XLarge
                }
            }
        }
    }
    Container {    
    }
}

 

@santito95, your original suggestion to set verticalAlignment to VerticalAlignment.Center will work if Container's layout is changed to horizontal one (LeftToRight). It's vertical by default.


Imho, it's much better solution than using offset because this allows to not hardcode values, which can break the layout if text size is adjusted in Settings.

In this case Label can be set to fill the available space horizontally using any of these methods:
1) setting "preferredWidth: Infinity" and centering the text
2) setting "StackLayoutProperties { spaceQuota: 1 }" and centering the text
3) surrounding the label with two empty containers with non-zero spaceQuota.

 

 

Sample code for 1)

 

import bb.cascades 1.0

Page {
    titleBar: TitleBar {
        appearance: TitleBarAppearance.Plain
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                background: Color.create("#FF66CCCC")
                
                Label {
                    text: "Title"
                    verticalAlignment: VerticalAlignment.Center
                    textStyle.color: Color.create("#FF000099")
                    textStyle.fontSize: FontSize.XLarge
                    textStyle.textAlign: TextAlign.Center
                    preferredWidth: Infinity
                }
            }
        }
    }
    Container {    
    }
}

 Sample code for 2)

 

import bb.cascades 1.0

Page {
    titleBar: TitleBar {
        appearance: TitleBarAppearance.Plain
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                background: Color.create("#FF66CCCC")
                
                Label {
                    text: "Title"
                    verticalAlignment: VerticalAlignment.Center
                    textStyle.color: Color.create("#FF000099")
                    textStyle.fontSize: FontSize.XLarge
                    textStyle.textAlign: TextAlign.Center
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                }
            }
        }
    }
    Container {    
    }
}

 Sample code for 3)

 

import bb.cascades 1.0

Page {
    titleBar: TitleBar {
        appearance: TitleBarAppearance.Plain
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                background: Color.create("#FF66CCCC")
                
                // Add other controls here
                Container {
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                }
                Label {
                    text: "Title"
                    verticalAlignment: VerticalAlignment.Center
                    textStyle.color: Color.create("#FF000099")
                    textStyle.fontSize: FontSize.XLarge
                }
                Container {
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1
                    }
                }
                // Add other controls here
            }
        }
    }
    Container {    
    }
}

 


Andrey Fidrya, @zmeyc on twitter