[WP7] Créer une custom Jumplist/LongListSelector

Introduction

Bonjour à tous,

Récemment je me suis retrouvé face à un problème d’organisation d’une très longue liste (>300 éléments) et naturellement, ce qui vient à l’esprit est la Jumplist que l’on retrouve dans le Hub Contact ou des Applications. Malheureusement, le manque de documentation est très flagrant, notamment en français.

Je vous propose donc ici un tutorial pour réaliser une JumpList (ou LongListSelector) custom.

Pré-requis

Pour ce tutoriel, vous aurez besoin de Visual Studio, du SDK Windows phone mais surtout du Silverlight Toolkit pour Windows Phone . Le control JumpList est présent dans cette librairie.

Il faudra ajouter la DLL Microsoft.Phone.Controls.Toolkit aux références du projet.

Et maintenant on est parti !

On code !

Tout d’abord, je vais vous présenter le cadre de mon projet. Il s’agit d’une application de librairies, et cette jumplist va être utilisée pour référencer toutes les librairies d’un Web Service via leur département. On doit donc pouvoir les ranger facilement par numéro de département (01,02,03 etc…)

Sur votre page où vous désirez mettre votre composant insérez ceci dans le xaml de déclaration en haut de page.

xmlns:tools="clr-namespace:ChoixLibraires.Tools"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Vous pourrez maintenant utiliser les composants du toolkit via <toolkit[…] />

Pour commencer le composant, nous allons créer 3 templates différents qui représenteront un item, un header de groupe et la liste de groupe.

Template 1 : Item Librairie

&lt;phone:PhoneApplicationPage.Resources&gt;
&lt;tools:NumToDptConverter x:Key="NumToDptConverter"&gt;
&lt;/tools:NumToDptConverter&gt;
&lt;DataTemplate x:Key="companyItemTemplate"&gt;
&lt;StackPanel Grid.Column="1" Margin="12,12,0,0"  VerticalAlignment="Top"&gt;
&lt;TextBlock Margin="0,12,0,0" Text="{Binding Path=raison_sociale}" FontWeight="Bold"/&gt;
&lt;StackPanel Orientation="Horizontal"&gt;
&lt;TextBlock Text="{Binding Path=code_postal}" /&gt;
&lt;TextBlock Margin="12,0,0,0" Text="{Binding Path=ville}" /&gt;
&lt;/StackPanel&gt;
&lt;Border VerticalAlignment="Top" Margin="0,15,0,0" BorderThickness="3" Height="3" Width="350" BorderBrush="Orange"&gt;&lt;/Border&gt;
&lt;/StackPanel&gt;
&lt;/DataTemplate&gt;
&lt;/phone:PhoneApplicationPage.Resources&gt;

On retrouve donc ici un template nommé « companyItemTemplate » qui affichera la raison sociale, le code postal et la ville de chaque librairie. A noter l’utilisation d’un converter qui me permettra d’obtenir aussi le nom du département (le web-service ne renvoi qu’un code postal).

Template 2 : Header de groupe

&lt;DataTemplate x:Key="groupHeaderTemplate"&gt;
&lt;Border Background="{StaticResource PhoneAccentBrush}" Margin="6"&gt;
&lt;TextBlock Text="{Binding Title, Converter={StaticResource NumToDptConverter}}" FontSize="40" Foreground="Black"/&gt;
&lt;/Border&gt;
&lt;/DataTemplate&gt;

Là rien de bien méchant, un template simple nommé « groupHeaderTemplate » avec un fond qui prendra l’accent color et on bind le title du groupe (que je reconvertie en même temps. De base j’ai 12400 en code postal et j’obtiens 12 – Aveyron en header)

Template 3 : Liste groupée

&lt;DataTemplate x:Key="groupItemTemplate" &gt;
&lt;Border Background="{StaticResource PhoneAccentBrush}" Width="99" Height="99" Margin="6"&gt;
&lt;TextBlock Text="{Binding Title}" FontSize="40" Foreground="Black"/&gt;
&lt;/Border&gt;
&lt;/DataTemplate&gt;

Là aussi, template simple nommé ‘groupItemTemplate », qui affichera dans un carré le title de chaque groupe.

Control : LongListSelector

 &lt;toolkit:LongListSelector Height="620" toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="longListFrance_SelectionChanged" VerticalAlignment="Top" Background="Transparent" x:Name="longListFrance"
IsFlatList="False" ItemTemplate="{StaticResource companyItemTemplate}"
GroupHeaderTemplate="{StaticResource groupHeaderTemplate}"
GroupItemTemplate="{StaticResource groupItemTemplate}"&gt;
&lt;toolkit:LongListSelector.GroupItemsPanel&gt;
&lt;ItemsPanelTemplate&gt;
&lt;toolkit:WrapPanel/&gt;
&lt;/ItemsPanelTemplate&gt;
&lt;/toolkit:LongListSelector.GroupItemsPanel&gt;
&lt;/toolkit:LongListSelector&gt;

On crée donc notre control LongListSelector en ajoutant les différents templates crées avant. A noter l’utilisation du WrapPanel pour obtenir une liste de carrés lors d’un appui sur le header d’un groupe.

Classe pour grouper :

Maintenant il faut créer une classe pour grouper nos élements. je vous la donne directement. Elle proviens du site WindowsPhoneGeek.

public class Group&lt;T&gt; :IEnumerable&lt;T&gt;
{
public Group(string name, IEnumerable&lt;T&gt; items)
{
this.Title = name;
this.Items = new List&lt;T&gt;(items);
}
public override bool Equals(object obj)
{
Group&lt;T&gt; that = obj as Group&lt;T&gt;;

return (that != null) &amp;&amp; (this.Title.Equals(that.Title));
}

public string Title
{
get;
set;
}

public IList&lt;T&gt; Items
{
get;
set;
}

#region IEnumerable&lt;T&gt; Members

public IEnumerator&lt;T&gt; GetEnumerator()
{
return this.Items.GetEnumerator();
}

#endregion

#region IEnumerable Members

System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return this.Items.GetEnumerator();
}

#endregion
}

Grouper ses éléments

La fin approche et ceci est la dernière étape ! Nous avons nos templates d’éléments, l’affichage sera OK, notre fichier pour grouper. Maintenant reste à lui dire quoi grouper et comment !

Dans le code behind de notre page, nous avons au préalable une liste de sociétés contenant les librairies.

 var socByDpt = from soc in ListFrance
group soc by soc.code_postal.Substring(0,2) into c
orderby c.Key
select new Group&lt;Societe&gt;(c.Key, c);

this.longListFrance.ItemsSource = socByDpt;

Notre objet socByDpt va donc contenir nos groupes venant de ListFrance par société en utilisant comme discriminant les deux premiers chiffres du code postal. Vous pouvez faire donc vos propres groupes en changeant ce paramètre de sélection « group soc by soc.code_postal.Substring(0,2)  »

Vous avez maintenant une belle liste déroulante et sélectionnable !

Conclusion

Pour conclure, son utilisation une fois la bête domptée se révèle extrêmement simple. J’ai pu maintenant la réutiliser dans plusieurs applications. Bien sur, le template est ici très léger et brut, pour plus de beauté il faut le customiser comme si c’était un template de ListBox classique.

1 réflexion au sujet de “[WP7] Créer une custom Jumplist/LongListSelector”

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

%d blogueurs aiment cette page :