ESOUI - XML Anchors

ESOUI (https://www.esoui.com/forums/index.php)

- Lua/XML Help (https://www.esoui.com/forums/forumdisplay.php?f=175)

- - XML Anchors (https://www.esoui.com/forums/showthread.php?t=4314)

Hi All

I am trying to create a group of textures and I am having trouble positioning them.

I don't completely understand Anchors yet.

Whats the easiest way with XML to align 4 textures each 20px square into a 2x2 grid shape?
Any tips on using Anchors?

Heres some bad XML code so we have something to work with :)

Code:

<Controls>

  <Control name="$(parent)_Section">

    <Controls>

      <Texture textureFile="something.dds">

        <Anchor point="TOPLEFT" relativePoint="$(parent)" relativeTo="TOPLEFT" offsetX="0" offsetY="0" />

        <Dimensions x="20" y="20" />

      </Texture>

      <Texture textureFile="something.dds">

        <Anchor point="TOPLEFT" relativePoint="$(parent)" relativeTo="TOPLEFT" offsetX="0" offsetY="0" />

        <Dimensions x="20" y="20" />

      </Texture>

      <Texture textureFile="something.dds">

        <Anchor point="TOPLEFT" relativePoint="$(parent)" relativeTo="TOPLEFT" offsetX="0" offsetY="0" />

        <Dimensions x="20" y="20" />

      </Texture>

      <Texture textureFile="something.dds">

        <Anchor point="TOPLEFT" relativePoint="$(parent)" relativeTo="TOPLEFT" offsetX="0" offsetY="0" />

        <Dimensions x="20" y="20" />

      </Texture>

    </Controls>

  </Control>

</Controls>

See picture here:
http://wiki.esoui.com/Control:SetAnchor

There is many ways how to do it, everything depends on how you want to handle parent control.

For example you can anchor first texture to the top left corner of parent control an then all other textures anchor to the first one:

XML Code:

<Controls>
  <Control name="$(parent)_Section">
    <Controls>
      <Texture name="$(parent)_Texture1" textureFile="something.dds">
        <Anchor point="TOPLEFT" />
        <Dimensions x="20" y="20" />
      </Texture>
      <Texture name="$(parent)_Texture2" textureFile="something.dds">
        <Anchor point="TOPLEFT" relativeTo="$(parent)_Texture1" relativePoint="TOPRIGHT" />
        <Dimensions x="20" y="20" />
      </Texture>
      <Texture name="$(parent)_Texture3" textureFile="something.dds">
        <Anchor point="TOPLEFT" relativeTo="$(parent)_Texture1" relativePoint="BOTTOMLEFT" />
        <Dimensions x="20" y="20" />
      </Texture>
      <Texture name="$(parent)_Texture4" textureFile="something.dds">
        <Anchor point="TOPLEFT" relativeTo="$(parent)_Texture1" relativePoint="BOTTOMRIGHT" />
        <Dimensions x="20" y="20" />
      </Texture>
    </Controls>
  </Control>
</Controls>

Another example could be anchoring to the center of parent control:

XML Code:

<Controls>
  <Control name="$(parent)_Section">
    <Controls>
      <Texture textureFile="something.dds">
        <Anchor point="BOTTOMRIGHT" relativePoint="CENTER" />
        <Dimensions x="20" y="20" />
      </Texture>
      <Texture textureFile="something.dds">
        <Anchor point="BOTTOMLEFT" relativePoint="CENTER" />
        <Dimensions x="20" y="20" />
      </Texture>
      <Texture textureFile="something.dds">
        <Anchor point="TOPRIGHT" relativePoint="CENTER" />
        <Dimensions x="20" y="20" />
      </Texture>
      <Texture textureFile="something.dds">
        <Anchor point="TOPLEFT" relativePoint="CENTER" />
        <Dimensions x="20" y="20" />
      </Texture>
    </Controls>
  </Control>
</Controls>

If you do not specify any anchor argument, it will use default. For example relativeTo will be "$(parent)", offsetX and offsetY will be "0".

Thats brilliant!
Exactly the information I needed, thanks very much.