Quantcast Resizing ZO_ScrollList to fit parent - ESOUI
Thread Tools Display Modes
01/21/19, 10:52 PM   #1
Akira.Iris
Join Date: Jun 2018
Posts: 3
Resizing ZO_ScrollList to fit parent

Hi, I'm just starting to do some addon-writing and I'm getting a hang of it, but there are some things I can't seem to find answers to anywhere. But maybe I'm missing something very obvious and simple.

Summary: how do I make the ZO_ScrollList and it's rows resize with the parent container?

Details: I have a list and want to display some data in it. I started by looking at the Scroll List Example addon, fixed a couple of things to get it working and to make the main windows resizable, but the scroll list doesn't seem to be resizing with it. So I assume by default that's not a built-in functionality? However there are many other addons that do have the scroll lists resize(Arkadius' Trade Tools, Dolgubon's Lazy Set Crafter, etc). I tried looking through the code, but can't seem to find how they're doing it.

If someone could, please point me in the right direction!
  Reply With Quote
01/22/19, 02:38 AM   #2
Baertram
 
Baertram's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 2,166
If I'm not wrong you need to use the SetAnchor() function of the scrolllist control and anchor it to the topleft and bottomright of your window (toplevel) control.

The parent of the scrolllist control should be the window as well so it will move/hide/show with the window.
  Reply With Quote
01/22/19, 10:35 PM   #3
Akira.Iris
Join Date: Jun 2018
Posts: 3
Thanks Baertram! I had the anchors set already (in xml, not via SetAnchor()), but that didn't seem to affect anything, but it got me thinking that maybe it's not the scroll list that's not getting resized.

So I used zgoo to check the width of all child elements to see which ones were wrong and found that the columns in the row element were remaining unchanged. I was able to track down (for the most part) how Arkadius Tools does the resize:

First in xml they create a self.Update function to adjust width of the headers as the parent gets resized.
Code:
            <OnInitialized>
                self.Update = function(self)
                    
                    for i = 1, self:GetNumChildren() do
                        local header = self:GetChild(i)

                        ... do some resize code
                    end

                end

                self:Update()
            </OnInitialized>
Then they link headers to each column in the Row template.
Code:
           <OnInitialized>
                local headers = self:GetParent():GetParent():GetParent():GetNamedChild("Headers")
                local headersName = headers:GetName()

                for i = 1, headers:GetNumChildren() do
                    local header = headers:GetChild(i)

                    if ((header.key) and (header.key ~= "headerSettings")) then
                        local column = header:GetName():gsub(headersName, "")
                        self:GetNamedChild(column).header = header
                    end
                end
            </OnInitialized>
Then in lua in SetupRow function they assign the width from the header to the column:
Code:
 
    ...
    -- getting each column element
    local sellerName = GetControl(rowControl, "SellerName")
    local buyerName = GetControl(rowControl, "BuyerName")
    
    sellerName:SetWidth(sellerName.header:GetWidth() - 10)
    buyerName:SetWidth(buyerName.header:GetWidth() - 10)

    ... some other row setup code

   ...

So that got it working somewhat.... I think I still need to trigger the scroll list refresh on resize somewhere, because right now it will only resize as the list gets changed/populated, but not when the window gets resized, but I think that's the bulk of what I was looking for.

Last edited by Akira.Iris : 01/22/19 at 10:59 PM.
  Reply With Quote
01/22/19, 11:19 PM   #4
Dolgubon
 
Dolgubon's Avatar
AddOn Author - Click to view addons
Join Date: Jan 2016
Posts: 337
Hey,

This is something I did in the Set Crafter, if you want another code example. One trick I did was, in the OnResizeStart handler add (essentially) EVENT_MANAGER:RegisterForUpdate("WindowResize",10, SetCrafterWindow.dynamicResize)


And then in the dynamcResize function, you can do stuff to resize other stuff as needed.


That said, in your case, I don't think you'll need that. Playing around with the anchors should do the trick for you. It might not be quite enough to just set the anchors for the containing control - you'll probably also need to set two anchors to parts of the row controls themselves. Also, note that text (i.e. a label) will *not* be resized by changing the anchor or dimensions. You'll probably need to change the size of the text itself.


Another option is changing the scale. Changing the scale is likely the easiest method, since it cascades through children but it does look a little wonky if the resizing goes too far. And make sure you're not changing the scale of the TopLevelControl that you're resizing; that will make it jittery, and prone to 'blowing up' to a huge size. So just make sure the minX and minY isn't too small.


Other things to note, SetScale doesn't change the anchor distances, so that can make stuff look wonky too. You can use spacer controls for that.


note: Been a while since I did the resizing. I *think* most of that stuff is right but... it's been a while.
  Reply With Quote
01/23/19, 06:17 AM   #5
merlight
AddOn Author - Click to view addons
Join Date: Jul 2014
Posts: 665
I'm not sure whether you want only the rows to fill the horizontal space, or actually magnify the visual. If it's the former, I think all you need to do is not set the row control's width. ZO_ScrollList sets TOPLEFT and TOPRIGHT anchors on rows, so it fills the horizontal space for you, unless you prevent that with fixed width.

Example from https://www.esoui.com/downloads/info...rTorchbug.html:

Here a template with a ZO_ScrollList anchored to the TOPLEFT and BOTTOMRIGHT of the parent control (i.e. the viewport automatically resizes with the parent control):
https://github.com/merlight/eso-merT...es.xml#L56-L63

Here a template for list row (notice missing x= in Dimensions):
https://github.com/merlight/eso-merT...s.xml#L89-L103

It's been years since I wrote this, but code search reveals no SetAnchor calls applied to rows, which I believe would be the only way to resize them after ZO_ScrollList's normal anchor setting.
  Reply With Quote
01/23/19, 11:29 AM   #6
merlight
AddOn Author - Click to view addons
Join Date: Jul 2014
Posts: 665
Had a little déjà vu. After some digging, I found an old topic showing that I too was struggling to get the control I linked above to resize the scroll list.

Actual solution does not lie in not setting the row controls' width as I wrote earlier, but in intercepting OnResizeStart/Stop events on the top-level control, and setting up an OnUpdate handler for the duration of the manual resize. This OnUpdate handler repeatedly calls ZO_ScrollList_Commit to fully refresh the list:
https://github.com/merlight/eso-merT....lua#L207-L215

Crude, but works. For smoother user experience, it should be throttled so that it doesn't commit the list every frame.

In current ESOUIDocumentation there are some events that didn't exist back then: OnRectChanged, OnRectWidth/HeightChanged. Haven't tested those yet, but if they fire on the scroll list control whenever its dimensions change due to anchor point updates, then these seem like a more appropriate solution.
  Reply With Quote
01/24/19, 07:48 AM   #7
Akira.Iris
Join Date: Jun 2018
Posts: 3
Dolgubon, thanks so much! I see that now, thank you for walking me through it! I use your addons all the time in eso, they're super handy and are also a lot of help as far as code goes to get me started.

merlight, oh yes I ran across that post in my search earlier. I really appreciate that and I should definitely look into OnRectChanged, OnRectWidth/HeightChanged. That might make it easier to handle.

But it's really good to know that there are multiple ways to handle the resize, I'll try different ones and see which one I want to go with in the end that looks/feels smoother. Really appreciate all the help!
  Reply With Quote

ESOUI » Developer Discussions » Lua/XML Help » Resizing ZO_ScrollList to fit parent

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off