Making movable and resizable frames

Main Menu
WoW API Lua API FrameXML API Widget API Widget scripts XML schema Events CVars Macro commands Combat Log Escape sequences Hyperlinks API changes HOWTOs wowuidev

Movable frames

The following example demonstrates the use of the PanelDragBarTemplate. This template creates an invisible child frame that allows movement of the parent frame when dragging the title bar.

Using Lua

-- Create our main frame
local frame = CreateFrame("Frame", "MyMovableFrame", UIParent, "PortraitFrameFlatTemplate")
frame:SetSize(600, 400)
frame:SetPoint("CENTER")
frame:SetMovable(true) -- Important!

-- Create the drag bar and set it's height and points so it overlays the title bar from the PortraitFrameFlatTemplate used above
local dragBar = CreateFrame("Frame", nil, frame, "PanelDragBarTemplate")
dragBar:SetHeight(32)
dragBar:SetPoint("TOPLEFT")
dragBar:SetPoint("TOPRIGHT")

Resizable frames

This example makes use of the PanelResizeButtonTemplate.

Using Lua

-- Create our main frame
local frame = CreateFrame("Frame", "MyMovableFrame", UIParent, "PortraitFrameFlatTemplate")
frame:SetSize(600, 400)
frame:SetPoint("CENTER")
frame:SetResizable(true) -- Important!

-- Create our resize button and position it at the bottom right of our frame
local resizeButton = CreateFrame("Button", nil, frame, "PanelResizeButtonTemplate")
resizeButton:SetPoint("BOTTOMRIGHT", -4, 4)

-- Initialize our resize button
-- The Init() method on the button takes in a few arguments:
-- 1. The frame we want to resize (our parent frame in this case)
-- 2. (optional) The minimum width
-- 3. (optional) The minimum height
-- 4. (optional) The maximum width
-- 5. (optional) The maximum height
-- 6. (optional) The rotation (in degrees) of the resize button. Useful if you don't want the button to be in the bottom right corner only.
local minimumWidth = 300
local minimumHeight = 200
resizeButton:Init(frame, minimumWidth, minimumHeight)

Combined Example

-- Create our main frame
local frame = CreateFrame("Frame", "MyMovableFrame", UIParent, "PortraitFrameFlatTemplate")
frame:SetSize(600, 400)
frame:SetPoint("CENTER")
frame:SetMovable(true) -- Important!
frame:SetResizable(true) -- Important!

-- Create the drag bar and set it's height and points so it overlays the title bar from the PortraitFrameFlatTemplate used above
local dragBar = CreateFrame("Frame", nil, frame, "PanelDragBarTemplate")
dragBar:SetHeight(32)
dragBar:SetPoint("TOPLEFT")
dragBar:SetPoint("TOPRIGHT")

-- Create our resize button and position it at the bottom right of our frame
local resizeButton = CreateFrame("Button", nil, frame, "PanelResizeButtonTemplate")
resizeButton:SetPoint("BOTTOMRIGHT", -4, 4)

-- Initialize our resize button
local minimumWidth = 300
local minimumHeight = 200
resizeButton:Init(frame, minimumWidth, minimumHeight)