WoW:XML/Anchors

Reference e
AddOns WoW API Widget API XML UI Event API WoW Lua Macro API CVars Battle.net HOWTOs Snippets UI tech Categories

→ XML properties

← XML UI ← XML properties < Anchors

Anchors holds a list of Anchor elements, and is a fundamental UI building block for defining positional layout for LayoutFrame UI elements. Anchors can be defined on any LayoutFrame, including Frames, Textures, and FontStrings.

Inheritance

Inherited by: none, Inherits: none, Defined in: LayoutFrame

Elements

<Anchor> ...

• <Offset> (Dimension)
  • <AbsDimension>
  • <RelDimension>

Attributes

none

Summary

Anchors are the primary 'Layout' mechanism in the WoW UI, which along with the <Size> element, allow WoW to position all of its visible and interactive elements on the screen, including the 3D views of the world. Anchors works by defining a list of <Anchor> elements each of which provide a detail about how a LayoutFrame should either be positioned or sized, or both. If Anchors does not provide enough information to completely define a LayoutFrame's size, then the Size element is used. The anchors themselves work by defining a point on the containing LayoutFrame to position and a point on another LayoutFrame to position it relative to. The cumulative effect of all the anchors in the Anchors list, combined with the size, help determine the final postion for a LayoutFrame at runtime.

Example

<Frame name="MyFrame">
  <Frames>
    <Frame name="$parentChild">
      <Anchors>
        <Anchor point="TOP">
          <Offset>
            <AbsDimension x="0" y="-22" />
          </Offset>
        </Anchor>
      </Anchors>
    </frame>
  </Frames>
</Frame>

This example will align the top of the 'child' frame to the top of 'MyFrame', and then offset that alignment by -22 vertically.

Details

Anchors define position and size of a layout element relative to other layout frames. You can define one or more "anchor" tags within "anchors" element.

Each anchor has several attributes:

• Point (FRAMEPOINT) - where the anchor is located on the element. Allowed values are:
  • TOP
  • BOTTOM
  • LEFT
  • RIGHT
  • CENTER (default) (notice not MIDDLE. Some addons use middle instead, but it's not supported at the moment)
  • TOPLEFT
  • BOTTOMLEFT
  • TOPRIGHT
  • BOTTOMRIGHT
• RelativePoint - same as point, but defines not on this element but on its parent. Values are same as "Point". If undefined its value equals to "Point"
• RelativeTo - by default is the parent element. you can specify another element to use instead with this attribute, giving a name as a value.
• Offset - If point on element and point on its parent are separated between each other you need specify it with this tag. This is done normally by putting "AbsDimension" inside "Offset" tag with attributes "x" and "y". Bigger x - element goes right, bigger y - it goes top. If undefined it's taken as 0,0

If two or more anchors are defined they can override the size, so element size will depend on the size of its parent.

Each widget got only four borders:

• Horizontal type borders
  • Left
  • Right
• Vertical type borders
  • Top
  • Bottom

For each border type there are two ways of defining size and position:

• By size and point
  Element size remains unchanged, position is defined by 'hook' (anchor) on left, middle or right part of widget and fixed to left, middle or right part to another widget
• Without size
  Element size depends on position and size elements used to 'hook' element to. Distance between them increasing - this widget size too.
  In this case you need one 'hook' for left border and one for right border.

If undefined for both border types 'hook' is placed in center relative to its parent element center with zero offset and size equals to parent element size. Each anchor defined overrides one border rule. When 'hook' placed left or right it removes center 'hook'. When center 'hook' placed it removes 'left' and 'right' hooks if defined. Two borders type are separate, so horizontal size can be defined by one 'hook' and size, when vertical defined by two 'hooks'. TOPLEFT anchors should be processed as two anchors TOP anchor and LEFT anchor with all other properties same. Same for BOTTOMLEFT,TOPRIGHT,BOTTOMRIGHT. You can think about them just as shorter form of writing. CENTER anchor affects both border types.

Widget can be relative only to one other element. So each anchor with relativeto attribute defined changes it.

<Anchor point="LEFT"/>

Will put 'hook' to left-middle part of widget and fix it to left-middle part of parent widget with zero offset

<Anchor point="LEFT" relativepoint="TOPRIGHT"/>

makes left part of widget fixed to right part of parent while top of parent will be middle of widget

<Anchor point="TOPLEFT"/>
<Anchor point="LEFT" relativeto="One"/>

Widget top remains same as top of parent, when left of widget goes to left of "One"

<Anchor point="RIGHT"/>
<Anchor point="CENTER"/>

Element will be fixed to center of its parent

When element is inherited from another one and both got anchors defined, inherited processed first, then widget ones, so ones you override template anchors.

For all this size is taken from Size tag.