Container Item Layout

All container objects (List Container, Wrap List Container, Fixed List Container and Panel Container) have very flexible layout of their items using the <itemlayout> and <focusedlayout> tags.

Example

 <control type="wraplist" id="50">
      <description>My first wraplist container</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <viewtype label="3D list">list</viewtype>
      <orientation>vertical</orientation>
      <pagecontrol>25</pagecontrol>
      <focusposition>3</focusposition>
      <scrolltime>200</scrolltime>
      <itemlayout width="250" height="29" condition="true">
                <control type="image">
                        <left>5</left>
                        <top>3</top>
                        <width>22</width>
                        <height>22</height>
                        <info>ListItem.Icon</info>
                </control>
                <control type="label">
                        <left>30</left>
                        <top>3</top>
                        <width>430</width>
                        <height>22</height>
                        <font>font13</font>
                        <aligny>center</aligny>
                        <selectedcolor>green</selectedcolor>
                        <align>left</align>
                        <info>ListItem.Label</info>
                </control>
                <control type="label">
                        <left>475</left>
                        <top>3</top>
                        <width>300</width>
                        <height>22</height>
                        <font>font13</font>
                        <aligny>center</aligny>
                        <selectedcolor>green</selectedcolor>
                        <textcolor>grey</textcolor>
                        <align>right</align>
                        <info>ListItem.Label2</info>
                </control>
      </itemlayout>
      <focusedlayout height="29" width="250">
                <control type="image">
                        <width>485</width>
                        <height>29</height>
                        <left>0</left>
                        <top>0</top>
                        <visible>Control.HasFocus(50)</visible>
                        <texture>list-focus.png</texture>
                </control>
                <control type="image">
                        <left>5</left>
                        <top>3</top>
                        <width>22</width>
                        <height>22</height>
                        <info>ListItem.Icon</info>
                </control>
                <control type="label">
                        <left>30</left>
                        <top>3</top>
                        <width>430</width>
                        <height>22</height>
                        <font>font13</font>
                        <aligny>center</aligny>
                        <selectedcolor>green</selectedcolor>
                        <align>left</align>
                        <info>ListItem.Label</info>
                </control>
                <control type="label">
                        <left>475</left>
                        <top>3</top>
                        <width>300</width>
                        <height>22</height>
                        <font>font13</font>
                        <aligny>center</aligny>
                        <selectedcolor>green</selectedcolor>
                        <textcolor>grey</textcolor>
                        <align>right</align>
                        <info>ListItem.Label2</info>
                </control>
      </focusedlayout>
 </control>

As can be seen, the <itemlayout> and <focusedlayout> blocks can contain a number of image or label controls, the content of which is either static, or can be filled with info labels such as ListItem.Title and so on. You can have more than one <itemlayout> / <focusedlayout> tag based on conditional visibility. The first <itemlayout> with a condition that is satisfied (or no condition specified) will be used for a particular directory listing. The condition is only checked when the list is refreshed.

      <itemlayout height="29" width="250" condition="Container.Content(Movies)">

Most image and label tags are available to these sub-controls.

One thing to note is that the only animations available to the sub-controls is the focus animation, or conditional animations. The focus animation is invoked whenever the <focusedlayout> is needed to be used for an item. Note that with conditions such as Container.Row(0), Container.Column(3), or Container.Position(4) the actual focused layout (and animation) can be changed per-item. The layout of the unfocused items, however, is fixed per-item.

See also

Development:

• Add-on development
• Skinning