So gruppieren Sie Listen in Xamarin-Formularen?

Question

Ich muss unter Liste in Xamarin Formen mit Firmennamen & in ListView anzeigen gruppieren müssen. Ich habe studiert, dass es mit ObservableCollection möglich ist. Aber ich weiß nicht, wie ich das machen soll. Kann mir jemand dabei helfen?

Liste

public class Phone 
{ 
    public string Title { get; set; } 
    public string Company { get; set; } 
    public int Price { get; set; } 
} 

var phones = new List<Phone> 
      { 
       new Phone {Title="Galaxy S8", Company="Samsung", Price=60000 }, 
       new Phone {Title="Galaxy S7 Edge", Company="Samsung", Price=50000 }, 
       new Phone {Title="Huawei P10", Company="Huawei", Price=10000 }, 
       new Phone {Title="Huawe Mate 8", Company="Huawei", Price=29000 }, 
       new Phone {Title="iPhone 7", Company="Apple", Price=38000 }, 
       new Phone {Title="iPhone 6S", Company="Apple", Price=50000 } 
      }; 

erwartete Ausgabe (In Xamarin Forms Android, iOS & UWP)

Apple 
Title : iPhone 6S 
Price : 50000 

Title : iPhone 7 
Price : 38000 

Huawei 
Title : Huawei P10 
Price : 10000 

Title : Huawe Mate 8 
Price : 29000 

Samsung 
Title : Galaxy S8 
Price : 60000 

Title : Galaxy S7 Edge 
Price : 50000 

Answer 1

Sie benötigen ein Modell erstellen, die eine Gruppierung mit einem Schlüssel enthält, die als Header verwendet werden sollen (und Wert wird durch gruppiert werden) und die aktuelles Modell.

Ich habe wie diese erstellt am:

public class PhoneGroup : ObservableCollection<Phone> 
{ 
    public string Name { get; private set; } 

    public PhoneGroup(string name) 
     : base() 
    { 
     Name = name; 
    } 

    public PhoneGroup(string name, IEnumerable<Phone> source) 
     : base(source) 
    { 
     Name = name; 
    } 
} 

Dieses erbt von der ObservableCollection und fügt eine Name Eigenschaft, die als Schlüssel verwendet werden können.

nun auf Ihrer Seite (oder besser; vie Modell) Sie eine Sammlung wie folgt hinzufügen:

public ObservableCollection<PhoneGroup> PhonesList { get; set; } = new ObservableCollection<PhoneGroup>();

und Artikel, um es hinzuzufügen, müssen Sie zunächst die Gruppe erstellen müssen, oder Scheck wenn es um die Elemente der rechten Gruppe vorhanden ist und fügen Sie, das heißt:

PhonesList.Add(new PhoneGroup("Apple", new[]{ new Phone 
      { 
       Title = "iPhone 6s", 
       Price = 50000 
      }, 
      new Phone 
      { 
       Title = "iPhone 7", 
       Price = 38000 
      }})); 

Jetzt eine ListView zu Ihrer Seite hinzufügen, ich habe es in XAML getan, und konfigurieren Sie die ItemsSource auf die Sammlung, die Sie definiert haben. Um die Gruppierung zu aktivieren, setzen Sie auch die Eigenschaften IsGroupingEnabled und GroupDisplayBinding wie im Code darunter.

<ListView ItemsSource="{Binding PhonesList}" IsGroupingEnabled="True" GroupDisplayBinding="{Binding Name}"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <TextCell Text="{Binding Title}" /> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Die Ausgabe wird wie folgt aussehen:

Ich habe ein Beispielprojekt für Sie erstellt, die here und begleitende blog post zu finden sind.

Je nachdem, wie Sie Ihre Daten laden, können Sie eine LINQ-Abfrage implementieren, um Ihre Modelle in die gruppierte Liste zu sortieren.

Natürlich sind andere Ansätze möglich. Beachten Sie insbesondere die MVVM Helpers-Bibliothek von James Montemagno here. Die ObservableRangeCollection hat einige handliche Erweiterungen über die regulären ObservableCollection und es hält auch ein Grouping Modell, das eine allgemeinere Methode zur Gruppierung ist.

Wie pro Ihren Kommentar, um die Daten abzurufen und sie in die Gruppen hinzufügen, können Sie entlang der Linien von dieser einfiel:

var phonesResult = GetData(); 

PhonesList.Clear(); 
foreach (var phone in phonesResult) 
{ 
    if (!PhonesList.Any(company => company.Name == phone.Company)) 
     PhonesList.Add(new PhoneGroup(phone.Company)); 

    PhonesList.Single(company => company.Name == phone.Company).Add(phone); 
} 

GetData ist der Aufruf Ihre Daten in JSON abzurufen, wir löschen die Liste, um alles zu ersetzen und dann durchlaufen Sie es und prüfen, ob die Gruppe (Firma in diesem Fall) bereits existiert. Wenn nicht, erstellen wir die Gruppe und fügen das aktuelle Telefon hinzu.

Dies ist nicht der effizienteste Weg, aber ich denke für jetzt den klarsten Weg, es Ihnen zu erklären.

Answer 2

Sie

var list= phones.GroupBy(item => item.Company) 
    .Select(group => new { Company= group.Key, Items = group.ToList() }) 
    .ToList(); 

Answer 3

Tr folgende Code-Schnipsel können versuchen, y folgenden:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 

namespace ConsoleApplication1 
{ 
    class Program 
    { 
     static void Main(string[] args) 
     { 


      var phones = new List<Phone> { 
       new Phone {Title="Galaxy S8", Company="Samsung", Price=60000 }, 
       new Phone {Title="Galaxy S7 Edge", Company="Samsung", Price=50000 }, 
       new Phone {Title="Huawei P10", Company="Huawei", Price=10000 }, 
       new Phone {Title="Huawe Mate 8", Company="Huawei", Price=29000 }, 
       new Phone {Title="iPhone 7", Company="Apple", Price=38000 }, 
       new Phone {Title="iPhone 6S", Company="Apple", Price=50000 } 
      }; 

      var groups = phones.GroupBy(x => x.Company); 

      foreach (var group in groups) 
      { 
       Console.WriteLine(group.Key); 
       foreach (Phone phone in group) 
       { 
        Console.WriteLine("Title : {0}", phone.Title); 
        Console.WriteLine("Price : {0}", phone.Price); 
        Console.WriteLine(); 
       } 
      } 

      Console.ReadLine(); 

     } 
    } 
    public class Phone 
    { 
     public string Title { get; set; } 
     public string Company { get; set; } 
     public int Price { get; set; } 
    } 
} 

Answer 4

Link

public class Phone 
{ 
    public string Title { get; set; } 
    public string Company { get; set; } 
    public int Price { get; set; } 
} 


// It's essential that each group directly derives from a collection of the individual items. 
// It does *not* work to have a group that contains an item collection property, as the ListView 
// won't find the items. 
public class Group : ObservableCollection<Phone> 
{ 
     public String Name { get; private set; }   
     public String CompanyName { get; private set; } 
     public int Amount { get; private set; } 

     public Group(String Name, String ShortName) 
     { 
      this.Name = Name;      
      this.CompanyName = CompanyName; 
      this.Amount = Amount; 
     } 

    // Whatever other properties 
} 

// Populating the groups 
ObservableCollection<Group> groupedItems = new ObservableCollection<Group>; 

//Repeat for each group. This builds the top-level collection 
Group group = new Group("First Group", "1");  
groupedItems.Add(group); 

// Repeat for each item in a group. This builds the second-level collections 
Phone item = new Phone{Title="Galaxy S8", Company="Samsung", Price=60000 }; 

group.Add(item);