[realcopacetic]

Hi, I've built the following horizontal list like so: I have a hidden list to scroll the focus then a grouplist of controls with visibility conditions based on which item in the list has focus. The reason I did it like this was because I couldn't figure out how to have a horizontal list without setting a set width that would leave different sized gaps between the items depending on the length of the label.



However, if there are too many items in the list, I don't know how to get it to scroll on left / right click. Is there a way to do it with the method that I've already used or is there a better way to build the horizontal list, using a list or fixed list container but somehow setting an auto width on the focusedlayout and itemlayout?

[jurialmunkey]

I do something similar in AZ2 and Aura to create an auto-width list. You have to have a fixed number of items on screen.

In your grouplist items set the label using:

Code:

$INFO[Container(ID).ListItemPosition(POSITION).Label]

Replace ID with the id of your hidden list container.
Replace POSITION with the position of the item in the list.

So if you have three items on screen it will be something like

xml:


<control type="grouplist">

    <!-- Position 0 Focused -->

    <control type="label">

        <label>$INFO[Container(ID).ListItemPosition(0).Label]<label>

        <width>auto</width>

        <visible>String.IsEqual(Container(ID).ListItemPosition(0).Label, Container(ID).ListItem.Label)</visible>

        <visible>Integer.IsGreater(Container(ID).NumItems,0)</visible>

    </control>

    <!-- Position 0 Unfocused-->

    <control type="label">

        <label>$INFO[Container(ID).ListItemPosition(0).Label]<label>

        <width>auto</width>

        <visible>!String.IsEqual(Container(ID).ListItemPosition(0).Label, Container(ID).ListItem.Label)</visible>

        <visible>Integer.IsGreater(Container(ID).NumItems,0)</visible>

    </control>

    <!-- Position 1 Focused -->

    <control type="label">

        <label>$INFO[Container(ID).ListItemPosition(1).Label]<label>

        <width>auto</width>

        <visible>String.IsEqual(Container(ID).ListItemPosition(1).Label, Container(ID).ListItem.Label)</visible>

        <visible>Integer.IsGreater(Container(ID).NumItems,1)</visible>

    </control>

    <!-- Position 1 Unfocused-->

    <control type="label">

        <label>$INFO[Container(ID).ListItemPosition(1).Label]<label>

        <width>auto</width>

        <visible>!String.IsEqual(Container(ID).ListItemPosition(1).Label, Container(ID).ListItem.Label)</visible>

        <visible>Integer.IsGreater(Container(ID).NumItems,1)</visible>

    </control>

    <!-- Position 2 Focused -->

    <control type="label">

        <label>$INFO[Container(ID).ListItemPosition(2).Label]<label>

        <width>auto</width>

        <visible>String.IsEqual(Container(ID).ListItemPosition(2).Label, Container(ID).ListItem.Label)</visible>

        <visible>Integer.IsGreater(Container(ID).NumItems,2)</visible>

    </control>

    <!-- Position 2 Unfocused-->

    <control type="label">

        <label>$INFO[Container(ID).ListItemPosition(2).Label]<label>

        <width>auto</width>

        <visible>!String.IsEqual(Container(ID).ListItemPosition(2).Label, Container(ID).ListItem.Label)</visible>

        <visible>Integer.IsGreater(Container(ID).NumItems,2)</visible>

    </control>

</control>

Now you need to set your hidden list to only have the same number of items as are visible in your grouplist.
You can do this by setting the itemlayout/fixedlayout width to the total list width divided by the number of items
e.g. for three items:

xml:


<control type="list">

    <width>300</width>

    <orientation>horizontal</orientation>

    <itemlayout width="100" />

    <focusedlayout width="100" />

    <content>[...]</content>

</control>

Now when your list scrolls past the third item (or however many you've set it up for), the grouplist labels will also update because they are based upon the position of the item in the list. Put your actual visibility conditions for each item inside the <item> of the <content> tag.

You will probably also want some sort of animation when you get to the end/beginning.
You can do that by putting some animations in your grouplist (replace ID with id of hidden list).

xml:


<animation effect="slide" start="0" end="-120" condition="!Container(ID).OnScrollNext" reversible="false" time="200" tween="quadratic">Conditional</animation>

<animation effect="slide" start="0" end="120" condition="!Container(ID).OnScrollPrevious" reversible="false" time="200" tween="quadratic">Conditional</animation>

You can see how I create the auto-width menu in AZ2 here:
https://github.com/jurialmunkey/skin.arc...ml#L3-L149

[realcopacetic]

Thanks, that's rather ingenious, unfortunately the main place I'm using this is on the home page where I don't know the number of items or the length of labels people will use on the menu, so I'm probably out of luck with this design,

[jurialmunkey]

Thanks, that's rather ingenious, unfortunately the main place I'm using this is on the home page where I don't know the number of items or the length of labels people will use on the menu, so I'm probably out of luck with this design,

I use this for the home menu with skinshortcuts, so I have absolutely no control over the number of items of lengths of labels. You don't need to know the number of items in the list, the only restriction is the number of items visible on screen at once.

If you're using a grouplist, there will always be a fixed limit on the number of items because it will be limited by the number of controls you put in it. Unless you are using skinshortcut templates to generate the objects in the grouplist. If that is the case, why even use a hidden list at all? Just use button controls in the grouplist.

[jurialmunkey]

Here's a video of it in action:

[realcopacetic]

Thanks, that's rather ingenious, unfortunately the main place I'm using this is on the home page where I don't know the number of items or the length of labels people will use on the menu, so I'm probably out of luck with this design,

I use this for the home menu with skinshortcuts, so I have absolutely no control over the number of items of lengths of labels. You don't need to know the number of items in the list, the only restriction is the number of items visible on screen at once.

If you're using a grouplist, there will always be a fixed limit on the number of items because it will be limited by the number of controls you put in it. Unless you are using skinshortcut templates to generate the objects in the grouplist. If that is the case, why even use a hidden list at all? Just use button controls in the grouplist. 

Ah thanks, sorry for the misunderstanding. This is great, I will hopefully be able to solve my problem, thanks!

[realcopacetic]

@jurialmunkey thanks so much for all your help with this. It worked a charm