Группировать ListView по компоненту в формате JSON в Xamarin.Forms

Question

Я пытаюсь сгруппировать элементы из JSON в ListView.

Мой JSON хранится в веб-хранилище, я уже извлек его с сервера и перечислил, но не сгруппировал.

Я прочитал много уроков о том, как сгруппировать C # List, но ни один из них не решил мою проблему.

Вот JSON:

[
  {
    "status": "Status 1",
    "erpCode": "1901",
    "name": "Name 1",
    "statusReportDate": "24/08/2018",
    "statusReportDescription": "Description 1"
  },
  {
    "status": "Status 2",
    "erpCode": "2160",
    "name": "Name 2",
    "statusReportDate": "24/08/2018",
    "statusReportDescription": "Description 2"
  },
  {
    "status": "Status 2",
    "erpCode": "543",
    "name": "Name 3",
    "statusReportDate": "24/08/2018",
    "statusReportDescription": "Description 3"
  }
]

Мой метод, который извлекает JSON извеб-хранилище и преобразовать его в List и ObservableCollection:

protected async void OnGetList()
{
    if (CrossConnectivity.Current.IsConnected)
    {

        try
        {
            //Getting JSON data from the Web
            var content = await _client.GetStringAsync(Url);

            //We deserialize the JSON data from this line
            var list = JsonConvert.DeserializeObject<List<Company>>(content);

            //After deserializing , we store our data in the List called ObservableCollection
            ObservableCollection<Company> collection = new ObservableCollection<Company>(list);
            myList.ItemsSource = collection;

        }
        catch (Exception ey)
        {
            Debug.WriteLine("" + ey);
        }
    }
}

XAML ListView:

<ListView x:Name="myList" 
                  HasUnevenRows="True" 
                  ItemSelected="MyList_ItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Fill">
                    <Button Text="{Binding erpCode}"/>

                    <StackLayout HorizontalOptions="Fill">
                        <Grid>
                            <Label Text="{Binding name}"/>
                            <Label Text="{Binding statusReportDate}"/>
                        </Grid>
                        <Label Text="{Binding statusReportDescription}"/>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Я хочу сгруппировать его по «состоянию» и напечатать что-то вроде этого:

Статус 1

Имя 1

Статус 2

Имя 2

Имя 3

Статус N

Имя n1

Имя n2

Имя n3

...

Answer 1

Ознакомьтесь с этой статьей: https://xamarinhelp.com/xamarin-forms-listview-grouping/

Но лучше использовать ObservableCollection, где в приведенной выше статье используется List.

Так что вам нужно создать коллекцию ObservableCollection типаэто подкласс ObservableCollection.

Сначала создайте тип, который подклассов ObservableCollection будет содержать одну группу компаний по статусу:

public class CompanyByStatusList : ObservableCollection<Company>
{
    public string Status { get; set; }
    public ObservableCollection<Company> Companies => this;
}

Затем создайте ObservableCollection из CompanyByStatusList.Это будет ваш ItemSource для вашего ListView.

public ObservableCollection<CompanyByStatusList> CompanyList { get; set; }

Затем вы захотите создать CompanyByStatusList для каждого статуса, который будет содержать все компании в этом конкретном статусе, а затем добавить каждую из них CompanyByStatusList в коллекцию CompanyList.Обязательно установите свойство Status для каждого CompanyByStatusList

и убедитесь, что на вашем ListView установлено IsGroupingEnabled="true".ListView xaml:

<ListView ItemsSource="{Binding CompanyList}"
      IsGroupingEnabled="true" 
         HasUnevenRows="true">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Status}" />
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Fill">
                    <Button Text="{Binding erpCode}"/>

                    <StackLayout HorizontalOptions="Fill">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding name}"/>
                            <Label Text="{Binding statusReportDate}"/>
                        </StackLayout>
                        <Label Text="{Binding statusReportDescription}"/>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>