Horizontal MarkupGrid w/ a single row focus issue?

I am trying to create a horizontal list of labels at top of screen for navigation similar to what iHeartRadio uses. I am new to Brightscript and could not figure out a way to use LabelList horizontally which would be all I need. So, I am using a MarkupGrid with number of rows set to 1 which does work. However, when I select a label, I would like to change the font of the label to bold and not highlight it. I tried using ‘focusPercent’ in the gridItem, but have 2 issues:

  1. The font is changed for the first element even before the MarkupGrid has focus.
  2. The font is not changed back even when I leave the element.

Since I am new to the platform, I am sure that there are better ways of going about what I am doing. Any help would be appreciated. (Please ignore the image - just some more test code)

My code is below:

function showFocus()
'    if (m.top.gridHasFocus <> invalid)
        if m.top.focusPercent = 1.0
            m.itemText.font="font:MediumBoldSystemFont"
            print m.top.itemContent.labelText
        else if m.top.focusPercent = 0.0
            m.itemText.font="font:MediumStyleFont"
        end if
'    end if
    
'    if focus
'        m.itemText.text=m.top.itemContent.labelText
'    else
'        m.itemText.font="font:MediumSystemFont"
'    end if
'    print m.top.itemContent.labelText
end function




Same issue did you find solution?