[Pr0ph3cyTiger]

Hi all

I'm using the list control to input the list of items in my skin window.

I want to know how I can use the gap for each item to get them to separate?

here is the one I use:

Code:

<control type="list" id="4325">
    <posx>12</posx>
    <posy>150</posy>
    <width>300</width>
    <height>260</height>
    <onup>4325</onup>
    <ondown>4325</ondown>
    <viewtype label="list">list</viewtype>
    <pagecontrol>7</pagecontrol>
    <focusposition>10</focusposition>
            
    <itemlayout height="34">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>FF000000</selectedcolor>
            <textcolor>0xFFFFFFFF</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </itemlayout>
    <focusedlayout height="34">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <visible>!Control.HasFocus(4325)</visible>
            <texture>changelang_yellow.png</texture>
        </control>
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <height>34</height>
            <width>300</width>
            <visible>Control.HasFocus(4325)</visible>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>0xFFFFFFFF</selectedcolor>
            <textcolor>FF000000</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </focusedlayout>
</control>

I have tried with <itemgap>10</itemgap> where i have put them after the <pagecontrol>7</pagecontrol> but it doesn't work. All the items will not get separate.

If you do know how I can get the items to get separate in the gap, I would like to know how

[butchabay]

Itemgap only works with grouplists.

[phil65]

you have to set a width for item/focusedlayout (+ you should define list <orientation> )

[Pr0ph3cyTiger]

you have to set a width for item/focusedlayout (+ you should define list <orientation> )

Can you please show me how I can set a width for item/focuslayout?

I have added the <orientation> tag to define the list.

[phil65]

<itemlayout height="xx" width="xx">

same for focusedlayout.

[Pr0ph3cyTiger]

thanks phil, i have try this:

Code:

<control type="list" id="4325">
    <posx>12</posx>
    <posy>150</posy>
    <width>300</width>
    <height>260</height>
    <onup>4325</onup>
    <ondown>4325</ondown>
    <viewtype label="list">list</viewtype>
    <orientation>vertical</orientation>
    <pagecontrol>7</pagecontrol>

    <itemlayout height="34" width="300">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>FF000000</selectedcolor>
            <textcolor>0xFFFFFFFF</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </itemlayout>
            
    <focusedlayout height="34" width="300">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <visible>!Control.HasFocus(4325)</visible>
            <texture>changelang_yellow.png</texture>
        </control>
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <height>34</height>
            <width>300</width>
            <visible>Control.HasFocus(4325)</visible>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>0xFFFFFFFF</selectedcolor>
            <textcolor>FF000000</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </focusedlayout>
</control>

it won't make the gap for each item.

so are there a way if i can make the gap for each item?

[phil65]

you can have a gap when image control width < itemlayout width. thousands of examples available, just look through all the skins available.

[Pr0ph3cyTiger]

can you please show me an example how i can do this?

it will save me alot of time and headache to do the research.

[Hitcher]

thanks phil, i have try this:

Code:

<control type="list" id="4325">
    <posx>12</posx>
    <posy>150</posy>
    <width>300</width>
    <height>260</height>
    <onup>4325</onup>
    <ondown>4325</ondown>
    <viewtype label="list">list</viewtype>
    <orientation>vertical</orientation>
    <pagecontrol>7</pagecontrol>

    <itemlayout height="34" width="300">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>FF000000</selectedcolor>
            <textcolor>0xFFFFFFFF</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </itemlayout>
            
    <focusedlayout height="34" width="300">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <visible>!Control.HasFocus(4325)</visible>
            <texture>changelang_yellow.png</texture>
        </control>
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <height>34</height>
            <width>300</width>
            <visible>Control.HasFocus(4325)</visible>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>0xFFFFFFFF</selectedcolor>
            <textcolor>FF000000</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </focusedlayout>
</control>

it won't make the gap for each item.

so are there a way if i can make the gap for each item?

That's because you've made the itemlayout and focusedlayout dimensions the same as the images inside them, just increase them to space out the images.

[Pr0ph3cyTiger]

thanks phil, i have try this:

Code:

<control type="list" id="4325">
    <posx>12</posx>
    <posy>150</posy>
    <width>300</width>
    <height>260</height>
    <onup>4325</onup>
    <ondown>4325</ondown>
    <viewtype label="list">list</viewtype>
    <orientation>vertical</orientation>
    <pagecontrol>7</pagecontrol>

    <itemlayout height="34" width="300">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>FF000000</selectedcolor>
            <textcolor>0xFFFFFFFF</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </itemlayout>
            
    <focusedlayout height="34" width="300">
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <visible>!Control.HasFocus(4325)</visible>
            <texture>changelang_yellow.png</texture>
        </control>
        <control type="image">
            <posx>0</posx>
            <posy>10</posy>
            <height>34</height>
            <width>300</width>
            <visible>Control.HasFocus(4325)</visible>
            <texture>channels_bar1.png</texture>
        </control>
        <control type="label">
            <posx>3</posx>
            <posy>10</posy>
            <width>300</width>
            <height>34</height>
            <font>Font_Bold25</font>
            <aligny>center</aligny>
            <selectedcolor>0xFFFFFFFF</selectedcolor>
            <textcolor>FF000000</textcolor>
            <align>left</align>
            <info>ListItem.Label</info>
        </control>
    </focusedlayout>
</control>

it won't make the gap for each item.

so are there a way if i can make the gap for each item?

That's because you've made the itemlayout and focusedlayout dimensions the same as the images inside them, just increase them to space out the images.

yeah so can you please show me how i can space out of the images with example code?

[Hitcher]

Increase the width and height dimensions in the following controls -

Code:

<itemlayout height="34" width="300">
<focusedlayout height="34" width="300">

[Pr0ph3cyTiger]

Thank you very much for your help Hitcher. I have now solved the problem.

Can I make another list to add the list of programs when adding the images and labels?