HorizontalList where the SelectedItem is displayed always in the middle of 3 Items

Question

Hello everyone,

I am having some problems with HorizontalList as I need to move items without off-centering the selected item.

The items are moved using the SlideTouchHandler with the Endless property enabled and three items are displayed each time the items are moved left or right.

Is there any way to keep the selected item in the middle and move just the items ?

Thanks!

Answer 1

Hello SoMa,

if I understood your application case, you want the item in the middle of the list to appear selected. When the user scrolls the list, the selection should be adjusted accordingly. Is this correct? If yes, to achieve this behavior you could:

Step 1: Add a new slot method to the component containing the List and the SlideTouchHandler.

Step 2: Assign the slot method to SlideTouchHandlers property OnSlide. See also Implement Touch Handler slot methods.

Step 3: Implement the method as shown below:

var int32 oldSelectedItem = HorizontalList.SelectedItem;
var int32 newSelectedItem = HorizontalList.GetItemAtPosition( HorizontalList.Bounds.center );

// Selection does not change
if ( oldSelectedItem == newSelectedItem )
  return;

HorizontalList.SelectedItem = newSelectedItem;
HorizontalList.InvalidateItems( oldSelectedItem, oldSelectedItem );
HorizontalList.InvalidateItems( newSelectedItem, newSelectedItem );

Now, when the user scrolls the list, the item lying in the center is automatically selected via List's property SelectedItem. To complete the task, you would need to adapt the OnLoadItem method so it visually highlight the selected item. For example:

Please note, this approach will result in the selection skipping between the items in the middle area while the user is scrolling the list. This is inevitable since there is always one item selected. You could, however, adapt the GUI component implementing the list item to react to the alternation of the Selected state and fades in/out the item instead of abruptly changing its appearance.

Much easier would be to not change the appearance of the item in the middle. Instead use some 'static' decoration (a border, an arrow, additional background, etc.) to highlight the center area of the list. For the user, it will result in the centered item appearing 'selected'. Additionally configure the property SnapNext of the SlideTouchHandler to correspond to the width of the item. This will ensure that the items are always aligned. See also Configure the snap positions.

I hope it helps you further.

Best regards

Paul Banach