Xamarin.Forms Regroupement CollectionView
Télécharger l’exempleLes jeux de données volumineux peuvent souvent devenir difficiles lorsqu’ils sont présentés dans une liste à défilement continu. Dans ce scénario, l’organisation des données en groupes peut améliorer l’expérience utilisateur en facilitant la navigation dans les données.
CollectionView prend en charge l’affichage des données groupées et définit les propriétés suivantes qui contrôlent la façon dont elles seront présentées :
IsGrouped, de typebool, indique si les données sous-jacentes doivent être affichées dans des groupes. La valeur par défaut de cette propriété estfalse.GroupHeaderTemplate, de typeDataTemplate, modèle à utiliser pour l’en-tête de chaque groupe.GroupFooterTemplate, de typeDataTemplate, modèle à utiliser pour le pied de page de chaque groupe.
Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données.
Les captures d’écran suivantes montrent un CollectionView affichage de données groupées :
Pour plus d’informations sur les modèles de données, consultez Xamarin.Forms Modèles de données.
Regrouper les données
Les données doivent être regroupées avant de pouvoir être affichées. Pour ce faire, vous pouvez créer une liste de groupes, où chaque groupe est une liste d’éléments. La liste des groupes doit être une IEnumerable<T> collection, où T définit deux éléments de données :
- Nom du groupe.
- Collection
IEnumerablequi définit les éléments appartenant au groupe.
Le processus de regroupement des données consiste donc à :
- Créez un type qui modélise un seul élément.
- Créez un type qui modélise un seul groupe d’éléments.
- Créez une
IEnumerable<T>collection, oùTest le type qui modélise un seul groupe d’éléments. Cette collection est donc une collection de groupes, qui stocke les données groupées. - Ajoutez des données à la
IEnumerable<T>collection.
Exemple
Lors du regroupement de données, la première étape consiste à créer un type qui modélise un élément unique. L’exemple suivant montre la Animal classe de l’exemple d’application :
public class Animal
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string ImageUrl { get; set; }
}
La Animal classe modélise un seul élément. Un type qui modélise un groupe d’éléments peut ensuite être créé. L’exemple suivant montre la AnimalGroup classe de l’exemple d’application :
public class AnimalGroup : List<Animal>
{
public string Name { get; private set; }
public AnimalGroup(string name, List<Animal> animals) : base(animals)
{
Name = name;
}
}
La AnimalGroup classe hérite de la List<T> classe et ajoute une Name propriété qui représente le nom du groupe.
Une IEnumerable<T> collection de groupes peut ensuite être créée :
public List<AnimalGroup> Animals { get; private set; } = new List<AnimalGroup>();
Ce code définit une collection nommée Animals, où chaque élément de la collection est un AnimalGroup objet . Chaque AnimalGroup objet comprend un nom et une List<Animal> collection qui définit les Animal objets du groupe.
Les données groupées peuvent ensuite être ajoutées à la Animals collection :
Animals.Add(new AnimalGroup("Bears", new List<Animal>
{
new Animal
{
Name = "American Black Bear",
Location = "North America",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
},
new Animal
{
Name = "Asian Black Bear",
Location = "Asia",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
},
// ...
}));
Animals.Add(new AnimalGroup("Monkeys", new List<Animal>
{
new Animal
{
Name = "Baboon",
Location = "Africa & Asia",
Details = "Details about the monkey go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
},
new Animal
{
Name = "Capuchin Monkey",
Location = "Central & South America",
Details = "Details about the monkey go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
},
new Animal
{
Name = "Blue Monkey",
Location = "Central and East Africa",
Details = "Details about the monkey go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
},
// ...
}));
Ce code crée deux groupes dans la Animals collection. Le premier AnimalGroup est nommé Bearset contient une List<Animal> collection de détails d’ours. La seconde AnimalGroup est nommée Monkeyset contient une List<Animal> collection de détails sur les singes.
Afficher les données groupées
CollectionView affiche les données groupées, à condition que les données ont été correctement regroupées, en définissant la IsGrouped propriété sur true:
<CollectionView ItemsSource="{Binding Animals}"
IsGrouped="true">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
...
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
IsGrouped = true
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
// ...
L’apparence de chaque élément dans est CollectionView définie en définissant la CollectionView.ItemTemplate propriété sur un DataTemplate. Pour plus d’informations, consultez Définir l’apparence de l’élément.
Notes
Par défaut, CollectionView affiche le nom du groupe dans l’en-tête et le pied de page du groupe. Ce comportement peut être modifié en personnalisant l’en-tête de groupe et le pied de page de groupe.
Personnaliser l’en-tête de groupe
L’apparence de chaque en-tête de groupe peut être personnalisée en définissant la CollectionView.GroupHeaderTemplate propriété sur :DataTemplate
<CollectionView ItemsSource="{Binding Animals}"
IsGrouped="true">
...
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label Text="{Binding Name}"
BackgroundColor="LightGray"
FontSize="Large"
FontAttributes="Bold" />
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
</CollectionView>
Dans cet exemple, chaque en-tête de groupe est défini sur un Label qui affiche le nom du groupe et qui a d’autres propriétés d’apparence définies. Les captures d’écran suivantes montrent l’en-tête de groupe personnalisé :
Personnaliser le pied de page de groupe
L’apparence de chaque pied de page de groupe peut être personnalisée en définissant la CollectionView.GroupFooterTemplate propriété sur :DataTemplate
<CollectionView ItemsSource="{Binding Animals}"
IsGrouped="true">
...
<CollectionView.GroupFooterTemplate>
<DataTemplate>
<Label Text="{Binding Count, StringFormat='Total animals: {0:D}'}"
Margin="0,0,0,10" />
</DataTemplate>
</CollectionView.GroupFooterTemplate>
</CollectionView>
Dans cet exemple, chaque pied de page de groupe est défini sur un Label qui affiche le nombre d’éléments du groupe. Les captures d’écran suivantes montrent le pied de page de groupe personnalisé :
de page de groupe personnalisé 
Groupes vides
Lorsqu’un CollectionView affiche des données groupées, il affiche tous les groupes vides. Ces groupes s’affichent avec un en-tête et un pied de page de groupe, indiquant que le groupe est vide. Les captures d’écran suivantes montrent un groupe vide :
Notes
Sur iOS 10 et versions antérieures, les en-têtes et pieds de page de groupe pour les groupes vides peuvent tous être affichés en haut de .CollectionView
Grouper sans modèles
CollectionViewpeut afficher correctement les données regroupées sans affecter à la CollectionView.ItemTemplate propriété la valeur :DataTemplate
<CollectionView ItemsSource="{Binding Animals}"
IsGrouped="true" />
Dans ce scénario, des données significatives peuvent être affichées en remplaçant la ToString méthode dans le type qui modélise un seul élément et le type qui modélise un seul groupe d’éléments.