[circonian]

Originally Posted by merlight ZO_HorizontalScrollList is of no use here. It's written for a fixed number of items of equal width.

Nah, you can do it:




XML:

Warning: Spoiler

<GuiXml>
  <Controls>
        <Control name="TestAddon_HList_Template" virtual="true">
            <Dimensions x="700" y="135" />
 
            <OnInitialized>
                self.label = self:GetNamedChild("Label")
                self.listControl = self:GetNamedChild("List")
            </OnInitialized>
 
            <Controls>
                <Control name="$(parent)List" inherits="ZO_HorizontalScrollListTemplate">
                    <Dimensions x="700" y="64" />
                    <Anchor point="CENTER" />
                </Control>
 
                <Label name="$(parent)Label" font="ZoFontWinH3" color="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_SELECTED" modifyTextType="UPPERCASE" text="title">
                    <Anchor point="TOPLEFT" offsetY="8"/>
                </Label>
            </Controls>
        </Control>
        
        <Control name="TestAddon_HList_SlotTemplate" virtual="true">
            <Dimensions x="200" y="40" />
 
            <OnInitialized>
                self.label = self:GetNamedChild("Label")
            </OnInitialized>
 
            <Controls>
                <Label name="$(parent)Label" font="ZoFontWinH3" color="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_SELECTED" modifyTextType="UPPERCASE" text="titlexx">
                    <AnchorFill />
                </Label>
            </Controls>
        </Control>
  </Controls>
</GuiXml>

LUA:

Warning: Spoiler

local function Create()
    local tlw = CreateTopLevelWindow("TestAddonHListTLW")
    TestAddon.tlw = tlw
    tlw:SetDimensions(700, 200)
    tlw:SetAnchor(CENTER, GuiRoot, CENTER)
    
    local backdrop = CreateControlFromVirtual("TestAddonHListbackdrop", TestAddon.tlw, "ZO_DefaultBackdrop")
    backdrop:SetAnchorFill()
    
    local hList = CreateControlFromVirtual("TestAddonHList", TestAddon.tlw, "TestAddon_HList_Template")
    TestAddon.hList = hList
    hList:SetAnchorFill()
    
    local function OnHorizonalScrollListShown(list)
        --local listContainer = list:GetControl():GetParent() 
        --listContainer.selectedLabel:SetHidden(false)
    end
 
 
    local function EqualityFunction(leftData, rightData)
        return leftData.name == rightData.name
    end
 
    local function OnHorizonalScrollListCleared(...)
       -- self:OnHorizonalScrollListCleared(...)
    end
    
    local function SetupFunction(control, data, selected, selectedDuringRebuild, enabled)
        control.label:SetText(data.name)
        
        local width = control.label:GetStringWidth(control.label:GetText()) + 20
        control:SetWidth(width)
    end
    
    local function OnSelectedPatternChanged(selectedData, selectedDuringRebuild)
    end
    
    local patternList = ZO_HorizontalScrollList:New(hList.listControl, "TestAddon_HList_SlotTemplate", 3, SetupFunction, EqualityFunction, OnHorizonalScrollListShown, OnHorizonalScrollListCleared)
    patternList:SetOnSelectedDataChangedCallback(function(selectedData, oldData, selectedDuringRebuild)
        OnSelectedPatternChanged(selectedData, selectedDuringRebuild)
    end)
    TestAddon.hPatternList = patternList
    
    --patternList.displayEntryType = ZO_HORIZONTAL_SCROLL_LIST_DISPLAY_FIXED_NUMBER_OF_ENTRIES
    patternList.displayEntryType = ZO_HORIZONTAL_SCROLL_LIST_ANCHOR_ENTRIES_AT_FIXED_DISTANCE
    
    patternList.offsetBetweenEntries = 10
    
    patternList:Clear()
    
    patternList:AddEntry({name = "OneOneOneOne"})
    patternList:AddEntry({name = "Two"})
    patternList:AddEntry({name = "ThreeThreeThreeThreeThreeThree"})
    patternList:AddEntry({name = "FourFourFourFourFour"})
    patternList:AddEntry({name = "FiveFive"})
    patternList:AddEntry({name = "SixSixSixSix"})
    patternList:AddEntry({name = "Seven"})
    patternList:AddEntry({name = "EightEightEightEight"})
    
    patternList:Commit()
end

I didn't do this in the screenshots, didn't think of it until afterwords, but if you wanted (you probably would) you can change the DefaultEntryAnchor so that the "selected" control gets aligned left instead of center.

-- add:
local LEFT_PADDING = 50
 
function patternList:SetDefaultEntryAnchor(control, offsetX)
    --control:SetAnchor(CENTER, self.control, CENTER, offsetX)
    control:SetAnchor(LEFT, self.control, LEFT, offsetX + LEFT_PADDING)
end