wow ScrollFrame ui

dust514 · 10-22-22, 09:55 AM

This is my first time using Lua and I try to make the button scroll

I would like to know how to make the button scroll in the ScrollFrame

Sorry, English is not my native language

I hope someone can help me, this confused me for a long time，Thanks

Code:

local fk_ui = {}
local backdrop = {
    bgFile = "Interface/BUTTONS/WHITE8X8",
    edgeFile = "Interface/GLUES/Common/Glue-Tooltip-Border",
    tile = true,
    edgeSize = 8,
    tileSize = 8,
    insets = {
        left = 5,
        right = 5,
        top = 5,
        bottom = 5,
    },
}

local f = CreateFrame("Frame", "MyScrollMessageTextFrame", UIParent)
f:SetSize(450, 450)
f:SetPoint("CENTER")
f:SetFrameStrata("BACKGROUND")
f:SetBackdrop(backdrop)
f:SetBackdropColor(0, 0, 0)
f.Close = CreateFrame("Button", "$parentClose", f)
f.Close:SetSize(24, 24)
f.Close:SetPoint("TOPRIGHT")
f.Close:SetNormalTexture("Interface/Buttons/UI-Panel-MinimizeButton-Up")
f.Close:SetPushedTexture("Interface/Buttons/UI-Panel-MinimizeButton-Down")
f.Close:SetHighlightTexture("Interface/Buttons/UI-Panel-MinimizeButton-Highlight", "ADD")
f.Close:SetScript("OnClick", function(self)
    self:GetParent():Hide()
end)

f.SF = CreateFrame("ScrollFrame", "$parent_DF", f, "UIPanelScrollFrameTemplate")
f.SF:SetPoint("TOPLEFT", f, 12, -30)
f.SF:SetPoint("BOTTOMRIGHT", f, -30, 10)

for i = 1,15 do
	fk_ui[i] = "fk_1a"..i
	fk_ui[i] = CreateFrame("Button",fk_ui[i],fk_box,"GameMenuButtonTemplate")
	fk_ui[i]:SetPoint("CENTER",-6,120+(i*-40))
	fk_ui[i]:SetSize(128,35)
end

this is all

I referenced the content here
https://www.wowinterface.com/forums/...50&postcount=2

Fizzlemizz · 10-22-22, 12:18 PM

It works a bit differently than using an EditBox as your "source" list (table).

Using the games FauxScrollFrame, you would need to create the number of rows you want your scroll list to show (5 rows to scroll, each with a button in the code below) and then as the list is scrolled, the information from your source table, starting at the entry indicated by the position of the scroll thumb, is "copied" to the corresponding "row and button" in the scroll list". The math for the thumb position is calculated based on the height of a single row in the scroll list (35 in this case which is both the row and button height)

Lua Code:

local fk_ui = {}
local backdrop = {
    bgFile = "Interface/BUTTONS/WHITE8X8",
    edgeFile = "Interface/GLUES/Common/Glue-Tooltip-Border",
    tile = true,
    edgeSize = 8,
    tileSize = 8,
    insets = {
        left = 5,
        right = 5,
        top = 5,
        bottom = 5,
    },
}
 
local function OnClick(self)
    local entry = fk_ui[self:GetParent().index]
    print("You Clicked: ", entry)
end
 
local function Update_List(self)
    local table = fk_ui
    if not table then return end
    local offset = self.offset or 0
    local index, row
    local entries = #table
    local include = 0
    local rows = #self.Rows
    for i=1, rows do
        index = offset + i
        if table[index] then
            include = include + 1
            row = self.Rows[include]
            row:Show()
            row.index = index
            row.Button:SetText(table[index])
            if include == entries then break end -- only loop enough to fill #rows (5)
        end
    end
    if include < rows then
        for i = include + 1, rows do
            self.Rows[i]:Hide()
        end
    end
    FauxScrollFrame_Update(self, entries, rows, 35)
end
 
local function OnVerticalScroll(self, offset)
    self.ScrollBar:SetValue(offset)
    self.offset = math.floor((offset / 35) + 0.5)
    Update_List(self)
end
 
local f = CreateFrame("Frame", "MyScrollMessageTextFrame", UIParent, BackdropTemplateMixin and "BackdropTemplate")
f:SetSize(450, 450)
f:SetPoint("CENTER")
f:SetFrameStrata("BACKGROUND")
f:SetBackdrop(backdrop)
f:SetBackdropColor(0, 0, 0)
f.Close = CreateFrame("Button", "$parentClose", f)
f.Close:SetSize(24, 24)
f.Close:SetPoint("TOPRIGHT")
f.Close:SetNormalTexture("Interface/Buttons/UI-Panel-MinimizeButton-Up")
f.Close:SetPushedTexture("Interface/Buttons/UI-Panel-MinimizeButton-Down")
f.Close:SetHighlightTexture("Interface/Buttons/UI-Panel-MinimizeButton-Highlight", "ADD")
f.Close:SetScript("OnClick", function(self)
    self:GetParent():Hide()
end)
 
f.SF = CreateFrame("ScrollFrame", "$parent_DF", f, "FauxScrollFrameTemplate")
f.SF:SetPoint("TOPLEFT", f, 12, -30)
f.SF:SetPoint("BOTTOMRIGHT", f, -30, 10)
 
f.SF.Rows = {}
for i=1, 5 do
    local fr = CreateFrame("Button", "#parentRow"..i, f.SF)
    tinsert(f.SF.Rows, fr)
    fr:SetSize(f.SF:GetWidth(), 35)
    if i == 1 then
        fr:SetPoint("TOPLEFT")
    else
        fr:SetPoint("TOPLEFT", f.SF.Rows[i-1], "BOTTOMLEFT")
    end
 
    fr.Button = CreateFrame("Button", "$parentButton", fr, "GameMenuButtonTemplate")
    fr.Button:SetPoint("CENTER")
    fr.Button:SetSize(128,35)
    fr.Button:SetScript("OnClick", OnClick)
end
 
 
for i = 1,15 do
    fk_ui[i] = "Press for " .. i
--[[
    fk_ui[i] = "fk_1a"..i
    fk_ui[i] = CreateFrame("Button",fk_ui[i],fk_box,"GameMenuButtonTemplate")
    fk_ui[i]:SetPoint("CENTER",-6,120+(i*-40))
    fk_ui[i]:SetSize(128,35)
]]--
end
 
f.SF.ScrollBar = FauxScrollFrame_GetChildFrames(f.SF)
f.SF:SetScript("OnVerticalScroll", OnVerticalScroll) -- set the list to update when scrolled
Update_List(f.SF) -- initialise the list with the first 5 entries in the source table to get started

Each buttons gets information from the source table based on the .index set for the row when the text is set for the button (see the OnClick function).

Normally you would re-size the scrollframe (or add more rows and adjust the code) to fit the area you want to display on-screen.

dust514 · 10-22-22, 09:04 PM

Originally Posted by Fizzlemizz

It works a bit differently than using an EditBox as your "source" list (table).

Using the games FauxScrollFrame, you would need to create the number of rows you want your scroll list to show (5 rows to scroll, each with a button in the code below) and then as the list is scrolled, the information from your source table, starting at the entry indicated by the position of the scroll thumb, is "copied" to the corresponding "row and button" in the scroll list". The math for the thumb position is calculated based on the height of a single row in the scroll list (35 in this case which is both the row and button height)

Lua Code:

local fk_ui = {}
local backdrop = {
    bgFile = "Interface/BUTTONS/WHITE8X8",
    edgeFile = "Interface/GLUES/Common/Glue-Tooltip-Border",
    tile = true,
    edgeSize = 8,
    tileSize = 8,
    insets = {
        left = 5,
        right = 5,
        top = 5,
        bottom = 5,
    },
}
 
local function OnClick(self)
    local entry = fk_ui[self:GetParent().index]
    print("You Clicked: ", entry)
end
 
local function Update_List(self)
    local table = fk_ui
    if not table then return end
    local offset = self.offset or 0
    local index, row
    local entries = #table
    local include = 0
    local rows = #self.Rows
    for i=1, rows do
        index = offset + i
        if table[index] then
            include = include + 1
            row = self.Rows[include]
            row:Show()
            row.index = index
            row.Button:SetText(table[index])
            if include == entries then break end -- only loop enough to fill #rows (5)
        end
    end
    if include < rows then
        for i = include + 1, rows do
            self.Rows[i]:Hide()
        end
    end
    FauxScrollFrame_Update(self, entries, rows, 35)
end
 
local function OnVerticalScroll(self, offset)
    self.ScrollBar:SetValue(offset)
    self.offset = math.floor((offset / 35) + 0.5)
    Update_List(self)
end
 
local f = CreateFrame("Frame", "MyScrollMessageTextFrame", UIParent, BackdropTemplateMixin and "BackdropTemplate")
f:SetSize(450, 450)
f:SetPoint("CENTER")
f:SetFrameStrata("BACKGROUND")
f:SetBackdrop(backdrop)
f:SetBackdropColor(0, 0, 0)
f.Close = CreateFrame("Button", "$parentClose", f)
f.Close:SetSize(24, 24)
f.Close:SetPoint("TOPRIGHT")
f.Close:SetNormalTexture("Interface/Buttons/UI-Panel-MinimizeButton-Up")
f.Close:SetPushedTexture("Interface/Buttons/UI-Panel-MinimizeButton-Down")
f.Close:SetHighlightTexture("Interface/Buttons/UI-Panel-MinimizeButton-Highlight", "ADD")
f.Close:SetScript("OnClick", function(self)
    self:GetParent():Hide()
end)
 
f.SF = CreateFrame("ScrollFrame", "$parent_DF", f, "FauxScrollFrameTemplate")
f.SF:SetPoint("TOPLEFT", f, 12, -30)
f.SF:SetPoint("BOTTOMRIGHT", f, -30, 10)
 
f.SF.Rows = {}
for i=1, 5 do
    local fr = CreateFrame("Button", "#parentRow"..i, f.SF)
    tinsert(f.SF.Rows, fr)
    fr:SetSize(f.SF:GetWidth(), 35)
    if i == 1 then
        fr:SetPoint("TOPLEFT")
    else
        fr:SetPoint("TOPLEFT", f.SF.Rows[i-1], "BOTTOMLEFT")
    end
 
    fr.Button = CreateFrame("Button", "$parentButton", fr, "GameMenuButtonTemplate")
    fr.Button:SetPoint("CENTER")
    fr.Button:SetSize(128,35)
    fr.Button:SetScript("OnClick", OnClick)
end
 
 
for i = 1,15 do
    fk_ui[i] = "Press for " .. i
--[[
    fk_ui[i] = "fk_1a"..i
    fk_ui[i] = CreateFrame("Button",fk_ui[i],fk_box,"GameMenuButtonTemplate")
    fk_ui[i]:SetPoint("CENTER",-6,120+(i*-40))
    fk_ui[i]:SetSize(128,35)
]]--
end
 
f.SF.ScrollBar = FauxScrollFrame_GetChildFrames(f.SF)
f.SF:SetScript("OnVerticalScroll", OnVerticalScroll) -- set the list to update when scrolled
Update_List(f.SF) -- initialise the list with the first 5 entries in the source table to get started

Each buttons gets information from the source table based on the .index set for the row when the text is set for the button (see the OnClick function).

Normally you would re-size the scrollframe (or add more rows and adjust the code) to fit the area you want to display on-screen.

Thank you

I found wow 3.3.5 API no FauxScrollFrame_GetChildFrames

Fizzlemizz · 10-22-22, 09:13 PM

Originally Posted by dust514

I found wow 3.3.5 API no FauxScrollFrame_GetChildFrames

This site does not support private servers, sorry.