This is my project:
xml template:
Code:
<Frame name="GroupBox" toplevel="true" virtual="true">
<Backdrop bgFile="Interface\ChatFrame\ChatFrameBackground" edgeFile="Interface\Tooltips\UI-Tooltip-Border" tile="true">
<BackgroundInsets>
<AbsInset left="3" right="3" top="5" bottom="3" />
</BackgroundInsets>
<TileSize>
<AbsValue val="16" />
</TileSize>
<EdgeSize>
<AbsValue val="16" />
</EdgeSize>
<Color r="0.1" g="0.1" b="0.1" a="0.5"/>
<BorderColor r="0.4" g="0.4" b="0.4"/>
</Backdrop>
<Layers>
<Layer level="OVERLAY">
<FontString parentKey="label" inherits="GameFontNormal" text="" justifyH="LEFT">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="$parent" relativePoint="TOPLEFT">
<Offset>
<AbsDimension x="10" y="15"/>
</Offset>
</Anchor>
</Anchors>
</FontString>
</Layer>
</Layers>
</Frame>
<Frame name="listview_template" inherits="UnitScan_GroupBox" virtual="true">
<Backdrop bgFile="Interface\ChatFrame\ChatFrameBackground" edgeFile="Interface\Tooltips\UI-Tooltip-Border" tile="true">
<BackgroundInsets>
<AbsInset left="3" right="3" top="5" bottom="3" />
</BackgroundInsets>
<TileSize>
<AbsValue val="16" />
</TileSize>
<EdgeSize>
<AbsValue val="16" />
</EdgeSize>
<Color r="0.1" g="0.1" b="0.1" a="0.5"/>
<BorderColor r="0.4" g="0.4" b="0.4"/>
</Backdrop>
<Frames>
<ScrollFrame name="$parentScrollBar" parentKey="scroll" inherits="FauxScrollFrameTemplate" hidden="false">
<Anchors>
<Anchor point="TOPLEFT" x="0" y="-8"/>
<Anchor point="BOTTOMRIGHT" x="-30" y="8"/>
</Anchors>
<Scripts>
<OnVerticalScroll>
FauxScrollFrame_OnVerticalScroll(self, offset, 16, ScrollUpdate);
</OnVerticalScroll>
</Scripts>
</ScrollFrame>
</Frames>
<Scripts>
<OnLoad>
self.data, self.buttons = {}, {}
self:Hide()
</OnLoad>
<OnShow>
self.selected = nil
listview_CreateList(self, self:GetHeight()/20) <-- ! Adapt to listview height, while GetHeight() doesn't works on OnLoad template script -->
</OnShow>
</Scripts>
</Frame>
lua
Lua Code:
local main = CreateFrame("Frame", "main", UIParent)
main:SetSize(300, 300)
main:SetPoint("CENTER")
main:SetFrameStrata("HIGH")
local backdrop = {
bgFile = "Interface\\DialogFrame\\UI-DialogBox-Background",
edgeFile = "Interface\\Tooltips\\UI-Tooltip-Border",
tile = true,
tileSize = 8,
edgeSize = 16,
insets = {
left = 3,
right = 3,
top = 3,
bottom = 3
}
}
-- ••• listview
main.lv = CreateFrame("Frame", "lv", main, "listview_template")
main.lv:SetSize(193, 120)
main.lv:SetPoint("CENTER")
main.lv.label:SetText("Listview")
-- ••• example of objects to be included in the listview
local items = { "item n° 1", "item n° 2", "item n° 3", "item n° 4", "item n° 5", "item n° 6" }
main:SetScript(
"OnShow",
function(self)
for p in pairs(items) do
insertItem(self.lv, p)
end
end
)
-- ••• function to create the listview buttons
function listview_CreateList(self, total)
self.data, self.buttons = {}, {}
self.selected = nil
for i = 1, total do
local widget =
_G[self:GetName() .. "button" .. i] or CreateFrame("Button", self:GetName() .. "button" .. i, self)
widget:SetToplevel(true)
widget:EnableMouse(true)
widget:SetHighlightTexture("Interface\\QuestFrame\\UI-QuestLogTitleHighlight")
local ht = widget:GetHighlightTexture()
ht:SetPoint("TOPLEFT", widget)
ht:SetVertexColor(0.510, 0.957, 1)
widget:SetPushedTexture("Interface\\QuestFrame\\UI-QuestLogTitleHighlight")
local pt = widget:GetPushedTexture()
pt:SetVertexColor(0, 0.753, 1)
pt:SetPoint("TOPLEFT", widget)
pt:SetBlendMode("ADD")
local text = widget:CreateFontString(nil, "ARTWORK", "GameFontHighlightSmall")
text:SetPoint("CENTER", widget)
widget.text = text
table.insert(self.buttons, widget)
if i == 1 then
widget:SetPoint("TOPLEFT", 4, -8)
else
widget:SetPoint("TOPLEFT", self.buttons[i - 1], "BOTTOMLEFT", 0, -1)
end
widget:RegisterForClicks("LeftButtonDown")
widget:SetScript(
"PreClick",
function(self)
self:GetParent().selected = self.id
end
)
widget:SetScript(
"OnUpdate",
function(self, elapsed)
if (self:GetParent().selected) and (self.id == self:GetParent().selected) then
ht:Hide()
self:SetButtonState("PUSHED", true)
else
ht:Show()
self:SetButtonState("NORMAL", true)
end
end
)
end
end
-- ••• function to insert items in the listview
function insertItem(self, text, id)
if (id) then table.insert(self.data, id, text) else table.insert(self.data, text) end
ScrollUpdate(self.scroll)
end
-- ••• scrollbar update function
function ScrollUpdate(self)
local buttons, data = self:GetParent().buttons, self:GetParent().data
local offset = (#data > #buttons) and FauxScrollFrame_GetOffset(self) or 0
for i = 1, #buttons do
local button = buttons[i]
local width = self:GetParent():GetWidth()-29
button:SetSize(width, 16)
local index = i + offset
if index > #data then
button:Hide()
else
button:Show()
button.id = index
button.text:SetText(data[index])
end
end
FauxScrollFrame_Update(self, #data, #buttons, 16)
self:Show()
local scrollbar = _G[self:GetName().."ScrollBar"]:GetName()
local thumb = _G[scrollbar.."ThumbTexture"]
thumb:Show()
if (#data <= #buttons) then thumb:Hide() end
end
I would like to avoid button text overlap on button when the listview is showed. I tried two options: the first is to insert this code at listview_CreateList begin
Lua Code:
local g = 1
while _G[self:GetName() .. "button" .. g] do
_G[self:GetName() .. "button" .. g].text:SetText("\00") -- avoid text overlap
g = g + 1
end
The second one is insert this code at listview_CreateList end
Lua Code:
local function refresh() -- avoid text overlap
if not self:IsVisible() then
return
end
end
self:SetScript("OnShow", refresh)
refresh()
The second method implies that the listview is hidden by default.
Do you know better methods? General advice to improve this project?
If there is any part of the code you don't understand, please ask.