is it posible to put multiple groups in a collectionview group? - xaml

Question

I'm making a app with .net maui on .net 6. I have read about grouping data for a collectionview, I have tried the examples that were in this documentation and those worked perfectly. After that I needed to take it a step further and I needed to put multiple groups in the collectionview. now I have tried a lot and researched a lot but I cant find anything about putting multiple goups in the collectionview group, only one class that you can use.
my goal is to put this json file in a collectionview group:
{
"Plans": [
{
"planId": 16,
"planName": "Indoor",
"tables": [
{
"tableIdId": 77,
"tableName":"Table 1",
"tableStatus": "vrij"
},
{
"tableIdId": 78,
"tableName": "Table 2",
"tableStatus":"vrij"
}
]
},
{
"planId": 17,
"planName": "Outdoor",
"tables": [
{
"tableIdId": 177,
"tableName": "Table 11",
"tableStatus":"Bezet"
},
{
"tableIdId": 178,
"tableName": "Table 12",
"tableStatus":"vrij"
}
]
}
]
}
i have trief it like this in the class file:
public class tafelLijst : List<tafelGroep>
{
private tafelGroep tafelGroep;
public tafelLijst( List<tafelGroep> tafelGroepen) : base(tafelGroepen)
{
}
public tafelLijst(tafelGroep tafelGroep)
{
this.tafelGroep = tafelGroep;
}
}
public class tafelGroep : List<NieweTafel>
{
public string planName { get; private set; }
public tafelGroep(string name, List<NieweTafel> nieweTafels) : base(nieweTafels)
{
planName = name;
}
}
public class NieweTafel
{
public int tableIdId { get; set; }
public string tableName { get; set; }
public string tableStatus { get; set; }
}
but this doesnt work. I am still new to .net maui and .net in general so I havo no idee how to do this. Is it porible to put multiple groups in the collectionview and if the awnser is yes, how?
(This is my first question on stackoverflow so if things are not clear or you need more information please give the feedback so i can improve the question)

Answer 1

You can search relevant web about Convert Json to C# Classes:
public class Plan
{
public int planId { get; set; }
public string planName { get; set; }
public List<Table> tables { get; set; }
}
public class Root
{
public List<Plan> Plans { get; set; }
}
public class Table
{
public int tableIdId { get; set; }
public string tableName { get; set; }
public string tableStatus { get; set; }
}
MainPage.xaml(Plans list):
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp_loadXaml.MainPage"
x:Name="contentPage">
<StackLayout>
<CollectionView x:Name="collection_View"
Margin="10,0"
SelectionMode="Single"
SelectionChanged="collectionView_SelectionChanged">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding planName}"/>
<Label Text="{Binding planId}"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
MainPage.xaml.cs, it uses JsonConvert.DeserializeObject<T>(json). Deserializes the JSON to the specified .NET type:
public partial class MainPage : ContentPage
{
string json = "{\r\n \"Plans\": [\r\n {\r\n \"planId\": 16,\r\n \"planName\": \"Indoor\",\r\n \"tables\": [\r\n {\r\n \"tableIdId\": 77,\r\n \"tableName\": \"Table 1\",\r\n \"tableStatus\": \"vrij\"\r\n },\r\n {\r\n \"tableIdId\": 78,\r\n \"tableName\": \"Table 2\",\r\n \"tableStatus\": \"vrij\"\r\n }\r\n ]\r\n },\r\n {\r\n \"planId\": 17,\r\n \"planName\": \"Outdoor\",\r\n \"tables\": [\r\n {\r\n \"tableIdId\": 177,\r\n \"tableName\": \"Table 11\",\r\n \"tableStatus\": \"Bezet\"\r\n },\r\n {\r\n \"tableIdId\": 178,\r\n \"tableName\": \"Table 12\",\r\n \"tableStatus\": \"vrij\"\r\n }\r\n ]\r\n }\r\n ]\r\n }";
Root Root;
public MainPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();
Root = JsonConvert.DeserializeObject<Root>(json);
var plans = new List<Plan>();
foreach (var item in Root.Plans)
{
plans.Add(new Plan
{
planId = item.planId,
planName = item.planName,
tables = item.tables
});
}
collection_View.ItemsSource = plans.ToList();
}
private async void collectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.CurrentSelection != null)
{
Plan item = (Plan)e.CurrentSelection.FirstOrDefault();
var tables = item.tables;
await Navigation.PushAsync(new Tables(tables));
}
}}
Tables.xaml(It shows tables list):
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp_loadXaml.Tables"
Title="Table">
<StackLayout>
<CollectionView x:Name="collection_View"
Margin="10,0">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding tableName}"/>
<Label Text="{Binding tableStatus}"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
Tables.xaml.cs:
public partial class Tables : ContentPage
{
List<Table> list;
public Tables(List<Table> tables)
{
InitializeComponent();
list = tables;
collection_View.ItemsSource= list.ToList();
}
}
Wish it can help you.