Making resizable frames

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.
== Tutorial ==
Register a frame for and :
frame:RegisterForDrag("LeftButton")
frame:EnableMouse(true)
frame:SetResizable(true)
Set the and size limits:
frame:SetMinResize(300,200)
frame:SetMaxResize(800,500)
Monitor and to trigger the resizing:
frame:SetScript("OnDragStart", function(self)
	self:StartSizing()
end)
frame:SetScript("OnDragStop", function(self)
	self:StopMovingOrSizing()
end)
Alternatively, place buttons in each corner that monitor and :
local br = CreateFrame("Button", nil, frame)
br:EnableMouse("true")
br:SetPoint("BOTTOMRIGHT")
br:SetSize(16,16)
br:SetNormalTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Down")
br:SetHighlightTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Highlight")
br:SetPushedTexture("Interface\\ChatFrame\\UI-ChatIM-SizeGrabber-Up")
br:SetScript("OnMouseDown", function(self)
	self:GetParent():StartSizing("BOTTOMRIGHT") 
end)
br:SetScript("OnMouseUp", function()
	self:GetParent():StopMovingOrSizing("BOTTOMRIGHT")
end)
To create a resizable frame in xml, this is a basic example.
<Frame parentKey="parentFrame" resizable="true">
 <Size x="200" y="400"/>
 <ResizeBounds>
 <minResize x="100" y="300"/>
 <maxResize x="300" y="500"/>
 </ResizeBounds>
 <Frames>
 <Button parentKey="resizer">
 <Size x="16" y="16"/>
 <Anchors>
 <Anchor point="BOTTOMRIGHT" x="0" y="0"/>
 </Anchors>
 <NormalTexture file="Interface/ChatFrame/UI-ChatIM-SizeGrabber-Down"/>
 <PushedTexture file="Interface/ChatFrame/UI-ChatIM-SizeGrabber-Up"/>
 <HighlightTexture file="Interface/ChatFrame/UI-ChatIM-SizeGrabber-Highlight"/>
 <Scripts>
 <OnMouseDown>
 self:GetParent():StartSizing("BOTTOMRIGHT")
 </OnMouseDown>
 <OnMouseUp>
 self:GetParent():StopMovingOrSizing("BOTTOMRIGHT")
 </OnMouseUp>
 </Scripts>
 </Button>
 </Frames> 
</Frame>
== Details ==
* () defaults moving the "BOTTOMRIGHT" point, but accepts an argument to move another instead.
* () may be used to place similar-looking handles in all corners.
== Complete example ==
local myFrame = CreateFrame("Frame", "MyFrame", UIParent, BackdropTemplateMixin and "BackdropTemplate")
frame:SetWidth(500)
frame:SetHeight(300)
frame:SetPoint("CENTER", UIParent, "CENTER")
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
frame:RegisterForDrag("LeftButton")
frame:EnableMouse(true)
frame:SetResizable(true)
frame:SetMinResize(300,200)
frame:SetMaxResize(800,500)
frame:SetScript("OnDragStart", function(self, button)
	self:StartSizing()
	self.isMoving = true
	self.hasMoved = false
end)
frame:SetScript("OnDragStop", function(self)
	self:StopMovingOrSizing()
	self.isMoving = false
	self.hasMoved = true
end)