是有可能把多个组在一个集合视图组?

Question

我在。net 6上用。net maui制作一个应用程序。我读过关于集合视图的分组数据，我已经尝试了本文档中的示例，这些示例工作得很好。之后，我需要更进一步，我需要在collectionview中放入多个组。现在我已经尝试了很多，研究了很多，但我找不到任何关于把多个组在collectionview组，只有一个类，你可以使用。我的目标是把这个json文件放到一个collectionview组中:

{
"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"
}
]
}
]
}

我在类文件中这样设置:

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; }

}

，但这不起作用。我仍然是新的。net maui和。net一般所以我不知道如何做到这一点。是否可以在集合视图中放置多个组，如果用户是yes，如何?

(这是我在stackoverflow上的第一个问题，所以如果事情不清楚或者你需要更多的信息，请给出反馈，以便我可以改进问题)

Answer 1

您可以搜索有关将Json转换为c#类的相关网页:

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; }
}

主页。xaml(计划列表):

<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 . example .cs，它使用JsonConvert.DeserializeObject<T>(json)。将JSON反序列化为指定的。net类型:

public partial class MainPage : ContentPage
{
string json = "{rn    "Plans": [rn      {rn        "planId": 16,rn        "planName": "Indoor",rn        "tables": [rn          {rn            "tableIdId": 77,rn            "tableName": "Table 1",rn            "tableStatus": "vrij"rn          },rn          {rn            "tableIdId": 78,rn            "tableName": "Table 2",rn            "tableStatus": "vrij"rn          }rn        ]rn      },rn      {rn        "planId": 17,rn        "planName": "Outdoor",rn        "tables": [rn          {rn            "tableIdId": 177,rn            "tableName": "Table 11",rn            "tableStatus": "Bezet"rn          },rn          {rn            "tableIdId": 178,rn            "tableName": "Table 12",rn            "tableStatus": "vrij"rn          }rn        ]rn      }rn    ]rn  }";
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));
}
}}

表。xaml(它显示表列表):

<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();
}
}

希望它能帮到你。