How to group data list from Preferences in Xamarin - xamarin.forms

Question

I have lists of Order information stored in Preferences as follows:
public class CartUser
{
public int IDProduct { get; set; }
public string NameProduct { get; set; }
public string SupplierID { get; set; }
}
I want to display a list of SupplierID groups, I think of the plan to use Group By
PageOne.xaml.cs
List<CartUser> cartUsers = new List<CartUser>();
var mycart = Preferences.Get("CartUserAdds", "_mycart");
var getcart = JsonConvert.DeserializeObject<List<CartUser>>(mycart).GroupBy(x => x.SupplierID);
cartUsers = (List<CartUser>)getcart;
BindableLayout.SetItemsSource(stdata, cartUsers);
However I get the error: System.InvalidCastException: 'Specified cast is not valid.' right line cartUsers = (List<CartUser>)getcart;
PageOne.xaml
<StackLayout x:Name="stdata">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout x:DataType="model:CartUser">
<Label Text="{Binding SupplierID}"/>
<Label Text="{Binding NameProduct}"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
The data I am taken from Preferences:
[{\"IDProduct\":1,\"NameProduct\":\"Name product 1\",\"SupplierID\":\"22379356\"},{\"IDProduct\":2,\"NameProduct\":\"Name product 2\",\"SupplierID\":\"22379356\"},{\"IDProduct\":3,\"NameProduct\":\"Name product 3\",\"SupplierID\":\"12336544\"}]
I want it to display like this
I read this article: How to Group List in Xamarin Forms?. However it sets the display in the ListView. I want it to show up in the StackLayout
Looking forward to a solution from everyone. Thank you!
Update using CollectionView
SupplierIDGrouping.cs
public class SupplierIDGrouping : ObservableCollection<CartUser>
{
public string SupplierID { get; private set; }
public SupplierIDGrouping(string supplierID)
: base()
{
SupplierID = supplierID;
}
public SupplierIDGrouping(string supplierID, IEnumerable<CartUser> source)
: base(source)
{
SupplierID = supplierID;
}
}
PageOne.xaml
<CollectionView ItemsSource="{Binding SupplierList}" IsGrouped="true">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding NameProduct}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
PageOne.xaml.cs
public ObservableCollection<SupplierIDGrouping> SupplierList { get; private set; } = new ObservableCollection<SupplierIDGrouping>();
List<CartUser> cartUsers = new List<CartUser>();
var mycart = Preferences.Get("CartUserAdds", "_mycart");
var getcart = JsonConvert.DeserializeObject<List<CartUser>>(mycart);
cartUsers = getcart;
foreach (var item in cartUsers)
{
if (!SupplierList.Any(supplierid => supplierid.SupplierID == item.SupplierID))
{
SupplierList.Add(new SupplierIDGrouping(item.SupplierID));
}
SupplierList.Single(supplierid => supplierid.SupplierID== item.SupplierID).Add(item);
}
BindingContext = this;
As a result, it still can't be grouped

Answer 1

We need to set the template for group header, try the code below .
<CollectionView ItemsSource="{Binding SupplierList}" IsGrouped="true">
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label Text="{Binding SupplierID}" FontAttributes="Bold"/>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding NameProduct}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>