XAML 是否可以将多个组放在一个collectionview组中？

我正在用.net maui在.net 6上做一个应用程序。我读过关于grouping data的文章，我已经尝试了本文档中的示例，效果非常好。之后，我需要更进一步，我需要在集合视图中放置多个组。现在我已经尝试了很多，研究了很多，但是我找不到任何关于在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还是个新手，所以我不知道怎么做。在集合视图中放置多个组是可能的吗？如果awnser是肯定的，怎么做？
(This是我在stackoverflow上的第一个问题，所以如果事情不清楚或者你需要更多的信息，请给予出反馈，这样我就可以改进这个问题）

您可以搜索有关将Json转换为C#类的相关Web：

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（计划列表）：

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

xaml.cs，它使用JsonConvert.DeserializeObject<T>(json)。将JSON反序列化为指定的.NET类型：

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（显示表格列表）：

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

希望能帮到你。

XAML 是否可以将多个组放在一个collectionview组中？

1条答案

相关问题

热门标签

最新问答