Let's Play with CollectionView Layouts in Xamarin.Forms
Thursday, July 18, 2019
In this blog post we will play and see what layout features CollectionView is providing to Xamarin.Forms developers. CollectionView is a new layout/control which we can be useed in order to show some collection of data.
CollectionView is still in Preview phase but what is showen so far it has bright future!
This post is my entry for #XamarinUIJuly, an initiative by Steven Thewissen. Learn more about beautiful Xamarin UI by checking out the other entries too.
Xamarin.Forms 4.X brings a lot of new cool features to play with and CollectionView is one of the favourite for me. In this blog post we will take a look at CollectionView, what are the main features of it, how to use it and what we can accomplish with it.
Introduction
CollectionView it is basically flexible and performant view for presenting lists of data using different layout specifications, we will cover all the layout options in this blog post.
Current available layout specifications are:
- Vertical list – a single column list that grows vertically as new items are added.
- Horizontal list – a single row list that grows horizontally as new items are added.
- Vertical grid – a multi-column grid that grows vertically as new items are added.
- Horizontal grid – a multi-row grid that grows horizontally as new items are added.
How to use it?
CollectionView is available in Xamarin.Forms 4.0. It is currently in experimental phase and it can only be used by adding Experimental Flag in your AppDelegate class on iOS, or to your MainActivity class on Android, before calling Forms.Init:
CollectionView and ListView differences
While the CollectionView and ListView APIs are similar, there are some notable differences:
- CollectionView has a flexible layout model, which allows data to be presented vertically or horizontally, in a list or a grid.
- CollectionView supports single and multiple selection.
- CollectionView has no concept of cells. Instead, a data template is used to define the appearance of each item of data in the list.
- CollectionView automatically utilizes the virtualization provided by the underlying native controls.
- CollectionView reduces the API surface of ListView. Many properties and events from ListView are not present in CollectionView.
- CollectionView does not include built-in separators.
Our Example app
For this blog post I prepared example app which looks like this:
I know I know... this is the ugliest menu which you can create, but!... I promise the pages and views which you can see till the end of this blog post are more beautiful (or have some kind of non-generic design 😂).
Our app is very simple app with couple of Buttons, each one will navigate to new page with different CollectionView inside of it and CollectionView has different layout usage, so you can easily view each example of them, code for full project is on my GitHub repository here.
Our app is very simple app with couple of Buttons, each one will navigate to new page with different CollectionView inside of it and CollectionView has different layout usage, so you can easily view each example of them, code for full project is on my GitHub repository here.
So let's play with CollectionView layouts.
Vertical List
This is the default and standard CollectionView behaviour. This is the same behaviour which we would have if we are using standard ListView. This is what you will get using CollectionView without any additional settings and property setup.
For the data source of this beautiful CollectionView I am using Pictures list which is ObservableCollection stored in my ViewModel (again see the full project on GitHub).
The result of this XAML code looks like this:
Horizontal List
If you ask me, next really important layout which is available in CollectionView is horizontal scrolling list, it's crazy how easy it is to make horizontal scrolling list with CollectionView in Xamarin.Forms 4.x.
This is my XAML Code for it:
As you can see, the main difference between this horizontal and previous vertical scrolling list is different value for ItemsLayout property and in this case we are using HorizontalList as a value: ItemsLayout="HorizontalList".
If we runn our app and navigate to this page, result of horizontal scrolling list it this:
Vertical Grid
How many you in the past had request to create scrolling list with two columns (or more), if you needed to implement it... than you know the pain 😂.. just kidding, but yea, not having that in Xamarin.Forms (so far) it was not an easy task to implement that.
With CollectionView it is really simple to have it done. All we need to do is to use property GridItemsLayout and define how many columns we want to have.
In my example I will use two column vertical scrolling grid with this XAML code:
In my example I will use two column vertical scrolling grid with this XAML code:
As you can see; we are using GridItemsLayout with Orientation set to Vertical and Span property represents us the number of columns which our scrolling grid will have, in my case that is two columns so I will set value of two to Span property.
Result of this beautifull code looks like this:
next and final example is.... 🥁🥁🥁
Horizontal Grid
If you carefully read the previous example, you seen that we can choose which Orientation we will use for GridLayout inside of our CollectionView for the this last example we want to have Horizontal scrolling grid with couple of rows and I will use three rows for that.
So we will set Orientation="Horizontal" and Span="3"
XAML code for my horizontal scrolling grid layout is this one:
And the result of that really simple code change is this one:
So we will set Orientation="Horizontal" and Span="3"
XAML code for my horizontal scrolling grid layout is this one:
And the result of that really simple code change is this one:
.... and that is it. These are four really cool and life saver layouts which are comming with CollectionView in Xamarin.Forms.
Stay tuned in next blog posts we will cover other features of CollectionView such as Selections, Scrolling, EmptyView, and we will play even more with design of it because I want to submit some design to our new Snppts website, so there is couple of more blogposts comming in the near future.
All the code and project you can find on my GitHub here.
It was fun experience to write blog post again, this was one year break from writing it and I really enjoyed it.
Check out other Xamarin UI July entries as well and thank you Steven for making this happend.
Best regards!
7 comments
Have you tried to change the Span value on screen rotation? On a tablet I want 2 columns in portrait and 3 in landscape. Changing the value using a bound property doesn't work.
ReplyDeleteCould you implement load more item with collection view ?
ReplyDeleteSolved my problem...Thanks
ReplyDeleteLove it.. awesome dude.. It's really help me
ReplyDeleteThank you for the helpful post on the CollectionView Sir!
ReplyDeleteCan we implement staggered layout in xamarin forms collection view like recyclerview layout known as staggered layout?
ReplyDeletenice article on collection view layout
ReplyDelete