Sharpnado

Carousel layout + auto item size + column count = Happy New HorizontalListView !

Jean-Marie Alfonsi -

A big update has been released for the Sharpnado.Forms.Presentation and the Sharpnado.HorizontalListView nuget packages: v0.9.8:

https://github.com/roubachof/Sharpnado.Presentation.Forms

It includes some real nice features and fixes some inconsistencies.

Carousel layout is coming to town

The ListLayout property of the HorizontalListView has now a new value:

public enum HorizontalListViewLayout
{
    Linear = 0,
    Grid,
    Carousel,
}

The Carousel value!
Setting this, you will have a nice Carousel effect (meaning only one item is displayed at a time):

Auto item width + column count

    public int ColumnCount { get; set; } = 0;

You can now specify the number of column you want for the view and it will automatically compute the item width.
For this to work the ItemWidth property must be set to 0 (its default value).

  • ColumnCount = 2 && ListLayout = Linear && SnapStyle = Start
  • ColumnCount = 3 && ListLayout = Grid

The screen rotation is also supported

  • ColumnCount = 3 && ListLayout = Grid && Orientation = Landscape

In fact, the Carousel layout is just the result of the implementation of auto item sizing combined with column count: Carousel <=> ColumnCount = 1 && ListLayout = Linear && SnapStyle = Center && ScrollSpeed = Slowest

Auto item height

If you didn't set a value for the ItemHeight (default to 0), and ListLayout is set to Linear, the height of the horizontal list item will be computed from:

  1. The height of the parent's view
  2. The CollectionPadding property

All the screenshots where ListLayout == Linear have ItemHeight == 0.

ScrollSpeed

    /// <summary>
    /// Slower and slowest have the same result on iOS.
    /// </summary>
    public enum ScrollSpeed
    {
        Normal = 0,
        Slower,
        Slowest,
    }

Various inconsistencies fixes (and semantic changes)

Before v0.9.8, the CollectionPadding property was behaving differently on Android and iOS.
On Android, if the Thickness was equal to 0, the ItemSpacing was used as a padding.
If we wanted to have spacing between items with no collection padding, it wasn't possible.
Moreover, iOS was implementing it the right way: you could have a collection with 0 padding.

It was silly: so I stopped.

Hidden track

What do you get if you set ColumnCount = 1 && ListLayout = Grid ?