Control visible outside of parent!? Please help!

[Eruadarion]

If I want to display effect- or skill-icons, these icons are always 32x32 pixels, which is too large for some of my applications. Luckily I'm able to scale them down to e.g. 16x16 using SetStretchmode().
However, using SetStretchMode will apparently result in a bug (?) that the controls are always visible, even when they're outside of their parent control. This can especially become a problem when using scrollable controls such as ListBox where parts of the content in the scrollable control are always outside of their parent control.

Simple example to demonstrate the issue:

import "Turbine.UI";

window = Turbine.UI.Window();
window:SetSize(100, 100);
window:SetBackColor(Turbine.UI.Color(0,0,0));
window:SetVisible(true);

icon = {};
for i = 1, 20, 1 do
   icon[i] = Turbine.UI.Control();
   icon[i]:SetParent(window);
   icon[i]:SetSize(32, 32);
   icon[i]:SetBackground(0x4113a302);
   icon[i]:SetStretchMode(1);
   icon[i]:SetSize(16, 16);
   icon[i]:SetPosition(16*(i-1),16*(i-1));
end

Does anyone know a solution? Any help would be greatly appreciated!

[Thurallor]

I can think of two possibilities.

First, you could sense when the scrollable control moves, and then recalculate for each icon whether it should be visible. Example:

import "Turbine.UI";
import "Turbine.UI.Lotro";

window = Turbine.UI.Window();
window:SetSize(100, 100);
window:SetPosition(100, 100);
window:SetBackColor(Turbine.UI.Color(0,0,0));
window:SetVisible(true);


listbox = Turbine.UI.ListBox();
listbox:SetSize(90, 90);
listbox:SetBackColor(Turbine.UI.Color.Green);
listbox:SetParent(window);


inside = Turbine.UI.Control();
inside:SetSize(320, 320);
listbox:AddItem(inside);


hscroll = Turbine.UI.Lotro.ScrollBar();
hscroll:SetOrientation(Turbine.UI.Orientation.Horizontal);
hscroll:SetParent(window);
hscroll:SetPosition(0, 90);
hscroll:SetSize(90, 10);


vscroll = Turbine.UI.Lotro.ScrollBar();
vscroll:SetOrientation(Turbine.UI.Orientation.Vertical);
vscroll:SetParent(window);
vscroll:SetPosition(90, 0);
vscroll:SetSize(10, 90);


listbox:SetHorizontalScrollBar(hscroll);
listbox:SetVerticalScrollBar(vscroll);


icon = {};
for i = 1, 20, 1 do
   icon[i] = Turbine.UI.Control();
   icon[i]:SetParent(inside);
   icon[i]:SetSize(32, 32);
   icon[i]:SetBackground(0x4113a302);
   icon[i]:SetStretchMode(1);
   icon[i]:SetSize(16, 16);
   icon[i]:SetPosition(16*(i-1),16*(i-1));
end


-- Each time the user moves one of the scrollbar, recalculate for each icon whether it should be visible
inside.PositionChanged = function()
    x, y = listbox:PointToScreen(0, 0);
    w, h = listbox:GetSize();
    for i = 1, 20 do
        left, top = inside:PointToScreen(icon[i]:GetPosition());
        right, bottom = left + 16, top + 16;
        if ((left < x) or (right > x + w) or (top < y) or (bottom > y + h)) then
            icon[i]:SetVisible(false);
        else
            icon[i]:SetVisible(true);
        end
    end
end

Or alternatively, you could leave the icons unstretched, and instead, stretch the scrollable control that contains them. Example:

import "Turbine.UI";
import "Turbine.UI.Lotro";


window = Turbine.UI.Window();
window:SetSize(100, 100);
window:SetPosition(100, 100);
window:SetBackColor(Turbine.UI.Color(0,0,0));
window:SetVisible(true);


listbox = Turbine.UI.ListBox();
listbox:SetSize(180, 180);
listbox:SetBackColor(Turbine.UI.Color.Green);
listbox:SetParent(window);


inside = Turbine.UI.Control();
inside:SetSize(640, 640);
listbox:AddItem(inside);


hscroll = Turbine.UI.Lotro.ScrollBar();
hscroll:SetOrientation(Turbine.UI.Orientation.Horizontal);
hscroll:SetParent(window);
hscroll:SetPosition(0, 90);
hscroll:SetSize(90, 10);


vscroll = Turbine.UI.Lotro.ScrollBar();
vscroll:SetOrientation(Turbine.UI.Orientation.Vertical);
vscroll:SetParent(window);
vscroll:SetPosition(90, 0);
vscroll:SetSize(10, 90);


listbox:SetHorizontalScrollBar(hscroll);
listbox:SetVerticalScrollBar(vscroll);


icon = {};
for i = 1, 20, 1 do
   icon[i] = Turbine.UI.Control();
   icon[i]:SetParent(inside);
   icon[i]:SetSize(32, 32);
   icon[i]:SetBackground(0x4113a302);
   icon[i]:SetPosition(32*(i-1),32*(i-1));
end


listbox:SetStretchMode(1);
listbox:SetSize(90, 90);

[Eruadarion]

Thank you very much Thurallor for your response!

I don't think your suggested option #1 will work for my plugin because I'm displaying several hundred (at least) icons at the same time. Scrolling would result in terrible lags, I fear.

But I didn't know SetStretchMode would stretch all child controls of a parent control! Good to know! I'll go for option #2 then! ... Now I just have to change all pixel values (coordinates etc.) to twice their value, increase font sizes, etc. That's going to be a lot of work because they're all hard-coded, lol

Thank you again!