Implémentation simple du contrôle LongListSelector

Le contrôle LongListSelector permet d’afficher des données sous forme d’une longue liste organisée en sections, similaire à l’affichage de vos contacts dans le « People hub ». Vous avez alors la possibilité de naviguer aisément à travers une grande quantité d’informations. Ce contrôle est adéquat pour certains types d’applications, notamment celles affichant des données par ordre alphabétique, regroupant des photos prises par date, regroupant de la musique ou des films par genre…

Au cours de ce tuto nous allons essayer de comprendre comment fonctionne le contrôle LongListSelector à travers quelques applications élémentaires.

Pour utiliser un LongListSelector sous forme de liste simple, vous avez juste besoin de fournir des données à la propriété ItemsSource et d’un ItemTemplate pour dire au LongListSelector où afficher les données.

-Définition de l’objet
public class MonObjet
{
public string Categorie { get; set; }
public string Donnee { get; set; }
}

-Assignation d’une List au LongListSelector

var listeSimple = new List<MonObjet>()
{
new MonObjet() { Categorie = "A", Donnee = "des donnees 1" },
new MonObjet() { Categorie = "A", Donnee = "des donnees 2" },
new MonObjet() { Categorie = "B", Donnee = "des donnees 3" },
new MonObjet() { Categorie = "C", Donnee = "des donnees 4" },
new MonObjet() { Categorie = "C", Donnee = "des donnees 5" },
new MonObjet() { Categorie = "D", Donnee = "des donnees 7" },
new MonObjet() { Categorie = "D", Donnee = "des donnees 8" },
new MonObjet() { Categorie = "D", Donnee = "des donnees 9" },
new MonObjet() { Categorie = "E", Donnee = "des donnees 10" }
};
LongListSelector1.ItemsSource = listeSimple;

ItemTemplate du LongListSelector

<phone:LongListSelector x:Name="LongListSelector1">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Donnee}"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
Résultat:

resuslt1

NB: Utilisez le mot-clé var dans une méthode, notamment la méthode Mainpage(). Autrement, il vous sera généré une erreur d’assembly.

2 commentaires

Ajouter un Commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *