I’ve been looking for a way to make a simple GUI element to add buttons to but some stuff has changed from the last time I worked with this type of stuff. Could anyone point me to a tutorial or help out with making a simple UI Frame?
I’d be much appreciative.
In Classic as well as modern WoW, BasicFrameTemplate works to create a basic frame with a titlebar area and close button.
But in modern WoW, DefaultPanelTemplate will get you a frame similar in style to the rest of the default UI:
<Ui>
<Frame name="SimpleFrame" parent="UIParent" inherits="DefaultPanelTemplate">
<Size x="200" y="200"/>
<Anchors>
<Anchor point="CENTER"/>
</Anchors>
<Frames>
<Button parentKey="CloseButton" inherits="UIPanelCloseButtonDefaultAnchors"/>
</Frames>
<Scripts>
<OnLoad>
self.TitleContainer.TitleText:SetText("Simple Frame")
</OnLoad>
</Scripts>
</Frame>
</Ui>
If you want an inset and button(s) across bottom:
<Ui>
<Frame name="SimpleFrame" parent="UIParent" inherits="DefaultPanelTemplate">
<Size x="150" y="150"/>
<Anchors>
<Anchor point="CENTER"/>
</Anchors>
<Frames>
<Button parentKey="CloseButton" inherits="UIPanelCloseButtonDefaultAnchors"/>
<Frame parentKey="Inset" useParentLevel="true" inherits="InsetFrameTemplate">
<Anchors>
<Anchor point="TOPLEFT" x="10" y="-26" />
<Anchor point="BOTTOMRIGHT" x="-6" y="26" />
</Anchors>
</Frame>
<Button parentKey="OkButton" inherits="UIPanelButtonTemplate" text="Okay">
<Size x="90" y="22"/>
<Anchors>
<Anchor point="BOTTOMRIGHT" x="-6" y="4"/>
</Anchors>
<Scripts>
<OnClick>
self:GetParent():Hide()
</OnClick>
</Scripts>
</Button>
</Frames>
<Scripts>
<OnLoad>
self.TitleContainer.TitleText:SetText("Simple Frame")
</OnLoad>
</Scripts>
</Frame>
</Ui>
DefaultPanelTemplate has a TitleContainer area that contains the title fontstring, set as an example in the code above.
And DefaultPanelTemplate doesn’t include a close button like BasicFrameTemplate does/did, but if you add a button that inherits UIPanelCloseButtonDefaultAnchors it will behave as you’d expect.
That’s a lot neater than what I was able to do by scrounging old code
<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/
..\FrameXML\UI.xsd">
<Frame name="debug_OptionsFrame" toplevel="true" frameStrata="DIALOG" enableMouse="true" hidden="true" parent="UIParent" enableKeyboard="true">
<Size>
<AbsDimension x="300" y="90"/>
</Size>
<Anchors>
<Anchor point="CENTER"/>
</Anchors>
<Layers>
<Layer level="ARTWORK">
<Texture name="debug_OptionsFrameHeader" file="Interface\DialogFrame\UI-DialogBox-Header">
<Size>
<AbsDimension x="300" y="64"/>
</Size>
<Anchors>
<Anchor point="TOP">
<Offset>
<AbsDimension x="0" y="5"/>
</Offset>
</Anchor>
</Anchors>
</Texture>
<FontString inherits="GameFontNormal" text="debug">
<Anchors>
<Anchor point="TOP" relativeTo="debug_OptionsFrameHeader">
<Offset>
<AbsDimension x="0" y="-14"/>
</Offset>
</Anchor>
</Anchors>
</FontString>
</Layer>
<Layer level="BACKGROUND">
<Texture name="debug_OptionsFrameHeader2" file="Interface\DialogFrame\UI-DialogBox-Header">
<Size>
<AbsDimension x="620" y="200"/>
</Size>
<Anchors>
<Anchor point="TOP">
<Offset>
<AbsDimension x="0" y="12"/>
</Offset>
</Anchor>
</Anchors>
</Texture>
<FontString inherits="GameFontNormal" text="">
<Anchors>
<Anchor point="TOP" relativeTo="debug_OptionsFrameHeader2">
<Offset>
<AbsDimension x="0" y="-14"/>
</Offset>
</Anchor>
</Anchors>
</FontString>
</Layer>
</Layers>
<Frames>
<Button name="debug_OptionsFrameDefaults" inherits="UIPanelButtonTemplate" text="debug2">
<Size>
<AbsDimension x="90" y="21"/>
</Size>
<Anchors>
<Anchor point="BOTTOMLEFT">
<Offset>
<AbsDimension x="36" y="25"/>
</Offset>
</Anchor>
</Anchors>
<Scripts>
<OnClick>
print("Hello World!")
</OnClick>
</Scripts>
</Button>
<Button name="debug_OptionsFrameOkay" inherits="UIPanelButtonTemplate" text="debug1">
<Size>
<AbsDimension x="90" y="21"/>
</Size>
<Anchors>
<Anchor point="BOTTOMRIGHT">
<Offset>
<AbsDimension x="-36" y="25"/>
</Offset>
</Anchor>
</Anchors>
<Scripts>
<OnClick>
print("Hello World!")
</OnClick>
</Scripts>
</Button>
<Button name="debug_ExitButton" inherits="UIPanelButtonTemplate" text=" X ">
<Size>
<AbsDimension x="22" y="22"/>
</Size>
<Anchors>
<Anchor point="BOTTOMRIGHT">
<Offset>
<AbsDimension x="12" y="68"/>
</Offset>
</Anchor>
</Anchors>
<Scripts>
<OnClick>
debug_OptionsFrame:Hide()
</OnClick>
</Scripts>
</Button>
</Frames>
<Scripts>
</Scripts>
</Frame>
</Ui>
I added the XMLframe to an example addon I made to illustrate a working addon using the basics.
I really appreciate your help!
To show the frame you’d just type: /script debug_OptionsFrame:Show()
debug addon I made: https://www.mediafire.com/file/ofh1ikq2ekq0l2p/debug001.zip/file
Something that will help tidy up XML a lot is dropping the separate tags for AbsDimension on Size and Anchor tags.
<Size>
<AbsDimension x="300" y="90"/>
</Size>
can be simply
<Size x="300" y="90"/>
And
<Anchor point="TOP">
<Offset>
<AbsDimension x="0" y="5"/>
</Offset>
</Anchor>
can be simply
<Anchor point="TOP" x="0" y="5"/>
The use of a dialog header as background is kinda neat in your XML. Here’s a version using more traditional dialog templates:
<Ui>
<Frame name="debug_OptionsFrame" parent="UIParent">
<Size x="300" y="90"/>
<Anchors>
<Anchor point="CENTER"/>
</Anchors>
<Frames>
<Frame parentKey="Border" inherits="DialogBorderTemplate"/>
<Frame parentKey="Header" inherits="DialogHeaderTemplate"/>
<Button name="debug_OptionsFrameDefaults" inherits="UIPanelButtonTemplate" text="debug2">
<Size x="90" y="21"/>
<Anchors>
<Anchor point="BOTTOMLEFT" x="36" y="25"/>
</Anchors>
<Scripts>
<OnClick>
print("Hello World!")
</OnClick>
</Scripts>
</Button>
<Button name="debug_OptionsFrameOkay" inherits="UIPanelButtonTemplate" text="debug1">
<Size x="90" y="21"/>
<Anchors>
<Anchor point="BOTTOMRIGHT" x="-36" y="25"/>
</Anchors>
<Scripts>
<OnClick>
print("Hello World!")
</OnClick>
</Scripts>
</Button>
<Button name="debug_ExitButton" inherits="UIPanelCloseButton">
<Anchors>
<Anchor point="TOPRIGHT" x="-4" y="-4"/>
</Anchors>
</Button>
</Frames>
<Scripts>
<OnLoad>
self.Header:Setup("debug")
</OnLoad>
</Scripts>
</Frame>
</Ui>
If you haven’t yet, I highly recommend extracting the default UI’s code (or using one of the versions posted on github and such online) and looking at SharedXML\SharedUIPanelTemplate.xml for these and other templates you can use in your own stuff.
Oh! Neat! I didn’t realize you could combine the Anchor and Size offset’s like that~
Thanks! I used it in one of my old, ancient, addons: Wintergrasper Advanced. I was a much better coder 10 years ago. hehe
I extracted it once and accidentally deleted it then when I went to extract it again I got an error. 
I’ll give it another try today!
Yeah, when I try to extract the code I get this error “Unknown Console Command (ExportInterfaceFiles code)”. It’s really strange. =\
The export command can only be run from the character select screen.
oh, silly me. Thank you. 