Editing WoW:UI XML tutorial (section)

=== Layout ===

Frames have a combination of a size and one or more [[anchors]].  For a frame to be laid out, the combination of these needs to define a rectangle on the screen in which the frame is to be laid out.

A size is specified using a <tt>Size</tt> element with either an <tt>AbsDimension</tt> or <tt>RelDimension</tt> child element.

[[Anchors]] allow for relative positioning, and also to allow frames to dynamically reposition their content based on resizing.  A group of anchors is expressed via an <tt>Anchors</tt> element with one or more <tt>Anchor</tt> children, each of which may have an <tt>Offset</tt>.

Some examples: ''TODO: Get screenshots of all of these''

 <Frame>
  <Size><AbsDimension x="100" y="100"/></Size>
  <Anchors>
   <Anchor point="TOPLEFT"/>
  </Anchors>
 </Frame>

This specifies a 100x100 frame anchored so that its top left is at the top left of its parent frame.

 <Frame>
  <Size><RelDimension x="0.5" y="0.5"/> </Size>
  <Anchors>
   <Anchor point="LEFT"/>
  </Anchors>
 </Frame>

This specifies a frame that covers a quarter of your [[UI]] (regardless to the selected resolution).

 <Frame>
  <Size><AbsDimension x="100" y="100"/></Size>
  <Anchors>
   <Anchor point="TOPLEFT" relativePoint="TOPRIGHT"/>
  </Anchors>
 </Frame>

This specifies a 100x100 frame [[anchor]]ed so that its top left is at the top right of its [[parent]] frame.

 <Frame>
  <Size><AbsDimension x="100" y="100"/></Size>
  <Anchors>
   <Anchor point="TOPLEFT" relativeTo="SomeOtherFrame">
    <Offset><AbsDimension x="10" y="-10"/></Offset>
   </Anchor>
  </Anchors>
 </Frame>

This specifies a 100x100 frame anchored at the top left of the frame <tt>SomeOtherFrame</tt>, and offset by 10 pixels to the right and 10 pixels down.  (Note that the Y axis increases from the bottom up, so negative Y coordinates indicate downwards movement).

 <Frame>
  <Anchors>
   <Anchor point="TOPLEFT" relativeTo="SomeOtherFrame">
    <Offset><AbsDimension x="5" y="-5"/></Offset>
   </Anchor>
   <Anchor point="BOTTOMRIGHT" relativeTo="SomeOtherFrame">
    <Offset><AbsDimension x="-5" y="5"/></Offset>
   </Anchor>
  </Anchors>
 </Frame>

Note that no <tt>Size</tt> is specified here; the size and location of this frame is defined entirely by its relationship to <tt>SomeOtherFrame</tt>.  In particular, it will be inset by 5 pixels from the top left and bottom right of <tt>SomeOtherFrame</tt>.  As <tt>SomeOtherFrame</tt> changes size, our frame will change size as well.