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.