Need some help with understanding <Scroll> control

[merlight]

I have a plain <Scroll> control (XML source). No inherits="ZO_Scroll", since it only supports vertical scrolling and I want horizontal. No scrollbar.

Here's a picture of two Torchbug windows inspecting tbugTabWindow1Tabs:

tbugTabWindow1Tabs is the scroll control in the yellow box. It has 14 children: ActiveBg provides the dark background for the active tab "6", and children 2..14 are tab labels that were added dynamically -- intentionally too many to fit, you can see "_mouseSomething" is clipped on the right.

What I don't understand is that both extents.horizontal and extents.vertical are 0 (these are values returned by GetScrollExtents). And when I do /script tbugTabWindow1Tabs:SetHorizontalScroll(10), nothing happens. Offsets remain at 0.

I tried playing with SetScrollBounding, and when I set it to SCROLL_BOUNDING_UNBOUND and then SetHorizontalScroll(10), what happens is this: ActiveBg (the first child) is reanchored to the parent with offsetX=-10 and offsetY=-0 (not kidding, negative zero). All other children stay where they are.

Looking at how ZO_ScrollContainer is implemented, I'm beginning to think that the scroll control determines its inner extents solely from its first child, and that scrolling is actually implemented by shifting that child's anchor in the opposite direction.

Also does anyone know what different ScrollBounding values do? So far I've figured that UNBOUND allows you to SetVertical/HorizontalScroll beyond what GetScrollExtents returns. All other values (BOUND, CONTAINED, DEFAULT) seem to prevent that.

not sure if I understand one word of what you said, but i couldn't find this in your post / file :

ZO_HorizontalScrollList

thats what is used at the crafting station. could be helpful.

[circonian]

Originally Posted by merlight I What I don't understand is that both extents.horizontal and extents.vertical are 0 (these are values returned by GetScrollExtents). And when I do /script tbugTabWindow1Tabs:SetHorizontalScroll(10), nothing happens. Offsets remain at 0.

I'm guessing I must be missing something, but since your not inheriting, there is a lot of stuff missing isn't there? I see no scrollbar, nothing gets initialized (ZO_Scroll_Initialize) (even your tbugTabWindow1 has no .scroll or .scrollbar) I see no handlers to: handle extents changing, OnValueChanged, OnMouseWheel, no btns to move the scroll, exc... I understand you want it horizontal but I see no code to handle anything or maybe your just in the process of building it yourself? What did you expect it to do? Or better yet what are you trying to get it to do?


This probably isn't to helpful, I've never used this, but heres what I noticed using SetHorizontalScroll with:
SCROLL_BOUNDING_CONTAINED -- seems to change the extents & offset
SCROLL_BOUNDING_UNBOUND -- changes the offset only
SCROLL_BOUNDING_BOUND -- changes neither
SCROLL_BOUNDING_DEFAULT -- changes offset only

Changing the bounding allows changing the extent & offsets, but even then nothing happens. You said your 1st control reanchored & moved when you called SetHorizontalScroll() after changing the bounds? It didn't for me. Since I see no code for SetHorizontalScroll, I'm assuming it just sets a value but doesn't actually do anything else and I see no handlers to do anything even if those values change.

As Wandamey said, I would look at zo_horizontalscrolllist.lua & the clothier crafting station code: smithingcreation_shared.xml & smithing_common.xml.

[merlight]

Originally Posted by circonian I'm guessing I must be missing something, but since your not inheriting, there is a lot of stuff missing isn't there?

Yes, it's only purpose so far has been clipping the tab labels so they don't overflow out of the window if you open too many. Scrolling behaviour is what I've been struggling with this weekend. It appears that making a container with resizeToFitDescendents="true" the only child of the scroll, and putting everything in the container is the way to go. E.g. ANIMATION_SCROLL then works on the scroll control.

SetScrollBounding is still a mystery to me, but luckily scrolling works without touching that

Originally Posted by circonian As Wandamey said, I would look at zo_horizontalscrolllist.lua & the clothier crafting station code: smithingcreation_shared.xml & smithing_common.xml.

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

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

and you can't resize your controls depending on the longer one and reinitialize your scrolllist depending on the situation?

Edit : actually that's what the smithing station does already, the table of listed items changes at each station/filter change for the corresponding table.
for the size of the elements idk though. I can't deny that they were all square.

I remember having emptied my crafting lists by accident while I was testing the smithing stations... shouldn't be too hard to reinit.

[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

[merlight]

Interesting, I didn't know ZO_HorizontalScrollList can handle variable width items. And I didn't even think about item-wise scrolling (select next/previous). I only did area scrolling and you have to click to select another item. But I'm starting to like the idea of scrolling selection.

[circonian]

Originally Posted by merlight Interesting, I didn't know ZO_HorizontalScrollList can handle variable width items. And I didn't even think about item-wise scrolling (select next/previous). I only did area scrolling and you have to click to select another item. But I'm starting to like the idea of scrolling selection.

You could still select items by clicking them this way too. You don't even have to handle the clicks, just make the slotTemplate mouseEnabled & the rest is handled for you.

<Control name="HorizontalScroll_HList_SlotTemplate" virtual="true" mouseEnabled="true">

You can also scroll with the mouse wheel or click/drag the bar to scroll through it, its all handled for you. If you wanted you could even hide the big Left/Right buttons.

[Letho]

Heyho,

I'm currently having trouble setting up a scrollable area and stumbled upon this thread as i did some research with google. I'd like to set up a scrollable area from scratch, that means not using any inherited or predefined control/code written by zenimax. Sadly I have no clue how the scroll control works. I found a cheap and dirty workaround, but it's not really working well for it throws some lua errors:

Here is what i did:
1. defined a scrollbar using a slider-control.
2. defined a control of type "CT_SCROLL" (name="ScrollChild") and added a regular CT_CONTROL (name="ScrollingContainer") to it.
3. Using the slider's "OnValueChanged" - event i simply modify the "ScrollingContainer"'s anchor-offset by clearing it's anchors and adding a new one with the new y-offset. Because ScrollingContainer is a child-element of the CT_SCROLL every content displayed "outside" the CT_SCOLL wont be displayed for CT_CONTROL seems to behave like an HTML div-container with overflow:hidden.

This results in the desired behaviour but also throws the "too many anchors processed" lua error - not to mention the low performance.

I'd really like how to implement scrolling areas in a proper way, could anybody help me?

Here's the code:

function AuraMastery:Tex() -- Shows Window with all icon textures on the screen
    local container = WM:CreateTopLevelWindow("AMTextureContainer"); -- Main container
    
    local bg         = WM:CreateControl("$(parent)_Backdrop", container, CT_BACKDROP);
 
    local oX = 0;
    local oY = 0;
 
    container:SetClampedToScreen(true);
    container:SetDimensions(1600, 900);
    container:ClearAnchors();
    container:SetAnchor(CENTER, GuiRoot, CENTER);
    container:SetAlpha(1);
    container:SetMovable(true);
    container:SetHidden(false);
    container:SetMouseEnabled(true);
 
    bg:SetAnchorFill();
    bg:SetCenterColor(0,0,0,.4);
    bg:SetEdgeTexture(nil, 1, 1, 1, 0);
    bg:SetEdgeColor(1,1,1,.12); 
 
    -- Scrollable area that hides everything that expands beyond it's own size
    local scrollChild = WM:CreateControl("$(parent)_ScrollChild", container, CT_SCROLL);
    scrollChild:SetDimensions(1575,900);
    scrollChild:SetAnchor(TOPLEFT, container, TOPLEFT, 0, 0);
    scrollChild:SetScrollBounding(SCROLL_BOUNDING_CONTAINED);
 
    scrollChild.bg = WM:CreateControl("$(parent)_Backdrop", scrollChild, CT_BACKDROP);
    scrollChild.bg:SetAnchorFill();
    scrollChild.bg:SetCenterColor(1,0,0,.1);
    scrollChild.bg:SetEdgeTexture(nil, 1, 1, 1, 0);
    scrollChild.bg:SetEdgeColor(0,0,0,0);
 
        -- This containers Y-Offset will be modified by our scrollbar-value, hiding it's parts that expand beyong the CT_SCROLL's size
    local scrollContainer = WM:CreateControl("AuraMastery_ScrollContainer", scrollChild, CT_CONTROL)
    scrollContainer:SetDimensions(1575,900);
    scrollContainer:SetAnchor(TOPLEFT, container, TOPLEFT, 0, -(padding+iconSize));
    scrollContainer:SetResizeToFitDescendents(true);
    scrollContainer.bg = WM:CreateControl("$(parent)_Backdrop", scrollContainer, CT_BACKDROP);
    scrollContainer.bg:SetAnchorFill();
    scrollContainer.bg:SetCenterColor(0,0,1,.1);
    scrollContainer.bg:SetEdgeTexture(nil, 1, 1, 1, 0);
    scrollContainer.bg:SetEdgeColor(0,0,0,0);
 
    -- SCROLLBAR
    local scrollBar = WM:CreateControl("$(parent)_ScrollBar", container, CT_SLIDER);
    scrollBar:SetDimensions(25, 900);
    scrollBar:SetAnchor(TOPRIGHT, container, TOPRIGHT);
    scrollBar:SetOrientation(ORIENTATION_VERTICAL);
    scrollBar:SetMouseEnabled(true);
    scrollBar:SetMinMax(0,900);
    scrollBar:SetThumbTexture(nil,nil, nil, 25, 25);
    scrollBar:SetValueStep(padding+iconSize);
        -- backdrop
        scrollBar.bg = WM:CreateControl("$(parent)_Backdrop", scrollBar, CT_BACKDROP);
        scrollBar.bg:SetAnchor(TOPLEFT, slider, TOPLEFT, 0, 4)
        scrollBar.bg:SetAnchor(BOTTOMRIGHT, slider, BOTTOMRIGHT, 0, -4)
        scrollBar.bg:SetCenterColor(0,0,0);
        scrollBar.bg:SetEdgeTexture(nil, 1, 1, 1, 0);
        scrollBar.bg:SetEdgeColor(0,0,0,0);
 
    scrollBar:SetHandler("OnValueChanged", function(self) AuraMastery:Scroll(); d(self:GetValue()); end);
 
         -- self.icons contains that path to every texture of type "icon" in the game (e.g.:  [1] = Esoui/art/icons/.../textureName.dds
    for k,v in pairs(self.icons) do
        local modX = (k-1)%29; -- display only 29 icons of size 48px per row!
        local modY = math.floor((k-1)/29);
 
        oX = (modX*iconSize)+((modX+1)*padding);
        oY = (modY*iconSize)+((modY+1)*padding);
 
                -- button is needed for displaying a tooltip on mouseOver (doesnt work on CT_TEXTURE)
        local iconContainer = WM:CreateControl("Icon"..k, scrollContainer, CT_BUTTON);
        iconContainer:SetDimensions(iconSize, iconSize);
        iconContainer:SetAnchor(TOPLEFT, scrollContainer, TOPLEFT, oX, oY);
        iconContainer.iconnr = k;
 
                -- the icon texture...
        local icon = WM:CreateControl("$(parent)_Texture"..k, iconContainer, CT_TEXTURE);
        icon:SetAnchorFill();
        icon:SetDimensions(iconSize,iconSize);
        icon:SetTexture(v);
                -- ... and it's tooltip; SetHidden(false) on mouseover
        local iconTooltip = WM:CreateControl("$(parent)_Tooltip", iconContainer, CT_CONTROL);
        iconTooltip:SetHidden(true);
        iconTooltip:SetDimensions(320,48);
        iconTooltip:SetAnchor(BOTTOM, iconContainer, TOP);
 
        iconTooltip.bg = WM:CreateControl("$(parent)_Backdrop", iconTooltip, CT_BACKDROP);
        iconTooltip.bg:SetAnchorFill();
        iconTooltip.bg:SetDrawLayer(1);
        iconTooltip.bg:SetCenterColor(0,0,0,1);
        iconTooltip.bg:SetEdgeTexture(nil,1,1,1,0);
        iconTooltip.bg:SetEdgeColor(1,1,1,.12);
 
        iconTooltip.label = WM:CreateControl("$(parent)_Label", iconTooltip, CT_LABEL);
        iconTooltip.label:SetAnchorFill();
        iconTooltip.label:SetFont("$(BOLD_FONT)|18|outline");
        iconTooltip.label:SetColor(1,1,1,1);
        iconTooltip.label:SetText(v);
 
        iconContainer:SetHandler("OnMouseEnter", function(self) AuraMastery:Tooltip(self.iconnr); end);
        iconContainer:SetHandler("OnMouseExit", function(self) AuraMastery:Tooltip(self.iconnr); end);
    end
 
end
 
function AuraMastery:Scroll()
    local offset = WM:GetControlByName("AMTextureContainer_ScrollBar"):GetValue();
    local control = WM:GetControlByName("AuraMastery_ScrollContainer");
    control:ClearAnchors();
    control:SetSimpleAnchor(scrollChild, 0, -offset);
end

Scrolled down one step (1 step = height of one row of icons, padding included):


Cheers,
Letho

[merlight]

Originally Posted by Letho I'd like to set up a scrollable area from scratch, that means not using any inherited or predefined control/code written by zenimax.

I'd advise you to try using ZO_ScrollList. It's almost guaranteed to perform better.

In your code above, you're creating as many icon controls as there are icons in your dataset. And each time you scroll, all of them need to follow their anchor to the container; including those not currently visible.

ZO_ScrollList, on the other hand, creates only enough row controls to fill the area; and reuses them as you scroll around. That means fewer controls overall, and fewer anchor updates when scrolling.

[Letho]

Hey merlight, thank you for your quick response! I was afraid that would be the case, the actual reason for me not to use the Z_ScrollList is I havent been able to get it running, nor understanding the whole code inside it's lua file :/
I don't even understand the principle behind it's mechanic, I mean the princible I use in my code is quite easy: move the child Elements of a control that hides all of its child element's overflow by modifying the child elements anchor-x/y-offsets^^
Could u / anybody explain how ZO_ScrollList implements the scrolling behaviour and what functions u need to set up a simple scrolling container? I've read through this thread and some others and could reproduce your problems with SetScrollBounding. At least I was finally able to "unlock" (= getting it to save values different from 0) the SetVerticalScroll() - function, but it did not change any displayed content.

Another suspicion/fear I have is that ESOs controls are not meant to scroll areas that contain as many items as i want to be displayed :/
Within my implementation the "too many anchors processed" - error is even thrown if i reduce my dataset to 10 elements

[Ayantir]

If you want to display stuff in a controll which is scrollable, just do :

<TopLevelControl name="MyXMLControl" hidden="true">
    <Controls>
 
        <Control name="$(parent)Container" inherits="ZO_ScrollContainer">
            <OnInitialized>
                ZO_Scroll_Initialize(self)
            </OnInitialized>
            <Dimensions x="850" y="630"/>
            <Anchor point="BOTTOMLEFT" relativeTo="$(parent)" relativePoint="TOPLEFT" offsetX="50" offsetY="650" />
        </Control>
 
        <Label name="$(parent)Blabla">
            <Dimensions x="830" />
            <OnInitialized>
                self:SetParent(GetControl("MyXMLControlContainerScrollChild"))
                self:SetAnchor(TOPLEFT, MyXMLControlContainerScrollChild, TOPLEFT, 4, 4)
            </OnInitialized>
        </Label>
 
        <!-- Add other controlls here, same as previous -->
        
    <Controls>
</TopLevelControl>

If you want to create a Scroll list (Aka : A list of data which is scrollable)

XML

A row :

<Control name="KillCounterKillerRowTemplate" virtual="true" mouseEnabled="true">
    <OnMouseEnter>
        KillCounter_HoverRowOfDeaths(self)
    </OnMouseEnter>
    <OnMouseExit>
        KillCounter_ExitRowOfDeaths(self)
    </OnMouseExit>
    <Dimensions x="600" y="30" />
    <Controls>
        <Texture name="$(parent)BG" inherits="ZO_ThinListBgStrip" />
        
        <Texture name="$(parent)Alliance" font="ZoFontGame" verticalAlignment="CENTER">
            <Dimensions x="32" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)" />
        </Texture>
        <Texture name="$(parent)Rank" font="ZoFontGame" verticalAlignment="CENTER">
            <Dimensions x="32" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)Alliance" relativePoint="TOPRIGHT" offsetX="5"/>
        </Texture>
        <Texture name="$(parent)PlayerClass" font="ZoFontGame" verticalAlignment="CENTER">
            <Dimensions x="32" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)Rank" relativePoint="TOPRIGHT" offsetX="5"/>
            <OnMouseEnter>
                KillCounter_Deaths_PlayerClassOnMouseEnter(self)
            </OnMouseEnter>
            <OnMouseExit>
                KillCounter_Deaths_PlayerClassOnMouseExit(self)
            </OnMouseExit>
        </Texture>
        <Texture name="$(parent)Veteran" mouseEnabled="true" layer="OVERLAY">
            <Anchor point="LEFT" relativePoint="RIGHT" relativeTo="$(parent)PlayerClass" offsetX="5" />
            <Dimensions x="32" y="32"/>
        </Texture>
        <Label name="$(parent)PlayerLevel" font="ZoFontGame" verticalAlignment="CENTER">
            <Dimensions x="32" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)Veteran" relativePoint="TOPRIGHT"/>
        </Label>
        <Label name="$(parent)PlayerName" font="ZoFontGame" verticalAlignment="CENTER">
            <Dimensions x="150" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)PlayerLevel" relativePoint="TOPRIGHT"/>
        </Label>
        <Label name="$(parent)PlayerAccount" font="ZoFontGame" verticalAlignment="CENTER">
            <Dimensions x="150" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)PlayerName" relativePoint="TOPRIGHT" />
        </Label>
        <Label name="$(parent)PlayerDeaths" font="ZoFontGame" verticalAlignment="CENTER">
            <Dimensions x="75" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)PlayerAccount" relativePoint="TOPRIGHT" />
        </Label>
        
    </Controls>
</Control>

The list itself :

In the list we define the headers and the list.
Here I used sortable headers (the ones with the little triangles to sort).
ZO_SortHeader_Initialize is used to make an header with a name
ZO_SortHeader_InitializeArrowHeader is used to make an header without

<TopLevelControl name="Scene_KC_Menu_Deaths" inherits="ZO_RightPanelFootPrint" hidden="true">
    <Controls>
        
        <Control name="$(parent)Headers">
            <Dimensions x="600" y="32" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPLEFT" offsetX="300" offsetY="50"/>
            <Controls>
            
                <Control name="$(parent)Alliance" inherits="ZO_SortHeaderIcon">
                    <OnInitialized>
                        ZO_SortHeader_InitializeArrowHeader(self, "alliance", ZO_SORT_ORDER_DOWN)
                        ZO_SortHeader_SetTooltip(self, GetString(SI_FRIENDS_LIST_PANEL_TOOLTIP_ALLIANCE))
                    </OnInitialized>
                    <Anchor point="TOPLEFT" relativeTo="$(parent)" offsetX="12"/>
                    <Dimensions x="16" y="32" />
                </Control>
                
                <Control name="$(parent)Rank" inherits="ZO_SortHeaderIcon">
                    <OnInitialized>
                        ZO_SortHeader_InitializeArrowHeader(self, "rank", ZO_SORT_ORDER_DOWN)
                        ZO_SortHeader_SetTooltip(self, GetString(SI_STATS_ALLIANCE_RANK))
                    </OnInitialized>
                    <Anchor point="TOPLEFT" relativeTo="$(parent)Alliance" relativePoint="TOPRIGHT" offsetX="17"/>
                    <Dimensions x="16" y="32" />
                </Control>
                
                <Control name="$(parent)PlayerClass" inherits="ZO_SortHeaderIcon">
                    <OnInitialized>
                        ZO_SortHeader_InitializeArrowHeader(self, "playerclass", ZO_SORT_ORDER_DOWN)
                        ZO_SortHeader_SetTooltip(self, GetString(SI_FRIENDS_LIST_PANEL_TOOLTIP_CLASS))
                    </OnInitialized>
                    <Anchor point="TOPLEFT" relativeTo="$(parent)Rank" relativePoint="TOPRIGHT" offsetX="20"/>
                    <Dimensions x="16" y="32" />
                </Control>
                
                <Control name="$(parent)PlayerLevel" inherits="ZO_SortHeaderIcon">
                    <OnInitialized>
                        ZO_SortHeader_InitializeArrowHeader(self, "playerlevel", ZO_SORT_ORDER_DOWN)
                        ZO_SortHeader_SetTooltip(self, GetString(SI_FRIENDS_LIST_PANEL_TOOLTIP_LEVEL))
                    </OnInitialized>
                    <Anchor point="TOPLEFT" relativeTo="$(parent)PlayerClass" relativePoint="TOPRIGHT" offsetX="28"/>
                    <Dimensions x="16" y="32" />
                </Control>
                
                <Control name="$(parent)PlayerName" inherits="ZO_SortHeader">
                    <OnInitialized>
                        ZO_SortHeader_Initialize(self, "Name", "playername", ZO_SORT_ORDER_DOWN, TEXT_ALIGN_LEFT, "ZoFontGameLargeBold")
                    </OnInitialized>
                    <Anchor point="TOPLEFT" relativeTo="$(parent)PlayerLevel" relativePoint="TOPRIGHT" offsetX="35"/>
                    <Dimensions x="150" y="32" />
                </Control>
                
                <Control name="$(parent)PlayerAccount" inherits="ZO_SortHeader">
                    <OnInitialized>
                        ZO_SortHeader_Initialize(self, "Account", "playeraccount", ZO_SORT_ORDER_DOWN, TEXT_ALIGN_LEFT, "ZoFontGameLargeBold")
                    </OnInitialized>
                    <Anchor point="TOPLEFT" relativeTo="$(parent)PlayerName" relativePoint="TOPRIGHT"/>
                    <Dimensions x="150" y="32" />
                </Control>
                
                <Control name="$(parent)PlayerDeaths" inherits="ZO_SortHeader">
                    <OnInitialized>
                        ZO_SortHeader_Initialize(self, "Deaths", "deaths", ZO_SORT_ORDER_DOWN, TEXT_ALIGN_LEFT, "ZoFontGameLargeBold")
                    </OnInitialized>
                    <Anchor point="TOPLEFT" relativeTo="$(parent)PlayerAccount" relativePoint="TOPRIGHT"/>
                    <Dimensions x="75" y="32" />
                </Control>
                
            </Controls>
        </Control>
        
        <Control name="$(parent)List" inherits="ZO_ScrollList">
            <Dimensions x="600" y="575" />
            <Anchor point="TOPLEFT" relativeTo="$(parent)Headers" relativePoint="TOPLEFT" offsetX="0" offsetY="40" />
        </Control>
        
    </Controls>
</TopLevelControl>

Then, in Lua :

local myList = ZO_SortFilterList:Subclass()
 
function myList:New(control)
    
    ZO_SortFilterList.InitializeSortFilterList(self, control)
    
    -- tiebreaker  is used when values are equal. You can also add isNumeric = true if needed.
    local sorterKeys =
    {
        ["deaths"] = {},
        ["alliance"] = {tiebreaker = "deaths"},
        ["rank"] = {tiebreaker = "deaths"},
        ["playername"] = {tiebreaker = "deaths"},
        ["playeraccount"] = {tiebreaker = "deaths"},
        ["playerclass"] = {tiebreaker = "deaths"},
        ["veteranrank"] = { tiebreaker = "deaths"},
        ["playerlevel"] = { tiebreaker = "veteranrank"},
    }
    
    self.masterList = {}
    ZO_ScrollList_AddDataType(self.list, 1, "KillCounterKillerRowTemplate", 32, function(control, data) self:SetupEntry(control, data) end) -- Add my row
    ZO_ScrollList_EnableHighlight(self.list, "ZO_ThinListHighlight") -- Enable the highlight (the turquoise color)
    self.currentSortKey = "deaths" -- defaut sort
    
    self.sortFunction = function(listEntry1, listEntry2) return ZO_TableOrderingFunction(listEntry1.data, listEntry2.data, self.currentSortKey, sorterKeys, self.currentSortOrder) end -- my sort function
    self:SetAlternateRowBackgrounds(true) -- Alternate background, one dark, one grey
    
    return self
    
end
 
function myList:SetupEntry(control, data)
    
    -- Setup a row
    
    control.data = data
    control.alliance = GetControl(control, "Alliance")
    control.rank = GetControl(control, "Rank")
    control.playername = GetControl(control, "PlayerName")
    control.playeraccount = GetControl(control, "PlayerAccount")
    control.playerclass = GetControl(control, "PlayerClass")
    control.playerlevel = GetControl(control, "PlayerLevel")
    control.deaths = GetControl(control, "PlayerDeaths")
    local veteran = GetControl(control, "Veteran")
    
    control.alliance:SetTexture(GetAllianceSymbolIcon(data.alliance))
    
    if data.rank >= 0 and data.rank <= 50 then
        control.rank:SetTexture(GetAvARankIcon(data.rank))
    else
        control.rank:SetHidden(true)
    end
    
    if GetClassIcon(data.playerclass) then
        control.playerclass:SetTexture(GetClassIcon(data.playerclass))
    else
        control.playerclass:SetHidden(true)
    end
    
    control.playerlevel:SetText(GetLevelOrVeteranRankStringNoIcon(data.playerlevel, data.veteranrank))
    
    if data.veteranrank and data.veteranrank > 0 then
        veteran:SetTexture(GetVeteranRankIcon())
    else
        veteran:SetHidden(true)
    end
    
    control.playername:SetText(data.playername)
    control.playeraccount:SetText(data.playeraccount)
    control.deaths:SetText(data.deaths)
    
    ZO_SortFilterList.SetupRow(self, control, data)
    
end
 
function myList:BuildMasterList()
    self.masterList = {}
    local killingList = db.killingList
    if killingList then
        for k, v in ipairs(killingList) do
            local data = v
            table.insert(self.masterList, data)
        end
    end
    
end
 
function myList:SortScrollList()
    local scrollData = ZO_ScrollList_GetDataList(self.list)
    table.sort(scrollData, self.sortFunction)
end
 
function myList:FilterScrollList()
    
    -- If you want to add a filter
    
    local scrollData = ZO_ScrollList_GetDataList(self.list)
    ZO_ClearNumericallyIndexedTable(scrollData)
 
    for i = 1, #self.masterList do
        local data = self.masterList[i]
        table.insert(scrollData, ZO_ScrollList_CreateDataEntry(1, data))
    end
end
 
function KillCounter_HoverRowOfDeaths(control)
    myList:Row_OnMouseEnter(control)
end
 
function KillCounter_ExitRowOfDeaths(control)
    myList:Row_OnMouseExit(control)
end

->

[Letho]

Hi Ayantir, thx for your help! I'll just copy it to my notepad++ and try to understand and reproduce it! (I always have to see the actual result ingame in order to understand code^^)

[Letho]

Ok, first question I have:

<OnInitialized>
                  self:SetParent(GetControl("MyXMLControlContainerScrollChild"))
                  self:SetAnchor(TOPLEFT, MyXMLControlContainerScrollChild, TOPLEFT, 4, 4)
             </OnInitialized>

What control is "MyXMLControlContainerScrollChild"?

Cheers

[Ayantir]

What control is "MyXMLControlContainerScrollChild"?

<TopLevelControl name="MyXMLControl" hidden="true">
    <Controls>

MyXMLControl....

<Control name="$(parent)Container" inherits="ZO_ScrollContainer">
            <OnInitialized>

MyXMLControlContainer ...


ScrollChild is added by inherits="ZO_ScrollContainer"

so MyXMLControlContainerScrollChild is the control which will host all the data you want to be scrollable. (look at the pict I posted)

[Letho]

Hey, just wanted to thank u for your help! I'm currently eating myself through the code, modifying my containers to get some (visual) understanding of what each container does^^ I'm afraid I'm far away from understanding even the basics for I only know WoW Lua (not the xml widget api) and generic XHTML and I actually have no clue what the rules for ESOs XAML interface are. But your examples help a lot

I'm sure there will be more questions in the future, I'll just post them here if u dont mind, your help is much appreciated, very cool that places like this exist!

[Letho]

Ok I finally managed setting up a working scroll container:

<GuiXml>
    <Controls>
 
<!-- This is my parent container containing the scrollable container -->
        <TopLevelControl name="AuraMasteryMenuContainer" clampedToScreen="true" mouseEnabled="true" movable="true" hidden="true">
            <Dimensions x="1280" y="768" />
            <Anchor point="CENTER" relativeTo="GuiRoot" relativePoint="CENTER" />
            <Controls>
                <Backdrop name="$(parent)_Backdrop" centerColor="CC000000" edgeColor="1F1F1F">
                    <AnchorFill />
                    <Edge edgeSize= "1" />
                </Backdrop>
 
 
<!-- SCrollable container that will contain all the nice little icons that the user will be able to scroll through -->
        <Control name="$(parent)ScrollExample" inherits="ZO_ScrollContainer">
             <OnInitialized>
                  ZO_Scroll_Initialize(self)
             </OnInitialized>
             <Dimensions x="850" y="630"/>
             <Anchor point="BOTTOMLEFT" relativeTo="$(parent)" relativePoint="TOPLEFT" offsetX="50" offsetY="650" />
        </Control>

And the .lua file for adding one of the above mentioned icons to the scroll container:

local parent = WM:GetControlByName("AuraMasteryMenuContainerScrollExampleScrollChild");
        d(tostring(parent));
        local icon = WM:CreateControl("$(parent)_Texture", parent, CT_TEXTURE);
        icon:SetParent(parent);
        icon:SetAnchor(TOPLEFT, parent, TOPLEFT, 4, 4);
        icon:SetDimensions(iconSize,iconSize);
        icon:SetTexture("esoui/art/icons/ability_1handed_001.dds");

This code results in the icon texture being displayed, but no scroll bar and no background for the scrollcontainer.

In this post (http://www.esoui.com/forums/showpost.php?p=10826) u stated that

Originally Posted by merlight ZO_ScrollContainer is a control that contains the slider bar, buttons and the scrolled area, which is named "$(parent)ScrollChild".

I inspected the container with the addon "zgoo" and the container does not contain a scrollbar.
Did i do something wrong or did Zenimax change that? How do i set up a scollbar and associate it or it's event handler OnValueChanged to the container?

P.S.: I didn't get that ZO_ScrollContainer and ZO_ScrollList are two different things, that confused me

[merlight]

Originally Posted by Letho I don't even understand the principle behind it's mechanic, I mean the princible I use in my code is quite easy: move the child Elements of a control that hides all of its child element's overflow by modifying the child elements anchor-x/y-offsets^^

The principle behind ZO_ScrollList is separating data from controls. That way you can have thousands of data items in a list, and only a bunch of controls to display them (well in your case, there'll be a lot of icons visible at once, but still less than all of them, right?).

The simplest use of ZO_ScrollList I could quickly find is AbilityList. Here it's initialized with two row types, and
here it's filled with data. All you need is a control created from the ZO_ScrollList template, either in XML or in Lua:

local list = wm:CreateControlFromVirtual("$(parent)List", parent, "ZO_ScrollList")

and a template for your row type, that must be defined in XML (unless you replace the row pool's factory function).

Another example is in LibAddonMenu.

Originally Posted by Letho Within my implementation the "too many anchors processed" - error is even thrown if i reduce my dataset to 10 elements

That usually happens when your anchors have circular dependency. Which includes a kind of chicken&egg problem when a container control has resizeToFitDescendents="true" and its children are trying to fill the parent.

[Letho]

I understand, would u advice not to use ZO_ScrollContainer but ZO_ScrollList instead? I find the container version far more simple :/

Can you describe how to set up a scrollbar for a ZO_ScrollContainer and how to use its scrolling event handler?

Btw. are these controls and it's functions documented somewhere? Getting help is always good, but i dont want you to get the impression im just asking here becuz im too lazy to read a documentation I just did research for the last two days and i'm really getting more and more desperate, especially if i consider my addon is nearly finished with the scroll container problem being the only thing standing in my way ;D

[merlight]

Originally Posted by Letho I understand, would u advice not to use ZO_ScrollContainer but ZO_ScrollList instead? I find the container version far more simple :/ Can you describe how to set up a scrollbar for a ZO_ScrollContainer and how to use its scrolling event handler?

I've never used ZO_ScrollContainer, and I wouldn't use it in this case, either. Here's how I see it:
- ZO_ScrollContainer for UI widgets -- a number of controls, often of different types, shapes and sizes; each with a specific purpose -- a good example is LibAddonMenu's panel control
- ZO_ScrollList for lists of similar items -- like inventory; here the controls (rows) are not special, any of them can display any data item. You wouldn't want the guild bank UI to actually contain 500 rows. ZO_ScrollList does all the work required to create the illusion of there being 500 rows, while it only constructs as many row controls as are simultaneously visible.

You have N icons, M per row. So you'll add ceil(N/M) data rows to the list (simple tables containing up to M texture paths), and your row control setup function will set the textures on icon controls in the row.

Originally Posted by Letho Btw. are these controls and it's functions documented somewhere? Getting help is always good, but i dont want you to get the impression im just asking here becuz im too lazy to read a documentation I just did research for the last two days and i'm really getting more and more desperate, especially if i consider my addon is nearly finished with the scroll container problem being the only thing standing in my way ;D

We've all learned from The Source and/or other add-ons Don't get overwhelmed, you'll find your way around much more easily after you get used to how the UI is structured (I think 83% of it are lists).