CollectionView

Summary

A virtualized collection view that utilizes native layout controls to present an ordered set of data items using a flexible and changeable layout. The portable control must be bindable, support item templating and (optionally) support section headers.

Platform renderers would be based on the following native controls:

• iOS: UICollectionView
• Android: RecyclerView
• UWP: GridView

UI virtualization is achieved in each of the native controls ensuring fast performance with large datasets.

API Changes

/// <summary>
/// A grid-like view to present an ordered set of data items using a flexible and changeable layout.
/// </summary>
public class CollectionView : View
{
    #region Bindable Properties

    /// <summary>
    /// The property bound to <see cref="Padding"/>.
    /// </summary>
    public static readonly BindableProperty PaddingProperty =
       BindableProperty.Create(
           propertyName: nameof(Padding),
           returnType: typeof(Thickness),
           declaringType: typeof(CollectionView),
           defaultValue: default(Thickness));

    /// <summary>
    /// The property bound to <see cref="RowSpacing"/>.
    /// </summary>
    public static readonly BindableProperty RowSpacingProperty =
       BindableProperty.Create(
           propertyName: nameof(RowSpacing),
           returnType: typeof(double),
           declaringType: typeof(CollectionView),
           defaultValue: default(double));

    /// <summary>
    /// The property bound to <see cref="ColumnSpacing"/>.
    /// </summary>
    public static readonly BindableProperty ColumnSpacingProperty =
       BindableProperty.Create(
           propertyName: nameof(ColumnSpacing),
           returnType: typeof(double),
           declaringType: typeof(CollectionView),
           defaultValue: default(double));

    /// <summary>
    /// Property bound to <see cref="MaxItemWidth"/>
    /// </summary>
    public static readonly BindableProperty MaxItemWidthProperty =
       BindableProperty.Create(
           propertyName: nameof(MaxItemWidth),
           returnType: typeof(double),
           declaringType: typeof(CollectionView),
           defaultValue: default(double));

    /// <summary>
    /// Property bound to <see cref="MinItemWidth"/>
    /// </summary>
    public static readonly BindableProperty MinItemWidthProperty =
       BindableProperty.Create(
           propertyName: nameof(MinItemWidth),
           returnType: typeof(double),
           declaringType: typeof(CollectionView),
           defaultValue: default(double));

    /// <summary>
    /// Property bound to <see cref="RowHeight"/>
    /// </summary>
    public static readonly BindableProperty RowHeightProperty =
       BindableProperty.Create(
           propertyName: nameof(RowHeight),
           returnType: typeof(double),
           declaringType: typeof(CollectionView),
           defaultValue: default(double));

    /// <summary>
    /// The property bound to <see cref="ItemsSource"/>.
    /// </summary>
    public static readonly BindableProperty ItemsSourceProperty =
       BindableProperty.Create(
           propertyName: nameof(ItemsSource),
           returnType: typeof(IEnumerable),
           declaringType: typeof(CollectionView),
           defaultValue: default(IEnumerable));

    /// <summary>
    /// Property bound to <see cref="ItemTemplate"/>
    /// </summary>
    public static readonly BindableProperty ItemTemplateProperty =
       BindableProperty.Create(
           propertyName: nameof(ItemTemplate),
           returnType: typeof(DataTemplate),
           declaringType: typeof(CollectionView),
           defaultValue: default(DataTemplate));

    /// <summary>
    /// Property bound to <see cref="SectionHeaderTemplate"/>
    /// </summary>
    public static readonly BindableProperty SectionHeaderTemplateProperty =
       BindableProperty.Create(
           propertyName: nameof(SectionHeaderTemplate),
           returnType: typeof(DataTemplate),
           declaringType: typeof(CollectionView),
           defaultValue: default(DataTemplate));

    /// <summary>
    /// Property bound to <see cref="SectionHeaderHeight"/>
    /// </summary>
    public static readonly BindableProperty SectionHeaderHeightProperty =
       BindableProperty.Create(
           propertyName: nameof(SectionHeaderHeight),
           returnType: typeof(double),
           declaringType: typeof(CollectionView),
           defaultValue: default(double));

    /// <summary>
    /// Property bound to <see cref="Direction"/>
    /// </summary>
    public static readonly BindableProperty DirectionProperty =
       BindableProperty.Create(
           propertyName: nameof(Direction),
           returnType: typeof(CollectionViewDirection),
           declaringType: typeof(CollectionView),
           defaultValue: CollectionViewDirection.Vertical);

    #endregion
}

Intended Use Case

The most common use would be to present items in a grid arrangement, although the control could be configurable to present items as a vertical or horizontal list. The control is intended for applications where a bindable, virtualized collection view layout is required that is not served by any of the existing Xamarin.Forms controls.

Applications:

• Responsive, grid-based layout eg. Photo album, search results
• Horizontal layouts
• Custom layouts ie. Circle, flow.