Expandable ListView UWP/ Liste expansible UWP

Récemment j’ai eu besoin d’utiliser une liste expansible (Expandable ListView) sur une application UWP.

Une liste expansible permet d’afficher des éléments dans une liste et lorsque l’utilisateur sélectionne un élément, l’ensemble de ses sous-éléments s’affichent en dessous de l’élément sélectionné…compliqué tout ça hein?? Lol.

Bon allez, je vais le redire autrement lol…une liste expansible permet de grouper des données par catégories. Elle a la possibilité d’afficher / masquer les données de chaque catégorie en cliquent sur celle-ci. C’est mieux non? J

Voici des images pour mieux comprendre J

En mode : Masquer les données de chaque catégorie

expandablelistview4

En mode : Affichage des catégories « Drama » et « Horror »

expandablelistview5

Ce qui m’a étonné c’est que Microsoft n’a toujours pas mis à disposition un tel composant sur Visual Studio dans les applications (C# / XAML) Universal Windows Store et Universal Windows Platform contrairement à Androïd.

Pouvons-nous dire que son utilisation n’est pas conforme à l’eXpérience Utilisateur d’une application UWP?

De mon côté, c’est un composant qui a sa valeur ajoutée dans une application.

Dans le sens où Il affiche des catégories tout en rendant visible ou pas leurs éléments. Ce qui permet d’offrir aux utilisateurs une simplicité sur la navigation et également d’économiser de l’espace sur la page.

En revanche son inconvénient se situe sur la quantité d’éléments des catégories. En effet, si elle est importante, cela diminuera la qualité de l’eXpérience utilisateur de l’application.

Vous trouverez ICI le projet VSIX du composant.

Ci-dessous les différentes étapes pour intégrer le composant dans un projet UWP

  • Créer un nouveau projet UWP ExpandableListViewSample.

expandablelistview1

  • Référencer le projet Expander dans ExpandableListViewSample.

expandablelistview2

  • Créer une classe Serie dans le projet ExpandableListViewSample.

expandablelistview3

  • Accéder à la page MainPage.xaml et mettre le code suivant :
<ListView x:Name= »LVDatas » SelectionMode= »None » Margin= »20″>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height= »Auto » />
<RowDefinition Height= »Auto » />
</Grid.RowDefinitions>
<xp:Expander
VerticalAlignment= »Top »
Margin= »0,0,0,10″
IsExpanded= »False »> <!–HEADER CONTENT–>
<xp:Expander.HeaderButtonContent>
<TextBlock Text= »{Binding Category} » Foreground= »{StaticResource DarkBlueBrush} »
VerticalAlignment= »Center »
Style= »{StaticResource SubtitleTextBlockStyle} » />
</xp:Expander.HeaderButtonContent><!–CONTENT–>
<ListView ItemsSource= »{Binding Titles} » Margin= »10″ SelectionMode= »None » Background= »{StaticResource DarkBlueBrush} »>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment= »Left »
TextWrapping= »Wrap » Foreground= »White »
Text= »{Binding} » Margin= »10 0 0 0″
VerticalAlignment= »Center »
Style= »{StaticResource BaseTextBlockStyle} » />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType= »ListViewItem »>
<Setter Property= »Margin »
Value= »0 5 0 0″ />
<Setter Property= »Padding »
Value= »0″ />
<Setter Property= »HorizontalContentAlignment »
Value= »Stretch » />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</xp:Expander>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType= »ListViewItem »>
<Setter Property= »Margin »
Value= »0 5 0 0″ />
<Setter Property= »Padding »
Value= »0″ />
<Setter Property= »HorizontalContentAlignment »
Value= »Stretch » />
</Style>
</ListView.ItemContainerStyle>
</ListView>
  • Accéder à la page MainPage.xaml.cs et mettre le code suivant :
List<Serie> SeriesLst = new List<Serie>();
public MainPage()
{
this.InitializeComponent();
LoadDatas();
}
/// <summary>
/// Load datas
/// </summary>
private void LoadDatas()
{
SeriesLst.Add(
new Serie()
{ Category = « Drama », Titles = new List<string>() { « Games of Thrones », « Homeland », « Mad Men », « Breaking Bad » } });SeriesLst.Add(
new Serie()
{ Category = « Comedy », Titles = new List<string>() { « Modern Family », « The big bang Theory », « The Office », « Arrested Development » } });SeriesLst.Add(
new Serie()
{ Category = « Horror », Titles = new List<string>() { « American Horror Story », « The walking dead », « Surnatural » } });LVDatas.ItemsSource = SeriesLst;
}

Et voili voilou ! 🙂

Publicités