As you know I am playing with Xamarin.Forms for a while and last week I was involved in one projects where I needed to have ListView with data which is divided in some way... So perfect way was to have some control like pivot on UWP but in Xamarin.Forms as you know we have Tabbed page which is similar to pivot but binding and other data manipulation is different so I think that I found the way to use Tabbed page to divide data and group it with Tabbed Page.

Remark: This is the best way for doing this that I am aware, if you have better solution or some other way please comment it or make pull request on my github project repo. I will be glad to hear you opinion on this "problem".

It is important to mention that tabs in this app example are created dynamically so, for every group that you have, you will get Tab for it and data in that page separated from other "categories"...

So as I wrote I have some list of data that I want to divide in two or three or more pages something like pivot control, and after some time of thinking I came to this solution... follow the tutorial to find out.

Create new Xamarin.Forms cross platform blank app, I use PCL but you can use shared project too.



As usual I will create three folders, Models, Views and ViewModels and this time DAL, it is not important but you will see later in the text why I am creating it also.


If you want to see simple list view binding in Xamarin.Forms you can take a look at my earlier blog post: Xamarin.Forms: ListView Simple MVVM Binding Example

In the Models folder I will add Animal.cs class and this tutorial will be about grouping and separating the animals by continent. My Animal.cs class looks like this:
As you can see I have very simple class with three properties, id, name and continent origin which will be a property for our grouping.

I will add new xamarin forms xaml page in Views folder, it will be simple list view with two properties in item.
My AnimalPage.xaml looks like this:

As you can see very simple xaml layout and in our code behind we will set binding context to the AnimalViewModel.cs:
...which we will create inside of ViewModels folder.

Before we implement our ViewModel I will create new class called DummyDB in DAL folder and it will have public List of Animals with some items in it, this class will be our data source which we will use in the tutorial.

DummyDB looks like this:
Now lets create our ViewModel, in the blog post that I linked in the text before I wrote something about binding and MVVM so if anything is unknown to you please take a look at that blog post or somewhere else.

Our ViewModels have one ObsverbleCollection of type Animal and I put some data in it at the constructor of the ViewModel.

This is not the final result of our tutorial this is just demonstration with binding to all items, and If I run my App I will get this kind of result.





As you can see all our animals from dummy db is in the list, and now I want to group them by the tabs, in other words I want to have three tabs (for continents that we have in our list data), and for every tab (created dynamically) to have list in it with the animals from that continent.

Follow the tutorial to get that result.

First step is to create page which will "hold" tabbed page childs, in Visual Studio 2015 and Visual Studio 2017 you have template for that so you can use it.

In the Views folder I will create new Forms Tabbed Page and give it a name "Animal" and Visual Studio will add rest of the name by it self... after couple of second you will get your tabbed page and "Tab page" you can delete it or explore it, do whatever you want to do.

Now open your tabbed page and delete everything inside of TabbedPage control like this:

Now go to the code behind and this is place where we will implement some logic.

First thing we need to retrieve all continents that we have with our animals... implementation that you will see is for properties that are now part of some complex class, it is for strings or int-s, you can accomplish same result with complex classes the implementation is more elegant and better but this tutorial is about properties that are not a object from some complex class.

After we have all continents now we need to  remove duplicates using LINQ Distinct function, and rest of the code is a main part where we will create our tabs based on values that we have in our list of strings in this case our continents.

My code behind logic looks like this:

As you can see I am using foreach loop and Children.Add(new SomeClass)... with this code we will create as many as tabs we need or we need to have to group our animals by continents.

If you carefully follow the tutorial you can see that I have new page that has one parameter of type string, soon you will see why.

I will create new page called AnimalTabPage and the layout will be the same as previous but with difference in code behind:

This is my xaml code:
... and code behind:
From code you can see that this class have one parameter in the constructor (we are calling this class from our Children.Add method in the AnimalTabbedPage)... string continet will be used to set title of this page (and tab also in tabbed page), we are setting the binding context to he view model and that string parameter will be sent to the our "new" ViewModel  that is almost the same as previous but with some small differences.

Our ViewModel with changes looks like this:


From this code you can understand what I am doing right here, first of all this ViewModel will add values to the Animals list but just for those with continent that is the same as parameter value... and we get our page to display just those animals.

And If I run my app I will get this kind of result:



After all of this we have our tabs (some number of them), and in every tab we can values that we want in this case of this tutorials those were animals displayed in tabs by their continents and tabs were created dynamically from data that we have in our list items.

To repeat myself this tutorial was for the grouping property of type like int or string, same can be achieved in easy way with complex classes but idea about dynamically creating tabs is the same. And also now in the tabs you can also group data by other property or class in the standard ListView grouping way.

Also a small tip is to send a list of data to the tab pages... with this approach you are not calling the db as many times as you have your tabs created, but this is just a tip, you will know what is best for your app.

If there is any expert in Xamarin or some developer that thinks this is not a good way please comment it, I'll be glad to be corrected it and learn something new. As I mentioned maybe this

Source code from this Visual Studio project is on my GitHub profile at this URL: https://github.com/almirvuk/Xamarin.Forms_TabbedPageGrouping hope you will explore it and learn more.


I hope that this tutorial was helpful for you... if it is share it with someone that you might think it will be helpful for them too.

Best regard! Almir Vuk | https://almirvuk.blogspot.com