I have a LabelList of buttons and have a focusBitmapURI png file for the button shape/color. I'm trying to get the text that displays on top of the focusBitmapURI to be vertically centered. When I print out the UserButtons (see code below) in the debug console, there clearly is a field for vertTextAlign, which I'm setting to "center", but this has no effect on the vertical alignment of the text over the focused button. No matter what I do, the text remains "top" aligned.
Below is the XML code for the LabelList component.
<!-- Control buttons (Button List) -->
<LabelList
id="UserButtons"
translation="[1440,480]"
color="0x23ecd7FF"
focusedColor="0x333333FF"
textVertAlign = "center"
focusBitmapUri="pkg:/images/rokubutton300x35.9.png"
numRows="7"
font="font:MediumBoldSystemFont"
focusedFont="font:MediumBoldSystemFont"
vertFocusAnimationStyle="floatingFocus"
itemSpacing="[0,20]"
itemSize="[300, 35]" />
In BrightScript I assign the buttons their text with this code:
for each button in ["My Profile","Change User","Add New User","Delete User" ,"OK"]
result.push({title : button})
end for
m.buttons.content = ContentList2SimpleNode(result)
I fetch the UserButtons component in the screen init() function as follows:
m.buttons = m.top.findNode("UserButtons")Printing m.buttons in the debug console yields this printout:Brightscript Debugger> ? m.buttons
<Component: roSGNode:LabelList> =
{
color: 602724351
focusedColor: 858993663
focusedFont: <Component: roSGNode:Font>
font: <Component: roSGNode:Font>
textHorizAlign: "left"
textVertAlign: "center"
animateToItem: -1
columnSpacings: <Component: roArray>
columnWidths: <Component: roArray>
content: <Component: roSGNode:ContentNode>
currFocusColumn: -1
currFocusFeedbackOpacity: 1
currFocusRow: 0
currFocusSection: -1
drawFocusFeedback: true
drawFocusFeedbackOnTop: false
fadeFocusFeedbackWhenAutoScrolling: false
fixedLayout: false
focusBitmapBlendColor: -1
focusBitmapUri: "pkg:/images/rokubutton300x35.9.png"
focusColumn: <Component: roArray>
focusFootprintBitmapUri: ""
focusFootprintBlendColor: -1
focusRow: <Component: roArray>
horizFocusAnimationStyle: "floatingfocus"
horizFocusDirection: "none"
itemClippingRect: <Component: roAssociativeArray>
itemFocused: 0
itemSelected: -1
itemSize: <Component: roArray>
itemSpacing: <Component: roArray>
itemUnfocused: -1
jumpToItem: 0
numColumns: 1
numRenderPasses: 3
numRows: 7
rowHeights: <Component: roArray>
rowSpacings: <Component: roArray>
scrollingStatus: false
scrollSpeed: 5
sectionDividerBitmapUri: ""
sectionDividerFont: <Component: roSGNode:Font>
sectionDividerHeight: 60
sectionDividerLeftOffset: 0
sectionDividerMinWidth: 175
sectionDividerSpacing: 15
sectionDividerTextColor: -572662273
sectionDividerTopOffset: 0
sectionDividerWidth: 0
vertFocusAnimationStyle: "floatingfocus"
vertFocusDirection: "none"
wrapDividerBitmapUri: ""
wrapDividerHeight: 36
wrapDividerLeftOffset: 0
wrapDividerWidth: 0
childRenderOrder: "last"
clippingRect: <Component: roAssociativeArray>
enableRenderTracking: true
inheritParentOpacity: true
inheritParentTransform: true
muteAudioGuide: false
opacity: 1
renderPass: 0
renderTracking: "full"
rotation: 0
scale: <Component: roArray>
scaleRotateCenter: <Component: roArray>
translation: <Component: roArray>
visible: true
change: <Component: roAssociativeArray>
focusable: true
focusedChild: <Component: roSGNode:LabelList>
id: "UserButtons"
}
Any help on where I'm amiss here would be greatly appreciated.Thanks.
