Making resizable frames

From Wowpedia
Jump to: navigation, search

Resizable frames can be resized by holding down a specified mouse button over a frame and then moving the mouse to resize the frame in a specified direction. This tutorial shows example code to make a resizable window.

Create the frame

local myFrame = CreateFrame("Frame", "MyFrame", UIParent)
frame:SetWidth(500)
frame:SetHeight(300)
frame:SetPoint("CENTER", UIParent, "CENTER")

Frame background and border

backdropInfo = {
   bgFile = "Interface\\Buttons\\WHITE8X8",
   edgeFile = "Interface\\Buttons\\WHITE8X8",
   edgeSize = 1,
   insets = { left = 1, right = 1, top = 1, bottom = 1, },
}
frame:SetBackdrop(backdropInfo)
frame:SetBackdropColor(0,0,0,1) -- Black background
frame:SetBackdropBorderColor(1,1,1,1) -- White border

Make the frame resizable

frame:RegisterForDrag("LeftButton")
frame:EnableMouse(true)
frame:SetResizable(true)
frame:SetMinResize(300,200) -- The minimum height & width the frame can be resized
frame:SetMaxResize(800,500) -- The maximum height & width the frame can be resized

Resizing Handlers

frame:SetScript("OnMouseDown", function(self, button)
  self:StartSizing()
  self.isMoving = true
  self.hasMoved = false
end)
frame:SetScript("OnMouseUp", function(self)
  if self.isMoving then
    self:StopMovingOrSizing()
    self.isMoving = false
    self.hasMoved = true
  end
end)
  • self:StartSizing() defaults to resizing to the "bottomright" direction. But you can specify other directions to resize. For example self:StartSizing("topleft") or self:StartSizing("right"). Valid points are "top", "topright", "right", "bottomright", "bottom", "bottomleft", "left", "topleft".