Listboxes - An introduction to mode, selection zoom and margin

Note: The features described here require enigma2 >= 4.4.1r10

Layout Mode

The listbox currently has three modes to layout content.

1. vertical - the standard vertically oriented list - requires itemHeight to be set, width will always be the width of the actual listbox (minus margins)
2. horizontal - a horizontally oriented list - requires itemWidth to be set, height will always be the height of the actual listbox (minus margins)
3. grid - A grid layout, where items are oriented in both directions - requires itemWidth and itemHeight to be set.

Skin Example (grid)

<widget source="list" render="Listbox" position="center,center" size="50%,50%" mode="grid" itemWidth="50", itemHeight="50">

Python example

listInstance.setMode(eListbox.layoutGrid)

listInstance.setItemWidth(50)

listInstance.setItemHeight(50)

Selection Zoom

Selection Zoom does what the name already implies. It zooms the selection by a given factor.

1.0 equals 100% or "original" size. If you want an item zoomed by 20% when selected, the factor would be 1.2.
In vertical mode, the zoomed result is only centered vertically, the horizontal (or x) coordinate will not be changed.

In horizontal and grid mode, a centered zoom is being used (x and y are changed accordingly).

Skin example:

<widget source="list" render="Listbox" position="center,center" size="50%,50%" mode="grid" itemWidth="50", itemHeight="50" selectionZoom="1.2">

Python example:

listInstance.setSelectionZoom(1.2)

Margin

Margin is the outer distance betweeen the listbox and it's items. It is NO item margin!

It's required to keep zoomed items that are touching borders from being clipped (cut off) whenever the selection zoom is > 1.0.

Margins are set per axis (horizontal,vertical).

The correct margin can be easily calculated.

(size * selectionZoom - size) / 2

or

(selectionZoom - 1.0) / 2 * size

We can now calculate the margin for the selectionZoom example above (please don't forget about the point before line rule):

(50 * 1.2 - 50) / 2 = 5

Skin example:

<widget source="list" render="Listbox" position="center,center" size="50%,50%" mode="grid" itemWidth="50", itemHeight="50" selectionZoom="1.2" margin="5,5">

Python example:

listInstance.setMargin(ePoint(5,5))