Creating a whole bunch of Elements dynamic from code

[zgrssd]

I have been thinking for a while now about making something I call the "Event Explorer". A single window that allows you to register every event in the game for simple debugging/testing purposes.
LibConstantMapper provides me the ability to get all the Event ID and thier names in a fully automatic fashion. And later even get me subgroups. My current count for 1.2.6 is 469 Event ID's

The only piece still missing is the GUI side of the equation.
At a simple level the window will look like this:
Window
->Row1
-->Label with event ID
-->Label with event Name
-->Checkbox to enabeled/disable listening to the event
-->maybe extra checkboxes for the way the data is output (into chat, onscreen notification, how detailed the output should be (all parameters or only that the event was fired?))
->Row2
-->Label with event ID
->Row3

I propably have to add some paging/register cards for efficiency.
A later version will likely have some categories/filters/grouping for specific event groups (like all COMBAT Events).

But for now the big issues are the handlers on the first checkbox.
Basically I need one handler that can automagically identify to wich Row (and thus event ID) it belongs too. One handler to regsiter it 469 times at 469 UI Elements.
I wil propably need a big code behind table anyway to hold all the data (wich setting is enabeled/disabeled). So if I need to store something like the UI Element reference after creating it would not be an issue.

[merlight]

I think paging will be the way to go. That way you create say 50 rows from a template, which you can write in xml with checkbox and labels already in it. You can put any data you want in the row control, similar to how inventory rows have control.data={bagId=1, slotIndex=2, etc}. There were ingame scripts from Aug 2013 on XeNTaX forum, where loot window was paged, and it did pretty much exactly what I described - OnInitialize created a fixed number of rows from a template, and on EVENT_LOOT_UPDATED and when switching pages, updated data in those rows.

Later you can even make a search filter, e.g. events containing "TRADE" in their name

edit: can we even publish snippets from ingame scripts? It's so awkward to always tell people "there is something somewhere ..."

[zgrssd]

Originally Posted by merlight I think paging will be the way to go. That way you create say 50 rows from a template, which you can write in xml with checkbox and labels already in it. You can put any data you want in the row control, similar to how inventory rows have control.data={bagId=1, slotIndex=2, etc}. There were ingame scripts from Aug 2013 on XeNTaX forum, where loot window was paged, and it did pretty much exactly what I described - OnInitialize created a fixed number of rows from a template, and on EVENT_LOOT_UPDATED and when switching pages, updated data in those rows. Later you can even make a search filter, e.g. events containing "TRADE" in their name edit: can we even publish snippets from ingame scripts? It's so awkward to always tell people "there is something somewhere ..."

Controls have a data property? That makes this a whole lot easier.
I know that as "Tag" property from WinForms and WPF. It is the second best solution for such a problem.

What is the way to get the "parent" XML Element of a control?
I would perfer to just drop the Event's ID as data in the Row. The event handler would get the Checkboxes Reference. Then I would go up on step to get the Row it is contained in and use the ID from that.

Edit:
I think I found it. Something liek thsi event handler code?

local function eventHandler(sender)
    local senderParent = sender.GetParent()
    local EventID = senderParent.data
 
    --Appropirate code that can now work with the EventID of the dynamicalyl created control
end

[merlight]

I tried to write some untested code for illustration. Careful with dot where colon should be -- control:GetParent()

edit: or look at LAM controls, they too have custom data:
control.panel is the panel it's contained in
control.data is the optionData it was created from

<Control name="EventExplorerRow" virtual="true">
    <Dimensions y="45"/>
    <Controls>
        <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">
            <Anchor point="RIGHT" relativePoint="LEFT" offsetX="50"/>
        </Label>
        <Label name="$(parent)Name" font="ZoFontGame">
            <!-- I don't know how, but it's definitely possible to make this clickable,
                 so that you can enable/disable events by cliking on the name (see "ZO_CheckButtonLabel") -->
            <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
        </Label>
    </Controls>
</Control>

function EventExplorer:createRows()
    local function onRowClicked(...)
        self:onRowClicked(...)
    end
    self.rows = {}
    for i = 1, NUM_PAGE_ROWS do
        local row = CreateControlFromVirtual("$(parent)Row", self.pageScrollWindow, "EventExplorerRow", i)
        row.data = {}
        row:SetHandler("OnClicked", onRowClicked)
        table.insert(self.rows, row)
    end
end
 
function EventExplorer:onRowClicked(control, button)
    -- this handler should be usable for both labels and even the parent row control
    -- (which I think will be useful so that cliking in the empty space between labels works)
    local row
    if control.data then
        row = control
    else
        row = control:GetParent()
    end
    local status = self:toggleEventEnabled(row.data.eventId)
    row:SetEnabled(status)
end

-- this method will be used to fill the page with event ids and labels;
-- you'd store all event ids returned from a filter in self.selectedEventIds;
-- after the search you'd fill the 1st page with self:setPage(1);
-- if there are more events than NUM_PAGE_ROWS, and you provide
-- a control for switching to the next page, it can call self:setPage(self.currentPage);
function EventExplorer:setPage(pageNumber)
    local offset = math.min(0, pageNumber - 1) * NUM_PAGE_ROWS
    for i, row in ipairs(self.rows) do
        local eventId = self.selectedEventIds[i + offset]
        local idLabel = row:GetNamedChild("Id")
        local nameLabel = row:GetNamedChild("Name")
        row.data.eventId = eventId
        if eventId then
            idLabel:SetText(tostring(eventId))
            nameLabel:SetText(self:getEventName(eventId))
            nameLabel:SetEnabled(self:isEventEnabled(eventId))
        else
            idLabel:SetText("")
            nameLabel:SetText("")
            nameLabel:SetEnabled(false)
        end
    end
end
 
-- toggleEventEnabled, isEventEnabled will work with an internal table
-- that will keep track of what events you have registered

[merlight]

Originally Posted by zgrssd Controls have a data property?

I'm spamming a bit, but this deserves a post separate from the garbage I posted above
Controls are userdata with metatables, and their __index and __newindex are plain tables, so you can put anything you want in them.

[zgrssd]

I took the basic window from AIResearch Grid:

<GuiXml>
    <Controls>
        <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">
            <Dimensions x="760" y="650" />
            <Anchor point="CENTER" />
            <Controls>
 
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
 
            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>

Added merlights template:

<Control name="EventExplorerRow" virtual="true">
    <Dimensions y="45"/>
    <Controls>
        <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">
            <Anchor point="RIGHT" relativePoint="LEFT" offsetX="50"/>
        </Label>
        <Label name="$(parent)Name" font="ZoFontGame">
            <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
        </Label>
    </Controls>
</Control>

And made up some basic code to get the table and fill the window with entries:

local uniqueID = "d893fa70102add4c118054adcc1a1f82"
local LCM = LibStub:GetLibrary("LibConstantMapper")
 
local dataList = {}
 
--get the list of Events
local Events = LCM:getMappedData("Events")
 
local function fillWindow()
    for key, value in ipairs(Events) do
        local row = CreateControlFromVirtual("$(parent)Row", EventExplorerWindow, "EventExplorerRow", key)
    end
end
 
local function windowToggle()
    EventExplorerWindow:SetHidden(not EventExplorerWindow:IsHidden())
end
 
local function OnAddOnLoaded(eventID, AddonName)
    if (AddonName~= "EventExplorer") then return end
    
    fillWindow()
    
    SLASH_COMMANDS["/eventexplo"] = windowToggle
end
 
EVENT_MANAGER:RegisterForEvent("MyAddOn", EVENT_ADD_ON_LOADED, OnAddOnLoaded)

I only added the OnLoadedEvent because I got the errors from below and asumed the code was a bit to "early". But that was not it.


And all I get are those error messages and an empty window:

CreateControlFromVirtual failed.  ControlName[EventExplorerDynamicRow1], ParentName[EventExplorerWindow], VirtualName[EventExplorerRow].
CreateControlFromVirtual failed.  ControlName[EventExplorerDynamicRow2], ParentName[EventExplorerWindow], VirtualName[EventExplorerRow].
CreateControlFromVirtual failed.  ControlName[EventExplorerDynamicRow3], ParentName[EventExplorerWindow], VirtualName[EventExplorerRow].

And there is no explanation what exactly went wrong. Or even what remotely went wrong.

[Garkin]

How your xml looks like? It should be something like this:

<GuiXml>
    <Controls>
        <Control name="EventExplorerRow" virtual="true">
            <Dimensions y="45"/>
            <Controls>
                <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">
                    <Anchor point="RIGHT" relativePoint="LEFT" offsetX="50"/>
                </Label>
                <Label name="$(parent)Name" font="ZoFontGame">
                    <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
                </Label>
            </Controls>
        </Control>
        <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">
            <Dimensions x="760" y="650" />
            <Anchor point="CENTER" />
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>

There is no UI error with this .xml file.

[zgrssd]

Originally Posted by Garkin How your xml looks like? It should be something like this: <GuiXml>     <Controls>         <Control name="EventExplorerRow" virtual="true">             <Dimensions y="45"/>             <Controls>                 <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">                     <Anchor point="RIGHT" relativePoint="LEFT" offsetX="50"/>                 </Label>                 <Label name="$(parent)Name" font="ZoFontGame">                     <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>                 </Label>             </Controls>         </Control>         <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">             <Dimensions x="760" y="650" />             <Anchor point="CENTER" />             <Controls>                 <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />             </Controls>         </TopLevelControl>     </Controls> </GuiXml> There is no UI error with this .xml file.

I think I get it. The template was not properly put into <GuiXml> and <Controls> Tags. Hence the template was never properly read and could not be found

After solving this issues and some minor issue with the retreival of data I have anotehr issue:
Nothing is shown in the window. I double checked by giving the lables text and putting d(row) into the code - it is executed and the items are created. They are just not shown.

I asume that I am adding them on a level too high or that something in my window is wrong.

[Garkin]

Originally Posted by zgrssd I think I get it. The template was not properly put into <GuiXml> and <Controls> Tags. Hence the template was never properly read and could not be found After solving this issues and some minor issue with the retreival of data I have anotehr issue: Nothing is shown in the window. I double checked by giving the lables text and putting d(row) into the code - it is executed and the items are created. They are just not shown. I asume that I am adding them on a level too high or that something in my window is wrong.

Its because rows are not properly anchored to the window.

Try this code:

<GuiXml>
    <Controls>
        <Control name="EventExplorerRow" virtual="true">
            <Dimensions y="25"/>
            <Controls>
                <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">
                    <Dimensions x="60"/>
                    <Anchor point="LEFT" />
                </Label>
                <Label name="$(parent)Name" font="ZoFontGame">
                    <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
                </Label>
            </Controls>
        </Control>
        <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">
            <Dimensions x="760" y="650" />
            <Anchor point="CENTER" />
            <Controls>
                <Label name="$(parent)Title" inherits="ZO_WindowTitle" text="Event Explorer" />
                <Button name="$(parent)Close" inherits="ZO_CloseButton">
                    <Anchor point="TOPRIGHT" offsetY="3" />
                    <OnClicked>
                        EventExplorerWindow:SetHidden(true)
                    </OnClicked>
                </Button>
                <Control name="$(parent)Container" inherits="ZO_ScrollContainer">
                    <Anchor point="TOPLEFT" offsetY="30" />
                    <Anchor point="BOTTOMRIGHT" />
                </Control>
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>

local LCM = LibStub("LibConstantMapper")
 
local dataList = {}
local lastRow 
 
--get the list of Events
local Events = LCM:getDataByMapping("Events")
 
local function fillWindow()
    for key, value in ipairs(Events) do
        local row = CreateControlFromVirtual("$(parent)Row", EventExplorerWindowContainerScrollChild, "EventExplorerRow", key)
        if key == 1 then
            row:SetAnchor(TOPLEFT, EventExplorerWindowContainerScrollChild, TOPLEFT, 0, 0)
        else
            row:SetAnchor(TOP, lastRow, BOTTOM, 0, 0)
        end
        row:GetNamedChild("Id"):SetText(tostring(value.value))        
        row:GetNamedChild("Name"):SetText(value.key)
        lastRow = row        
    end
end
 
local function windowToggle()
    EventExplorerWindow:SetHidden(not EventExplorerWindow:IsHidden())
end
 
local function OnAddOnLoaded(eventID, AddonName)
    if (AddonName~= "EventExplorer") then return end
   
    fillWindow()
   
    SLASH_COMMANDS["/eventexplo"] = windowToggle
end
 
EVENT_MANAGER:RegisterForEvent("MyAddOn", EVENT_ADD_ON_LOADED, OnAddOnLoaded)

EDIT:
By the way list of events in your library contains global reference to EVENT_MANAGER.
Updated mapping:

{ mapping = "Events", pattern = "^EVENT_", exclude = "^EVENT_MANAGER"},

[zgrssd]

Originally Posted by Garkin EDIT: By the way list of events in your library contains global reference to EVENT_MANAGER. Updated mapping: { mapping = "Events", pattern = "^EVENT_", exclude = "^EVENT_MANAGER"},

Fixed that.
Then I noticed the list also includes "EVENT_REASON_HARDWARE" & SOFTWARE.
And I cannot fix that until I get multiple-exclusions patterns running.

I think I understand it now a bit better, but have to let it go through my head a bit more.

By the way, are there any Container controlls? Stack Pannels, Scroll Pannels, Grids, that kind of thing?
Right now I am just dropping the labels as children of the same level onto the Window. I prefer to have a proper visual tree.

[Sephiroth018]

Originally Posted by zgrssd By the way, are there any Container controlls? Stack Pannels, Scroll Pannels, Grids, that kind of thing? Right now I am just dropping the labels as children of the same level onto the Window. I prefer to have a proper visual tree.

Not really, there is just ZO_ScrollContainer, which provides vertical scrolling over all controls it contains. That requires you to have all controls created in it, one for every line you want to display (and, of course, properly positioned), which can easily lead to the damned "Too many anchors processed" error when creating many controls at once.

But before implementing such functionalities yourself, you could use the code I have written for my addon ItemSetGuide. I have made an helper that creates as much rows as are possible in it's parent and adds and handles a vertical scrollbar all by itself:

function libDwemerAssistants.CreateScrollControl(container, headerRow, createRowFunction, rowDataUpdateFunction, initialData)

• container: is the parent container where the controls should be created and displayed
• headerRow: is optional and just places the given control in the container, using it as header
• createRowFunction: provides a function to create an empty row control for initialization and must return the empty row control and take the following arguments:
  • container: the parent container again
  • index: The number of the created control, starting with 1
• rowDataUpdateFunction: A function that is called when another element has to be displayed in a row, requires the following arguments:
  • row: the row control that needs to be updated
• initialData: optional, the data that should be set after creation

The container gets the following fields:

• rows: A table containing all displayed rows
• numberOfRows: The number of rows displayed at once, just to help me so I don't have to always count the elements in "rows" when needing that value.
• setNewDataFunction: A function for replacing the current data table with a new one, including setting the scrollbar back to the top and displaying the first x elements of the new data table. Takes the following arguments:
  • control: The container itself
  • data: The data table containing the new data
• currentData: The table containing all data that should be displayed
• currentDataRow: The index of the element that is currently the first one

The row control gets the following fields:

• rowData: The element displayed in that row
• rowDataUpdateFunction: The function passed to libDwemerAssistants.CreateScrollControl to update the row

I know it could be better, but it's a start
I plan to make this available as a library here on esoui as soon as I am happy with the implementation.

[Garkin]

Originally Posted by zgrssd Fixed that. Then I noticed the list also includes "EVENT_REASON_HARDWARE" & SOFTWARE. And I cannot fix that until I get multiple-exclusions patterns running. I think I understand it now a bit better, but have to let it go through my head a bit more. By the way, are there any Container controlls? Stack Pannels, Scroll Pannels, Grids, that kind of thing? Right now I am just dropping the labels as children of the same level onto the Window. I prefer to have a proper visual tree.

I know just about two scroll templates - simple ZO_ScrollContainer used in my code above and ZO_ScrollList.
Example of ZO_ScrollList:
http://www.esoui.com/downloads/info5...stExample.html

[zgrssd]

Originally Posted by Garkin I know just about two scroll templates - simple ZO_ScrollContainer used in my code above and ZO_ScrollList. Example of ZO_ScrollList: http://www.esoui.com/downloads/info5...stExample.html

I don't understand your example. Mainly because you do at least 5 other things beside making a scroll list and I have no idea where wich part ends.

Please give me an example for this simple case:
I have a Window of Size 400x400
I have three labels 400x200 to put into that window. Since the labels together are higher then the window, I need to put a scrollist in the window and the labels in the scrollist.
How do I use ZoScrollList to do that?
If possible, make a pure XML example (I am not sure you can even use ZoScrollList in XML as it seems not valid as control type when I tried).

My expierence would say the XML tree would look roughly like this:
Window
->ZoScrollList
-->Label1
-->Label2
-->Label2
->Maybe other controls contained in the Window like menu strip, satus bar, etc.

[merlight]

Originally Posted by zgrssd If possible, make a pure XML example (I am not sure you can even use ZoScrollList in XML as it seems not valid as control type when I tried).

You create a <Control> with attribute inherits="ZO_ScrollList". ZO_ScrollList is itself a <Control> with attribute virtual="true".
In Garkin's XML above, it's this part (with ZO_ScrollContainer instead):

Originally Posted by Garkin <GuiXml>     <Controls>         ...         <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">             <Dimensions x="760" y="650" />             <Anchor point="CENTER" />             <Controls>                 ...                 <Control name="$(parent)Container" inherits="ZO_ScrollContainer">                     <Anchor point="TOPLEFT" offsetY="30" />                     <Anchor point="BOTTOMRIGHT" />                 </Control>                 ...             </Controls>         </TopLevelControl> </GuiXml>

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

"EventExplorerWindow" -> "Container" -> "ScrollChild" is then named EventExplorerWindowContainerScrollChild in _G, look that up in Garkins code, this control is used as the parent of created rows.

[zgrssd]

Originally Posted by merlight You create a <Control> with attribute inherits="ZO_ScrollList". ZO_ScrollList is itself a <Control> with attribute virtual="true". In Garkin's XML above, it's this part (with ZO_ScrollContainer instead): ZO_ScrollContainer is a control that contains the slider bar, buttons and the scrolled area, which is named "$(parent)ScrollChild". "EventExplorerWindow" -> "Container" -> "ScrollChild" is then named EventExplorerWindowContainerScrollChild in _G, look that up in Garkins code, this control is used as the parent of created rows.

So instead of being a seperate type of control (like <Label/>, <EditBox/> and the like) that has other elements as childs, the scroll container is a "Control" whose inherits atribute was set? The same way you set a <Backdrop/> inherits atrbute, to tell it wich Backdrop it has to look like?


I try to get some understanding of what happens via the rules that apply to WPF. There writing code like this:

<Label>
    <Content>
        "Test"
    <Content/>
</Label>

would just be different syntax for this:

<Label Content="Test"/>

With the first syntax having the potentioal for a lot more complex content then a mere string (A label could contain a image. Or a container that in turn has dozens of sub elments).


Going from there:

<GuiXml>
    <Controls>
        </Controls>
</GuiXML>

I just the way to set the "Controls" Field/Property of the GuiXML element.


Wich elements all have a "Controls" property and are thus containers?
Is it only "GuiXML", "Control" and "TopLevelControl"? All of them? All of them but a few?

[merlight]

Originally Posted by zgrssd So instead of being a seperate type of control (like <Label/>, <EditBox/> and the like) that has other elements as childs, the scroll container is a "Control" whose inherits atribute was set? The same way you set a <Backdrop/> inherits atrbute, to tell it wich Backdrop it has to look like?

Not exactly "instead of being a separate type of control", it's just a generic type of control which doesn't have an appearance of its own, a container for other controls. Any control may inherit attributes & contents from a template. But I guess you can only sensibly inherit from the same type of control, i.e. Backdrop inherits from another Backdrop, Label from another Label, etc.

Originally Posted by zgrssd I try to get some understanding of what happens via the rules that apply to WPF.

I would refrain from drawing similarities. Although I don't know WPF, there will certainly be differences, and concepts from one system might not apply to another. If we're talking strictly XML DOM, then your two examples are completely different things:

This is element node <Label> with no attributes and 1 child element node <Content>, which in turn has 1 child text node with value "Test":

Originally Posted by zgrssd <Label>     <Content>         "Test"     <Content/> </Label>

Whereas this is element node <Label> with 1 attribute Content="Test":

Originally Posted by zgrssd <Label Content="Test"/>

I don't know how ESO parses XML, but I tell you if I were to do that, I'd take a ready-made library that would parse the file and give me DOM tree, and then just walk the tree. That attribute<=>text equality (or ambiquity) you decribed is a hack invented by people who thought XML should be written by humans, and they complicate their parsers to make that torture less painful.


Now back to ESO. They made their UI elements reusable through inheritance, so that any control can be used as a template. For example:

<!-- these are templates -->
<Label name="LeftBoldText" font="ZoFontGameBold" horizontalAlignment="LEFT" virtual="true" />
<Label name="RightBoldText" font="ZoFontGameBold" horizontalAlignment="RIGHT" virtual="true" />
 
<!-- these are actual controls; you can have 50 of them,
        and if you decide to change the font, you change it in the template -->
<Label name="Label1" inherits="LeftBoldText"> ... </Label>
<Label name="Label2" inherits="RightBoldText"> ... </Label>

Originally Posted by zgrssd Wich elements all have a "Controls" property and are thus containers? Is it only "GuiXML", "Control" and "TopLevelControl"? All of them? All of them but a few?

In addition to those I found <Slider>, <EditBox>, <Tooltip>, <Label>, <Cooldown> with inner <Controls>. Perhaps all controls can have children, to me it'd seem logical, since <Control> can have them and I think that's the base for other controls, but who knows.

[zgrssd]

Virtuals sole purpose seem to be to be inherited. Template might not be the right word after all.
It's a bit like comparing a virtual control to a abstract class - it is only there to be inhereted, not be shown itself directly. And CreateFromVirtual does little more then create a element that does inherit it.

Already figured out that Property Element Syntax of WPF does not work here.
Instead they seem to have a special "kind" of Cildren. "Atribute Children" or "Property Children" might be a propper name. They are children with the sole purpose to define stuff about thier parent. They have no meaning of thier own.
Property Children do not inherit from Control and seem mostly structures. But they may also have inherentianc chains and functions (like AnimationBase and it's Inheritors).

'Controls' is just one of the "Property Children" of Control and it's job is to contain a list of other controls. Every control itself seems to be derived from control, hence every control is also a container itself.

Now stuff makes a lot more sense then it did before.

[merlight]

Originally Posted by zgrssd Virtuals sole purpose seem to be to be inherited. Template might not be the right word after all.

Well it's the word ZOS uses, so we went with it

function CreateControlFromVirtual(name, parent, templateName, optionalNameSuffix)

<Control name="ZO_RadialMenuTemplate" hidden="true" virtual="true">

[zgrssd]

Currently my XML looks like this:

<GuiXml>
    <Controls>
        <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true" >
            <Dimensions x="760" y="650" />
            <Anchor point="CENTER" />
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
                <Control name="$(parent)Scroll" inherits="ZO_ScrollList">
                    <Anchor point="TOPLEFT" offsetY="30" />
                    <Anchor point="BOTTOMRIGHT" />
                </Control>
            </Controls>
        </TopLevelControl>
        
        <Control name="EventExplorerRow" virtual="true">
            <Dimensions y="25"/>
            <Controls>
                <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT" >
                    <Dimensions x="60"/>
                    <Anchor point="LEFT" />
                </Label>
                <Label name="$(parent)Name" font="ZoFontGame" >
                    <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
                </Label>
            </Controls>
        </Control>
    </Controls>
</GuiXml>

with fill Window looking like:

local function fillWindow()
    for key, value in ipairs(Events) do
        local row = CreateControlFromVirtual("$(parent)Row", EventExplorerWindowScroll, "EventExplorerRow", key)
        if key == 1 then
            row:SetAnchor(TOPLEFT, EventExplorerWindowScroll, TOPLEFT, 0, 0)
        else
            row:SetAnchor(TOP, lastRow, BOTTOM, 0, 0)
        end
        row:GetNamedChild("Id"):SetText(tostring(value.value))        
        row:GetNamedChild("Name"):SetText(value.key)
        lastRow = row  
    end
end

Still not getting quite the results I expected, but at least I am hitting the right container element:


I would guess the Scroll Window is not properly aware that it's own Dimensions should bve confined to the Windows Dimensions. So it will automatically stretch to it's contents size instead of doing scroll panel stuff.

[merlight]

ZO_ScrollList has a child <Scroll name="$(parent)Contents" mouseEnabled="true">, use that as row parent, i.e. EventExplorerWindowScrollContents.