How to implement Expandable ListView in xamarin forms - mvvm

Question

I'm using service to get some values from json.
I displaying them on home page (IrrigNetPage) where I have three tabs, so I want to sort them on diferents way on every tab.
Here's my model:
public class IrrigNetModel
{
public IrrigNetModelItem[] items { get; set; }
}
public class IrrigNetModelItem
{
public int ID { get; set; }
public string Message { get; set; }
public DateTime Date { get; set; }
public string DateText { get; set; }
public int StationId { get; set; }
public string StationName { get; set; }
public float StationLongitude { get; set; }
public float StationLatitude { get; set; }
public int ServiceId { get; set; }
public string ServiceName { get; set; }
}
Here's a part of xaml code from View:
<StackLayout
Grid.Column="1"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BackgroundColor="{Binding LocationTabColor}"
Padding="10"
Margin="1">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TabTappedCommand}" CommandParameter="location"/>
</StackLayout.GestureRecognizers>
<Image Source="{Binding LocationTabIcon}"
HorizontalOptions="Start"
VerticalOptions="Center"
WidthRequest="16"
HeightRequest="16"
Aspect="AspectFit"
x:Name="LocationIcon"/>
<Label Text="{i18n:Translate Location}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
TextColor="{Binding LocationTabTextColor}"/>
</StackLayout>
And, ofcourse here is part of ViewModel:
else if (tabName == "location")
{
ServiceTabColor = Color.FromHex("#f4f4f4");
LocationTabColor = Colors.MENU_SELECTED_ITEM;
MapTabColor = Color.FromHex("#f4f4f4");
ServiceTabIcon = "services.png";
LocationTabIcon = "location_sel.png";
MapTabIcon = "location.png";
ServiceTabTextColor = Colors.MENU_SELECTED_ITEM;
LocationTabTextColor = Color.FromHex("#ffffff");
MapTabTextColor = Colors.MENU_SELECTED_ITEM;
ListHederIcon = "location.png";
IsListVisible = IsListVisible;
IsGridHeaderVisible = true;
IsMapVisible = false;
if (ServiceName == "irrigNET")
{
FrameIcon = "service_irrig.png";
}
else
{
FrameIcon = "service_trap.png";
}
GroupServicesByLocation();
}
Where I set some proporties values and as you can see here I call method GroupServicesByLocation(); which looks like:
public void GroupServicesByLocation()
{
var groupedCollection = IrrigNetCollection.GroupBy(x => x.StationName);
}
public ObservableCollection<IrrigNetModelItem> IrrigNetCollection { get; set; } = new ObservableCollection<IrrigNetModelItem>();
public async void GetData()
{
base.OnAppearing();
dialog.Show();
var token = LocalData.Token;
var data = await IrrigNetService.GetServices(token, "sr");
var irrigNetModel = new IrrigNetModelItem();
foreach (var d in data.items)
{
IrrigNetCollection.Add(d);
if (d.ServiceName == "irrigNET")
{
IrrigCounter++;
FrameImage = "service_irrig_img.png";
FrameHeaderColor = Color.FromHex("#33A8F7");
ServiceName = "irrigNET";
FrameIcon = "service_irrig.png";
}
else
{
AlertCounter++;
FrameImage = "alert.png";
FrameHeaderColor = Color.FromHex("#2BB24B");
ServiceName = "alertNET";
FrameIcon = "service_trap.png";
}
}
dialog.Hide();
}